|
|
@@ -17,7 +17,7 @@
|
|
|
<el-option label="充值中" :value="3"/>
|
|
|
<el-option label="充值成功" :value="4"/>
|
|
|
<el-option label="充值失败" :value="5"/>
|
|
|
- <el-option label="已退款" :value="6"/>
|
|
|
+ <el-option label="部分成功" :value="6"/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
@@ -56,7 +56,7 @@
|
|
|
<el-table-column prop="account" label="充值号码" width="130" align="center"/>
|
|
|
<el-table-column prop="total" label="充值金额" width="100" align="center">
|
|
|
<template slot-scope="{row}">
|
|
|
- <span style="color: #F56C6C; font-weight: bold;">¥{{ row.total }}</span>
|
|
|
+ <span style="color: #F56C6C; font-weight: bold;">¥{{ row.total }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="discount" label="折扣(%)" width="90" align="center">
|
|
|
@@ -67,7 +67,13 @@
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="pay_total" label="实付金额" width="100" align="center">
|
|
|
<template slot-scope="{row}">
|
|
|
- <span style="color: #67C23A; font-weight: bold;">¥{{ row.pay_total }}</span>
|
|
|
+ <span style="color: #67C23A; font-weight: bold;">¥{{ row.pay_total }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="charge_amount" label="充值成功金额" width="130" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span v-if="row.charge_amount > 0" style="color: #409EFF; font-weight: bold;">¥{{ row.charge_amount }}</span>
|
|
|
+ <span v-else>-</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="用户昵称" width="120" align="center">
|
|
|
@@ -75,14 +81,19 @@
|
|
|
{{ row.user_nickname || '-' }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="状态" width="100" align="center">
|
|
|
+ <el-table-column label="状态" width="120" align="center">
|
|
|
<template slot-scope="{row}">
|
|
|
- <el-tag v-if="row.status === 1" type="info" size="mini">待付款</el-tag>
|
|
|
- <el-tag v-else-if="row.status === 2" type="primary" size="mini">已付款</el-tag>
|
|
|
- <el-tag v-else-if="row.status === 3" type="warning" size="mini">充值中</el-tag>
|
|
|
- <el-tag v-else-if="row.status === 4" type="success" size="mini">充值成功</el-tag>
|
|
|
- <el-tag v-else-if="row.status === 5" type="danger" size="mini">充值失败</el-tag>
|
|
|
- <el-tag v-else-if="row.status === 6" type="info" size="mini">已退款</el-tag>
|
|
|
+ <div style="display: flex; flex-direction: column; gap: 3px; align-items: center;">
|
|
|
+ <el-tag v-if="row.status === 1" type="info" size="mini">待付款</el-tag>
|
|
|
+ <el-tag v-else-if="row.status === 2" type="primary" size="mini">已付款</el-tag>
|
|
|
+ <el-tag v-else-if="row.status === 3" type="warning" size="mini">充值中</el-tag>
|
|
|
+ <el-tag v-else-if="row.status === 4" type="success" size="mini">充值成功</el-tag>
|
|
|
+ <el-tag v-else-if="row.status === 5" type="danger" size="mini">充值失败</el-tag>
|
|
|
+ <el-tag v-else-if="row.status === 6" type="" size="mini">部分成功</el-tag>
|
|
|
+ <el-tag v-if="row.refund_status == 1" type="success" size="mini">退款成功</el-tag>
|
|
|
+ <el-tag v-else-if="row.refund_status == 2" type="warning" size="mini">待退款</el-tag>
|
|
|
+ <el-tag v-else-if="row.refund_status == 3" type="danger" size="mini">退款失败</el-tag>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="create_time_text" label="创建时间" min-width="160" align="center" show-overflow-tooltip/>
|
|
|
@@ -102,31 +113,172 @@
|
|
|
</el-card>
|
|
|
|
|
|
<!-- 详情弹窗 -->
|
|
|
- <el-dialog title="充值记录详情" :visible.sync="detailVisible" width="600px" :destroy-on-close="true">
|
|
|
- <el-descriptions :column="2" border v-if="detailData">
|
|
|
- <el-descriptions-item label="订单号" :span="2">{{ detailData.order_no }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="充值号码" :span="2">{{ detailData.account }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="充值金额">¥{{ detailData.total }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="折扣">{{ detailData.discount > 0 ? detailData.discount + '%' : '无' }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="实付金额">¥{{ detailData.pay_total }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="状态">
|
|
|
- <el-tag v-if="detailData.status === 1" type="info" size="mini">待付款</el-tag>
|
|
|
- <el-tag v-else-if="detailData.status === 2" type="primary" size="mini">已付款</el-tag>
|
|
|
- <el-tag v-else-if="detailData.status === 3" type="warning" size="mini">充值中</el-tag>
|
|
|
- <el-tag v-else-if="detailData.status === 4" type="success" size="mini">充值成功</el-tag>
|
|
|
- <el-tag v-else-if="detailData.status === 5" type="danger" size="mini">充值失败</el-tag>
|
|
|
- <el-tag v-else-if="detailData.status === 6" type="info" size="mini">已退款</el-tag>
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item label="用户昵称">{{ detailData.user_nickname || '-' }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="用户手机">{{ detailData.user_mobile || '-' }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="交易单号" :span="2">{{ detailData.transaction_id || '-' }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="平台订单号" :span="2">{{ detailData.out_trade_num || '-' }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="产品ID">{{ detailData.product_id || '-' }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="套餐ID">{{ detailData.meal_id || '-' }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="备注" :span="2">{{ detailData.remark || '-' }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="创建时间" :span="2">{{ detailData.create_time_text }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="更新时间" :span="2">{{ detailData.update_time_text }}</el-descriptions-item>
|
|
|
- </el-descriptions>
|
|
|
+ <el-dialog title="充值记录详情" :visible.sync="detailVisible" width="800px" :destroy-on-close="true" :close-on-click-modal="false">
|
|
|
+ <div v-if="detailData" class="order-detail-container">
|
|
|
+ <!-- 状态卡片 -->
|
|
|
+ <el-card shadow="hover" class="status-card">
|
|
|
+ <div class="status-header">
|
|
|
+ <div class="status-info">
|
|
|
+ <div class="order-number">订单号:{{ detailData.order_no }}</div>
|
|
|
+ <div class="status-tags">
|
|
|
+ <el-tag v-if="detailData.status === 1" type="info" size="medium">待付款</el-tag>
|
|
|
+ <el-tag v-else-if="detailData.status === 2" type="primary" size="medium">已付款</el-tag>
|
|
|
+ <el-tag v-else-if="detailData.status === 3" type="warning" size="medium">充值中</el-tag>
|
|
|
+ <el-tag v-else-if="detailData.status === 4" type="success" size="medium">充值成功</el-tag>
|
|
|
+ <el-tag v-else-if="detailData.status === 5" type="danger" size="medium">充值失败</el-tag>
|
|
|
+ <el-tag v-else-if="detailData.status === 6" type="" size="medium">部分成功</el-tag>
|
|
|
+
|
|
|
+ <el-tag v-if="detailData.refund_status == 1" type="success" size="medium">退款成功</el-tag>
|
|
|
+ <el-tag v-else-if="detailData.refund_status == 2" type="warning" size="medium">待退款</el-tag>
|
|
|
+ <el-tag v-else-if="detailData.refund_status == 3" type="danger" size="medium">退款失败</el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="amount-display">
|
|
|
+ <div class="amount-item">
|
|
|
+ <span class="label">充值金额</span>
|
|
|
+ <span class="value primary">¥{{ detailData.total }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="amount-item" v-if="detailData.charge_amount > 0">
|
|
|
+ <span class="label">成功金额</span>
|
|
|
+ <span class="value success">¥{{ detailData.charge_amount }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="amount-item" v-if="detailData.refund_money > 0">
|
|
|
+ <span class="label">退款金额</span>
|
|
|
+ <span class="value danger">¥{{ detailData.refund_money }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 充值信息 -->
|
|
|
+ <el-card shadow="hover" class="info-card">
|
|
|
+ <div slot="header" class="card-title">
|
|
|
+ <i class="el-icon-mobile-phone"></i> 充值信息
|
|
|
+ </div>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">充值号码:</span>
|
|
|
+ <span class="value">{{ detailData.account }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">实付金额:</span>
|
|
|
+ <span class="value highlight">¥{{ detailData.pay_total }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">折扣:</span>
|
|
|
+ <span class="value">{{ detailData.discount > 0 ? detailData.discount + '%' : '无' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">套餐ID:</span>
|
|
|
+ <span class="value">{{ detailData.meal_id || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 用户信息 -->
|
|
|
+ <el-card shadow="hover" class="info-card">
|
|
|
+ <div slot="header" class="card-title">
|
|
|
+ <i class="el-icon-user"></i> 用户信息
|
|
|
+ </div>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">用户昵称:</span>
|
|
|
+ <span class="value">{{ detailData.user_nickname || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">用户手机:</span>
|
|
|
+ <span class="value">{{ detailData.user_mobile || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 交易信息 -->
|
|
|
+ <el-card shadow="hover" class="info-card">
|
|
|
+ <div slot="header" class="card-title">
|
|
|
+ <i class="el-icon-document"></i> 交易信息
|
|
|
+ </div>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">交易单号:</span>
|
|
|
+ <span class="value">{{ detailData.transaction_id || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">平台订单号:</span>
|
|
|
+ <span class="value">{{ detailData.out_trade_no || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">产品ID:</span>
|
|
|
+ <span class="value">{{ detailData.product_id || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" v-if="detailData.charge_kami">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">充值卡密:</span>
|
|
|
+ <span class="value kami">{{ detailData.charge_kami }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 时间信息 -->
|
|
|
+ <el-card shadow="hover" class="info-card">
|
|
|
+ <div slot="header" class="card-title">
|
|
|
+ <i class="el-icon-time"></i> 时间信息
|
|
|
+ </div>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">创建时间:</span>
|
|
|
+ <span class="value">{{ detailData.create_time_text }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">支付时间:</span>
|
|
|
+ <span class="value">{{ detailData.pay_at_text }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">更新时间:</span>
|
|
|
+ <span class="value">{{ detailData.update_time_text }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 备注信息 -->
|
|
|
+ <el-card shadow="hover" class="info-card" v-if="detailData.remark || detailData.failed_remark">
|
|
|
+ <div slot="header" class="card-title">
|
|
|
+ <i class="el-icon-chat-line-square"></i> 备注信息
|
|
|
+ </div>
|
|
|
+ <div v-if="detailData.remark" class="remark-item">
|
|
|
+ <span class="label">备注:</span>
|
|
|
+ <span class="value">{{ detailData.remark }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="detailData.failed_remark" class="remark-item failed">
|
|
|
+ <span class="label">失败原因:</span>
|
|
|
+ <span class="value">{{ detailData.failed_remark }}</span>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
<div slot="footer">
|
|
|
<el-button @click="detailVisible = false">关闭</el-button>
|
|
|
</div>
|
|
|
@@ -223,4 +375,177 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+/* 详情弹窗容器 */
|
|
|
+.order-detail-container {
|
|
|
+ max-height: 70vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 状态卡片 */
|
|
|
+.status-card {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.status-card >>> .el-card__body {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.status-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.status-info {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.order-number {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.status-tags {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.amount-display {
|
|
|
+ display: flex;
|
|
|
+ gap: 20px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.amount-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.amount-item .label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ margin-bottom: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.amount-item .value {
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.amount-item .value.primary {
|
|
|
+ color: #ffd700;
|
|
|
+}
|
|
|
+
|
|
|
+.amount-item .value.success {
|
|
|
+ color: #67c23a;
|
|
|
+}
|
|
|
+
|
|
|
+.amount-item .value.danger {
|
|
|
+ color: #ff6b6b;
|
|
|
+}
|
|
|
+
|
|
|
+/* 信息卡片 */
|
|
|
+.info-card {
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.info-card >>> .el-card__header {
|
|
|
+ background: #f5f7fa;
|
|
|
+ padding: 12px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.card-title {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #303133;
|
|
|
+}
|
|
|
+
|
|
|
+.card-title i {
|
|
|
+ margin-right: 8px;
|
|
|
+ color: #409eff;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.info-item {
|
|
|
+ padding: 10px 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ line-height: 1.6;
|
|
|
+}
|
|
|
+
|
|
|
+.info-item .label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ min-width: 90px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.info-item .value {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #303133;
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.info-item .value.highlight {
|
|
|
+ color: #67c23a;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.info-item .value.kami {
|
|
|
+ color: #e6a23c;
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: 'Courier New', monospace;
|
|
|
+}
|
|
|
+
|
|
|
+/* 备注信息 */
|
|
|
+.remark-item {
|
|
|
+ padding: 10px 0;
|
|
|
+ line-height: 1.8;
|
|
|
+}
|
|
|
+
|
|
|
+.remark-item .label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ font-weight: 500;
|
|
|
+ display: inline-block;
|
|
|
+ min-width: 80px;
|
|
|
+}
|
|
|
+
|
|
|
+.remark-item .value {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #303133;
|
|
|
+}
|
|
|
+
|
|
|
+.remark-item.failed .value {
|
|
|
+ color: #f56c6c;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+/* 滚动条样式 */
|
|
|
+.order-detail-container::-webkit-scrollbar {
|
|
|
+ width: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.order-detail-container::-webkit-scrollbar-thumb {
|
|
|
+ background: #dcdfe6;
|
|
|
+ border-radius: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+.order-detail-container::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: #c0c4cc;
|
|
|
+}
|
|
|
+
|
|
|
+.order-detail-container::-webkit-scrollbar-track {
|
|
|
+ background: #f5f7fa;
|
|
|
+}
|
|
|
</style>
|