<template>
|
<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="handleLogin" :loading="form.loading">登录</LargeButton>
|
<div class="go-register-btn" @click="goRegister">立即注册</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
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 { useLoginedJump } from '@/hooks';
|
import { useUserStore } from '@/stores/modules/user';
|
import Taro from '@tarojs/taro';
|
|
defineOptions({
|
name: 'verificationCodeLoginForm',
|
});
|
|
type Props = {
|
policyChecked?: boolean;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {});
|
|
const userStore = useUserStore();
|
|
const { jump } = useLoginedJump();
|
|
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.PhoneMesssageCodeLogin,
|
},
|
{ showLoading: false }
|
);
|
}
|
|
async function handleLogin() {
|
try {
|
if (props.policyChecked) {
|
const { valid } = await formRef.value.validate();
|
if (valid) {
|
form.loading = true;
|
await userStore.loginByUsername({
|
phoneNumber: form.phoneNumber,
|
code: form.verificationCode,
|
});
|
jump();
|
}
|
} else {
|
noAccess();
|
}
|
} catch (error) {
|
} finally {
|
form.loading = false;
|
}
|
}
|
|
function noAccess() {
|
Message.warning('请先阅读并勾选协议');
|
}
|
|
function goRegister() {
|
Taro.navigateTo({
|
url: RouterPath.registerForm,
|
});
|
}
|
</script>
|
