<template>
|
<LoginPageLayout class="registerForm-page-wrapper" title="注册">
|
<div class="loginB-form-wrapper">
|
<div class="register-form-title-wrapper">
|
<div class="register-form-title">注册</div>
|
<div class="register-form-title-line"></div>
|
</div>
|
<div class="verification-code-login-form-wrapper">
|
<nut-form
|
class="verification-code-login-form"
|
ref="formRef"
|
:model-value="form"
|
:rules="rules"
|
>
|
<nut-form-item label="" class="bole-form-item" prop="phoneNumber" required>
|
<nut-input
|
v-model.trim="form.phoneNumber"
|
class="bole-input-text"
|
placeholder="请输入手机号"
|
type="text"
|
/>
|
</nut-form-item>
|
<nut-form-item label="" class="bole-form-item" prop="verificationCode" required>
|
<nut-input
|
v-model.trim="form.verificationCode"
|
class="bole-input-text"
|
placeholder="请输入验证码"
|
type="number"
|
>
|
<template #right>
|
<ProFormCaptcha
|
:onGetCaptcha="onGetCaptcha"
|
phonePropName="phoneNumber"
|
:validateField="formRef?.validate"
|
></ProFormCaptcha>
|
</template>
|
</nut-input>
|
</nut-form-item>
|
</nut-form>
|
<LargeButton class="login-btn" @click="handleRegister" :loading="form.loading"
|
>注册</LargeButton
|
>
|
<div class="go-register-btn" @click="goLogin">立即登录</div>
|
</div>
|
</div>
|
<Policy
|
v-model="state.policyChecked"
|
policyBtnText="我已阅读并同意"
|
class="loginB-form-policy"
|
/>
|
</LoginPageLayout>
|
</template>
|
|
<script setup lang="ts">
|
import LoginPageLayout from '../components/LoginPageLayout/LoginPageLayout.vue';
|
import { Policy } from '@/components';
|
import * as commonServices from '@12333/services/api/Common';
|
import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types';
|
import { FormValidator, Message } from '@12333/utils';
|
import { LargeButton } from '@/components';
|
import { ProFormCaptcha } from 'senin-mini/components';
|
import { VerificationCodeBusinessType } from '@12333/constants';
|
import Taro from '@tarojs/taro';
|
import { ResponseCode } from '@12333/constants';
|
import * as accountServices from '@12333/services/api/Account';
|
|
defineOptions({
|
name: 'registerForm',
|
});
|
|
const state = reactive({
|
policyChecked: false,
|
});
|
|
const formRef = ref(null);
|
|
const form = reactive({
|
loading: false,
|
phoneNumber: '',
|
verificationCode: '',
|
});
|
|
const rules = reactive<FormRules>({
|
phoneNumber: [
|
{ required: true, message: '请输入手机号' },
|
{ validator: FormValidator.validatorPhoneNumber, message: '请输入正确的手机号' },
|
],
|
verificationCode: [{ required: true, message: '请输入验证码' }],
|
});
|
|
async function onGetCaptcha() {
|
await commonServices.sendVerificationCode(
|
{
|
phoneNumber: form.phoneNumber,
|
businessType: VerificationCodeBusinessType.PhoneMesssageCodeRegister,
|
},
|
{
|
showLoading: false,
|
customErrorHandler(error) {
|
if (error?.response?.data?.error?.code === ResponseCode.RegisterExistsPhoneNumber) {
|
Message.confirm({
|
message: '该手机号已注册，请去登录页登录',
|
confirmText: '去登录',
|
}).then(() => {
|
goLogin();
|
});
|
return true;
|
}
|
},
|
}
|
);
|
}
|
|
async function handleRegister() {
|
try {
|
if (state.policyChecked) {
|
const { valid } = await formRef.value.validate();
|
if (valid) {
|
let params: API.PhoneMesssageCodeRegisterInput = {
|
code: form.verificationCode,
|
phoneNumber: form.phoneNumber,
|
};
|
let res = await accountServices.phoneMesssageCodeRegister(params);
|
if (res) {
|
Message.success('注册成功', {
|
onClosed: () => {
|
goLogin();
|
},
|
});
|
}
|
}
|
} else {
|
noAccess();
|
}
|
} catch (error) {
|
} finally {
|
form.loading = false;
|
}
|
}
|
|
function noAccess() {
|
Message.warning('请先阅读并勾选协议');
|
}
|
|
const router = Taro.useRouter();
|
|
function goLogin() {
|
Taro.navigateBack();
|
}
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
@import '../styles/login.scss';
|
|
.registerForm-page-wrapper {
|
.register-form-title-wrapper {
|
padding-top: 20px;
|
margin-bottom: 92px;
|
|
.register-form-title {
|
font-weight: 400;
|
font-size: 28px;
|
color: boleGetCssVar('color', 'primary');
|
line-height: 40px;
|
text-align: center;
|
margin-bottom: 8px;
|
}
|
|
.register-form-title-line {
|
width: 38px;
|
height: 2px;
|
background-color: boleGetCssVar('color', 'primary');
|
margin: 0 auto;
|
}
|
}
|
}
|
</style>
|
