feat:优化验证码的代码,迁移到 components 目录下

feat:在 register.vue、code-login.vue 里,增加验证码
This commit is contained in:
YunaiV
2025-12-15 21:55:56 +08:00
parent 87821086ef
commit 39c9d18403
13 changed files with 95 additions and 45 deletions

View File

@@ -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,