296 行
13 KiB
HTML
296 行
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>认证状态审核</title>
|
|
<link rel="stylesheet" type="text/css" href="__PUBLIC__/layui-v2.4.3/layui/css/layui.css"/>
|
|
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.css?v=2.13.2">
|
|
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
|
|
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.js?v=2.13.2"></script>
|
|
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
|
|
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/layui-v2.4.3/layui/layui.js"></script>
|
|
<style>
|
|
body { margin: 0; padding: 20px; background: #f5f7fa; }
|
|
.review-section { margin-bottom: 20px; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
|
|
.review-section-title { font-size: 16px; font-weight: bold; color: #303133; margin-bottom: 15px; padding-left: 10px; border-left: 4px solid #409EFF; }
|
|
.rider-info { display: flex; margin-bottom: 20px; }
|
|
.rider-avatar { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; margin-right: 20px; }
|
|
.rider-details { flex: 1; }
|
|
.rider-name { font-size: 18px; font-weight: bold; color: #303133; margin-bottom: 8px; }
|
|
.rider-phone { color: #606266; margin-bottom: 4px; }
|
|
.rider-id { color: #909399; font-size: 14px; }
|
|
.cert-images { display: flex; gap: 20px; margin-bottom: 20px; }
|
|
.cert-image { width: 200px; height: 120px; border: 1px solid #dcdfe6; border-radius: 8px; object-fit: cover; cursor: pointer; }
|
|
.cert-image:hover { border-color: #409EFF; }
|
|
.cert-label { text-align: center; margin-top: 8px; color: #606266; font-size: 14px; }
|
|
.status-tag { padding: 2px 8px; border-radius: 4px; font-size: 12px; }
|
|
.status-active { background: #f0f9ff; color: #1890ff; }
|
|
.status-inactive { background: #fff2f0; color: #ff4d4f; }
|
|
.status-pending { background: #fffbe6; color: #faad14; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="AuthReviewApp" v-cloak>
|
|
<div v-loading="loading">
|
|
<!-- 骑手基本信息 -->
|
|
<div class="review-section">
|
|
<div class="review-section-title">骑手基本信息</div>
|
|
<div class="rider-info">
|
|
<img v-if="riderInfo.rider_avatar" :src="riderInfo.rider_avatar" class="rider-avatar" alt="骑手头像">
|
|
<div v-else style="width: 80px; height: 80px; background: #f5f7fa; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #c0c4cc; margin-right: 20px;">
|
|
<i class="el-icon-user" style="font-size: 32px;"></i>
|
|
</div>
|
|
<div class="rider-details">
|
|
<div class="rider-name">{{ riderInfo.rider_name }}</div>
|
|
<div class="rider-phone">手机号：{{ riderInfo.rider_phone }}</div>
|
|
<div class="rider-id">身份证号：{{ riderInfo.id_card }}</div>
|
|
<div style="margin-top: 8px;">
|
|
<span>当前认证状态：</span>
|
|
<span :class="getAuthStatusClass(riderInfo.auth_status)">
|
|
{{ getAuthStatusText(riderInfo.auth_status) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 认证材料 -->
|
|
<div class="review-section">
|
|
<div class="review-section-title">认证材料</div>
|
|
<div class="cert-images">
|
|
<div v-if="riderInfo.id_card_front">
|
|
<img :src="riderInfo.id_card_front" class="cert-image" @click="previewImage(riderInfo.id_card_front)" alt="身份证正面">
|
|
<div class="cert-label">身份证正面</div>
|
|
</div>
|
|
<div v-if="riderInfo.id_card_back">
|
|
<img :src="riderInfo.id_card_back" class="cert-image" @click="previewImage(riderInfo.id_card_back)" alt="身份证反面">
|
|
<div class="cert-label">身份证反面</div>
|
|
</div>
|
|
<div v-if="riderInfo.health_cert">
|
|
<img :src="riderInfo.health_cert" class="cert-image" @click="previewImage(riderInfo.health_cert)" alt="健康证">
|
|
<div class="cert-label">健康证</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="!riderInfo.id_card_front && !riderInfo.id_card_back && !riderInfo.health_cert" style="text-align: center; color: #909399; padding: 40px;">
|
|
暂无认证材料
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 审核表单 -->
|
|
<div class="review-section">
|
|
<div class="review-section-title">审核操作</div>
|
|
<el-form :model="reviewForm" :rules="reviewRules" ref="reviewForm" label-width="120px">
|
|
<el-form-item label="认证状态" prop="auth_status">
|
|
<el-radio-group v-model="reviewForm.auth_status">
|
|
<el-radio :label="'0'">未认证</el-radio>
|
|
<el-radio :label="'1'">待审核</el-radio>
|
|
<el-radio :label="'2'">已认证</el-radio>
|
|
<el-radio :label="'3'">认证失败</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="健康证状态" prop="health_status">
|
|
<el-radio-group v-model="reviewForm.health_status">
|
|
<el-radio :label="'0'">待审核</el-radio>
|
|
<el-radio :label="'1'">已通过</el-radio>
|
|
<el-radio :label="'2'">已拒绝</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="健康证过期时间" prop="health_cert_expire" v-if="reviewForm.health_status === 1">
|
|
<el-date-picker
|
|
v-model="reviewForm.health_cert_expire"
|
|
type="date"
|
|
placeholder="选择过期日期"
|
|
style="width: 100%">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="认证备注" prop="auth_remark">
|
|
<el-input
|
|
v-model="reviewForm.auth_remark"
|
|
type="textarea"
|
|
:rows="3"
|
|
placeholder="请输入审核备注（必填）"
|
|
maxlength="255"
|
|
show-word-limit>
|
|
</el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="健康证备注" prop="health_remark">
|
|
<el-input
|
|
v-model="reviewForm.health_remark"
|
|
type="textarea"
|
|
:rows="2"
|
|
placeholder="请输入健康证备注"
|
|
maxlength="255"
|
|
show-word-limit>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<!-- 操作按钮 -->
|
|
<div style="text-align: center; margin-top: 30px;">
|
|
<el-button @click="resetForm">重 置</el-button>
|
|
<el-button type="primary" @click="submitReview" :loading="submitting">提交审核</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 图片预览对话框 -->
|
|
<el-dialog :visible.sync="imagePreviewVisible" width="60%" center>
|
|
<img :src="previewImageUrl" style="width: 100%; height: auto;" alt="预览图片">
|
|
</el-dialog>
|
|
</div>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#AuthReviewApp',
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
submitting: false,
|
|
imagePreviewVisible: false,
|
|
previewImageUrl: '',
|
|
riderInfo: {},
|
|
reviewForm: {
|
|
id: null,
|
|
auth_status: 1,
|
|
health_status: 1,
|
|
health_cert_expire: '',
|
|
auth_remark: '',
|
|
health_remark: ''
|
|
},
|
|
reviewRules: {
|
|
auth_status: [
|
|
{ required: true, message: '请选择认证状态', trigger: 'change' }
|
|
],
|
|
health_status: [
|
|
{ required: true, message: '请选择健康证状态', trigger: 'change' }
|
|
],
|
|
health_cert_expire: [
|
|
{ required: true, message: '请选择健康证过期时间', trigger: 'change' }
|
|
],
|
|
auth_remark: [
|
|
{ required: true, message: '请输入审核备注', trigger: 'blur' },
|
|
{ min: 5, max: 255, message: '备注长度在5到255个字符', trigger: 'blur' }
|
|
],
|
|
health_remark: [
|
|
{ max: 255, message: '健康证备注不能超过255个字符', trigger: 'blur' }
|
|
]
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
// 获取URL参数中的骑手ID
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const riderId = urlParams.get('id');
|
|
if (riderId) {
|
|
this.reviewForm.id = riderId;
|
|
this.loadRiderInfo(riderId);
|
|
}
|
|
},
|
|
methods: {
|
|
async loadRiderInfo(id) {
|
|
this.loading = true;
|
|
try {
|
|
const response = await $.ajax({
|
|
url: '/Retail/Rider/getRiderInfo',
|
|
type: 'POST',
|
|
data: { id: id },
|
|
dataType: 'json'
|
|
});
|
|
|
|
if (response.code === 1) {
|
|
this.riderInfo = response.data;
|
|
// 初始化表单数据
|
|
this.reviewForm.auth_status = this.riderInfo.auth_status || 1;
|
|
this.reviewForm.health_status = this.riderInfo.health_status || 1;
|
|
this.reviewForm.health_cert_expire = this.riderInfo.health_cert_expire || '';
|
|
this.reviewForm.auth_remark = this.riderInfo.auth_remark || '';
|
|
this.reviewForm.health_remark = this.riderInfo.health_remark || '';
|
|
} else {
|
|
this.$message.error(response.message || '获取骑手信息失败');
|
|
}
|
|
} catch (error) {
|
|
this.$message.error('网络错误，请重试');
|
|
console.error('获取骑手信息异常:', error);
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
previewImage(imageUrl) {
|
|
this.previewImageUrl = imageUrl;
|
|
this.imagePreviewVisible = true;
|
|
},
|
|
|
|
async submitReview() {
|
|
this.$refs.reviewForm.validate(async (valid) => {
|
|
if (!valid) return;
|
|
|
|
this.submitting = true;
|
|
try {
|
|
const response = await $.ajax({
|
|
url: '/Retail/Rider/updateAuthStatus',
|
|
type: 'POST',
|
|
data: this.reviewForm,
|
|
dataType: 'json'
|
|
});
|
|
|
|
if (response.code === 1) {
|
|
this.$message.success('审核提交成功');
|
|
// 通知父窗口刷新
|
|
if (parent && parent.layer) {
|
|
parent.layer.closeAll();
|
|
if (parent.vm && parent.vm.loadRiders) {
|
|
parent.vm.loadRiders();
|
|
parent.vm.loadStatistics();
|
|
}
|
|
}
|
|
} else {
|
|
this.$message.error(response.message || '审核提交失败');
|
|
}
|
|
} catch (error) {
|
|
this.$message.error('网络错误，请重试');
|
|
console.error('提交审核异常:', error);
|
|
} finally {
|
|
this.submitting = false;
|
|
}
|
|
});
|
|
},
|
|
|
|
resetForm() {
|
|
this.$refs.reviewForm.resetFields();
|
|
// 重置为初始状态
|
|
this.reviewForm.auth_status = this.riderInfo.auth_status || 1;
|
|
this.reviewForm.health_status = this.riderInfo.health_status || 1;
|
|
this.reviewForm.health_cert_expire = this.riderInfo.health_cert_expire || '';
|
|
this.reviewForm.auth_remark = this.riderInfo.auth_remark || '';
|
|
this.reviewForm.health_remark = this.riderInfo.health_remark || '';
|
|
},
|
|
|
|
getAuthStatusText(status) {
|
|
const statusMap = {
|
|
0: '未认证',
|
|
1: '待审核',
|
|
2: '已认证',
|
|
3: '认证失败'
|
|
};
|
|
return statusMap[status] || '未知';
|
|
},
|
|
|
|
getAuthStatusClass(status) {
|
|
const classMap = {
|
|
0: 'status-tag status-inactive',
|
|
1: 'status-tag status-pending',
|
|
2: 'status-tag status-active',
|
|
3: 'status-tag status-inactive'
|
|
};
|
|
return classMap[status] || 'status-tag';
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |