dz-app/pages/ie/entry-ai/entry-ai.vue

<template>
    <view class="page-content shared-gradient-bg">
        <large-header v-bind="aiTitleBinding" :scroll-top="scrollTop"/>
        <pure-card style="margin-top: -30px"/>
        <view class="mt-40 mx-20 bg-white mx-card px-30 py-20">
            <ai-form ref="form" :model="model" :rules="rules" :render-rules="renderRules"
                     :render-rule-loading="renderRuleLoading">
                <template #prefix>
                    <uv-text text="专业方向" v-bind="formGroupBinding"/>
                    <ai-form-item prop="majorCategory" id="majorCategory">
                        <major-category-picker v-model="model.majorCategory"/>
                    </ai-form-item>
                </template>
                <template #suffix>
                    <uv-form-item>
                        <uv-text size="12" color="var(--primary-light-color)"
                                 text="*成绩填写的准确性关系到院校录取概率及准确性，请认准填写"/>
                    </uv-form-item>
                </template>
            </ai-form>
        </view>
        <view class="mt-40 px-30 fx-row gap-30">
            <uv-button text="我的志愿表" v-bind="plainBtnBinding" @click="handleMyVoluntary"/>
            <uv-button text="下一步" v-bind="gradientBtnBinding" @click="handleNext"/>
        </view>
        <view class="p-40 text-xs text-tips fx-col gap-15">
            <view>填报须知</view>
            <view>1.本系统提供高考志愿填报智能模拟功能，不等同于实际的网上填报志愿，正式填报请登录省考试院指定填报网站。
            </view>
            <view>2.各地的高考政策不同，模拟志愿填报会根据当前注册用户所属地自动匹配</view>
            <view>
                3.本系统数据均来自省考试院公布的当年招生计划和历年录取数据，推荐结果仅供您模拟参考使用。正式填报时请务必参阅省考试院发布的相关招生计划书籍，如遇到数据错漏请以考试院公布信息为准
            </view>
        </view>
    </view>
</template>

<script>
import {ref, watch} from 'vue';
import LargeHeader from "@/pages/ie/components/large-header.vue";
import PureCard from "@/pages/ie/components/card/pure-card.vue";
import IeFormPicker from "@/pages/ie/components/picker/ie-form-picker.vue";
import MajorCategoryPicker from "@/pages/ie/components/ai-form/items/major-category-picker.vue";
import EyesightPicker from "@/pages/ie/entry-ai/components/eyesight-picker.vue";
import AIFormCommonStyle from "@/pages/ie/components/AIFormCommonStyle";
import AiForm from "@/pages/ie/components/ai-form/ai-form.vue";
import AiFormItem from "@/pages/ie/components/ai-form/ai-form-item.vue";
import MxConst from "@/common/MxConst";
import {useProvidePageScroll} from "@/hooks/usePageScrollInjection";
import {useTransfer} from "@/hooks/useTransfer";
import {useAIRenderRules} from "@/pages/ie/hooks/useAIRenderRules";
import {useProvideMajorTreeService} from "@/pages/ie/hooks/useMajorTreeInjection";

export default {
    components: {
        AiFormItem,
        AiForm,
        EyesightPicker,
        MajorCategoryPicker,
        IeFormPicker,
        PureCard,
        LargeHeader
    },
    mixins: [AIFormCommonStyle],
    data() {
        return {
            rules: {
                majorCategory: [{required: true, message: '请选择专业种类'}]
            }
        }
    },
    setup() {
        const scrollTop = useProvidePageScroll()
        const {transferTo} = useTransfer()
        useProvideMajorTreeService()
        const model = ref({majorCategory: ''})
        const paramFactory = () => {
            const {majorCategory} = model.value
            if (!majorCategory) return
            const renderType = MxConst.enum.ai.renderType.ai
            return {renderType, majorCategory}
        }
        const {
            renderRules,
            renderRuleLoading,
            reloadRenderRules,
            validateRenderRule
        } = useAIRenderRules(paramFactory)

        watch(() => model.value.majorCategory, () => {
            renderRules.value = []
            reloadRenderRules()
        })

        return {
            scrollTop,
            transferTo,
            model,
            renderRules,
            renderRuleLoading,
            validateRenderRule
        }
    },
    methods: {
        async handleNext() {
            await this.$refs.form.validate()
            await this.validateRenderRule()
            this.transferTo('/pages/ie/entry-ai-form/entry-ai-form', this.model)
        },
        handleMyVoluntary() {
            this.transferTo('/pages/ie/entry-ai-list/entry-ai-list')
        }
    }
}
</script>

<style scoped>
::v-deep .uv-form-item__body__right__message {
    text-align: right;
    margin-right: 10px;
}
</style>