ieplus-app/src/pagesOther/pages/voluntary/index/index.vue

<template>
    <ie-page bg-color="#F6F8FA">
        <ie-navbar title="测录取概率" transparent bg-color="#FFFFFF" title-color="black" keep-title-color/>
        <!-- #ifdef MP-WEIXIN -->
        <view class="h-90 bg-gradient-to-r from-white to-cyan-100"/>
        <!-- #endif -->
        <ie-image is-oss src="/volunteer/voluntary/index/banner.png" custom-class="w-full h-483"/>
        <view class="mx-30 -mt-180 z-1 bg-white rounded-xl p-35">
            <view class="flex justify-between items-center">
                <view class="text-lg text-fore-title">报考院校专业</view>
                <view class="text-base text-fore-placeholder flex items-center" @click="handleSelect">
                    <text>请选择</text>
                    <uv-icon name="arrow-right" color="info"/>
                </view>
            </view>
            <ie-empty v-if="!rules.length" :image="emptyImg" text="请选择你的报考院校专业~"/>
            <voluntary-form v-else ref="form"/>
        </view>
        <ie-safe-toolbar :height="84" :shadow="false">
            <view class="px-30 py-16">
                <ie-button @click="handleSubmit">测录取概率</ie-button>
            </view>
        </ie-safe-toolbar>
    </ie-page>
</template>

<script setup lang="ts">

import config from "@/config";
import VoluntaryForm from "@/pagesOther/pages/voluntary/index/components/voluntary-form.vue";
import {EnrollRule, VoluntaryDto, VoluntaryModel, SelectedUniversityMajor} from "@/types/voluntary";
import {VOLUNTARY_MODEL, VOLUNTARY_RULES, VOLUNTARY_TARGET} from "@/types/injectionSymbols";
import {useTransferPage} from "@/hooks/useTransferPage";
import {routes} from "@/common/routes";
import {UniversityPickerPageOptions} from "@/types/transfer";
import {getRenderRules, postRenderRules} from "@/api/modules/voluntary";
import { useAuth } from "@/hooks/useAuth";
import { EnumUserRole } from "@/common/enum";

const { hasPermission } = useAuth();
const emptyImg = computed(() => config.ossUrl + '/volunteer/voluntary/index/empty_data.png')

const form = ref<InstanceType<typeof VoluntaryForm>>()
const target = ref<SelectedUniversityMajor>({} as SelectedUniversityMajor)
const rules = ref<EnrollRule[]>([])
const model = ref<VoluntaryModel>({})
const {prevData, transferTo} = useTransferPage()

const handleSelect = async () => {
    const option: UniversityPickerPageOptions = {
        title: '选择你的报考院校专业',
        fromVoluntary: true,
        selectedUniversityId: target.value?.universityId,
        selectedMajorId: target.value?.majorId
    }
    const picked = await transferTo(routes.targetPicker, {data: option})
    if (!picked) return
    await processSelected(picked as SelectedUniversityMajor)
}

const processSelected = async (picked: SelectedUniversityMajor) => {
    target.value = picked
    uni.$ie.showLoading()
    try {
        // reset
        model.value = {}
        rules.value = []
        // request render rules
        const res = await getRenderRules(target.value)
        rules.value = res.data
        // init model
        rules.value.forEach((r) => {
            r.details?.forEach((d) => {
                if (d.options?.length) {
                    model.value[d.fieldName] = d.defaultValue ? d.defaultValue : ''
                    model.value[d.fieldName + 'Total'] = d.options ? d.options[0] : null
                }
            })
        })
    } catch (e) {
        console.log('getRenderRules ex', e, target.value)
        target.value = {} as SelectedUniversityMajor // clear for re-pick
    } finally {
        uni.$ie.hideLoading()
    }
}

const handleSubmit = async () => {
    const hasAuth = hasPermission([EnumUserRole.VIP]);
    if (!hasAuth) {
        return;
    }
    if (!target.value.universityId || !target.value.majorId) return uni.$ie.showToast('请选择院校专业')
    if (!rules.value.length) return uni.$ie.showToast('由于官方未公布历年录取分数或计划变更，暂时无法计算录取概率')
    await form.value?.validate()
    // make request
    const {data: result} = await postRenderRules(target.value, model.value)
    const bigData: VoluntaryDto = {target: target.value, rules: rules.value, model: model.value, result}
    transferTo(routes.voluntaryResult, {bigData})
}

provide(VOLUNTARY_TARGET, target)
provide(VOLUNTARY_RULES, rules)
provide(VOLUNTARY_MODEL, model)

onLoad(() => {
    if (prevData.value.selected) {
        processSelected(prevData.value.selected as SelectedUniversityMajor)
    }
})

// 为了让子组件触发页面滚动
onPageScroll(() => {
})
</script>

<style lang="scss">

</style>