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

<template>
    <view class="h-[50px] bg-white px-20 fx-row fx-bet-cen mx-shadow-up">
        <view class="flex-1 fx-row fx-sta-cen text-content text-2xs" @click="openModify">
            {{ `${model.score}分 ${model.seatInput || model.rank.lowestRank}位` }}
            {{ batch.name }} {{ userSnapshot.examMajorName }}
            <uv-icon v-if="!id" name="edit-pen-fill" color="primary" class="ml-10"/>
        </view>
        <uv-tags shape="circle" :text="previewText" @click="openVolunteer"/>
    </view>
</template>

<script setup>
import {computed, ref} from 'vue';
import {useInjectVoluntaryCart} from "@/pages/voluntary/hooks/useVoluntaryCartInjection";
import {useInjectVoluntaryForm} from "@/pages/voluntary/hooks/useVoluntaryFormInjection";
import {toast} from "@/uni_modules/uv-ui-tools/libs/function";
import {useInjectUserSnapshot} from "@/pages/ie/hooks/useUserSnapshotInjection";

const emits = defineEmits(['cart', 'modify'])

const {model, batch, simpleMode} = useInjectVoluntaryForm()
const {id, selectedList} = useInjectVoluntaryCart()
const {userSnapshot} = useInjectUserSnapshot()

const previewText = computed(() => {
    const len = selectedList.value.length
    const lenStr = len ? `(${len})` : ''
    return '预览志愿表' + lenStr
})

const openModify = () => {
    if (id.value) return
    emits('modify')
}

const openVolunteer = () => {
    if (!selectedList.value.length) return toast('至少选择1个专业组')
    emits('cart')
}
</script>

<style scoped lang="scss">
::v-deep(.uv-tags) {
    .uv-tags--medium {
        padding: 3px 10px;
    }
}
</style>