renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 删除无用文件

Browse Source
This commit is contained in:
rd
2025-09-12 12:00:52 +08:00
parent 98d600693a
commit 958d7a6424
2 changed files with 0 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
src/views/components/management/person/components/safety-verification-modal/index.vue
View File

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

110
src/views/components/management/person/components/safety-verification-modal/style.scss
View File

@ -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));
}
}
}
}
}