ieplus-app/src/pagesOther/pages/university/index/components/plus/college-item.vue

<template>
    <view class="p-20 bg-white flex justify-between items-start gap-20" @click="emits('click')">
        <ie-image v-if="!hiddenLogo&&!reverse" :src="item.logo" mode="aspectFit" custom-class="w-120 h-120"/>
        <view class="flex-1 flex flex-col gap-10">
            <view v-if="showName||showStar" class="flex justify-between items-center gap-20">
                <uv-text v-if="showName" type="main" bold :text="item.name"/>
                <uv-tags v-if="showStar" v-bind="starBinding" :text="item.star"/>
            </view>
            <view v-if="bxTags.length" class="flex flex-wrap gap-8">
                <uv-tags v-for="t in bxTags" :text="t" v-bind="getHighlightBindings(t)" @click="handleTagClick(t)"/>
            </view>
            <slot v-if="!hiddenAddress" name="address">
                <uv-text type="tips" prefix-icon="empty-address" :lines="addressLines" :icon-style="{color: '#999999'}"
                         size="12" :text="item.address"/>
            </slot>
        </view>
        <uv-image v-if="!hiddenLogo&&reverse" :src="item.logo" width="64" height="64" mode="aspectFit"/>
        <slot name="right"/>
    </view>
</template>

<script setup lang="ts">
import _ from 'lodash';
import {University} from "@/types/university";

const props = withDefaults(defineProps<{
    item: University;
    hiddenLogo?: boolean;
    hiddenName?: boolean;
    hiddenStar?: boolean;
    hiddenAddress?: boolean;
    addressLines?: number;
    reverse?: boolean;
}>(), {
    item: () => ({} as University),
    addressLines: 2
})
const emits = defineEmits(['tag', 'click'])

const isCultural = ref(false) //useUserStore() // 这是早先兼容河南文化类填报时的字段
const showName = computed(() => !props.hiddenName)
const showStar = computed(() => !props.hiddenStar && props.item.star)

const tagAttrs = {
    type: 'info',
    plain: true,
    size: 'tiny',
    'class': 'pointer-events-none'
}
const highlights = ['双高']
const starBinding = {
    ...tagAttrs,
    type: 'warning'
}
const tagHighlight = {
    ...tagAttrs,
    type: 'primary',
    plainFill: true
}

const bxTags = computed(() => {
    const {bxLevel, bxType} = props.item
    const tags = bxLevel ? bxLevel.split(',') : []
    if (bxType) {
        _.pull(tags, '双高')
        tags.push(bxType)
    }
    return tags
})

const isSpecialTag = (tag: string) => {
    return !isCultural.value && tag == props.item.bxType
}

const isHighlight = (tag: string) => {
    return highlights.includes(tag) || isSpecialTag(tag)
}

const getHighlightBindings = (tag: string) => {
    const attrs = isHighlight(tag) ? tagHighlight : tagAttrs
    return isSpecialTag(tag) ? {...attrs, icon: 'question-circle', reverse: true, 'class': ''} : attrs
}

const handleTagClick = (tag: string) => {
    if (isSpecialTag(tag)) emits('tag')
}
</script>

<style scoped>

</style>