feat:增加主包(tabbar)、system(系统管理)、infra(基础设施)、bpm(工作流程)的页面
This commit is contained in:
90
src/pages/auth/components/code-input.vue
Normal file
90
src/pages/auth/components/code-input.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<view class="input-item">
|
||||
<wd-icon name="lock-on" size="20px" color="#1890ff" />
|
||||
<wd-input
|
||||
:model-value="modelValue"
|
||||
placeholder="请输入验证码"
|
||||
clearable
|
||||
clear-trigger="focus"
|
||||
no-border
|
||||
type="number"
|
||||
:maxlength="6"
|
||||
@update:model-value="$emit('update:modelValue', $event)"
|
||||
/>
|
||||
<view
|
||||
class="whitespace-nowrap border-l-1rpx border-l-[#e5e5e5] border-l-solid px-20rpx text-28rpx text-[#1890ff]"
|
||||
@click="handleSendCode"
|
||||
>
|
||||
<text :class="{ 'text-gray-400': countdown > 0 }">
|
||||
{{ countdown > 0 ? `${countdown} 秒后重发` : "获取验证码" }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onUnmounted, ref } from "vue";
|
||||
import { useToast } from "wot-design-uni";
|
||||
import { sendSmsCode } from "@/api/login";
|
||||
import { isMobile } from "@/utils/validator";
|
||||
|
||||
defineOptions({
|
||||
name: "CodeInput",
|
||||
});
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: string; // 验证码值 (v-model)
|
||||
mobile: string; // 手机号
|
||||
scene: number; // 短信场景:21-登录 23-重置密码
|
||||
beforeSend?: () => boolean; // 发送前的校验函数,返回 false 则不发送
|
||||
}>();
|
||||
|
||||
defineEmits<{
|
||||
"update:modelValue": [value: string];
|
||||
}>();
|
||||
|
||||
const toast = useToast();
|
||||
const countdown = ref(0); // 验证码倒计时,单位秒
|
||||
let countdownTimer: ReturnType<typeof setInterval> | null = null; // 倒计时定时器
|
||||
|
||||
/** 页面卸载时清除倒计时定时器 */
|
||||
onUnmounted(() => {
|
||||
if (countdownTimer) {
|
||||
clearInterval(countdownTimer);
|
||||
countdownTimer = null;
|
||||
}
|
||||
});
|
||||
|
||||
/** 发送验证码 */
|
||||
async function handleSendCode() {
|
||||
// 执行前置校验
|
||||
if (props.beforeSend && !props.beforeSend()) {
|
||||
return;
|
||||
}
|
||||
if (countdown.value > 0) {
|
||||
return;
|
||||
}
|
||||
if (!props.mobile) {
|
||||
toast.warning("请输入手机号");
|
||||
return;
|
||||
}
|
||||
if (!isMobile(props.mobile)) {
|
||||
toast.warning("请输入正确的手机号");
|
||||
return;
|
||||
}
|
||||
|
||||
// 发送验证码
|
||||
await sendSmsCode({ mobile: props.mobile, scene: props.scene });
|
||||
toast.success("验证码已发送");
|
||||
|
||||
// 开始倒计时
|
||||
countdown.value = 60;
|
||||
countdownTimer = setInterval(() => {
|
||||
countdown.value--;
|
||||
if (countdown.value <= 0) {
|
||||
clearInterval(countdownTimer!);
|
||||
countdownTimer = null;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user