555 行
15 KiB
HTML
555 行
15 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>提现详情</title>
|
|
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/menu.css?v=1.0.5"/>
|
|
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/minimal-admin.css?v=1.0.0"/>
|
|
<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>
|
|
</head>
|
|
<body>
|
|
<div id="WithdrawDetail" v-cloak>
|
|
<div class="page-header">
|
|
<div class="header-content">
|
|
<div class="header-left">
|
|
<h1 class="page-title">
|
|
<i class="el-icon-wallet"></i>
|
|
提现详情
|
|
</h1>
|
|
<p class="page-subtitle">骑手提现申请详细信息</p>
|
|
</div>
|
|
<div class="header-right" v-if="withdrawData">
|
|
<el-tag :type="getStatusType(withdrawData.status)" size="large" class="status-tag">
|
|
<i :class="getStatusIcon(withdrawData.status)"></i>
|
|
{{ getStatusText(withdrawData.status) }}
|
|
</el-tag>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page-content" v-loading="loading">
|
|
<div v-if="withdrawData" class="detail-container">
|
|
<!-- 金额信息卡片 -->
|
|
<el-card class="amount-card" shadow="hover">
|
|
<div class="amount-header">
|
|
<h3><i class="el-icon-money"></i> 金额信息</h3>
|
|
</div>
|
|
<div class="amount-grid">
|
|
<div class="amount-item primary">
|
|
<div class="amount-label">提现金额</div>
|
|
<div class="amount-value">¥{{ formatMoney(withdrawData.amount) }}</div>
|
|
</div>
|
|
<div class="amount-item">
|
|
<div class="amount-label">手续费</div>
|
|
<div class="amount-value fee">¥{{ formatMoney(withdrawData.fee) }}</div>
|
|
</div>
|
|
<div class="amount-item success">
|
|
<div class="amount-label">实际到账</div>
|
|
<div class="amount-value">¥{{ formatMoney(withdrawData.actual_amount) }}</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
|
|
<!-- 基本信息卡片 -->
|
|
<el-card class="info-card" shadow="hover">
|
|
<div class="card-header">
|
|
<h3><i class="el-icon-document"></i> 基本信息</h3>
|
|
</div>
|
|
<el-descriptions :column="2" border size="medium">
|
|
<el-descriptions-item label="提现单号">
|
|
<el-tag type="info" size="small">{{ withdrawData.withdraw_no }}</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="提现ID">
|
|
<span class="id-text">#{{ withdrawData.id }}</span>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="骑手姓名">
|
|
<span class="rider-name">{{ withdrawData.rider_name || '未知' }}</span>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="手机号">
|
|
<span class="phone-text">{{ withdrawData.rider_phone || '未知' }}</span>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-card>
|
|
|
|
<!-- 账户信息卡片 -->
|
|
<el-card class="account-card" shadow="hover">
|
|
<div class="card-header">
|
|
<h3>
|
|
<i :class="getWithdrawTypeIcon(withdrawData.withdraw_type)"></i>
|
|
{{ getWithdrawTypeName(withdrawData.withdraw_type) }}账户信息
|
|
</h3>
|
|
</div>
|
|
<div class="account-info">
|
|
<div class="account-row">
|
|
<div class="account-label">账户姓名</div>
|
|
<div class="account-value">{{ withdrawData.account_name }}</div>
|
|
</div>
|
|
<div class="account-row">
|
|
<div class="account-label">账户号码</div>
|
|
<div class="account-value account-number">{{ withdrawData.account_number }}</div>
|
|
</div>
|
|
<div class="account-row" v-if="withdrawData.withdraw_type == 1 && withdrawData.bank_name">
|
|
<div class="account-label">开户银行</div>
|
|
<div class="account-value">{{ withdrawData.bank_name }}</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
|
|
<!-- 时间轴 -->
|
|
<el-card class="timeline-card" shadow="hover">
|
|
<div class="card-header">
|
|
<h3><i class="el-icon-time"></i> 处理进度</h3>
|
|
</div>
|
|
<el-timeline class="custom-timeline">
|
|
<el-timeline-item
|
|
timestamp="申请时间"
|
|
placement="top"
|
|
type="primary"
|
|
icon="el-icon-plus">
|
|
<div class="timeline-content">
|
|
<h4>提交申请</h4>
|
|
<p>{{ withdrawData.add_time || '未知' }}</p>
|
|
</div>
|
|
</el-timeline-item>
|
|
|
|
<el-timeline-item
|
|
v-if="withdrawData.process_time"
|
|
timestamp="处理时间"
|
|
placement="top"
|
|
type="warning"
|
|
icon="el-icon-loading">
|
|
<div class="timeline-content">
|
|
<h4>开始处理</h4>
|
|
<p>{{ withdrawData.process_time }}</p>
|
|
</div>
|
|
</el-timeline-item>
|
|
|
|
<el-timeline-item
|
|
v-if="withdrawData.complete_time"
|
|
timestamp="完成时间"
|
|
placement="top"
|
|
:type="withdrawData.status == 1 ? 'success' : 'danger'"
|
|
:icon="withdrawData.status == 1 ? 'el-icon-check' : 'el-icon-close'">
|
|
<div class="timeline-content">
|
|
<h4>{{ withdrawData.status == 1 ? '提现成功' : '提现失败' }}</h4>
|
|
<p>{{ withdrawData.complete_time }}</p>
|
|
<div v-if="withdrawData.status == 2 && withdrawData.reject_reason" class="reject-reason">
|
|
<el-alert
|
|
:title="withdrawData.reject_reason"
|
|
type="error"
|
|
:closable="false"
|
|
show-icon>
|
|
</el-alert>
|
|
</div>
|
|
</div>
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
</el-card>
|
|
</div>
|
|
|
|
<!-- 空状态 -->
|
|
<div v-else-if="!loading" class="empty-state">
|
|
<el-empty description="未找到提现记录"></el-empty>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
|
|
/* 页面整体样式 */
|
|
body {
|
|
background: #f5f7fa;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#WithdrawDetail {
|
|
min-height: 100vh;
|
|
background: #f5f7fa;
|
|
}
|
|
|
|
/* 页面头部 */
|
|
.page-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 30px 0;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.header-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.page-title {
|
|
margin: 0;
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.page-title i {
|
|
font-size: 32px;
|
|
}
|
|
|
|
.page-subtitle {
|
|
margin: 8px 0 0 0;
|
|
opacity: 0.9;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.status-tag {
|
|
font-size: 16px !important;
|
|
border-radius: 25px !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.status-tag i {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/* 页面内容 */
|
|
.page-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px 40px;
|
|
}
|
|
|
|
.detail-container {
|
|
display: grid;
|
|
gap: 24px;
|
|
}
|
|
|
|
/* 卡片通用样式 */
|
|
.el-card {
|
|
border-radius: 12px !important;
|
|
border: none !important;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.el-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
|
|
}
|
|
|
|
.card-header {
|
|
margin-bottom: 20px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 2px solid #f0f2f5;
|
|
}
|
|
|
|
.card-header h3 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.card-header i {
|
|
color: #409eff;
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* 金额信息卡片 */
|
|
.amount-card {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
}
|
|
|
|
.amount-card .card-header {
|
|
border-bottom-color: rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.amount-card .card-header h3,
|
|
.amount-card .card-header i {
|
|
color: white;
|
|
}
|
|
|
|
.amount-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.amount-item {
|
|
text-align: center;
|
|
padding: 20px;
|
|
background: rgba(255,255,255,0.1);
|
|
border-radius: 10px;
|
|
backdrop-filter: blur(10px);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.amount-item:hover {
|
|
background: rgba(255,255,255,0.2);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.amount-label {
|
|
font-size: 14px;
|
|
opacity: 0.9;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.amount-value {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
}
|
|
|
|
.amount-item.primary .amount-value {
|
|
color: #fff;
|
|
}
|
|
|
|
.amount-item.success .amount-value {
|
|
color: #67c23a;
|
|
}
|
|
|
|
.amount-value.fee {
|
|
color: #f56c6c;
|
|
}
|
|
|
|
/* 基本信息卡片 */
|
|
.info-card .el-descriptions {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.id-text {
|
|
font-family: 'Courier New', monospace;
|
|
background: #f0f2f5;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.rider-name {
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.phone-text {
|
|
font-family: 'Courier New', monospace;
|
|
color: #606266;
|
|
}
|
|
|
|
/* 账户信息卡片 */
|
|
.account-info {
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.account-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid #e4e7ed;
|
|
}
|
|
|
|
.account-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.account-label {
|
|
font-weight: 600;
|
|
color: #606266;
|
|
min-width: 100px;
|
|
}
|
|
|
|
.account-value {
|
|
color: #2c3e50;
|
|
font-weight: 500;
|
|
text-align: right;
|
|
}
|
|
|
|
.account-number {
|
|
font-family: 'Courier New', monospace;
|
|
background: #fff;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
border: 1px solid #dcdfe6;
|
|
}
|
|
|
|
/* 时间轴卡片 */
|
|
.custom-timeline {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.timeline-content h4 {
|
|
margin: 0 0 8px 0;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.timeline-content p {
|
|
margin: 0;
|
|
color: #606266;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.reject-reason {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
/* 空状态 */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.header-content {
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.amount-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.account-row {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
}
|
|
|
|
.account-value {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
/* Element UI 组件样式覆盖 */
|
|
.el-descriptions__label {
|
|
font-weight: 600 !important;
|
|
color: #606266 !important;
|
|
}
|
|
|
|
.el-timeline-item__timestamp {
|
|
font-weight: 600 !important;
|
|
color: #909399 !important;
|
|
}
|
|
|
|
.el-alert {
|
|
border-radius: 8px !important;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#WithdrawDetail',
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
withdrawData: null
|
|
}
|
|
},
|
|
mounted() {
|
|
this.loadDetail();
|
|
},
|
|
methods: {
|
|
// 加载详情
|
|
loadDetail() {
|
|
this.loading = true;
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const id = urlParams.get('id');
|
|
|
|
$.get('/index.php/Retail/RiderWithdraw/getWithdrawDetail', {id: id}, (res) => {
|
|
this.loading = false;
|
|
if (res.code === 0) {
|
|
this.withdrawData = res.data;
|
|
} else {
|
|
this.$message.error(res.msg || '加载数据失败');
|
|
}
|
|
}).fail(() => {
|
|
this.loading = false;
|
|
this.$message.error('网络请求失败，请稍后重试');
|
|
});
|
|
},
|
|
|
|
// 格式化金额显示
|
|
formatMoney(amount) {
|
|
if (!amount && amount !== 0) return '0.00';
|
|
return parseFloat(amount).toFixed(2);
|
|
},
|
|
|
|
|
|
// 获取状态类型
|
|
getStatusType(status) {
|
|
const typeMap = {
|
|
0: 'warning', // 申请中
|
|
1: 'success', // 已完成
|
|
2: 'danger' // 已拒绝
|
|
};
|
|
return typeMap[status] || 'info';
|
|
},
|
|
|
|
// 获取状态文本
|
|
getStatusText(status) {
|
|
const textMap = {
|
|
0: '申请中',
|
|
1: '已完成',
|
|
2: '已拒绝'
|
|
};
|
|
return textMap[status] || '未知状态';
|
|
},
|
|
|
|
// 获取状态图标
|
|
getStatusIcon(status) {
|
|
const iconMap = {
|
|
0: 'el-icon-loading',
|
|
1: 'el-icon-success',
|
|
2: 'el-icon-error'
|
|
};
|
|
return iconMap[status] || 'el-icon-question';
|
|
},
|
|
|
|
// 获取提现方式名称
|
|
getWithdrawTypeName(type) {
|
|
const typeMap = {
|
|
1: '银行卡',
|
|
2: '支付宝',
|
|
3: '微信'
|
|
};
|
|
return typeMap[type] || '未知';
|
|
},
|
|
|
|
// 获取提现方式图标
|
|
getWithdrawTypeIcon(type) {
|
|
const iconMap = {
|
|
1: 'el-icon-bank-card',
|
|
2: 'el-icon-wallet',
|
|
3: 'el-icon-chat-dot-round'
|
|
};
|
|
return iconMap[type] || 'el-icon-question';
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|