dz-app/pages/login/register.vue

<template>
    <mx-submit-layout title="新用户注册" button-text="现在注册" :loading="loading" @submit="handleRegister">
        <uv-form ref="form" :model="model" :rules="rules">
            <mobile-code-fields/>
            <pwd-repeat-fields/>
            <name-gender-fields/>
            <province-field/>
            <type-major-fields/>
        </uv-form>
        <template #append>
            <agreement-view v-model="isAgree" class="my-20"/>
        </template>
    </mx-submit-layout>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import mxConst from "@/common/mxConst";
import {toast} from "@/uni_modules/uv-ui-tools/libs/function";
import {register, sendSms} from "@/api/login";
import {useUserStore} from "@/hooks/useUserStore";
import {useTransfer} from "@/hooks/useTransfer";
import {createRegisterModelRules} from "@/pages/login/components/hooks/defineFormModels";
import {useProvideFormData} from "@/pages/login/components/hooks/useFormDataInjection";
import MobileCodeFields from "@/pages/login/components/register-fields/mobile-code-fields.vue";
import PwdRepeatFields from "@/pages/login/components/register-fields/pwd-repeat-fields.vue";
import NameGenderFields from "@/pages/login/components/register-fields/name-gender-fields.vue";
import ProvinceField from "@/pages/login/components/register-fields/province-field.vue";
import TypeMajorFields from "@/pages/login/components/register-fields/type-major-fields.vue";
import AgreementView from "@/pages/login/components/agreement-view.vue";
import {useProvideFormRef} from "@/pages/login/components/hooks/useFormRefInjection";
import {useProvideSendSmsFn} from "@/pages/login/components/hooks/useSmsInjection";
import {useProvideProvince} from "@/pages/login/components/hooks/useProvinceInjection";
import {getLocationsList} from "@/api/webApi/resources";

const loading = ref(false)
const isAgree = ref(false)
const {SyncToken} = useUserStore()
const {transferTo} = useTransfer()

// form related.
const [m, r, modelToCommit] = createRegisterModelRules()
const [model, rules] = useProvideFormData(m, r)
const form = ref(null)
useProvideFormRef(form)

// service related.
useProvideSendSmsFn((args) => handleSendSms(args))
const provinceOptions = ref([])
useProvideProvince(provinceOptions)

// hooks
onMounted(async () => {
    // 获取系统支持的省份（无限制）
    const res = await getLocationsList({level: 1})
    provinceOptions.value = res.data.map(p => p.sname) || []
})

// functions
const handleSendSms = (events) => {
    return sendSms({mobile: model.value.mobile, smsType: 1, ...events})
}

const handleRegister = async () => {
    await form.value.validate()
    if (!isAgree.value) return toast('请先勾选同意条款')

    if (loading.value) return
    loading.value = false
    try {
        const commit = modelToCommit()
        const res = await register(commit)
        toast('注册成功')
        await SyncToken(res.token)
        transferTo(mxConst.routes.bindProfile)
    } finally {
        loading.value = false
    }
}
</script>

<style lang="scss">

</style>