代码修改
This commit is contained in:
qiuyuan
parent
8551a4cf09
commit
336e9b4e42
@ -197,6 +197,12 @@ const routes: RouteRecordRaw[] = [
|
||||
component: () =>
|
||||
import("@/views/admin/account/realnameAuthTrue/index.vue"),
|
||||
},
|
||||
{
|
||||
path: "realnameAuthBusiness",
|
||||
name: "realnameAuthBusiness",
|
||||
component: () =>
|
||||
import("@/views/admin/account/realnameAuthBusiness/index.vue"),
|
||||
},
|
||||
{
|
||||
path: "enterRealAuth",
|
||||
name: "EnterRealAuth",
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
782
src/views/admin/account/realnameAuthBusiness/index.vue
Normal file
782
src/views/admin/account/realnameAuthBusiness/index.vue
Normal file
@ -0,0 +1,782 @@
|
||||
<template>
|
||||
<div class="real-name-auth">
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-title-area">
|
||||
<h2 class="page-title">实名认证</h2>
|
||||
<p class="page-description">
|
||||
Fast亼算云严格遵守国家相关个人信息隐私保护规定，并不存储使用您的个人信息，
|
||||
<a href="#" class="protocol-link">查看实名认证协议</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 认证信息卡片 -->
|
||||
<div class="auth-card">
|
||||
<div class="card-content">
|
||||
<!-- 左侧信息区 -->
|
||||
<div class="info-left">
|
||||
<!-- 卡片标题 -->
|
||||
<div class="card-title">
|
||||
<div class="auth-status">
|
||||
<span class="status-dot"></span>
|
||||
<span class="status-text">已认证</span>
|
||||
</div>
|
||||
<h3 class="auth-type">企业认证</h3>
|
||||
</div>
|
||||
|
||||
<!-- 信息网格 -->
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<div class="info-label">认证类型</div>
|
||||
<div class="info-value">企业认证</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">认证时间</div>
|
||||
<div class="info-value">2025-11-18</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">证件类型</div>
|
||||
<div class="info-value">身份证</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">身份证号</div>
|
||||
<div class="info-value">
|
||||
<span>150************859</span>
|
||||
<a-button type="link" size="small" @click="handleCopy">复制</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">认证人</div>
|
||||
<div class="info-value">*如</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧图片区 -->
|
||||
<div class="image-right">
|
||||
<img src="../../../../assets/renzheng.png" alt="认证" class="auth-image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onUnmounted } from 'vue';
|
||||
import {
|
||||
Button as AButton,
|
||||
Table as ATable,
|
||||
Modal as AModal,
|
||||
Checkbox as ACheckbox,
|
||||
Input as AInput,
|
||||
message
|
||||
} from 'ant-design-vue';
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
title: '变更类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '变更时间',
|
||||
dataIndex: 'time',
|
||||
key: 'time',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
title: '变更状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
slots: { customRender: 'status' },
|
||||
},
|
||||
{
|
||||
title: '操作人',
|
||||
dataIndex: 'operator',
|
||||
key: 'operator',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
key: 'remark',
|
||||
ellipsis: true,
|
||||
},
|
||||
];
|
||||
|
||||
// 表格数据
|
||||
const dataSource = ref([
|
||||
{
|
||||
key: '1',
|
||||
type: '个人认证',
|
||||
time: '2025-11-18 14:30:25',
|
||||
status: '成功',
|
||||
operator: '系统',
|
||||
remark: '首次实名认证',
|
||||
},
|
||||
]);
|
||||
|
||||
// 对话框状态
|
||||
const changeModalVisible = ref(false);
|
||||
const isAgreeWarning = ref(false);
|
||||
|
||||
// 身份验证相关状态
|
||||
const verifyModalVisible = ref(false);
|
||||
const verificationCode = ref('');
|
||||
const countdown = ref(0);
|
||||
const sendingCode = ref(false);
|
||||
const sendStatus = ref('');
|
||||
const codeError = ref('');
|
||||
const verifying = ref(false);
|
||||
|
||||
// 用户绑定的手机号（实际应该从用户信息获取）
|
||||
const userPhone = '13800138000';
|
||||
|
||||
// 计算属性
|
||||
const maskedPhone = computed(() => {
|
||||
if (userPhone.length > 7) {
|
||||
return userPhone.slice(0, 3) + '****' + userPhone.slice(7);
|
||||
}
|
||||
return userPhone;
|
||||
});
|
||||
|
||||
const countdownText = computed(() => {
|
||||
if (countdown.value > 0) {
|
||||
return `${countdown.value}秒后重试`;
|
||||
}
|
||||
return '获取验证码';
|
||||
});
|
||||
|
||||
const isVerificationValid = computed(() => {
|
||||
return verificationCode.value.length === 6 && /^\d+$/.test(verificationCode.value);
|
||||
});
|
||||
|
||||
// 倒计时定时器
|
||||
let timer = null;
|
||||
|
||||
// 清理定时器
|
||||
onUnmounted(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
});
|
||||
|
||||
const getStatusClass = (status) => {
|
||||
const statusMap = {
|
||||
'成功': 'status-success',
|
||||
'失败': 'status-failed',
|
||||
'处理中': 'status-processing',
|
||||
};
|
||||
return statusMap[status] || '';
|
||||
};
|
||||
|
||||
const handleCopy = () => {
|
||||
message.success('身份证号已复制');
|
||||
};
|
||||
|
||||
// 显示变更确认对话框
|
||||
const showChangeConfirm = () => {
|
||||
// 重置确认状态
|
||||
isAgreeWarning.value = false;
|
||||
changeModalVisible.value = true;
|
||||
};
|
||||
|
||||
// 确认变更，打开身份验证对话框
|
||||
const handleConfirmChange = () => {
|
||||
if (!isAgreeWarning.value) {
|
||||
message.warning('请先确认已阅读并理解相关提示');
|
||||
return;
|
||||
}
|
||||
|
||||
// 关闭变更确认对话框
|
||||
changeModalVisible.value = false;
|
||||
|
||||
// 打开身份验证对话框
|
||||
showVerifyModal();
|
||||
};
|
||||
|
||||
// 取消变更
|
||||
const handleCancelChange = () => {
|
||||
changeModalVisible.value = false;
|
||||
isAgreeWarning.value = false;
|
||||
};
|
||||
|
||||
// 显示身份验证对话框
|
||||
const showVerifyModal = () => {
|
||||
// 重置验证状态
|
||||
verificationCode.value = '';
|
||||
codeError.value = '';
|
||||
sendStatus.value = '';
|
||||
verifyModalVisible.value = true;
|
||||
};
|
||||
|
||||
// 取消身份验证
|
||||
const handleCancelVerify = () => {
|
||||
verifyModalVisible.value = false;
|
||||
// 重置倒计时
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
}
|
||||
countdown.value = 0;
|
||||
};
|
||||
|
||||
// 验证码输入处理
|
||||
const handleCodeInput = (e) => {
|
||||
const value = e.target?.value || e;
|
||||
// 只允许数字
|
||||
const numbersOnly = value.replace(/\D/g, '');
|
||||
verificationCode.value = numbersOnly.slice(0, 6);
|
||||
|
||||
// 清除错误提示
|
||||
if (codeError.value) {
|
||||
codeError.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
// 发送验证码
|
||||
const sendVerificationCode = async () => {
|
||||
if (countdown.value > 0 || sendingCode.value) return;
|
||||
|
||||
sendingCode.value = true;
|
||||
sendStatus.value = '发送中...';
|
||||
codeError.value = '';
|
||||
|
||||
try {
|
||||
// 模拟API调用
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
// 假设发送成功
|
||||
sendStatus.value = '发送成功';
|
||||
countdown.value = 60;
|
||||
|
||||
// 开始倒计时
|
||||
timer = setInterval(() => {
|
||||
countdown.value--;
|
||||
if (countdown.value <= 0) {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
message.success('验证码已发送');
|
||||
} catch (error) {
|
||||
codeError.value = '发送失败，请稍后重试';
|
||||
sendStatus.value = '';
|
||||
} finally {
|
||||
sendingCode.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 执行验证
|
||||
const handleVerify = async () => {
|
||||
if (!isVerificationValid.value) {
|
||||
codeError.value = '请输入有效的6位验证码';
|
||||
return;
|
||||
}
|
||||
|
||||
verifying.value = true;
|
||||
|
||||
try {
|
||||
// 模拟API验证
|
||||
await new Promise(resolve => setTimeout(resolve, 1500));
|
||||
|
||||
// 假设验证成功
|
||||
message.success('身份验证成功');
|
||||
|
||||
// 关闭验证对话框
|
||||
verifyModalVisible.value = false;
|
||||
|
||||
// 执行实际的变更操作
|
||||
message.info('跳转至企业认证页面');
|
||||
|
||||
// 这里可以添加跳转逻辑或API调用
|
||||
// router.push('/enterprise-auth');
|
||||
|
||||
} catch (error) {
|
||||
codeError.value = '验证码错误，请重新输入';
|
||||
verificationCode.value = '';
|
||||
} finally {
|
||||
verifying.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
message.info('导出变更记录');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.real-name-auth {
|
||||
padding: 24px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background-color: #fafafa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 页面标题区域 */
|
||||
.page-title-area {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0 0 12px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.page-description {
|
||||
margin: 0;
|
||||
color: #8c8c8c;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.protocol-link {
|
||||
color: #1890ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.protocol-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 认证卡片 */
|
||||
.auth-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 卡片内容区域 - 左右布局 */
|
||||
.card-content {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/* 左侧信息区 */
|
||||
.info-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.auth-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 8px;
|
||||
background: #f6ffed;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #52c41a;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
color: #52c41a;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.auth-type {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
/* 信息网格 */
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: #595959cf;
|
||||
font-size: 16px;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #262626;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 右侧图片区 */
|
||||
.image-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 150px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.auth-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
object-fit: contain;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.card-actions {
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.card-actions .ant-btn {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 分割线 */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
/* 变更记录区域 */
|
||||
.record-section {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.section-actions .ant-btn-link {
|
||||
color: #1890ff;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.change-record-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.change-record-table :deep(.ant-table-thead > tr > th) {
|
||||
background: #fafafa;
|
||||
color: #595959;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 12px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.change-record-table :deep(.ant-table-tbody > tr > td) {
|
||||
padding: 12px 16px;
|
||||
font-size: 13px;
|
||||
color: #262626;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.change-record-table :deep(.ant-table-tbody > tr:hover > td) {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
/* 状态标签 */
|
||||
.status-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.status-success {
|
||||
background: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.status-failed {
|
||||
background: #fff2f0;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.status-processing {
|
||||
background: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
padding: 48px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 12px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
color: #bfbfbf;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 变更确认对话框样式 */
|
||||
.change-confirm-content {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.warning-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.warning-item {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
padding: 12px;
|
||||
background: #fff7e6;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid #faad14;
|
||||
}
|
||||
|
||||
.warning-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.warning-icon {
|
||||
font-size: 18px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
flex: 1;
|
||||
color: #262626;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.confirm-agreement {
|
||||
padding: 16px;
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.confirm-agreement :deep(.ant-checkbox-wrapper) {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
color: #595959;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* 身份验证对话框样式 */
|
||||
.verify-content {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.security-tip {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
background: #f6f9ff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e6f0ff;
|
||||
}
|
||||
|
||||
.security-icon {
|
||||
font-size: 20px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.security-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.security-title {
|
||||
color: #1890ff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.security-subtitle {
|
||||
color: #595959;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.phone-info {
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.phone-label {
|
||||
color: #595959;
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.phone-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.phone-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.phone-text {
|
||||
color: #262626;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.verification-code {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.code-label {
|
||||
color: #262626;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.code-input-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.code-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.code-input :deep(.ant-input) {
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.send-code-btn {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.send-code-btn:disabled {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
.code-error {
|
||||
color: #ff4d4f;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.send-status {
|
||||
color: #595959;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.send-success {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 768px) {
|
||||
.real-name-auth {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.image-right {
|
||||
width: 100%;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.auth-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.auth-card,
|
||||
.record-section {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.code-input-group {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.send-code-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -59,7 +59,7 @@
|
||||
|
||||
<!-- 操作区域 -->
|
||||
<div class="card-actions">
|
||||
<a-button type="primary" size="large" @click="handleChangeAuth">
|
||||
<a-button type="primary" size="large" @click="showChangeConfirm">
|
||||
变更为企业认证
|
||||
</a-button>
|
||||
</div>
|
||||
@ -93,12 +93,117 @@
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<!-- 变更确认对话框 -->
|
||||
<a-modal
|
||||
v-model:visible="changeModalVisible"
|
||||
title="确认变更认证类型"
|
||||
@ok="handleConfirmChange"
|
||||
@cancel="handleCancelChange"
|
||||
:maskClosable="false"
|
||||
:width="520"
|
||||
:ok-button-props="{ disabled: !isAgreeWarning }"
|
||||
>
|
||||
<div class="change-confirm-content">
|
||||
<!-- 警告提示 -->
|
||||
<div class="warning-section">
|
||||
<div class="warning-item">
|
||||
<span class="warning-icon">⚠️</span>
|
||||
<div class="warning-text">
|
||||
您正在进行个人实名认证变更为企业实名认证操作，变更后账号以及账号下资产将属于新的认证企业。
|
||||
</div>
|
||||
</div>
|
||||
<div class="warning-item">
|
||||
<span class="warning-icon">⚠️</span>
|
||||
<div class="warning-text">
|
||||
请知悉升级企业实名认证后，该账号将无法再变更回个人实名认证，请您谨慎操作。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 确认条款 -->
|
||||
<div class="confirm-agreement">
|
||||
<a-checkbox v-model:checked="isAgreeWarning">
|
||||
<span class="agreement-text">
|
||||
我已阅读并理解以上提示，确认继续变更
|
||||
</span>
|
||||
</a-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
<!-- 身份验证对话框 -->
|
||||
<a-modal
|
||||
v-model:visible="verifyModalVisible"
|
||||
title="身份验证"
|
||||
@ok="handleVerify"
|
||||
@cancel="handleCancelVerify"
|
||||
:maskClosable="false"
|
||||
:width="480"
|
||||
:ok-button-props="{ disabled: !isVerificationValid }"
|
||||
:confirmLoading="verifying"
|
||||
>
|
||||
<div class="verify-content">
|
||||
<!-- 安全提示 -->
|
||||
<div class="security-tip">
|
||||
<!-- <div class="security-icon">🔒</div> -->
|
||||
<div class="security-text">
|
||||
<div class="security-title">为确保账号安全，请您本人操作进行身份验证</div>
|
||||
<div class="security-subtitle">我们将向您绑定的手机发送验证码</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 手机号信息 -->
|
||||
<div class="phone-info">
|
||||
<div class="phone-label">验证手机号</div>
|
||||
<div class="phone-number">
|
||||
<!-- <span class="phone-icon">📱</span> -->
|
||||
<span class="phone-text">{{ maskedPhone }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 验证码输入 -->
|
||||
<div class="verification-code">
|
||||
<div class="code-label">验证码</div>
|
||||
<div class="code-input-group">
|
||||
<a-input
|
||||
v-model:value="verificationCode"
|
||||
placeholder="请输入6位验证码"
|
||||
:maxlength="6"
|
||||
@input="handleCodeInput"
|
||||
class="code-input"
|
||||
/>
|
||||
<a-button
|
||||
type="link"
|
||||
@click="sendVerificationCode"
|
||||
:disabled="countdown > 0 || sendingCode"
|
||||
class="send-code-btn"
|
||||
>
|
||||
{{ countdownText }}
|
||||
</a-button>
|
||||
</div>
|
||||
<div v-if="codeError" class="code-error">{{ codeError }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 发送状态 -->
|
||||
<div v-if="sendStatus" class="send-status" :class="{ 'send-success': sendStatus === '发送成功' }">
|
||||
{{ sendStatus }}
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { Button as AButton, Table as ATable, message } from 'ant-design-vue';
|
||||
import { ref, computed, onUnmounted } from 'vue';
|
||||
import {
|
||||
Button as AButton,
|
||||
Table as ATable,
|
||||
Modal as AModal,
|
||||
Checkbox as ACheckbox,
|
||||
Input as AInput,
|
||||
message
|
||||
} from 'ant-design-vue';
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
@ -147,6 +252,51 @@ const dataSource = ref([
|
||||
},
|
||||
]);
|
||||
|
||||
// 对话框状态
|
||||
const changeModalVisible = ref(false);
|
||||
const isAgreeWarning = ref(false);
|
||||
|
||||
// 身份验证相关状态
|
||||
const verifyModalVisible = ref(false);
|
||||
const verificationCode = ref('');
|
||||
const countdown = ref(0);
|
||||
const sendingCode = ref(false);
|
||||
const sendStatus = ref('');
|
||||
const codeError = ref('');
|
||||
const verifying = ref(false);
|
||||
|
||||
// 用户绑定的手机号（实际应该从用户信息获取）
|
||||
const userPhone = '13800138000';
|
||||
|
||||
// 计算属性
|
||||
const maskedPhone = computed(() => {
|
||||
if (userPhone.length > 7) {
|
||||
return userPhone.slice(0, 3) + '****' + userPhone.slice(7);
|
||||
}
|
||||
return userPhone;
|
||||
});
|
||||
|
||||
const countdownText = computed(() => {
|
||||
if (countdown.value > 0) {
|
||||
return `${countdown.value}秒后重试`;
|
||||
}
|
||||
return '获取验证码';
|
||||
});
|
||||
|
||||
const isVerificationValid = computed(() => {
|
||||
return verificationCode.value.length === 6 && /^\d+$/.test(verificationCode.value);
|
||||
});
|
||||
|
||||
// 倒计时定时器
|
||||
let timer = null;
|
||||
|
||||
// 清理定时器
|
||||
onUnmounted(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
});
|
||||
|
||||
const getStatusClass = (status) => {
|
||||
const statusMap = {
|
||||
'成功': 'status-success',
|
||||
@ -160,8 +310,131 @@ const handleCopy = () => {
|
||||
message.success('身份证号已复制');
|
||||
};
|
||||
|
||||
const handleChangeAuth = () => {
|
||||
// 显示变更确认对话框
|
||||
const showChangeConfirm = () => {
|
||||
// 重置确认状态
|
||||
isAgreeWarning.value = false;
|
||||
changeModalVisible.value = true;
|
||||
};
|
||||
|
||||
// 确认变更，打开身份验证对话框
|
||||
const handleConfirmChange = () => {
|
||||
if (!isAgreeWarning.value) {
|
||||
message.warning('请先确认已阅读并理解相关提示');
|
||||
return;
|
||||
}
|
||||
|
||||
// 关闭变更确认对话框
|
||||
changeModalVisible.value = false;
|
||||
|
||||
// 打开身份验证对话框
|
||||
showVerifyModal();
|
||||
};
|
||||
|
||||
// 取消变更
|
||||
const handleCancelChange = () => {
|
||||
changeModalVisible.value = false;
|
||||
isAgreeWarning.value = false;
|
||||
};
|
||||
|
||||
// 显示身份验证对话框
|
||||
const showVerifyModal = () => {
|
||||
// 重置验证状态
|
||||
verificationCode.value = '';
|
||||
codeError.value = '';
|
||||
sendStatus.value = '';
|
||||
verifyModalVisible.value = true;
|
||||
};
|
||||
|
||||
// 取消身份验证
|
||||
const handleCancelVerify = () => {
|
||||
verifyModalVisible.value = false;
|
||||
// 重置倒计时
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
}
|
||||
countdown.value = 0;
|
||||
};
|
||||
|
||||
// 验证码输入处理
|
||||
const handleCodeInput = (e) => {
|
||||
const value = e.target?.value || e;
|
||||
// 只允许数字
|
||||
const numbersOnly = value.replace(/\D/g, '');
|
||||
verificationCode.value = numbersOnly.slice(0, 6);
|
||||
|
||||
// 清除错误提示
|
||||
if (codeError.value) {
|
||||
codeError.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
// 发送验证码
|
||||
const sendVerificationCode = async () => {
|
||||
if (countdown.value > 0 || sendingCode.value) return;
|
||||
|
||||
sendingCode.value = true;
|
||||
sendStatus.value = '发送中...';
|
||||
codeError.value = '';
|
||||
|
||||
try {
|
||||
// 模拟API调用
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
// 假设发送成功
|
||||
sendStatus.value = '发送成功';
|
||||
countdown.value = 60;
|
||||
|
||||
// 开始倒计时
|
||||
timer = setInterval(() => {
|
||||
countdown.value--;
|
||||
if (countdown.value <= 0) {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
message.success('验证码已发送');
|
||||
} catch (error) {
|
||||
codeError.value = '发送失败，请稍后重试';
|
||||
sendStatus.value = '';
|
||||
} finally {
|
||||
sendingCode.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 执行验证
|
||||
const handleVerify = async () => {
|
||||
if (!isVerificationValid.value) {
|
||||
codeError.value = '请输入有效的6位验证码';
|
||||
return;
|
||||
}
|
||||
|
||||
verifying.value = true;
|
||||
|
||||
try {
|
||||
// 模拟API验证
|
||||
await new Promise(resolve => setTimeout(resolve, 1500));
|
||||
|
||||
// 假设验证成功
|
||||
message.success('身份验证成功');
|
||||
|
||||
// 关闭验证对话框
|
||||
verifyModalVisible.value = false;
|
||||
|
||||
// 执行实际的变更操作
|
||||
message.info('跳转至企业认证页面');
|
||||
|
||||
// 这里可以添加跳转逻辑或API调用
|
||||
// router.push('/enterprise-auth');
|
||||
|
||||
} catch (error) {
|
||||
codeError.value = '验证码错误，请重新输入';
|
||||
verificationCode.value = '';
|
||||
} finally {
|
||||
verifying.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
@ -258,7 +531,7 @@ const handleExport = () => {
|
||||
|
||||
.auth-type {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
}
|
||||
@ -277,14 +550,14 @@ const handleExport = () => {
|
||||
|
||||
.info-label {
|
||||
color: #595959cf;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #262626;
|
||||
font-size: 14px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -422,6 +695,184 @@ const handleExport = () => {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 变更确认对话框样式 */
|
||||
.change-confirm-content {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.warning-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.warning-item {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
padding: 12px;
|
||||
background: #fff7e6;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid #faad14;
|
||||
}
|
||||
|
||||
.warning-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.warning-icon {
|
||||
font-size: 18px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
flex: 1;
|
||||
color: #262626;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.confirm-agreement {
|
||||
padding: 16px;
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.confirm-agreement :deep(.ant-checkbox-wrapper) {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
color: #595959;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* 身份验证对话框样式 */
|
||||
.verify-content {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.security-tip {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
background: #f6f9ff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e6f0ff;
|
||||
}
|
||||
|
||||
.security-icon {
|
||||
font-size: 20px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.security-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.security-title {
|
||||
color: #1890ff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.security-subtitle {
|
||||
color: #595959;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.phone-info {
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.phone-label {
|
||||
color: #595959;
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.phone-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.phone-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.phone-text {
|
||||
color: #262626;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.verification-code {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.code-label {
|
||||
color: #262626;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.code-input-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.code-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.code-input :deep(.ant-input) {
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.send-code-btn {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.send-code-btn:disabled {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
.code-error {
|
||||
color: #ff4d4f;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.send-status {
|
||||
color: #595959;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.send-success {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 768px) {
|
||||
.real-name-auth {
|
||||
@ -452,5 +903,14 @@ const handleExport = () => {
|
||||
.record-section {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.code-input-group {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.send-code-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user