ieplus-app/src/pagesOther/pages/skill/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 -->
        <uv-gap height="44"/>
        <!-- #endif -->
        <ie-image is-oss src="/volunteer/skill/index/bg.png" custom-class="w-full h-600"/>
        <view class="-mt-420 z-1">
            <view class="px-36 flex justify-between items-center">
                <view class="text-3xl text-primary keep-all">
                    <view class="mb-10 font-bold">测职业技能分</view>
                    <view class="text-base">输入分数，测算所需职业技能分</view>
                </view>
                <ie-image is-oss src="/volunteer/skill/index/banner.png" custom-class="w-208 h-208"/>
            </view>
            <view class="mt-60 mx-30 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" disable-simulate/>
            </view>
        </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 VoluntaryForm from "@/pagesOther/pages/voluntary/index/components/voluntary-form.vue";
import {useTransferPage} from "@/hooks/useTransferPage";
import {routes} from "@/common/routes";
import {VOLUNTARY_TARGET, VOLUNTARY_RULES, VOLUNTARY_MODEL} from "@/types/injectionSymbols";
import {EnrollRule, SelectedUniversityMajor, VoluntaryDto, VoluntaryModel, VoluntaryResult} from "@/types/voluntary";
import config from "@/config";
import {UniversityPickerPageOptions} from "@/types/transfer";
import {getSkillRules, postSkillRules} from "@/api/modules/voluntary";

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 {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
    target.value = picked as SelectedUniversityMajor
    uni.$ie.showLoading()
    try {
        // reset
        model.value = {}
        rules.value = []
        // request render rules
        const res = await getSkillRules(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 () => {
    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 postSkillRules(target.value, model.value)
    const bigData: VoluntaryDto = {target: target.value, rules: rules.value, model: model.value, result}
    transferTo(routes.skillResult, {bigData})
}

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

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

<style scoped>

</style>