| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>叁强鲜配 - 退款处理</title>
- <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
- <link rel="stylesheet" href="https://unpkg.com/@element-plus/icons-vue/dist/index.css">
- <style>
- * { margin: 0; padding: 0; box-sizing: border-box; }
- body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f7fa; color: #303133; }
- .topbar { height: 60px; background: linear-gradient(135deg, #1989fa 0%, #07c160 100%); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; color: white; }
- .topbar-logo h1 { font-size: 22px; font-weight: 600; }
- .topbar-logo span { font-size: 13px; opacity: 0.85; }
- .topbar-user { display: flex; align-items: center; gap: 16px; }
- .main-container { display: flex; min-height: calc(100vh - 60px); }
- .sidebar { width: 220px; background: #fff; border-right: 1px solid #e4e7ed; padding: 16px 0; }
- .menu-item { padding: 14px 24px; cursor: pointer; display: flex; align-items: center; gap: 12px; color: #606266; font-size: 14px; }
- .menu-item:hover { background: #f5f7fa; color: #1989fa; }
- .menu-item.active { background: #ecf5ff; color: #1989fa; border-right: 3px solid #1989fa; }
- .content { flex: 1; padding: 24px; }
- .breadcrumb { font-size: 13px; color: #909399; margin-bottom: 8px; }
- .card { background: #fff; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
- .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #ebeef5; }
- .card-title { font-size: 16px; font-weight: 600; }
- .status-tag { padding: 4px 12px; border-radius: 4px; font-size: 12px; }
- .status-tag.primary { background: #ecf5ff; color: #1989fa; }
- .status-tag.success { background: #f0f9eb; color: #07c160; }
- .status-tag.warning { background: #fdf6ec; color: #ff976a; }
- .status-tag.danger { background: #fef0f0; color: #ee0a24; }
- .status-tag.info { background: #f4f4f5; color: #909399; }
- .form-section-title { font-size: 15px; font-weight: 600; margin-bottom: 16px; padding-left: 12px; border-left: 4px solid #1989fa; }
- .form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
- .page-nav { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
- .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 24px; }
- .stats-card { background: #fff; border-radius: 12px; padding: 20px; display: flex; align-items: center; gap: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
- .stats-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
- .stats-icon.warning { background: #fdf6ec; color: #ff976a; }
- .stats-icon.danger { background: #fef0f0; color: #ee0a24; }
- .stats-icon.success { background: #f0f9eb; color: #07c160; }
- .stats-icon.info { background: #f4f4f5; color: #909399; }
- .stats-info h3 { font-size: 24px; font-weight: 600; margin-bottom: 4px; }
- .stats-info p { font-size: 13px; color: #909399; }
- .refund-type-tabs { display: flex; gap: 4px; padding: 4px; background: #f5f7fa; border-radius: 8px; width: fit-content; margin-bottom: 20px; }
- .refund-tab { padding: 10px 20px; cursor: pointer; border-radius: 6px; font-size: 14px; color: #606266; transition: all 0.3s; }
- .refund-tab:hover { color: #1989fa; }
- .refund-tab.active { background: #fff; color: #1989fa; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
- .refund-detail-card { background: #f9f9f9; border-radius: 8px; padding: 20px; margin-top: 16px; }
- .refund-detail-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #ebeef5; }
- .refund-detail-row:last-child { border-bottom: none; }
- .refund-detail-label { color: #909399; font-size: 14px; }
- .refund-detail-value { color: #303133; font-size: 14px; font-weight: 500; }
- .refund-detail-value.highlight { color: #ee0a24; font-weight: 700; }
- .process-timeline { padding: 20px; }
- .timeline-item { display: flex; gap: 16px; padding-bottom: 24px; position: relative; }
- .timeline-item::before { content: ''; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: #e4e7ed; }
- .timeline-item:last-child::before { display: none; }
- .timeline-dot { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; }
- .timeline-dot.success { background: #07c160; color: #fff; }
- .timeline-dot.processing { background: #1989fa; color: #fff; }
- .timeline-dot.pending { background: #e4e7ed; color: #909399; }
- .timeline-content { flex: 1; }
- .timeline-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
- .timeline-desc { font-size: 12px; color: #909399; }
- .timeline-time { font-size: 12px; color: #909399; margin-top: 4px; }
- .action-btn-group { display: flex; gap: 8px; margin-top: 12px; }
- .voucher-upload { border: 2px dashed #e4e7ed; border-radius: 8px; padding: 24px; text-align: center; cursor: pointer; }
- .voucher-upload:hover { border-color: #1989fa; }
- .voucher-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
- .voucher-item { position: relative; border-radius: 8px; overflow: hidden; }
- .voucher-item img { width: 100%; height: 100px; object-fit: cover; }
- .voucher-delete { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; background: rgba(0,0,0,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; }
- </style>
- </head>
- <body>
- <div class="topbar">
- <div class="topbar-logo">
- <h1>叁强鲜配</h1>
- <span>运营管理后台</span>
- </div>
- <div class="topbar-user">
- <el-avatar :size="32" style="background:#fff;color:#1989fa;">管</el-avatar>
- <span>管理员</span>
- </div>
- </div>
- <div class="main-container">
- <div class="sidebar">
- <div class="menu-item"><el-icon><DataAnalysis /></el-icon><span>首页</span></div>
- <div class="menu-item"><el-icon><User /></el-icon><span>用户管理</span></div>
- <div class="menu-item"><el-icon><Location /></el-icon><span>区域管理</span></div>
- <div class="menu-item"><el-icon><Goods /></el-icon><span>商品管理</span></div>
- <div class="menu-item"><el-icon><Search /></el-icon><span>询价管理</span></div>
- <div class="menu-item"><el-icon><Ticket /></el-icon><span>报价管理</span></div>
- <div class="menu-item"><el-icon><PriceTag /></el-icon><span>价格管理</span></div>
- <div class="menu-item"><el-icon><ShoppingCart /></el-icon><span>订单管理</span></div>
- <div class="menu-item"><el-icon><Van /></el-icon><span>配送管理</span></div>
- <div class="menu-item active"><el-icon><Wallet /></el-icon><span>结算管理</span></div>
- </div>
- <div class="content">
- <div class="breadcrumb">结算管理 / 退款处理</div>
- <!-- 统计卡片 -->
- <div class="stats-grid">
- <div class="stats-card">
- <div class="stats-icon warning">
- <el-icon><Clock /></el-icon>
- </div>
- <div class="stats-info">
- <h3>5</h3>
- <p>待处理退款</p>
- </div>
- </div>
- <div class="stats-card">
- <div class="stats-icon danger">
- <el-icon><RefreshRight /></el-icon>
- </div>
- <div class="stats-info">
- <h3>2</h3>
- <p>退款失败</p>
- </div>
- </div>
- <div class="stats-card">
- <div class="stats-icon success">
- <el-icon><CircleCheck /></el-icon>
- </div>
- <div class="stats-info">
- <h3>28</h3>
- <p>本月退款成功</p>
- </div>
- </div>
- <div class="stats-card">
- <div class="stats-icon info">
- <el-icon><Money /></el-icon>
- </div>
- <div class="stats-info">
- <h3>¥8,560</h3>
- <p>本月退款金额</p>
- </div>
- </div>
- </div>
- <!-- Tab切换 -->
- <div class="refund-type-tabs">
- <div class="refund-tab active">待处理退款</div>
- <div class="refund-tab">退款中</div>
- <div class="refund-tab">退款成功</div>
- <div class="refund-tab">退款失败</div>
- </div>
- <!-- 搜索筛选 -->
- <div class="card">
- <div class="form-section-title">筛选条件</div>
- <div class="form-row">
- <el-select placeholder="退款方式" style="width:140px;">
- <el-option label="全部方式" value="" />
- <el-option label="微信退款" value="wechat" />
- <el-option label="线下冲销" value="offline" />
- </el-select>
- <el-select placeholder="退款状态" style="width:140px;">
- <el-option label="全部状态" value="" />
- <el-option label="待处理" value="pending" />
- <el-option label="处理中" value="processing" />
- <el-option label="成功" value="success" />
- <el-option label="失败" value="failed" />
- </el-select>
- <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:240px;" />
- <el-input placeholder="订单编号/退款单号" prefix-icon="Search" style="width:200px;" />
- <el-button type="primary">搜索</el-button>
- <el-button>重置</el-button>
- </div>
- </div>
- <!-- 退款列表 -->
- <div class="card">
- <div class="card-header">
- <span class="card-title">退款单列表</span>
- </div>
- <el-table :data="refundList" style="width:100%">
- <el-table-column prop="refundNo" label="退款单号" width="180" />
- <el-table-column prop="orderNo" label="订单编号" width="180" />
- <el-table-column prop="clientName" label="客户名称" width="120" />
- <el-table-column prop="region" label="区域" width="100" />
- <el-table-column prop="refundAmount" label="退款金额" width="120">
- <template #default="{row}">
- <span style="color:#ee0a24;font-weight:600;">¥{{row.refundAmount}}</span>
- </template>
- </el-table-column>
- <el-table-column prop="refundMethod" label="退款方式" width="100">
- <template #default="{row}">
- <span :class="'status-tag '+(row.refundMethod=='wechat'?'primary':'info')">
- {{row.refundMethod=='wechat'?'微信退款':'线下冲销'}}
- </span>
- </template>
- </el-table-column>
- <el-table-column prop="status" label="状态" width="100">
- <template #default="{row}">
- <span :class="'status-tag '+row.statusClass">{{row.statusText}}</span>
- </template>
- </el-table-column>
- <el-table-column prop="createTime" label="申请时间" width="150" />
- <el-table-column label="操作" width="180">
- <template #default>
- <el-button type="primary" link>处理</el-button>
- <el-button type="success" link>详情</el-button>
- </template>
- </el-table-column>
- </el-table>
- <div class="page-nav">
- <el-pagination background layout="prev, pager, next" :total="50" />
- </div>
- </div>
- <!-- 退款处理详情 -->
- <div class="card">
- <div class="form-section-title">退款处理 - REF20260319005</div>
- <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
- <!-- 左侧:退款信息 -->
- <div>
- <div class="refund-detail-card">
- <div class="form-section-title" style="margin-bottom:12px;">退款信息</div>
- <div class="refund-detail-row">
- <span class="refund-detail-label">退款单号</span>
- <span class="refund-detail-value">REF20260319005</span>
- </div>
- <div class="refund-detail-row">
- <span class="refund-detail-label">订单编号</span>
- <span class="refund-detail-value">ORD202603150023</span>
- </div>
- <div class="refund-detail-row">
- <span class="refund-detail-label">客户名称</span>
- <span class="refund-detail-value">XX餐厅</span>
- </div>
- <div class="refund-detail-row">
- <span class="refund-detail-label">订单金额</span>
- <span class="refund-detail-value">¥1,280.00</span>
- </div>
- <div class="refund-detail-row">
- <span class="refund-detail-label">退款金额</span>
- <span class="refund-detail-value highlight">¥560.00</span>
- </div>
- <div class="refund-detail-row">
- <span class="refund-detail-label">退款原因</span>
- <span class="refund-detail-value">商品质量问题,部分商品损坏</span>
- </div>
- <div class="refund-detail-row">
- <span class="refund-detail-label">退款方式</span>
- <span class="status-tag primary">微信退款</span>
- </div>
- <div class="refund-detail-row">
- <span class="refund-detail-label">申请时间</span>
- <span class="refund-detail-value">2026-03-19 09:30</span>
- </div>
- <div class="refund-detail-row">
- <span class="refund-detail-label">申请人</span>
- <span class="refund-detail-value">张三(客户)</span>
- </div>
- </div>
- </div>
- <!-- 右侧:处理操作 -->
- <div>
- <div class="refund-detail-card">
- <div class="form-section-title" style="margin-bottom:12px;">退款操作</div>
- <div style="margin-bottom:20px;">
- <div style="font-size:13px;color:#606266;margin-bottom:8px;">退款方式选择</div>
- <div style="display:flex;gap:12px;">
- <div style="flex:1;padding:12px;border:2px solid #1989fa;border-radius:8px;background:#ecf5ff;cursor:pointer;">
- <div style="font-weight:600;color:#1989fa;margin-bottom:4px;">微信退款</div>
- <div style="font-size:12px;color:#909399;">自动原路退回</div>
- </div>
- <div style="flex:1;padding:12px;border:2px solid #ebeef5;border-radius:8px;cursor:pointer;">
- <div style="font-weight:600;color:#606266;margin-bottom:4px;">线下冲销</div>
- <div style="font-size:12px;color:#909399;">手动处理</div>
- </div>
- </div>
- </div>
- <div style="margin-bottom:20px;">
- <div style="font-size:13px;color:#606266;margin-bottom:8px;">
- <span style="color:#ee0a24;">*</span> 退款金额
- </div>
- <el-input placeholder="输入退款金额" style="width:100%;">
- <template #prepend>¥</template>
- </el-input>
- <div style="font-size:12px;color:#909399;margin-top:4px;">最大可退:¥560.00</div>
- </div>
- <div style="margin-bottom:20px;">
- <div style="font-size:13px;color:#606266;margin-bottom:8px;">退款说明</div>
- <el-input type="textarea" :rows="3" placeholder="填写退款原因或备注信息" />
- </div>
- <div style="margin-bottom:20px;">
- <div style="font-size:13px;color:#606266;margin-bottom:8px;">上传凭证</div>
- <div class="voucher-upload">
- <el-icon style="font-size:32px;color:#c0c4cc;margin-bottom:8px;"><Upload /></el-icon>
- <div style="color:#909399;font-size:13px;">点击上传退款凭证</div>
- <div style="color:#c0c4cc;font-size:12px;margin-top:4px;">支持 JPG、PNG 格式</div>
- </div>
- </div>
- <div class="action-btn-group">
- <el-button type="primary" style="flex:1;">确认退款</el-button>
- <el-button style="flex:1;">取消</el-button>
- </div>
- </div>
- </div>
- </div>
- <!-- 处理进度 -->
- <div class="refund-detail-card" style="margin-top:20px;">
- <div class="form-section-title" style="margin-bottom:12px;">退款进度</div>
- <div class="process-timeline">
- <div class="timeline-item">
- <div class="timeline-dot success"><el-icon><Check /></el-icon></div>
- <div class="timeline-content">
- <div class="timeline-title">客户发起退款申请</div>
- <div class="timeline-desc">商品质量问题,部分商品损坏</div>
- <div class="timeline-time">2026-03-19 09:30</div>
- </div>
- </div>
- <div class="timeline-item">
- <div class="timeline-dot processing"><el-icon><Loading /></el-icon></div>
- <div class="timeline-content">
- <div class="timeline-title">运营人员处理中</div>
- <div class="timeline-desc">正在审核退款申请</div>
- <div class="timeline-time">2026-03-19 10:15</div>
- </div>
- </div>
- <div class="timeline-item">
- <div class="timeline-dot pending"></div>
- <div class="timeline-content">
- <div class="timeline-title">退款执行</div>
- <div class="timeline-desc">等待执行退款</div>
- </div>
- </div>
- <div class="timeline-item">
- <div class="timeline-dot pending"></div>
- <div class="timeline-content">
- <div class="timeline-title">退款完成</div>
- <div class="timeline-desc">退款成功到账</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- 线下冲销说明 -->
- <div class="card">
- <div class="form-section-title">线下冲销处理说明</div>
- <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;">
- <div style="padding:20px;background:#f5f7fa;border-radius:8px;text-align:center;">
- <div style="width:48px;height:48px;background:#ecf5ff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;">
- <el-icon style="font-size:24px;color:#1989fa;"><Document /></el-icon>
- </div>
- <div style="font-weight:600;margin-bottom:8px;">填写冲销说明</div>
- <div style="font-size:13px;color:#909399;">详细说明退款原因及处理方式</div>
- </div>
- <div style="padding:20px;background:#f5f7fa;border-radius:8px;text-align:center;">
- <div style="width:48px;height:48px;background:#fdf6ec;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;">
- <el-icon style="font-size:24px;color:#ff976a;"><Picture /></el-icon>
- </div>
- <div style="font-weight:600;margin-bottom:8px;">上传凭证</div>
- <div style="font-size:13px;color:#909399;">上传转账截图或相关凭证</div>
- </div>
- <div style="padding:20px;background:#f5f7fa;border-radius:8px;text-align:center;">
- <div style="width:48px;height:48px;background:#f0f9eb;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;">
- <el-icon style="font-size:24px;color:#07c160;"><CircleCheck /></el-icon>
- </div>
- <div style="font-weight:600;margin-bottom:8px;">确认完成</div>
- <div style="font-size:13px;color:#909399;">运营确认后标记退款成功</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
- <script src="https://unpkg.com/element-plus"></script>
- <script src="https://unpkg.com/@element-plus/icons-vue"></script>
- <script>
- const { createApp, ref } = Vue;
- const app = createApp({
- setup() {
- const refundList = ref([
- { refundNo: 'REF20260319005', orderNo: 'ORD202603150023', clientName: 'XX餐厅', region: '城东', refundAmount: '560.00', refundMethod: 'wechat', status: 'pending', statusClass: 'warning', statusText: '待处理', createTime: '2026-03-19 09:30' },
- { refundNo: 'REF20260319004', orderNo: 'ORD202603140018', clientName: 'YY超市', region: '城东', refundAmount: '320.00', refundMethod: 'wechat', status: 'processing', statusClass: 'primary', statusText: '处理中', createTime: '2026-03-19 08:45' },
- { refundNo: 'REF20260319003', orderNo: 'ORD202603130012', clientName: 'ZZ食堂', region: '城西', refundAmount: '180.00', refundMethod: 'offline', status: 'failed', statusClass: 'danger', statusText: '失败', createTime: '2026-03-19 08:00' },
- { refundNo: 'REF20260319002', orderNo: 'ORD202603120008', clientName: 'AA饭店', region: '城东', refundAmount: '420.00', refundMethod: 'wechat', status: 'success', statusClass: 'success', statusText: '成功', createTime: '2026-03-19 07:30' },
- { refundNo: 'REF20260319001', orderNo: 'ORD202603110005', clientName: 'BB商行', region: '城南', refundAmount: '260.00', refundMethod: 'offline', status: 'success', statusClass: 'success', statusText: '成功', createTime: '2026-03-19 07:00' },
- ]);
- return { refundList };
- }
- });
- app.use(ElementPlus);
- for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
- app.component(key, component);
- }
- app.mount('#app');
- </script>
- </body>
- </html>
|