dz-app/pages/college-library/components/college-item.vue

<template>
    <view class="p-20 bg-white fx-row fx-bet-sta gap-20">
        <uv-image v-if="!hiddenLogo&&!reverse" :src="item.logo" width="64" height="64" mode="aspectFit"/>
        <view class="flex-1 fx-col gap-10">
            <view v-if="showName||showStar" class="fx-row fx-bet-cen 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="fx-row 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>
import {computed} from 'vue';
import _ from 'lodash';
import {createPropDefine} from "@/utils";
import {useUserStore} from "@/hooks/useUserStore";

const props = defineProps({
    item: createPropDefine({}, Object),
    hiddenLogo: createPropDefine(false, Boolean),
    hiddenName: createPropDefine(false, Boolean),
    hiddenStar: createPropDefine(false, Boolean),
    hiddenAddress: createPropDefine(false, Boolean),
    addressLines: createPropDefine(2, Number),
    reverse: createPropDefine(false, Boolean)
})
const emits = defineEmits(['tag'])

const {isCultural} = 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) => {
    return !isCultural.value && tag == props.item.bxType
}

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

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

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

<style scoped>

</style>