feat:优化验证码的代码,迁移到 components 目录下
feat:在 register.vue、code-login.vue 里,增加验证码
This commit is contained in:
@@ -24,6 +24,16 @@
|
||||
:scene="21"
|
||||
:before-send="validateBeforeSend"
|
||||
/>
|
||||
<view v-if="captchaEnabled">
|
||||
<Verify
|
||||
ref="verifyRef"
|
||||
:captcha-type="captchaType"
|
||||
explain="向右滑动完成验证"
|
||||
:img-size="{ width: '300px', height: '150px' }"
|
||||
mode="pop"
|
||||
@success="verifySuccess"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<view class="mb-2 mt-2 flex justify-between">
|
||||
@@ -51,6 +61,7 @@ import { isMobile } from "@/utils/validator";
|
||||
import CodeInput from "./components/code-input.vue";
|
||||
import Header from "./components/header.vue";
|
||||
import TenantPicker from "./components/tenant-picker.vue";
|
||||
import { Verify } from '@/components/verifition';
|
||||
|
||||
defineOptions({
|
||||
name: "SmsLoginPage",
|
||||
@@ -67,10 +78,14 @@ const toast = useToast();
|
||||
const loading = ref(false); // 加载状态
|
||||
const redirectUrl = ref<string>(); // 重定向地址
|
||||
const tenantPickerRef = ref<InstanceType<typeof TenantPicker>>(); // 租户选择器引用
|
||||
const captchaEnabled = import.meta.env.VITE_APP_CAPTCHA_ENABLE === 'true'; // 验证码开关
|
||||
const verifyRef = ref();
|
||||
const captchaType = ref('blockPuzzle'); // 滑块验证码 blockPuzzle|clickWord
|
||||
|
||||
const formData = reactive({
|
||||
mobile: "",
|
||||
code: "",
|
||||
captchaVerification: "", // 验证码校验值
|
||||
}); // 表单数据
|
||||
|
||||
/** 页面加载时处理重定向 */
|
||||
@@ -85,6 +100,18 @@ function validateBeforeSend(): boolean {
|
||||
return tenantPickerRef.value?.validate() ?? false;
|
||||
}
|
||||
|
||||
/** 获取验证码 */
|
||||
async function getCode() {
|
||||
// 情况一,未开启:则直接登录
|
||||
if (!captchaEnabled) {
|
||||
await verifySuccess({});
|
||||
} else {
|
||||
// 情况二,已开启:则展示验证码;只有完成验证码的情况,才进行登录
|
||||
// 弹出验证码
|
||||
verifyRef.value.show();
|
||||
}
|
||||
}
|
||||
|
||||
/** 登录处理 */
|
||||
async function handleLogin() {
|
||||
// 校验租户
|
||||
@@ -103,11 +130,16 @@ async function handleLogin() {
|
||||
toast.warning("请输入验证码");
|
||||
return;
|
||||
}
|
||||
await getCode();
|
||||
}
|
||||
|
||||
/** 验证码验证成功回调 */
|
||||
async function verifySuccess(params: any) {
|
||||
loading.value = true;
|
||||
try {
|
||||
// 调用短信登录接口
|
||||
const tokenStore = useTokenStore();
|
||||
formData.captchaVerification = params.captchaVerification;
|
||||
await tokenStore.login({
|
||||
type: "sms",
|
||||
...formData,
|
||||
|
||||
Reference in New Issue
Block a user