dz-app/pages/voluntary/index/components/voluntary-item.vue

<template>
    <view class="fx-row fx-bet-sta bg-white mx-card">
        <view class="fx-col fx-sta-cen ml-10 mb-10">
            <view class="fx-row rounded-b-full px-15 pt-5 pb-10 text-white" :class="pickType.bg">
                <text>{{ pickType.text }}</text>
            </view>
            <view class="text-main fx-row fx-cen-base gap-5">
                <view class="font-bold text-xl">{{ item.enrollRatio || '-' }}</view>
                %
            </view>
            <view class="text-content text-xs keep-all">
                {{ item.enrollRatioText }}
            </view>
        </view>
        <view class="flex-1 fx-col p-20 gap-15 text-main">
            <view class="fx-row fx-bet-sta gap-15">
                <view class="flex-1" @click="goCollegePage">
                    <view class="font-[PingFang] font-bold">
                        {{ item.university.name }}
                        <template v-if="item.recruitPlan.group">({{ item.recruitPlan.group }})</template>
                        ({{ item.recruitPlan.collegeCode }})
                        <text v-if="item.specialProject" class="text-primary flex-nowrap">({{
                                item.specialProject
                            }})
                        </text>
                    </view>
                    <view class="mt-10 text-tips text-2xs">{{ item.university.features.split(',').join(' / ') }}</view>
                    <view class="mt-5 text-tips text-2xs">
                        {{
                            `${item.university.location} ${item.university.cityName} / ${item.university.type} / ${item.university.natureTypeCN} / 排名${item.university.rankingOfEdu || '-'}`
                        }}
                    </view>
                </view>
                <view class="fx-col fx-sta-cen relative">
                    <uv-tags :plain="!item.majors.filter(major => {return major.selected}).length" shape="circle"
                             type="primary" :text="`专业 ${item.recruitPlan.majorCount}`"
                             @click="$emit('major')"/>
                    <view class="text-2xs text-main absolute -bottom-35"
                          v-if="item.majors.filter(major => {return major.selected}).length">
                        已填 {{ item.majors.filter(major => major.selected).length }}
                    </view>
                </view>
            </view>
            <view class="text-2xs">
                <view class="text-xs">
                    {{ `${headerPlanYear}计划 ${item.recruitPlan.planCount}人 ${userSnapshot.examMajorName}` }}
                </view>
                <voluntary-history-list :container="item" @notify="$emit('notify', $event)"/>
            </view>
        </view>
    </view>
</template>

<script setup>
import {computed} from 'vue';
import {createPropDefine} from "@/utils";
import {useInjectTransfer} from "@/hooks/useTransfer";
import {useInjectVoluntaryHeader} from "@/pages/voluntary/hooks/useVoluntaryHeaderInjection";
import {useInjectUserSnapshot} from "@/pages/ie/hooks/useUserSnapshotInjection";
import VoluntaryHistoryList from "@/pages/voluntary/index/components/voluntary-history-list.vue";

const props = defineProps({
    item: createPropDefine({}, Object)
})
defineEmits(['major', 'notify'])

const {transferTo} = useInjectTransfer()
const {headerPlanYear} = useInjectVoluntaryHeader()
const {userSnapshot} = useInjectUserSnapshot()

const pickType = computed(() => {
    switch (props.item.pickType) {
        case 0:
            return {bg: 'bg-error', text: '冲'}
        case 1:
            return {bg: 'bg-warning', text: '稳'}
        case 2:
            return {bg: 'bg-success', text: '保'}
    }
    return {bg: '', text: ''}
})

const goCollegePage = () => {
    const path = '/pages/college-library/detail/detail'
    const {university: {code}} = props.item
    transferTo(path, {code})
}
</script>

<style lang="scss" scoped>
::v-deep(.uv-tags) {
    .uv-tags__text--medium {
        font-size: 12px !important;
    }
}
</style>