<template>
|
<ProForm :model="form" ref="formRef" class="el-message-box__input">
|
<ProFormItemV2
|
prop="code"
|
:check-rules="[{ message: '请输入验证码' }]"
|
label-width="0px"
|
class="pro-form-item-label-hidden"
|
>
|
<ProFormText v-model.trim="form.code" placeholder="请输入验证码">
|
<template #suffix>
|
<ProFormCaptcha
|
:onGetCaptcha="onGetCaptcha"
|
phonePropName="loginKey"
|
class="code-btn"
|
link
|
></ProFormCaptcha>
|
</template>
|
</ProFormText>
|
</ProFormItemV2>
|
<div class="el-message-box__btns" style="padding-top: 0">
|
<el-button type="primary" @click="handleConfirm" :loading="loading">确定</el-button>
|
</div>
|
</ProForm>
|
</template>
|
|
<script setup lang="ts">
|
import { ProForm, ProFormText, ProFormCaptcha, ProFormItemV2 } from '@bole-core/components';
|
import { FormInstance } from 'element-plus';
|
import * as accountServices from '@/services/api/Account';
|
import { useUserStore } from '@/store/modules/user';
|
|
defineOptions({
|
name: 'SendVerificationCodeView',
|
});
|
|
type Props = {
|
/** 登录密钥 */
|
loginKey?: string;
|
/** 手机号 */
|
phoneNumber?: string;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {});
|
|
const emit = defineEmits<{
|
(e: 'success'): void;
|
}>();
|
|
const form = reactive({
|
loginKey: props.loginKey,
|
code: '',
|
});
|
|
const loading = ref(false);
|
|
async function onGetCaptcha() {
|
await accountServices.twoFactorLoginSendVerificationCode(
|
{
|
loginKey: props.loginKey,
|
},
|
{ showLoading: false }
|
);
|
}
|
|
const formRef = ref<FormInstance>();
|
|
const handleConfirm = () => {
|
if (!formRef.value) return;
|
formRef.value.validate((valid) => {
|
if (valid) {
|
twoFactorLoginSms();
|
} else {
|
return;
|
}
|
});
|
};
|
|
const userStore = useUserStore();
|
|
async function twoFactorLoginSms() {
|
try {
|
loading.value = true;
|
await userStore.twoFactorLoginSms({
|
loginKey: props.loginKey,
|
code: form.code,
|
});
|
emit('success');
|
} catch (error) {
|
} finally {
|
loading.value = false;
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@use '@/style/common.scss' as *;
|
</style>
|
