dz-app/pages/login/components/register-fields/gaokao-year-field.vue

<template>
    <mx-form-item v-if="disabled" v-model="model.gaokaoYear" label="毕业年份" disabled/>
    <mx-form-item v-else prop="gaokaoYear" label="毕业年份">
        <uv-radio-group v-model="model.gaokaoYear" class="justify-end gap-20">
            <uv-radio v-for="y in gaokaoYearOptions" :label="y" :name="y"/>
        </uv-radio-group>
    </mx-form-item>
</template>

<script setup>
import {ref, watchEffect} from 'vue'
import {useInjectFormData} from "@/pages/login/components/hooks/useFormDataInjection";
import {createPropDefine} from "@/utils";
import {getRegisterGaokaoYears} from "@/api/login";

const props = defineProps({
    disabled: createPropDefine(false, Boolean)
})

const [model] = useInjectFormData()
const gaokaoYearOptions = ref([])

watchEffect(async () => {
    if (props.disabled) return

    const res = await getRegisterGaokaoYears()
    gaokaoYearOptions.value = res.data
    // validate, and make gaokaoYear select the first ele as default.
    if (!res.data.includes(model.value.gaokaoYear)) {
        model.value.gaokaoYear = res.data[0]
    }
})
</script>

<style scoped>

</style>