1080 lines
48 KiB
HTML
1080 lines
48 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>
|
|
<!-- Element UI CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
|
|
background: #f0f2f5;
|
|
padding: 20px;
|
|
}
|
|
|
|
#app {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.page-header {
|
|
background: #fff;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.page-description {
|
|
color: #909399;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.stat-cards {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stat-card {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
background: #fff;
|
|
padding: 20px;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.stat-icon {
|
|
font-size: 40px;
|
|
margin-right: 15px;
|
|
color: #409EFF;
|
|
}
|
|
|
|
.stat-info .stat-label {
|
|
font-size: 14px;
|
|
color: #909399;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.stat-info .stat-value {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
}
|
|
|
|
.main-content {
|
|
background: #fff;
|
|
padding: 20px;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.search-form {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.order-detail-section {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid #409EFF;
|
|
}
|
|
|
|
.detail-row {
|
|
display: flex;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.detail-item {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.detail-label {
|
|
min-width: 120px;
|
|
color: #606266;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.detail-value {
|
|
color: #303133;
|
|
}
|
|
|
|
.refund-info {
|
|
background: #fff3e0;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
border-left: 4px solid #ff9800;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.refund-reason {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.product-image {
|
|
width: 60px;
|
|
height: 60px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 4px 10px;
|
|
border-radius: 3px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.status-pending {
|
|
background: #fff3e0;
|
|
color: #ff9800;
|
|
}
|
|
|
|
.status-processing {
|
|
background: #e3f2fd;
|
|
color: #2196f3;
|
|
}
|
|
|
|
.status-success {
|
|
background: #e8f5e9;
|
|
color: #4caf50;
|
|
}
|
|
|
|
.status-rejected {
|
|
background: #ffebee;
|
|
color: #f44336;
|
|
}
|
|
|
|
.audit-actions {
|
|
margin-top: 20px;
|
|
padding: 20px;
|
|
background: #f5f7fa;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
}
|
|
|
|
.reject-reason-input {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.el-table .warning-row {
|
|
background: #fff3e0;
|
|
}
|
|
|
|
.image-preview {
|
|
max-width: 100%;
|
|
max-height: 500px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- 页面头部 -->
|
|
<div class="page-header">
|
|
<div class="page-title">退款审核管理系统</div>
|
|
<div class="page-description">管理和审核用户的退款申请，确保交易安全和客户满意度</div>
|
|
</div>
|
|
|
|
<!-- 统计卡片 -->
|
|
<div class="stat-cards">
|
|
<div class="stat-card">
|
|
<i class="el-icon-s-order stat-icon"></i>
|
|
<div class="stat-info">
|
|
<div class="stat-label">待审核退款</div>
|
|
<div class="stat-value">{{ statistics.pendingCount }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<i class="el-icon-s-finance stat-icon" style="color: #ff9800;"></i>
|
|
<div class="stat-info">
|
|
<div class="stat-label">退款金额(元)</div>
|
|
<div class="stat-value">{{ statistics.totalRefundMoney }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<i class="el-icon-success stat-icon" style="color: #4caf50;"></i>
|
|
<div class="stat-info">
|
|
<div class="stat-label">今日已审核</div>
|
|
<div class="stat-value">{{ statistics.todayAuditCount }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<i class="el-icon-time stat-icon" style="color: #f44336;"></i>
|
|
<div class="stat-info">
|
|
<div class="stat-label">平均处理时长</div>
|
|
<div class="stat-value">{{ statistics.avgProcessTime }}h</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主要内容区 -->
|
|
<div class="main-content">
|
|
<!-- 搜索表单 -->
|
|
<el-form :inline="true" :model="searchForm" class="search-form">
|
|
<el-form-item label="订单编号">
|
|
<el-input v-model="searchForm.orderNo" placeholder="请输入订单编号" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="收货人姓名">
|
|
<el-input v-model="searchForm.receiverName" placeholder="请输入收货人姓名" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="申请时间">
|
|
<el-date-picker
|
|
v-model="searchForm.dateRange"
|
|
type="datetimerange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleSearch" icon="el-icon-search">查询</el-button>
|
|
<el-button @click="handleReset" icon="el-icon-refresh">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<!-- 状态标签页 -->
|
|
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
|
|
<el-tab-pane label="全部订单" name="all"></el-tab-pane>
|
|
<el-tab-pane name="pending">
|
|
<span slot="label">
|
|
<el-badge :value="statistics.pendingCount" class="item">
|
|
用户申请退款中
|
|
</el-badge>
|
|
</span>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="退款中" name="processing"></el-tab-pane>
|
|
<el-tab-pane label="已完成退款" name="completed"></el-tab-pane>
|
|
<el-tab-pane label="已拒绝" name="rejected"></el-tab-pane>
|
|
</el-tabs>
|
|
|
|
<!-- 订单列表 -->
|
|
<el-table
|
|
:data="filteredOrders"
|
|
border
|
|
style="width: 100%"
|
|
:row-class-name="tableRowClassName"
|
|
v-loading="loading">
|
|
<el-table-column type="expand">
|
|
<template slot-scope="props">
|
|
<div style="padding: 20px;">
|
|
<h4 style="margin-bottom: 15px;">商品明细</h4>
|
|
<el-table :data="props.row.productOrders" border>
|
|
<el-table-column label="商品图片" width="100">
|
|
<template slot-scope="scope">
|
|
<img :src="scope.row.productImg" class="product-image" @click="previewImage(scope.row.productImg)">
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="productName" label="商品名称"></el-table-column>
|
|
<el-table-column prop="productSpecName" label="规格"></el-table-column>
|
|
<el-table-column prop="productCount" label="数量" width="80"></el-table-column>
|
|
<el-table-column prop="originPrice" label="原价" width="100"></el-table-column>
|
|
<el-table-column prop="finalPrice" label="终价" width="100"></el-table-column>
|
|
<el-table-column prop="productOrderMoney" label="订单金额" width="120"></el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column type="index" label="序号" width="60"></el-table-column>
|
|
<el-table-column prop="orderNo" label="总订单号" width="180"></el-table-column>
|
|
<el-table-column prop="unitOrderNo" label="结算单位订单号" width="180"></el-table-column>
|
|
<el-table-column label="退款状态" width="140">
|
|
<template slot-scope="scope">
|
|
<span :class="'status-badge status-' + getStatusClass(scope.row.refundStatus)">
|
|
{{ getRefundStatus(scope.row.refundStatus) }}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="totalPayMoney" label="顾客支付" width="110"></el-table-column>
|
|
<el-table-column prop="receiverName" label="收货人" width="100"></el-table-column>
|
|
<el-table-column prop="receiverPhone" label="联系电话" width="120"></el-table-column>
|
|
<el-table-column prop="applyRefundTime" label="申请退款时间" width="160"></el-table-column>
|
|
<el-table-column prop="refundReason" label="退款原因" min-width="150" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="操作" width="180" fixed="right">
|
|
<template slot-scope="scope">
|
|
<el-button size="mini" @click="viewDetail(scope.row)" type="primary">查看详情</el-button>
|
|
<el-button
|
|
v-if="scope.row.refundStatus === -2"
|
|
size="mini"
|
|
type="success"
|
|
@click="showAuditDialog(scope.row)">
|
|
审核
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 分页 -->
|
|
<div style="margin-top: 20px; text-align: right;">
|
|
<el-pagination
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="currentPage"
|
|
:page-sizes="[10, 20, 30, 50]"
|
|
:page-size="pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="totalOrders">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 订单详情弹窗 -->
|
|
<el-dialog
|
|
:title="'订单详情 - ' + (currentOrder ? currentOrder.orderNo : '')"
|
|
:visible.sync="detailDialogVisible"
|
|
width="80%"
|
|
:close-on-click-modal="false">
|
|
<div v-if="currentOrder" class="order-detail">
|
|
<!-- 退款信息高亮显示 -->
|
|
<div class="refund-info" v-if="currentOrder.refundStatus === -2">
|
|
<div style="display: flex; align-items: center; margin-bottom: 10px;">
|
|
<i class="el-icon-warning" style="font-size: 24px; color: #ff9800; margin-right: 10px;"></i>
|
|
<span style="font-size: 16px; font-weight: 600; color: #ff9800;">用户申请退款中，请及时处理</span>
|
|
</div>
|
|
<div style="display: flex; gap: 30px;">
|
|
<div><strong>申请时间：</strong>{{ currentOrder.applyRefundTime }}</div>
|
|
<div><strong>申请金额：</strong><span style="color: #f44336; font-size: 18px; font-weight: 600;">¥{{ currentOrder.totalPayMoney }}</span></div>
|
|
</div>
|
|
<div class="refund-reason">
|
|
<strong>退款原因：</strong>{{ currentOrder.refundReason }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 订单基本信息 -->
|
|
<div class="order-detail-section">
|
|
<div class="section-title">订单基本信息</div>
|
|
<div class="detail-row">
|
|
<div class="detail-item">
|
|
<span class="detail-label">总订单号：</span>
|
|
<span class="detail-value">{{ currentOrder.orderNo }}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-label">结算单位订单号：</span>
|
|
<span class="detail-value">{{ currentOrder.unitOrderNo }}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-label">总商品数量：</span>
|
|
<span class="detail-value">{{ currentOrder.productCount }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="detail-row">
|
|
<div class="detail-item">
|
|
<span class="detail-label">顾客支付：</span>
|
|
<span class="detail-value" style="color: #f44336; font-weight: 600;">¥{{ currentOrder.totalPayMoney }}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-label">配送费：</span>
|
|
<span class="detail-value">¥{{ currentOrder.deliveryMoney }}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-label">优惠券减免：</span>
|
|
<span class="detail-value">¥{{ currentOrder.couponMoney }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="detail-row">
|
|
<div class="detail-item">
|
|
<span class="detail-label">包装费：</span>
|
|
<span class="detail-value">¥{{ currentOrder.packageMoney }}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-label">平台服务费：</span>
|
|
<span class="detail-value">¥{{ currentOrder.platformMoney }}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-label">预计收入：</span>
|
|
<span class="detail-value">¥{{ currentOrder.predictIncome }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 收货信息 -->
|
|
<div class="order-detail-section">
|
|
<div class="section-title">收货信息</div>
|
|
<div class="detail-row">
|
|
<div class="detail-item">
|
|
<span class="detail-label">收货人：</span>
|
|
<span class="detail-value">{{ currentOrder.receiverName }}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-label">联系电话：</span>
|
|
<span class="detail-value">{{ currentOrder.receiverPhone }}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-label">距离：</span>
|
|
<span class="detail-value">{{ currentOrder.distance }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="detail-row">
|
|
<div class="detail-item" style="flex: 3;">
|
|
<span class="detail-label">收货地址：</span>
|
|
<span class="detail-value">{{ currentOrder.poi }} {{ currentOrder.detail }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 时间信息 -->
|
|
<div class="order-detail-section">
|
|
<div class="section-title">时间信息</div>
|
|
<div class="detail-row">
|
|
<div class="detail-item">
|
|
<span class="detail-label">下单时间：</span>
|
|
<span class="detail-value">{{ currentOrder.createTime }}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-label">支付时间：</span>
|
|
<span class="detail-value">{{ currentOrder.payTime }}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-label">预计送达时间：</span>
|
|
<span class="detail-value">{{ currentOrder.predictDeliveryTime }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="detail-row">
|
|
<div class="detail-item">
|
|
<span class="detail-label">完成取货时间：</span>
|
|
<span class="detail-value">{{ currentOrder.pickTime }}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-label">配送完成时间：</span>
|
|
<span class="detail-value">{{ currentOrder.completeDeliveryTime }}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-label">订单完成时间：</span>
|
|
<span class="detail-value">{{ currentOrder.completeTime }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 退款信息 -->
|
|
<div class="order-detail-section">
|
|
<div class="section-title">退款信息</div>
|
|
<div class="detail-row">
|
|
<div class="detail-item">
|
|
<span class="detail-label">订单退款状态：</span>
|
|
<span :class="'status-badge status-' + getStatusClass(currentOrder.refundStatus)">
|
|
{{ getRefundStatus(currentOrder.refundStatus) }}
|
|
</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-label">申请退款时间：</span>
|
|
<span class="detail-value">{{ currentOrder.applyRefundTime }}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-label">备注：</span>
|
|
<span class="detail-value">{{ currentOrder.remark }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="detail-row">
|
|
<div class="detail-item" style="flex: 3;">
|
|
<span class="detail-label">申请退款原因：</span>
|
|
<span class="detail-value">{{ currentOrder.refundReason }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 订单商品 -->
|
|
<div class="order-detail-section">
|
|
<div class="section-title">订单商品</div>
|
|
<el-table :data="currentOrder.productOrders" border>
|
|
<el-table-column label="商品图片" width="100">
|
|
<template slot-scope="scope">
|
|
<img :src="scope.row.productImg" class="product-image" @click="previewImage(scope.row.productImg)">
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="shopName" label="店铺名称" width="100"></el-table-column>
|
|
<el-table-column prop="productName" label="商品名称"></el-table-column>
|
|
<el-table-column prop="productSpecName" label="规格"></el-table-column>
|
|
<el-table-column prop="productCount" label="数量" width="80"></el-table-column>
|
|
<el-table-column prop="originPrice" label="商品原价" width="100"></el-table-column>
|
|
<el-table-column prop="finalPrice" label="商品终价" width="100"></el-table-column>
|
|
<el-table-column prop="productOrderMoney" label="商品订单金额" width="120"></el-table-column>
|
|
</el-table>
|
|
</div>
|
|
|
|
<!-- 审核操作区域 -->
|
|
<div v-if="currentOrder.refundStatus === -2" class="audit-actions">
|
|
<el-alert
|
|
title="请仔细核对订单信息后进行审核操作"
|
|
type="warning"
|
|
:closable="false"
|
|
style="margin-bottom: 15px;">
|
|
</el-alert>
|
|
<el-button type="success" size="large" @click="handleApprove" icon="el-icon-check">同意退款</el-button>
|
|
<el-button type="danger" size="large" @click="showRejectInput = true" icon="el-icon-close">拒绝退款</el-button>
|
|
|
|
<div v-if="showRejectInput" class="reject-reason-input">
|
|
<el-input
|
|
type="textarea"
|
|
:rows="3"
|
|
placeholder="请输入拒绝原因（必填）"
|
|
v-model="rejectReason"
|
|
maxlength="200"
|
|
show-word-limit>
|
|
</el-input>
|
|
<div style="margin-top: 10px;">
|
|
<el-button type="danger" @click="handleReject">确认拒绝</el-button>
|
|
<el-button @click="showRejectInput = false; rejectReason = ''">取消</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="detailDialogVisible = false">关闭</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<!-- 图片预览弹窗 -->
|
|
<el-dialog :visible.sync="imagePreviewVisible" width="50%">
|
|
<img :src="previewImageUrl" class="image-preview" />
|
|
</el-dialog>
|
|
</div>
|
|
|
|
<!-- Vue.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
|
<!-- Element UI -->
|
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data: {
|
|
loading: false,
|
|
activeTab: 'pending',
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
detailDialogVisible: false,
|
|
imagePreviewVisible: false,
|
|
previewImageUrl: '',
|
|
currentOrder: null,
|
|
showRejectInput: false,
|
|
rejectReason: '',
|
|
searchForm: {
|
|
orderNo: '',
|
|
receiverName: '',
|
|
dateRange: null
|
|
},
|
|
statistics: {
|
|
pendingCount: 5,
|
|
totalRefundMoney: '12,856.00',
|
|
todayAuditCount: 8,
|
|
avgProcessTime: '2.3'
|
|
},
|
|
orders: [
|
|
{
|
|
orderNo: 'ORD20231210001',
|
|
unitOrderNo: 'UNIT20231210001',
|
|
productCount: 3,
|
|
totalPayMoney: '258.00',
|
|
deliveryMoney: '8.00',
|
|
couponMoney: '20.00',
|
|
packageMoney: '2.00',
|
|
platformMoney: '5.00',
|
|
predictIncome: '223.00',
|
|
receiverName: '张三',
|
|
receiverPhone: '13800138000',
|
|
poi: '北京市朝阳区',
|
|
detail: '建国路88号SOHO现代城A座1008室',
|
|
distance: '2.5km',
|
|
createTime: '2023-12-10 10:30:25',
|
|
payTime: '2023-12-10 10:32:15',
|
|
predictDeliveryTime: '2023-12-10 12:00:00',
|
|
pickTime: '2023-12-10 11:15:30',
|
|
completeDeliveryTime: '',
|
|
completeTime: '',
|
|
refundStatus: -2,
|
|
applyRefundTime: '2023-12-10 13:45:20',
|
|
refundReason: '商品质量问题，部分商品已变质',
|
|
remark: '尽快配送',
|
|
productOrders: [
|
|
{
|
|
shopName: '鲜果店',
|
|
productName: '新鲜苹果',
|
|
productSpecName: '500g/份',
|
|
productCount: 2,
|
|
originPrice: '50.00',
|
|
finalPrice: '45.00',
|
|
productOrderMoney: '90.00',
|
|
productImg: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
|
|
},
|
|
{
|
|
shopName: '鲜果店',
|
|
productName: '进口香蕉',
|
|
productSpecName: '1kg/份',
|
|
productCount: 1,
|
|
originPrice: '180.00',
|
|
finalPrice: '160.00',
|
|
productOrderMoney: '160.00',
|
|
productImg: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
orderNo: 'ORD20231210002',
|
|
unitOrderNo: 'UNIT20231210002',
|
|
productCount: 2,
|
|
totalPayMoney: '168.00',
|
|
deliveryMoney: '6.00',
|
|
couponMoney: '10.00',
|
|
packageMoney: '2.00',
|
|
platformMoney: '4.00',
|
|
predictIncome: '146.00',
|
|
receiverName: '李四',
|
|
receiverPhone: '13900139000',
|
|
poi: '上海市浦东新区',
|
|
detail: '张江高科技园区祖冲之路2290号',
|
|
distance: '3.2km',
|
|
createTime: '2023-12-10 09:15:10',
|
|
payTime: '2023-12-10 09:16:30',
|
|
predictDeliveryTime: '2023-12-10 11:30:00',
|
|
pickTime: '2023-12-10 10:45:20',
|
|
completeDeliveryTime: '',
|
|
completeTime: '',
|
|
refundStatus: -2,
|
|
applyRefundTime: '2023-12-10 14:20:15',
|
|
refundReason: '送货太慢，不想要了',
|
|
remark: '请尽快送达',
|
|
productOrders: [
|
|
{
|
|
shopName: '生鲜超市',
|
|
productName: '有机蔬菜礼包',
|
|
productSpecName: '精选装',
|
|
productCount: 2,
|
|
originPrice: '90.00',
|
|
finalPrice: '80.00',
|
|
productOrderMoney: '160.00',
|
|
productImg: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
orderNo: 'ORD20231210003',
|
|
unitOrderNo: 'UNIT20231210003',
|
|
productCount: 5,
|
|
totalPayMoney: '436.00',
|
|
deliveryMoney: '10.00',
|
|
couponMoney: '30.00',
|
|
packageMoney: '3.00',
|
|
platformMoney: '8.00',
|
|
predictIncome: '385.00',
|
|
receiverName: '王五',
|
|
receiverPhone: '13700137000',
|
|
poi: '广州市天河区',
|
|
detail: '天河路208号天河城写字楼2506',
|
|
distance: '4.5km',
|
|
createTime: '2023-12-10 08:45:30',
|
|
payTime: '2023-12-10 08:47:10',
|
|
predictDeliveryTime: '2023-12-10 10:30:00',
|
|
pickTime: '2023-12-10 09:30:45',
|
|
completeDeliveryTime: '',
|
|
completeTime: '',
|
|
refundStatus: -2,
|
|
applyRefundTime: '2023-12-10 15:10:08',
|
|
refundReason: '订单重复下单，需要退款',
|
|
remark: '办公室收货',
|
|
productOrders: [
|
|
{
|
|
shopName: '进口食品店',
|
|
productName: '澳洲牛排',
|
|
productSpecName: '200g/片',
|
|
productCount: 3,
|
|
originPrice: '120.00',
|
|
finalPrice: '110.00',
|
|
productOrderMoney: '330.00',
|
|
productImg: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg'
|
|
},
|
|
{
|
|
shopName: '进口食品店',
|
|
productName: '新西兰羊排',
|
|
productSpecName: '300g/份',
|
|
productCount: 2,
|
|
originPrice: '65.00',
|
|
finalPrice: '58.00',
|
|
productOrderMoney: '116.00',
|
|
productImg: 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
orderNo: 'ORD20231210004',
|
|
unitOrderNo: 'UNIT20231210004',
|
|
productCount: 1,
|
|
totalPayMoney: '89.00',
|
|
deliveryMoney: '5.00',
|
|
couponMoney: '5.00',
|
|
packageMoney: '1.00',
|
|
platformMoney: '2.00',
|
|
predictIncome: '76.00',
|
|
receiverName: '赵六',
|
|
receiverPhone: '13600136000',
|
|
poi: '深圳市南山区',
|
|
detail: '科技园南区深南大道9998号',
|
|
distance: '1.8km',
|
|
createTime: '2023-12-10 11:20:15',
|
|
payTime: '2023-12-10 11:21:40',
|
|
predictDeliveryTime: '2023-12-10 13:00:00',
|
|
pickTime: '',
|
|
completeDeliveryTime: '',
|
|
completeTime: '',
|
|
refundStatus: -2,
|
|
applyRefundTime: '2023-12-10 15:30:25',
|
|
refundReason: '家里有急事，无法收货',
|
|
remark: '请按门铃',
|
|
productOrders: [
|
|
{
|
|
shopName: '快餐店',
|
|
productName: '商务套餐',
|
|
productSpecName: '双人份',
|
|
productCount: 1,
|
|
originPrice: '95.00',
|
|
finalPrice: '85.00',
|
|
productOrderMoney: '85.00',
|
|
productImg: 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
orderNo: 'ORD20231210005',
|
|
unitOrderNo: 'UNIT20231210005',
|
|
productCount: 4,
|
|
totalPayMoney: '326.00',
|
|
deliveryMoney: '8.00',
|
|
couponMoney: '15.00',
|
|
packageMoney: '2.00',
|
|
platformMoney: '6.00',
|
|
predictIncome: '295.00',
|
|
receiverName: '陈七',
|
|
receiverPhone: '13500135000',
|
|
poi: '杭州市西湖区',
|
|
detail: '文一西路998号海创园科技大厦B座8楼',
|
|
distance: '3.8km',
|
|
createTime: '2023-12-10 12:10:30',
|
|
payTime: '2023-12-10 12:12:15',
|
|
predictDeliveryTime: '2023-12-10 14:00:00',
|
|
pickTime: '',
|
|
completeDeliveryTime: '',
|
|
completeTime: '',
|
|
refundStatus: -2,
|
|
applyRefundTime: '2023-12-10 16:05:40',
|
|
refundReason: '下错地址了，需要重新下单',
|
|
remark: '联系不上请打电话',
|
|
productOrders: [
|
|
{
|
|
shopName: '奶茶店',
|
|
productName: '招牌奶茶',
|
|
productSpecName: '大杯',
|
|
productCount: 4,
|
|
originPrice: '85.00',
|
|
finalPrice: '78.00',
|
|
productOrderMoney: '312.00',
|
|
productImg: 'https://fuss10.elemecdn.com/7/4a/f29c580b85ebbf975e907b728689fjpeg.jpeg'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
orderNo: 'ORD20231209001',
|
|
unitOrderNo: 'UNIT20231209001',
|
|
productCount: 2,
|
|
totalPayMoney: '188.00',
|
|
deliveryMoney: '8.00',
|
|
couponMoney: '10.00',
|
|
packageMoney: '2.00',
|
|
platformMoney: '4.00',
|
|
predictIncome: '164.00',
|
|
receiverName: '刘八',
|
|
receiverPhone: '13400134000',
|
|
poi: '成都市武侯区',
|
|
detail: '天府大道中段666号希顿国际广场C座',
|
|
distance: '2.9km',
|
|
createTime: '2023-12-09 14:30:20',
|
|
payTime: '2023-12-09 14:32:10',
|
|
predictDeliveryTime: '2023-12-09 16:00:00',
|
|
pickTime: '2023-12-09 15:10:30',
|
|
completeDeliveryTime: '2023-12-09 15:55:40',
|
|
completeTime: '',
|
|
refundStatus: 1,
|
|
applyRefundTime: '2023-12-09 16:20:15',
|
|
refundReason: '商品与描述不符',
|
|
remark: '',
|
|
productOrders: [
|
|
{
|
|
shopName: '甜品店',
|
|
productName: '蛋糕礼盒',
|
|
productSpecName: '8寸',
|
|
productCount: 2,
|
|
originPrice: '100.00',
|
|
finalPrice: '90.00',
|
|
productOrderMoney: '180.00',
|
|
productImg: 'https://fuss10.elemecdn.com/c/5f/d3a9f6ce3e93b114e6e6c5e7e3aa3jpeg.jpeg'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
orderNo: 'ORD20231208001',
|
|
unitOrderNo: 'UNIT20231208001',
|
|
productCount: 3,
|
|
totalPayMoney: '276.00',
|
|
deliveryMoney: '10.00',
|
|
couponMoney: '20.00',
|
|
packageMoney: '3.00',
|
|
platformMoney: '5.00',
|
|
predictIncome: '238.00',
|
|
receiverName: '周九',
|
|
receiverPhone: '13300133000',
|
|
poi: '重庆市渝北区',
|
|
detail: '金开大道1228号IFC国际金融中心2栋15-3',
|
|
distance: '5.2km',
|
|
createTime: '2023-12-08 10:15:45',
|
|
payTime: '2023-12-08 10:17:20',
|
|
predictDeliveryTime: '2023-12-08 12:00:00',
|
|
pickTime: '2023-12-08 11:10:30',
|
|
completeDeliveryTime: '2023-12-08 11:58:15',
|
|
completeTime: '2023-12-08 12:05:30',
|
|
refundStatus: 2,
|
|
applyRefundTime: '2023-12-08 13:30:10',
|
|
refundReason: '收到的商品有破损',
|
|
remark: '请轻拿轻放',
|
|
productOrders: [
|
|
{
|
|
shopName: '零食店',
|
|
productName: '进口零食大礼包',
|
|
productSpecName: '豪华版',
|
|
productCount: 3,
|
|
originPrice: '98.00',
|
|
finalPrice: '88.00',
|
|
productOrderMoney: '264.00',
|
|
productImg: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
orderNo: 'ORD20231207001',
|
|
unitOrderNo: 'UNIT20231207001',
|
|
productCount: 1,
|
|
totalPayMoney: '128.00',
|
|
deliveryMoney: '6.00',
|
|
couponMoney: '0.00',
|
|
packageMoney: '2.00',
|
|
platformMoney: '3.00',
|
|
predictIncome: '117.00',
|
|
receiverName: '吴十',
|
|
receiverPhone: '13200132000',
|
|
poi: '西安市雁塔区',
|
|
detail: '高新四路15号壹洋堂艺术区A3栋',
|
|
distance: '4.1km',
|
|
createTime: '2023-12-07 16:45:20',
|
|
payTime: '2023-12-07 16:46:50',
|
|
predictDeliveryTime: '2023-12-07 18:30:00',
|
|
pickTime: '2023-12-07 17:25:10',
|
|
completeDeliveryTime: '2023-12-07 18:20:30',
|
|
completeTime: '2023-12-07 18:25:45',
|
|
refundStatus: 4,
|
|
applyRefundTime: '2023-12-07 19:10:25',
|
|
refundReason: '不想要了，要求退款',
|
|
remark: '联系我',
|
|
productOrders: [
|
|
{
|
|
shopName: '鲜花店',
|
|
productName: '玫瑰花束',
|
|
productSpecName: '19朵',
|
|
productCount: 1,
|
|
originPrice: '138.00',
|
|
finalPrice: '128.00',
|
|
productOrderMoney: '128.00',
|
|
productImg: 'https://fuss10.elemecdn.com/b/a5/8f2a5fb6b12afe3e45e9c5e1c58e1jpeg.jpeg'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
computed: {
|
|
filteredOrders() {
|
|
let filtered = this.orders;
|
|
|
|
// 根据标签页筛选
|
|
if (this.activeTab !== 'all') {
|
|
const statusMap = {
|
|
'pending': -2,
|
|
'processing': 1,
|
|
'completed': 2,
|
|
'rejected': 4
|
|
};
|
|
filtered = filtered.filter(order => order.refundStatus === statusMap[this.activeTab]);
|
|
}
|
|
|
|
// 根据搜索条件筛选
|
|
if (this.searchForm.orderNo) {
|
|
filtered = filtered.filter(order =>
|
|
order.orderNo.includes(this.searchForm.orderNo)
|
|
);
|
|
}
|
|
|
|
if (this.searchForm.receiverName) {
|
|
filtered = filtered.filter(order =>
|
|
order.receiverName.includes(this.searchForm.receiverName)
|
|
);
|
|
}
|
|
|
|
return filtered;
|
|
},
|
|
totalOrders() {
|
|
return this.filteredOrders.length;
|
|
}
|
|
},
|
|
methods: {
|
|
getRefundStatus(val) {
|
|
const statusMap = {
|
|
0: '正常',
|
|
1: '退款中',
|
|
2: '完全退款',
|
|
3: '部分退款',
|
|
4: '拒绝用户退款',
|
|
'-1': '退款失败',
|
|
'-2': '用户申请退款中'
|
|
};
|
|
return statusMap[val] || '未知状态';
|
|
},
|
|
getStatusClass(val) {
|
|
const classMap = {
|
|
0: 'success',
|
|
1: 'processing',
|
|
2: 'success',
|
|
3: 'success',
|
|
4: 'rejected',
|
|
'-1': 'rejected',
|
|
'-2': 'pending'
|
|
};
|
|
return classMap[val] || '';
|
|
},
|
|
tableRowClassName({row}) {
|
|
if (row.refundStatus === -2) {
|
|
return 'warning-row';
|
|
}
|
|
return '';
|
|
},
|
|
handleTabClick(tab) {
|
|
this.currentPage = 1;
|
|
},
|
|
handleSearch() {
|
|
this.loading = true;
|
|
setTimeout(() => {
|
|
this.loading = false;
|
|
this.$message.success('查询完成');
|
|
}, 500);
|
|
},
|
|
handleReset() {
|
|
this.searchForm = {
|
|
orderNo: '',
|
|
receiverName: '',
|
|
dateRange: null
|
|
};
|
|
this.handleSearch();
|
|
},
|
|
viewDetail(order) {
|
|
this.currentOrder = order;
|
|
this.detailDialogVisible = true;
|
|
this.showRejectInput = false;
|
|
this.rejectReason = '';
|
|
},
|
|
showAuditDialog(order) {
|
|
this.viewDetail(order);
|
|
},
|
|
handleApprove() {
|
|
this.$confirm('确认同意该退款申请吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.currentOrder.refundStatus = 1;
|
|
this.detailDialogVisible = false;
|
|
this.$message({
|
|
type: 'success',
|
|
message: '退款申请已同意，系统将自动处理退款！'
|
|
});
|
|
// 更新统计数据
|
|
this.statistics.pendingCount--;
|
|
this.statistics.todayAuditCount++;
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消操作'
|
|
});
|
|
});
|
|
},
|
|
handleReject() {
|
|
if (!this.rejectReason.trim()) {
|
|
this.$message.error('请输入拒绝原因');
|
|
return;
|
|
}
|
|
this.$confirm('确认拒绝该退款申请吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.currentOrder.refundStatus = 4;
|
|
this.currentOrder.rejectReason = this.rejectReason;
|
|
this.detailDialogVisible = false;
|
|
this.$message({
|
|
type: 'success',
|
|
message: '已拒绝该退款申请！'
|
|
});
|
|
// 更新统计数据
|
|
this.statistics.pendingCount--;
|
|
this.statistics.todayAuditCount++;
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消操作'
|
|
});
|
|
});
|
|
},
|
|
previewImage(url) {
|
|
this.previewImageUrl = url;
|
|
this.imagePreviewVisible = true;
|
|
},
|
|
handleSizeChange(val) {
|
|
this.pageSize = val;
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.currentPage = val;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$message({
|
|
message: '欢迎使用退款审核管理系统',
|
|
type: 'success'
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|