dz-app/pages/login/bind-mobile.vue

<template>
    <mx-submit-layout :bar-options="barOptions" :loading="loading" @submit="handleSubmit">
        <uv-form ref="form" :model="model" :rules="rules">
            <mobile-code-fields/>
            <name-gender-fields/>
            <province-field/>
            <gaokao-year-field/>
            <type-major-fields/>
            <school-info-fields/>
        </uv-form>
        <template #suffix>
            <text class="text-primary underline" @click="handleLogout">退出登陆</text>
        </template>
    </mx-submit-layout>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {bindPhone, sendSms} from "@/api/login";
import {getFrontLocationsList} from "@/api/webApi/resources";
import {useUserStore} from "@/hooks/useUserStore";
import {useTransfer} from "@/hooks/useTransfer";
import {createBindPhoneModelRules} 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 NameGenderFields from "@/pages/login/components/register-fields/name-gender-fields.vue";
import ProvinceField from "@/pages/login/components/register-fields/province-field.vue";
import GaokaoYearField from "@/pages/login/components/register-fields/gaokao-year-field.vue";
import TypeMajorFields from "@/pages/login/components/register-fields/type-major-fields.vue";
import {useProvideFormRef} from "@/pages/login/components/hooks/useFormRefInjection";
import {useProvideProvince} from "@/pages/login/components/hooks/useProvinceInjection";
import {useProvideSendSmsFn} from "@/pages/login/components/hooks/useSmsInjection";
import SchoolInfoFields from "@/pages/login/components/register-fields/school-info-fields.vue";
import {toast} from "@/uni_modules/uv-ui-tools/libs/function";
import mxConst from "@/common/mxConst";

const loading = ref(false)
const form = ref(null)
const provinceOptions = ref([])
const {GetInfo, Logout} = useUserStore()
const {relaunch, transferTo} = useTransfer()
const [m, r, modelToCommit] = createBindPhoneModelRules()
const [model, rules] = useProvideFormData(m, r)
useProvideSendSmsFn(() => handleSendSms())
useProvideProvince(provinceOptions)
useProvideFormRef(form)

const barOptions = ref({
    title: '注册账号',
    leftDisabled: true
})

// hooks
onMounted(async () => {
    const resLoc = await getFrontLocationsList({level: 1})
    provinceOptions.value = resLoc.data.map(p => p.sname)
})

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

const handleSubmit = async () => {
    await form.value.validate()
    if (loading.value) return
    loading.value = true
    try {
        const commit = modelToCommit()
        await bindPhone(commit)
        toast('绑定成功，即将返回首页')
        await GetInfo()
        relaunch()
    } finally {
        loading.value = false
    }
}

const handleLogout = async function () {
    if (loading.value) return
    uni.showLoading()
    try {
        await Logout()
        transferTo(mxConst.routes.login)
    } finally {
        uni.hideLoading()
    }
}
</script>

<style scoped>

</style>