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

<template>
    <view class="tabs-swiper-content">
        <uv-image :src="banner" width="100vw" height="auto" mode="widthFix" class="-mt-[44px]"/>
        <view class="mx-30 -mt-60 bg-white rounded-lg relative z-20">
            <view class="fx-col items-center py-50">
                <view class="fx-row items-center gap-5 mb-10" @click="$refs.popup.open()">
                    <uv-icon name="question-circle" color="primary"/>
                    <view class="text-sm text-primary">填报须知</view>
                </view>
                （一）输入考试成绩
            </view>
            <score-form ref="scoreForm" :model="model"/>
        </view>
        <view class="px-30 my-40 fx-row fx-bet-cen gap-30">
            <view class="flex-2">
                <uv-button type="primary" plain shape="circle" :icon="iconList"
                           :custom-style="{height: '44px'}" @click="goVoluntaryList">
                    <view class="text-primary keep-all">我的志愿表</view>
                </uv-button>
            </view>
            <view class="flex-3">
                <uv-button type="primary" shape="circle" text="下一步"
                           color="linear-gradient(to right, var(--primary-deep-color), var(--primary-light-color))"
                           :custom-style="{height: '44px', border: 'none'}" @click="handleForward"/>
            </view>
        </view>
        <mx-popup-template ref="popup" title="填报须知" left="" right="我知道了" @right="$refs.popup.close()">
            <view class="text-main text-xs fx-col gap-30">
                <view v-for="line in noticeTips" class="indent-50">{{ line }}</view>
            </view>
        </mx-popup-template>
    </view>
</template>

<script setup>
import {ref} from 'vue';
import {combineOssFile} from "@/utils";
import ScoreForm from "@/pages/voluntary/index/components/score-form.vue";
import {useInjectTransfer} from "@/hooks/useTransfer";
import {useInjectVoluntaryForm} from "@/pages/voluntary/hooks/useVoluntaryFormInjection";
import {useInjectVoluntaryAssistant} from "@/pages/voluntary/hooks/useVoluntaryAssistantInjection";
import {useInjectVoluntaryStep} from "@/pages/voluntary/hooks/useVoluntaryStepInjection";
import {useInjectVoluntaryData} from "@/hooks/useVoluntaryDataInjection";

const banner = combineOssFile('/static/voluntary/voluntary_banner.png')
const iconList = combineOssFile('/static/voluntary/voluntary_list_icon.png')
const noticeTips = [
    '本系统提供高考志愿填报智能模拟功能，不等同于实际的网上填报志愿，正式填报请登录省考试院指定填报网站。',
    '各地的高考政策不同，模拟志愿填报会根据当前注册用户所属地自动匹配。',
    '本系统数据均来自省考试院公布的当年招生计划和历年录取数据，推荐结果仅供您模拟参考使用。正式填报时请务必参阅省考试院发布的相关招生计划书籍，如遇到数据错漏请以考试院公布信息为准。',
]

const {transferTo} = useInjectTransfer()
const {currentStep} = useInjectVoluntaryStep()
const {model} = useInjectVoluntaryForm()
const {validate} = useInjectVoluntaryData()
const {handleForward, onBeforeForward} = useInjectVoluntaryAssistant()
const scoreForm = ref(null)

const goVoluntaryList = () => {
    transferTo('/pages/voluntary/list/list')
}

onBeforeForward(async () => {
    if (currentStep.value == 0) await scoreForm.value.validate()
})
</script>

<style scoped lang="scss">
</style>