dz-app/pages/ie/components/card/voluntary-major.vue

<template>
    <view class="bg-white mx-card overflow-hidden">
        <view class="px-10 fx-row" @click="expandInit=true,expanded=!expanded">
            <view class="self-start fx-col fx-cen-cen w-100 flex-none">
                <view class="pt-5 pb-15 px-20 rounded-b-full text-xs text-white" :class="displayPickType.bg">
                    {{ displayPickType.tag }}
                </view>
                <view class="mt-5 text-2xl text-main font-bold">{{ displayRate }}%</view>
                <view class="mt-5 text-2xs text-content">{{ displayRateText }}</view>
            </view>
            <college-item :item="data.university" hidden-logo hidden-star class="flex-1">
                <template #address>
                    <uv-text slot="address" size="13" type="content" prefix-icon="empty-address"
                             :text="`${data.university.location} ${data.university.cityName}`"/>
                </template>
            </college-item>
            <view class="pt-20 flex-none">
                <view class="fx-row fx-end-cen">
                    <view>
                        <uv-tags v-if="!selectedOnly" class="pointer-events-none" plain
                                 :text="`专业${displayMajors.length}`"/>
                        <uv-tags v-else :text="`删除${displayMajors.length}`" type="error" @click="handleMajorDelete"/>
                    </view>
                    <view class="ml-10 arrow-icon" :class="{'is-expand': expanded}">
                        <uv-icon name="arrow-right" size="18" color="primary"></uv-icon>
                    </view>
                </view>
                <view v-if="!selectedOnly&&!disableSummary&&data.majorDetails.some(m => m.selected)"
                      class="text-2xs text-error pl-10 mt-5">
                    已填报{{ data.majorDetails.filter(m => m.selected).length }}
                </view>
            </view>
        </view>
        <view v-if="expandInit||expanded" v-show="expanded" class="major-wrap p-30">
            <view v-for="([label, group], idx) in groupedDisplayMajors">
                <view v-if="label" class="mb-20 text-main font-bold">{{ label }}</view>
                <view class="cell px-30 py-20 rounded-lg relative" v-for="(major, i) in group">
                    <view class="fx-row fx-sta-cen" @click="goSingleResult(major)">
                        <view class="fx-col">
                            <text class="text-lg">{{ major.majorName }}</text>
                            <text v-if="major.majorDirection" class="text-2xs text-primary-light">
                                {{ major.majorDirection }}
                            </text>
                        </view>
                        <text class="text-xs text-primary ml-10 mr-5">查看</text>
                        <uv-icon name="eye" size="16" color="primary"></uv-icon>
                    </view>
                    <view v-if="!hideBtn" class="btn">
                        <uv-tags v-if="!selectedOnly" :plain="!major.selected"
                                 :text="major.selected ? '已填报' : '填报'"
                                 @click="toggleCartSelected(major)"/>
                        <uv-tags v-else text="删除" type="error" size="mini" icon="trash" plain plain-fill
                                 @click="handleMajorDelete(major)"/>
                    </view>
                    <view class="mt-15 text-xs fx-row fx-sta-cen">
                        <text class="text-content">录取率</text>
                        <text class="ml-10 text-primary">{{ major.enrollRate || '-' }}%</text>
                        <text class="ml-20 text-content">{{ major.enrollRateText }}</text>
                    </view>
                    <view class="mt-10 text-xs fx-row fx-sta-cen">
                        <text class="">专业代码 {{ major.majorCode }}</text>
                        <text class="ml-20">{{ getFormattedPlan(major) }}</text>
                        <text class="ml-20"></text>
                    </view>
                </view>
                <uv-divider v-if="idx<groupedDisplayMajors.length-1"/>
            </view>
        </view>
    </view>
</template>
<script>
import _ from 'lodash';
import MxConst from "@/common/MxConst";
import InjectAIDataMixin from "@/pages/ie/entry-ai-form/components/InjectAIDataMixin";
import {confirmAsync} from "@/utils/uni-helper";
import CollegeItem from "@/pages/college-library/components/college-item.vue";
import {useTransfer} from "@/hooks/useTransfer";

export default {
    components: {CollegeItem},
    mixins: [InjectAIDataMixin],
    props: {
        data: {
            type: Object,
            default: () => ({})
        },
        hideBtn: {
            type: Boolean,
            default: false
        },
        selectedOnly: {
            // 仅显示填报项
            type: Boolean,
            default: false
        },
        defaultExpand: {
            // 默认展开
            type: Boolean,
            default: false
        },
        disableSummary: {
            // 控制显示已填报N项
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            expandInit: false,
            expanded: true
        };
    },
    setup() {
        const {transferTo} = useTransfer()

        return {
            transferTo
        }
    },
    computed: {
        displayMajors() {
            if (this.selectedOnly) return this.data.majorDetails?.filter(m => m.selected) || []
            return this.data.majorDetails || []
        },
        groupedDisplayMajors() {
            return Object.entries(_.groupBy(this.displayMajors, m => m.majorGroup))
        },
        displayPickType() {
            switch (this.data.enumPickType) {
                // bg - 走配置的话tailwind检测不到，所以直接写在这里。
                case MxConst.enum.ai.pickType.danger.value:
                    return {bg: 'bg-error', tag: '冲'}
                case MxConst.enum.ai.pickType.normal.value:
                    return {bg: 'bg-primary', tag: '稳'}
                case MxConst.enum.ai.pickType.safety.value:
                    return {bg: 'bg-success', tag: '保'}
                default:
                    return {bg: 'bg-light', tag: '无'}
            }
        },
        displayRate() {
            return this.data.enrollRate !== null ? this.data.enrollRate : '-'
        },
        displayRateText() {
            return this.data.enrollRateText || this.data.enrollRate === null && '无概率' || ''
        }
    },
    async created() {
        this.expanded = this.defaultExpand;
    },
    methods: {
        getFormattedPlan(majorResult) {
            const demo = _.first(majorResult.histories)
            if (!demo) return ''
            return `${demo.year}年计划 ${demo.plan || '-'}人`
        },
        goSingleResult(majorResult) {
            const path = '/pages/ie/entry-ai-form/ai-major-detail'
            this.transferTo(path, majorResult, null, true)
        },
        toggleCartSelected(m) {
            if (m.selected) this.handleCartRemove(this.data, m)
            else this.handleCartAdd(this.data, m)
        },
        async handleMajorDelete(m = null) {
            if (!m) await confirmAsync('确认删除该院校下所有填报专业？！')
            this.handleCartRemove(this.data, m)
        }
    }
};
</script>
<style lang="scss" scoped>
.major-wrap {
    background-color: white;
    border-top: 1px solid #efefef;
}

.cell {
    background-color: #eef2fd;

    & + & {
        margin-top: 5px;
    }
}

.btn {
    position: absolute;
    right: 14px;
    bottom: 15px;
}

.arrow-icon {
    transition: transform .2s;
}

.is-expand {
    transform: rotate(90deg);
}
</style>