style: 删除无用文件
This commit is contained in:
rd
@ -1,171 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Modal v-model:open="visible" :title="title" :width="400" centered :footer="null" class="safety-verification-modal">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="description">
|
|
||||||
<p class="title-text">安全验证</p>
|
|
||||||
<p class="desc-text">为进一步保证您的账号安全，确保为您本人操作，请先完成安全验证</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="verify-section">
|
|
||||||
<div class="phone-info">
|
|
||||||
<span class="label">请输入发送至</span>
|
|
||||||
<span class="phone-number">{{ formattedPhone }}</span>
|
|
||||||
<span class="label">的短信验证码</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="captcha-input">
|
|
||||||
<div class="input-group">
|
|
||||||
<Input
|
|
||||||
v-model:value="captcha"
|
|
||||||
type="password"
|
|
||||||
maxlength="6"
|
|
||||||
placeholder="请输入验证码"
|
|
||||||
@input="handleCaptchaInput"
|
|
||||||
@blur="handleCaptchaBlur"
|
|
||||||
@focus="handleCaptchaFocus"
|
|
||||||
class="captcha-input-field"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="countdown">
|
|
||||||
<span v-if="countdown > 0" class="countdown-text"> {{ countdown }}秒后可以再次发送验证码 </span>
|
|
||||||
<span v-else class="resend-btn" @click="sendCaptcha"> 发送验证码 </span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="action-buttons">
|
|
||||||
<Button type="primary" @click="handleSubmit" :disabled="!captcha || captcha.length !== 6"> 确认验证 </Button>
|
|
||||||
<Button @click="handleCancel">取消</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { computed, ref } from 'vue';
|
|
||||||
import { Button, Input, message, Modal } from 'ant-design-vue';
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
onVerifySuccess?: (captcha: string) => void;
|
|
||||||
onVerifyCancel?: () => void;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const emit = defineEmits(['success', 'cancel']);
|
|
||||||
|
|
||||||
const visible = ref(false);
|
|
||||||
const phone = ref('');
|
|
||||||
|
|
||||||
// 格式化手机号显示（隐藏中间4位）
|
|
||||||
const formattedPhone = computed(() => {
|
|
||||||
if (!phone.value) return '';
|
|
||||||
return phone.value.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
|
|
||||||
});
|
|
||||||
|
|
||||||
// 验证码输入相关
|
|
||||||
const captcha = ref('');
|
|
||||||
const countdown = ref(0);
|
|
||||||
const timer = ref<number | null>(null);
|
|
||||||
|
|
||||||
// 处理验证码输入
|
|
||||||
const handleCaptchaInput = (value: string) => {
|
|
||||||
// 只允许数字输入，且最多6位
|
|
||||||
const numericValue = value.replace(/[^0-9]/g, '');
|
|
||||||
captcha.value = numericValue.slice(0, 6);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 处理焦点事件
|
|
||||||
const handleCaptchaFocus = () => {
|
|
||||||
// 可以在这里添加焦点效果
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCaptchaBlur = () => {
|
|
||||||
// 可以在这里添加失焦效果
|
|
||||||
};
|
|
||||||
|
|
||||||
// 发送验证码
|
|
||||||
const sendCaptcha = async () => {
|
|
||||||
if (countdown.value > 0) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 这里应该调用实际的API发送验证码
|
|
||||||
// 示例：await sendCaptchaApi({ phone: phone.value });
|
|
||||||
|
|
||||||
// 模拟成功发送
|
|
||||||
message.success('验证码已发送，请注意查收');
|
|
||||||
|
|
||||||
// 开始倒计时
|
|
||||||
startCountdown();
|
|
||||||
} catch (error) {
|
|
||||||
message.error('发送失败，请重试');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 开始倒计时
|
|
||||||
const startCountdown = () => {
|
|
||||||
countdown.value = 60;
|
|
||||||
timer.value = window.setInterval(() => {
|
|
||||||
countdown.value--;
|
|
||||||
if (countdown.value <= 0) {
|
|
||||||
clearInterval(timer.value as number);
|
|
||||||
timer.value = null;
|
|
||||||
}
|
|
||||||
}, 1000);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 提交验证
|
|
||||||
const handleSubmit = async () => {
|
|
||||||
if (!captcha.value || captcha.value.length !== 6) {
|
|
||||||
message.error('请输入正确的6位验证码');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 这里应该调用实际的API验证验证码
|
|
||||||
// 示例：await verifyCaptchaApi({ phone: phone.value, captcha: captcha.value });
|
|
||||||
|
|
||||||
// 模拟验证成功
|
|
||||||
message.success('验证成功！');
|
|
||||||
|
|
||||||
// 触发成功回调
|
|
||||||
if (props.onVerifySuccess) {
|
|
||||||
props.onVerifySuccess(captcha.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 关闭弹窗
|
|
||||||
emit('success', captcha.value);
|
|
||||||
close();
|
|
||||||
} catch (error) {
|
|
||||||
message.error('验证失败，请检查验证码是否正确');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 取消验证
|
|
||||||
const handleCancel = () => {
|
|
||||||
close();
|
|
||||||
};
|
|
||||||
|
|
||||||
const open = (mobile) => {
|
|
||||||
phone.value = mobile;
|
|
||||||
visible.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const close = () => {
|
|
||||||
visible.value = false;
|
|
||||||
phone.value = '';
|
|
||||||
};
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
open,
|
|
||||||
});
|
|
||||||
// 组件销毁时清理定时器
|
|
||||||
onUnmounted(() => {
|
|
||||||
if (timer.value) {
|
|
||||||
clearInterval(timer.value);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
@import './style.scss';
|
|
||||||
</style>
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
.safety-verification-modal {
|
|
||||||
.modal-content {
|
|
||||||
padding: 24px;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.description {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
|
|
||||||
.title-text {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #211f24;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desc-text {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #737478;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.verify-section {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
|
|
||||||
.phone-info {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #737478;
|
|
||||||
}
|
|
||||||
|
|
||||||
.phone-number {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #211f24;
|
|
||||||
margin: 0 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.captcha-input {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
|
|
||||||
.input-group {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.captcha-input-field {
|
|
||||||
width: 200px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-color: var(--Brand-Brand-6, rgba(109, 76, 254, 1));
|
|
||||||
box-shadow: 0 2px 4px 0 rgba(109, 76, 254, 0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.countdown {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #737478;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
|
|
||||||
.countdown-text {
|
|
||||||
color: #737478;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resend-btn {
|
|
||||||
color: var(--Brand-Brand-6, rgba(109, 76, 254, 1));
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: color 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--Brand-Brand-7, rgba(95, 67, 238, 1));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 16px;
|
|
||||||
|
|
||||||
.arco-btn {
|
|
||||||
min-width: 100px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arco-btn-primary {
|
|
||||||
background-color: var(--Brand-Brand-6, rgba(109, 76, 254, 1));
|
|
||||||
border-color: var(--Brand-Brand-6, rgba(109, 76, 254, 1));
|
|
||||||
color: white;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--Brand-Brand-7, rgba(95, 67, 238, 1));
|
|
||||||
border-color: var(--Brand-Brand-7, rgba(95, 67, 238, 1));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user