91 lines
2.3 KiB
Vue
91 lines
2.3 KiB
Vue
|
<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>
|