dz-app/pages/voluntary/index/components/batch-step.vue

<template>
    <view class="p-30 fx-col gap-30">
        <view class="bg-gradient-to-r from-primary-deep to-primary-light px-20 py-30 rounded-lg">
            <view class="text-white font-bold">我的成绩</view>
            <view class="mt-20 fx-row fx-bet-cen text-white text-2xs">
                <text>省份：{{ userSnapshot.provinceName }}</text>
                <text>专业类别：{{ userSnapshot.examMajorName }}</text>
                <text>总分：{{ model.score }}</text>
            </view>
        </view>
        <view class="text-center mt-50">（二）选择填报批次</view>
        <view class="fx-col gap-20 mt-20">
            <view @click="handleBatchSelect(item)" v-for="item in batchList"
                  class="bg-gradient-to-b from-sky-100 to-white px-30 py-50 fx-row fx-bet-cen mx-card">
                <view class="flex-1 fx-col">
                    <view class="fx-row items-center">
                        <text class="text-xl mr-10 batch-name">{{ item.name }}</text>
                        <uv-tags v-if="item.recommand" text="重点推荐" type="error" shape="circle" size="mini"/>
                    </view>
                    <view class="text-2xs mt-20">{{ item.tips }}</view>
                </view>
                <view class="fx-col ai-cen">
                    <uv-button type="primary" shape="circle" class="pointer-events-none"
                               color="linear-gradient(to right, var(--primary-deep-color),var(--primary-light-color))"
                               custom-style="height: 32px; border: none;" text="智能填报"/>
                    <!--                    <text class="f-tips f10 mt5">可填{{ getCollegeLimit(item.batch) }}所院校</text>-->
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import {watch} from 'vue';
import {useInjectVoluntaryForm} from "@/pages/voluntary/hooks/useVoluntaryFormInjection";
import {useInjectUserSnapshot} from "@/pages/ie/hooks/useUserSnapshotInjection";
import {useInjectVoluntaryAssistant} from "@/pages/voluntary/hooks/useVoluntaryAssistantInjection";
import {useInjectVoluntaryStep} from "@/pages/voluntary/hooks/useVoluntaryStepInjection";

const {currentStep} = useInjectVoluntaryStep()
const {model, batch, batchList, loadBatchList} = useInjectVoluntaryForm()
const {userSnapshot} = useInjectUserSnapshot()
const {handleForward} = useInjectVoluntaryAssistant()

const handleBatchSelect = (item) => {
    batch.value = item
    handleForward()
}

watch(currentStep, step => {
    if (step == 1) loadBatchList()
})

//         getCollegeLimit(batch) {
//             const match = this.voluntaryData?.batches?.find(b => b.batch == batch)
//             return match?.groups
//         }
</script>

<style lang="scss" scoped>
.batch-name {
    position: relative;
    z-index: 10;

    &::before {
        position: absolute;
        left: 0;
        bottom: 0;
        content: ' ';
        width: 66rpx;
        height: 10rpx;
        border-radius: 5rpx;
        background: linear-gradient(to right, #FFD423, #FFFFFF);
        z-index: -1;
    }
}
</style>