576 行
21 KiB
HTML
576 行
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>认证审核</title>
|
|
<link rel="stylesheet" href="/Public/vue/element-ui/lib/theme-chalk/index.css">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f5f7fa;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
|
|
.page-container {
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.page-header {
|
|
background: white;
|
|
padding: 20px 30px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
margin: 0;
|
|
}
|
|
|
|
.back-btn {
|
|
color: #409eff;
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.back-btn:hover {
|
|
color: #66b1ff;
|
|
}
|
|
|
|
.auth-container {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.rider-info-section {
|
|
background: #f8f9fa;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin-bottom: 30px;
|
|
border-left: 4px solid #409eff;
|
|
}
|
|
|
|
.rider-info-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.rider-info-title i {
|
|
margin-right: 8px;
|
|
color: #409eff;
|
|
}
|
|
|
|
.rider-basic-info {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.info-label {
|
|
font-weight: 600;
|
|
color: #606266;
|
|
margin-right: 10px;
|
|
min-width: 80px;
|
|
}
|
|
|
|
.info-value {
|
|
color: #303133;
|
|
}
|
|
|
|
.cert-section {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid #e4e7ed;
|
|
}
|
|
|
|
.section-title i {
|
|
margin-right: 8px;
|
|
color: #409eff;
|
|
}
|
|
|
|
.cert-images {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.cert-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.cert-label {
|
|
font-weight: 600;
|
|
color: #606266;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.cert-image {
|
|
border: 2px solid #e4e7ed;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: #f8f9fa;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 150px;
|
|
}
|
|
|
|
.no-image {
|
|
color: #909399;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.health-cert-section {
|
|
background: #f0f9ff;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
border: 1px solid #b3d8ff;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.health-cert-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.expire-info {
|
|
color: #606266;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-actions {
|
|
text-align: center;
|
|
padding-top: 30px;
|
|
border-top: 1px solid #ebeef5;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.page-container {
|
|
padding: 10px;
|
|
}
|
|
|
|
.auth-container {
|
|
padding: 20px;
|
|
}
|
|
|
|
.cert-images {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.rider-basic-info {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="page-container">
|
|
<!-- 页面头部 -->
|
|
<div class="page-header">
|
|
<h1 class="page-title">实名认证审核</h1>
|
|
<a href="index.html" class="back-btn">
|
|
<i class="el-icon-arrow-left"></i>
|
|
返回列表
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 认证审核容器 -->
|
|
<div class="auth-container" v-if="riderInfo">
|
|
<!-- 骑手基本信息 -->
|
|
<div class="rider-info-section">
|
|
<div class="rider-info-title">
|
|
<i class="el-icon-user"></i>
|
|
骑手基本信息
|
|
</div>
|
|
<div class="rider-basic-info">
|
|
<div class="info-item">
|
|
<div class="info-label">姓名:</div>
|
|
<div class="info-value">{{ riderInfo.rider_name }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">手机号:</div>
|
|
<div class="info-value">{{ riderInfo.rider_phone }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">身份证号:</div>
|
|
<div class="info-value">{{ riderInfo.id_card }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">当前状态:</div>
|
|
<div class="info-value">
|
|
<div class="status-indicator">
|
|
<el-tag :type="getCertificationTagType(riderInfo.auth_status)" size="small">
|
|
{{ getCertificationText(riderInfo.auth_status) }}
|
|
</el-tag>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 身份证照片 -->
|
|
<div class="cert-section">
|
|
<div class="section-title">
|
|
<i class="el-icon-postcard"></i>
|
|
身份证照片
|
|
</div>
|
|
<div class="cert-images">
|
|
<div class="cert-item">
|
|
<div class="cert-label">身份证正面</div>
|
|
<div class="cert-image">
|
|
<el-image
|
|
v-if="riderInfo.id_card_front"
|
|
:src="riderInfo.id_card_front"
|
|
style="width: 100%; height: 150px;"
|
|
fit="cover"
|
|
:preview-src-list="[riderInfo.id_card_front]">
|
|
</el-image>
|
|
<div v-else class="no-image">未上传</div>
|
|
</div>
|
|
</div>
|
|
<div class="cert-item">
|
|
<div class="cert-label">身份证反面</div>
|
|
<div class="cert-image">
|
|
<el-image
|
|
v-if="riderInfo.id_card_back"
|
|
:src="riderInfo.id_card_back"
|
|
style="width: 100%; height: 150px;"
|
|
fit="cover"
|
|
:preview-src-list="[riderInfo.id_card_back]">
|
|
</el-image>
|
|
<div v-else class="no-image">未上传</div>
|
|
</div>
|
|
</div>
|
|
<div class="cert-item">
|
|
<div class="cert-label">手持身份证</div>
|
|
<div class="cert-image">
|
|
<el-image
|
|
v-if="riderInfo.handheld_photo"
|
|
:src="riderInfo.handheld_photo"
|
|
style="width: 100%; height: 150px;"
|
|
fit="cover"
|
|
:preview-src-list="[riderInfo.handheld_photo]">
|
|
</el-image>
|
|
<div v-else class="no-image">未上传</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 健康证 -->
|
|
<div class="cert-section">
|
|
<div class="section-title">
|
|
<i class="el-icon-document-checked"></i>
|
|
健康证
|
|
</div>
|
|
<div class="health-cert-section">
|
|
<div class="health-cert-info">
|
|
<div v-if="riderInfo.health_cert" style="flex: 1;">
|
|
<el-image
|
|
:src="riderInfo.health_cert"
|
|
style="width: 200px; height: 120px;"
|
|
fit="cover"
|
|
:preview-src-list="[riderInfo.health_cert]">
|
|
</el-image>
|
|
</div>
|
|
<div v-else class="no-image" style="flex: 1; text-align: center; padding: 40px;">
|
|
未上传健康证
|
|
</div>
|
|
<div style="flex: 1;">
|
|
<div class="expire-info">
|
|
<strong>有效期：</strong>{{ riderInfo.health_cert_expire || '未设置' }}
|
|
</div>
|
|
<div class="expire-info" style="margin-top: 10px;">
|
|
<strong>健康证状态：</strong>
|
|
<el-tag :type="getHealthStatusTagType(riderInfo.health_status)" size="small">
|
|
{{ getHealthStatusText(riderInfo.health_status) }}
|
|
</el-tag>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 审核表单 -->
|
|
<el-form :model="authForm" :rules="authRules" ref="authForm" label-width="120px">
|
|
<div class="section-title">
|
|
<i class="el-icon-edit"></i>
|
|
审核操作
|
|
</div>
|
|
|
|
<el-form-item label="认证状态" prop="authStatus">
|
|
<el-radio-group v-model="authForm.authStatus">
|
|
<el-radio :label="2">
|
|
<i class="el-icon-check" style="color: #67c23a;"></i>
|
|
通过认证
|
|
</el-radio>
|
|
<el-radio :label="3">
|
|
<i class="el-icon-close" style="color: #f56c6c;"></i>
|
|
认证失败
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="健康证状态" prop="healthStatus">
|
|
<el-radio-group v-model="authForm.healthStatus">
|
|
<el-radio :label="1">
|
|
<i class="el-icon-check" style="color: #67c23a;"></i>
|
|
健康证通过
|
|
</el-radio>
|
|
<el-radio :label="2">
|
|
<i class="el-icon-close" style="color: #f56c6c;"></i>
|
|
健康证拒绝
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="认证备注" prop="authRemark">
|
|
<el-input
|
|
type="textarea"
|
|
v-model="authForm.authRemark"
|
|
:rows="4"
|
|
placeholder="请输入审核备注信息，如认证失败请详细说明原因"
|
|
maxlength="255"
|
|
show-word-limit>
|
|
</el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="健康证备注" prop="healthRemark">
|
|
<el-input
|
|
type="textarea"
|
|
v-model="authForm.healthRemark"
|
|
:rows="3"
|
|
placeholder="请输入健康证审核备注"
|
|
maxlength="255"
|
|
show-word-limit>
|
|
</el-input>
|
|
</el-form-item>
|
|
|
|
<!-- 操作按钮 -->
|
|
<div class="form-actions">
|
|
<el-button size="large" @click="goBack">取 消</el-button>
|
|
<el-button type="primary" size="large" @click="submitAuth" :loading="saving">提交审核</el-button>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
|
|
<!-- 加载状态 -->
|
|
<div v-else style="text-align: center; padding: 50px;">
|
|
<el-loading-spinner></el-loading-spinner>
|
|
<p style="margin-top: 20px; color: #909399;">加载中...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/Public/vue/vue.min.js"></script>
|
|
<script src="/Public/vue/element-ui/lib/index.js"></script>
|
|
<script src="/Public/jquery/js/jquery.min.js"></script>
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
riderInfo: null,
|
|
saving: false,
|
|
authForm: {
|
|
riderId: null,
|
|
authStatus: 2,
|
|
healthStatus: 1,
|
|
authRemark: '',
|
|
healthRemark: ''
|
|
},
|
|
authRules: {
|
|
authStatus: [
|
|
{ required: true, message: '请选择认证状态', trigger: 'change' }
|
|
],
|
|
healthStatus: [
|
|
{ required: true, message: '请选择健康证状态', trigger: 'change' }
|
|
],
|
|
authRemark: [
|
|
{ max: 255, message: '认证备注不能超过255个字符', trigger: 'blur' }
|
|
],
|
|
healthRemark: [
|
|
{ max: 255, message: '健康证备注不能超过255个字符', trigger: 'blur' }
|
|
]
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.loadRiderInfo();
|
|
},
|
|
methods: {
|
|
// 加载骑手信息
|
|
async loadRiderInfo() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const riderId = urlParams.get('id');
|
|
|
|
if (!riderId) {
|
|
this.$message.error('缺少骑手ID参数');
|
|
this.goBack();
|
|
return;
|
|
}
|
|
|
|
this.authForm.riderId = riderId;
|
|
|
|
try {
|
|
const response = await $.ajax({
|
|
url: '/Retail/Rider/getRiderInfo',
|
|
type: 'POST',
|
|
data: { id: riderId },
|
|
dataType: 'json'
|
|
});
|
|
|
|
if (response.code === 1) {
|
|
this.riderInfo = response.data;
|
|
// 初始化表单数据
|
|
this.authForm.authStatus = this.riderInfo.auth_status || 2;
|
|
this.authForm.healthStatus = this.riderInfo.health_status || 1;
|
|
this.authForm.authRemark = this.riderInfo.auth_remark || '';
|
|
this.authForm.healthRemark = this.riderInfo.health_remark || '';
|
|
} else {
|
|
this.$message.error(response.message || '获取骑手信息失败');
|
|
this.goBack();
|
|
}
|
|
} catch (error) {
|
|
this.$message.error('网络错误，请重试');
|
|
console.error('获取骑手信息异常:', error);
|
|
this.goBack();
|
|
}
|
|
},
|
|
|
|
// 提交审核
|
|
submitAuth() {
|
|
this.$refs.authForm.validate(async (valid) => {
|
|
if (!valid) return;
|
|
|
|
await this.confirmAuth();
|
|
});
|
|
},
|
|
|
|
async confirmAuth() {
|
|
this.saving = true;
|
|
try {
|
|
const response = await $.ajax({
|
|
url: '/Retail/Rider/updateAuthStatus',
|
|
type: 'POST',
|
|
data: {
|
|
id: this.authForm.riderId,
|
|
auth_status: this.authForm.authStatus,
|
|
health_status: this.authForm.healthStatus,
|
|
auth_remark: this.authForm.authRemark,
|
|
health_remark: this.authForm.healthRemark
|
|
},
|
|
dataType: 'json'
|
|
});
|
|
|
|
if (response.code === 1) {
|
|
this.$message.success('审核提交成功');
|
|
setTimeout(() => {
|
|
this.goBack();
|
|
}, 1500);
|
|
} else {
|
|
this.$message.error(response.message || '审核提交失败');
|
|
}
|
|
} catch (error) {
|
|
this.$message.error('网络错误，请重试');
|
|
console.error('提交审核异常:', error);
|
|
} finally {
|
|
this.saving = false;
|
|
}
|
|
},
|
|
|
|
// 获取认证状态标签类型
|
|
getCertificationTagType(status) {
|
|
const statusMap = {
|
|
0: 'info', // 未认证
|
|
1: 'warning', // 待审核
|
|
2: 'success', // 已认证
|
|
3: 'danger' // 认证失败
|
|
};
|
|
return statusMap[status] || 'info';
|
|
},
|
|
|
|
// 获取认证状态文本
|
|
getCertificationText(status) {
|
|
const statusMap = {
|
|
0: '未认证',
|
|
1: '待审核',
|
|
2: '已认证',
|
|
3: '认证失败'
|
|
};
|
|
return statusMap[status] || '未知';
|
|
},
|
|
|
|
// 获取健康证状态标签类型
|
|
getHealthStatusTagType(status) {
|
|
const statusMap = {
|
|
0: 'warning', // 待审核
|
|
1: 'success', // 已通过
|
|
2: 'danger' // 已拒绝
|
|
};
|
|
return statusMap[status] || 'info';
|
|
},
|
|
|
|
// 获取健康证状态文本
|
|
getHealthStatusText(status) {
|
|
const statusMap = {
|
|
0: '待审核',
|
|
1: '已通过',
|
|
2: '已拒绝'
|
|
};
|
|
return statusMap[status] || '未知';
|
|
},
|
|
|
|
// 返回列表页
|
|
goBack() {
|
|
window.location.href = 'index.html';
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |