306 行
13 KiB
HTML
306 行
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; }
|
|
.detail-section { margin-bottom: 20px; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
|
|
.detail-section-title { font-size: 16px; font-weight: bold; color: #303133; margin-bottom: 15px; padding-left: 10px; border-left: 4px solid #409EFF; }
|
|
.detail-item { display: flex; margin-bottom: 12px; }
|
|
.detail-label { width: 120px; color: #606266; font-weight: 500; }
|
|
.detail-value { flex: 1; color: #303133; }
|
|
.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; }
|
|
.avatar-display { width: 100px; height: 100px; border-radius: 8px; object-fit: cover; }
|
|
.rating-display { color: #ff9900; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="RiderDetailApp" v-cloak>
|
|
<div v-loading="loading">
|
|
<!-- 基本信息 -->
|
|
<div class="detail-section">
|
|
<div class="detail-section-title">基本信息</div>
|
|
<el-row :gutter="20">
|
|
<el-col :span="16">
|
|
<div class="detail-item">
|
|
<div class="detail-label">骑手姓名：</div>
|
|
<div class="detail-value">{{ riderInfo.rider_name || '-' }}</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">手机号：</div>
|
|
<div class="detail-value">{{ riderInfo.rider_phone || '-' }}</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">身份证号：</div>
|
|
<div class="detail-value">{{ riderInfo.id_card || '-' }}</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">工作状态：</div>
|
|
<div class="detail-value">
|
|
<span :class="getWorkStatusClass(riderInfo.work_status)">
|
|
{{ getWorkStatusText(riderInfo.work_status) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">账户状态：</div>
|
|
<div class="detail-value">
|
|
<span :class="riderInfo.status == 1 ? 'status-tag status-active' : 'status-tag status-inactive'">
|
|
{{ riderInfo.status == 1 ? '启用' : '禁用' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8" style="text-align: center;">
|
|
<img v-if="riderInfo.rider_avatar" :src="riderInfo.rider_avatar" class="avatar-display" alt="骑手头像">
|
|
<div v-else style="width: 100px; height: 100px; background: #f5f7fa; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #c0c4cc;">
|
|
<i class="el-icon-user" style="font-size: 40px;"></i>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<!-- 财务信息 -->
|
|
<div class="detail-section">
|
|
<div class="detail-section-title">财务信息</div>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<div class="detail-item">
|
|
<div class="detail-label">账户余额：</div>
|
|
<div class="detail-value">¥{{ riderInfo.balance }}</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">冻结金额：</div>
|
|
<div class="detail-value">¥{{ riderInfo.frozen_balance }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="detail-item">
|
|
<div class="detail-label">评分：</div>
|
|
<div class="detail-value rating-display">
|
|
<el-rate v-model="riderInfo.rating" disabled show-score text-color="#ff9900" score-template="{value}分"></el-rate>
|
|
</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">准时率：</div>
|
|
<div class="detail-value">{{ riderInfo.on_time_rate }}%</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<!-- 紧急联系人 -->
|
|
<div class="detail-section">
|
|
<div class="detail-section-title">紧急联系人</div>
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<div class="detail-item">
|
|
<div class="detail-label">联系人姓名：</div>
|
|
<div class="detail-value">{{ riderInfo.emergency_name || '-' }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div class="detail-item">
|
|
<div class="detail-label">联系人电话：</div>
|
|
<div class="detail-value">{{ riderInfo.emergency_phone || '-' }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div class="detail-item">
|
|
<div class="detail-label">关系：</div>
|
|
<div class="detail-value">{{ riderInfo.emergency_relation || '-' }}</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<!-- 认证信息 -->
|
|
<div class="detail-section">
|
|
<div class="detail-section-title">认证信息</div>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<div class="detail-item">
|
|
<div class="detail-label">认证状态：</div>
|
|
<div class="detail-value">
|
|
<span :class="getAuthStatusClass(riderInfo.auth_status)">
|
|
{{ getAuthStatusText(riderInfo.auth_status) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">健康证状态：</div>
|
|
<div class="detail-value">
|
|
<span :class="getHealthStatusClass(riderInfo.health_status)">
|
|
{{ getHealthStatusText(riderInfo.health_status) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">健康证过期时间：</div>
|
|
<div class="detail-value">{{ riderInfo.health_cert_expire || '-' }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="detail-item">
|
|
<div class="detail-label">认证备注：</div>
|
|
<div class="detail-value">{{ riderInfo.auth_remark || '-' }}</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">健康证备注：</div>
|
|
<div class="detail-value">{{ riderInfo.health_remark || '-' }}</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<!-- 位置信息 -->
|
|
<div class="detail-section">
|
|
<div class="detail-section-title">位置信息</div>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<div class="detail-item">
|
|
<div class="detail-label">最后位置纬度：</div>
|
|
<div class="detail-value">{{ riderInfo.last_location_lat || '-' }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="detail-item">
|
|
<div class="detail-label">最后位置经度：</div>
|
|
<div class="detail-value">{{ riderInfo.last_location_lng || '-' }}</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<!-- 时间信息 -->
|
|
<div class="detail-section">
|
|
<div class="detail-section-title">时间信息</div>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<div class="detail-item">
|
|
<div class="detail-label">注册时间：</div>
|
|
<div class="detail-value">{{ riderInfo.create_time || '-' }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="detail-item">
|
|
<div class="detail-label">最后更新：</div>
|
|
<div class="detail-value">{{ riderInfo.update_time || '-' }}</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#RiderDetailApp',
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
riderInfo: {}
|
|
}
|
|
},
|
|
mounted() {
|
|
// 获取URL参数中的骑手ID
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const riderId = urlParams.get('id');
|
|
if (riderId) {
|
|
this.loadRiderDetail(riderId);
|
|
}
|
|
},
|
|
methods: {
|
|
async loadRiderDetail(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, rating: +response.data.rating || 0 };
|
|
} else {
|
|
this.$message.error(response.message || '获取骑手详情失败');
|
|
}
|
|
} catch (error) {
|
|
this.$message.error('网络错误，请重试');
|
|
console.error('获取骑手详情异常:', error);
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
getWorkStatusText(status) {
|
|
const statusMap = {
|
|
0: '休息中',
|
|
1: '工作中',
|
|
2: '暂停接单'
|
|
};
|
|
return statusMap[+status] || '未知';
|
|
},
|
|
|
|
getWorkStatusClass(status) {
|
|
const classMap = {
|
|
0: 'status-tag status-inactive',
|
|
1: 'status-tag status-active',
|
|
2: 'status-tag status-pending'
|
|
};
|
|
return classMap[+status] || 'status-tag';
|
|
},
|
|
|
|
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';
|
|
},
|
|
|
|
getHealthStatusText(status) {
|
|
const statusMap = {
|
|
0: '未上传',
|
|
1: '已上传',
|
|
2: '已过期'
|
|
};
|
|
return statusMap[+status] || '未知';
|
|
},
|
|
|
|
getHealthStatusClass(status) {
|
|
const classMap = {
|
|
0: 'status-tag status-pending',
|
|
1: 'status-tag status-active',
|
|
2: 'status-tag status-inactive'
|
|
};
|
|
return classMap[+status] || 'status-tag';
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |