退款处理.html 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>叁强鲜配 - 退款处理</title>
  7. <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  8. <link rel="stylesheet" href="https://unpkg.com/@element-plus/icons-vue/dist/index.css">
  9. <style>
  10. * { margin: 0; padding: 0; box-sizing: border-box; }
  11. body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f7fa; color: #303133; }
  12. .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; }
  13. .topbar-logo h1 { font-size: 22px; font-weight: 600; }
  14. .topbar-logo span { font-size: 13px; opacity: 0.85; }
  15. .topbar-user { display: flex; align-items: center; gap: 16px; }
  16. .main-container { display: flex; min-height: calc(100vh - 60px); }
  17. .sidebar { width: 220px; background: #fff; border-right: 1px solid #e4e7ed; padding: 16px 0; }
  18. .menu-item { padding: 14px 24px; cursor: pointer; display: flex; align-items: center; gap: 12px; color: #606266; font-size: 14px; }
  19. .menu-item:hover { background: #f5f7fa; color: #1989fa; }
  20. .menu-item.active { background: #ecf5ff; color: #1989fa; border-right: 3px solid #1989fa; }
  21. .content { flex: 1; padding: 24px; }
  22. .breadcrumb { font-size: 13px; color: #909399; margin-bottom: 8px; }
  23. .card { background: #fff; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
  24. .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #ebeef5; }
  25. .card-title { font-size: 16px; font-weight: 600; }
  26. .status-tag { padding: 4px 12px; border-radius: 4px; font-size: 12px; }
  27. .status-tag.primary { background: #ecf5ff; color: #1989fa; }
  28. .status-tag.success { background: #f0f9eb; color: #07c160; }
  29. .status-tag.warning { background: #fdf6ec; color: #ff976a; }
  30. .status-tag.danger { background: #fef0f0; color: #ee0a24; }
  31. .status-tag.info { background: #f4f4f5; color: #909399; }
  32. .form-section-title { font-size: 15px; font-weight: 600; margin-bottom: 16px; padding-left: 12px; border-left: 4px solid #1989fa; }
  33. .form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
  34. .page-nav { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
  35. .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 24px; }
  36. .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); }
  37. .stats-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
  38. .stats-icon.warning { background: #fdf6ec; color: #ff976a; }
  39. .stats-icon.danger { background: #fef0f0; color: #ee0a24; }
  40. .stats-icon.success { background: #f0f9eb; color: #07c160; }
  41. .stats-icon.info { background: #f4f4f5; color: #909399; }
  42. .stats-info h3 { font-size: 24px; font-weight: 600; margin-bottom: 4px; }
  43. .stats-info p { font-size: 13px; color: #909399; }
  44. .refund-type-tabs { display: flex; gap: 4px; padding: 4px; background: #f5f7fa; border-radius: 8px; width: fit-content; margin-bottom: 20px; }
  45. .refund-tab { padding: 10px 20px; cursor: pointer; border-radius: 6px; font-size: 14px; color: #606266; transition: all 0.3s; }
  46. .refund-tab:hover { color: #1989fa; }
  47. .refund-tab.active { background: #fff; color: #1989fa; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
  48. .refund-detail-card { background: #f9f9f9; border-radius: 8px; padding: 20px; margin-top: 16px; }
  49. .refund-detail-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #ebeef5; }
  50. .refund-detail-row:last-child { border-bottom: none; }
  51. .refund-detail-label { color: #909399; font-size: 14px; }
  52. .refund-detail-value { color: #303133; font-size: 14px; font-weight: 500; }
  53. .refund-detail-value.highlight { color: #ee0a24; font-weight: 700; }
  54. .process-timeline { padding: 20px; }
  55. .timeline-item { display: flex; gap: 16px; padding-bottom: 24px; position: relative; }
  56. .timeline-item::before { content: ''; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: #e4e7ed; }
  57. .timeline-item:last-child::before { display: none; }
  58. .timeline-dot { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; }
  59. .timeline-dot.success { background: #07c160; color: #fff; }
  60. .timeline-dot.processing { background: #1989fa; color: #fff; }
  61. .timeline-dot.pending { background: #e4e7ed; color: #909399; }
  62. .timeline-content { flex: 1; }
  63. .timeline-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
  64. .timeline-desc { font-size: 12px; color: #909399; }
  65. .timeline-time { font-size: 12px; color: #909399; margin-top: 4px; }
  66. .action-btn-group { display: flex; gap: 8px; margin-top: 12px; }
  67. .voucher-upload { border: 2px dashed #e4e7ed; border-radius: 8px; padding: 24px; text-align: center; cursor: pointer; }
  68. .voucher-upload:hover { border-color: #1989fa; }
  69. .voucher-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
  70. .voucher-item { position: relative; border-radius: 8px; overflow: hidden; }
  71. .voucher-item img { width: 100%; height: 100px; object-fit: cover; }
  72. .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; }
  73. </style>
  74. </head>
  75. <body>
  76. <div class="topbar">
  77. <div class="topbar-logo">
  78. <h1>叁强鲜配</h1>
  79. <span>运营管理后台</span>
  80. </div>
  81. <div class="topbar-user">
  82. <el-avatar :size="32" style="background:#fff;color:#1989fa;">管</el-avatar>
  83. <span>管理员</span>
  84. </div>
  85. </div>
  86. <div class="main-container">
  87. <div class="sidebar">
  88. <div class="menu-item"><el-icon><DataAnalysis /></el-icon><span>首页</span></div>
  89. <div class="menu-item"><el-icon><User /></el-icon><span>用户管理</span></div>
  90. <div class="menu-item"><el-icon><Location /></el-icon><span>区域管理</span></div>
  91. <div class="menu-item"><el-icon><Goods /></el-icon><span>商品管理</span></div>
  92. <div class="menu-item"><el-icon><Search /></el-icon><span>询价管理</span></div>
  93. <div class="menu-item"><el-icon><Ticket /></el-icon><span>报价管理</span></div>
  94. <div class="menu-item"><el-icon><PriceTag /></el-icon><span>价格管理</span></div>
  95. <div class="menu-item"><el-icon><ShoppingCart /></el-icon><span>订单管理</span></div>
  96. <div class="menu-item"><el-icon><Van /></el-icon><span>配送管理</span></div>
  97. <div class="menu-item active"><el-icon><Wallet /></el-icon><span>结算管理</span></div>
  98. </div>
  99. <div class="content">
  100. <div class="breadcrumb">结算管理 / 退款处理</div>
  101. <!-- 统计卡片 -->
  102. <div class="stats-grid">
  103. <div class="stats-card">
  104. <div class="stats-icon warning">
  105. <el-icon><Clock /></el-icon>
  106. </div>
  107. <div class="stats-info">
  108. <h3>5</h3>
  109. <p>待处理退款</p>
  110. </div>
  111. </div>
  112. <div class="stats-card">
  113. <div class="stats-icon danger">
  114. <el-icon><RefreshRight /></el-icon>
  115. </div>
  116. <div class="stats-info">
  117. <h3>2</h3>
  118. <p>退款失败</p>
  119. </div>
  120. </div>
  121. <div class="stats-card">
  122. <div class="stats-icon success">
  123. <el-icon><CircleCheck /></el-icon>
  124. </div>
  125. <div class="stats-info">
  126. <h3>28</h3>
  127. <p>本月退款成功</p>
  128. </div>
  129. </div>
  130. <div class="stats-card">
  131. <div class="stats-icon info">
  132. <el-icon><Money /></el-icon>
  133. </div>
  134. <div class="stats-info">
  135. <h3>¥8,560</h3>
  136. <p>本月退款金额</p>
  137. </div>
  138. </div>
  139. </div>
  140. <!-- Tab切换 -->
  141. <div class="refund-type-tabs">
  142. <div class="refund-tab active">待处理退款</div>
  143. <div class="refund-tab">退款中</div>
  144. <div class="refund-tab">退款成功</div>
  145. <div class="refund-tab">退款失败</div>
  146. </div>
  147. <!-- 搜索筛选 -->
  148. <div class="card">
  149. <div class="form-section-title">筛选条件</div>
  150. <div class="form-row">
  151. <el-select placeholder="退款方式" style="width:140px;">
  152. <el-option label="全部方式" value="" />
  153. <el-option label="微信退款" value="wechat" />
  154. <el-option label="线下冲销" value="offline" />
  155. </el-select>
  156. <el-select placeholder="退款状态" style="width:140px;">
  157. <el-option label="全部状态" value="" />
  158. <el-option label="待处理" value="pending" />
  159. <el-option label="处理中" value="processing" />
  160. <el-option label="成功" value="success" />
  161. <el-option label="失败" value="failed" />
  162. </el-select>
  163. <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:240px;" />
  164. <el-input placeholder="订单编号/退款单号" prefix-icon="Search" style="width:200px;" />
  165. <el-button type="primary">搜索</el-button>
  166. <el-button>重置</el-button>
  167. </div>
  168. </div>
  169. <!-- 退款列表 -->
  170. <div class="card">
  171. <div class="card-header">
  172. <span class="card-title">退款单列表</span>
  173. </div>
  174. <el-table :data="refundList" style="width:100%">
  175. <el-table-column prop="refundNo" label="退款单号" width="180" />
  176. <el-table-column prop="orderNo" label="订单编号" width="180" />
  177. <el-table-column prop="clientName" label="客户名称" width="120" />
  178. <el-table-column prop="region" label="区域" width="100" />
  179. <el-table-column prop="refundAmount" label="退款金额" width="120">
  180. <template #default="{row}">
  181. <span style="color:#ee0a24;font-weight:600;">¥{{row.refundAmount}}</span>
  182. </template>
  183. </el-table-column>
  184. <el-table-column prop="refundMethod" label="退款方式" width="100">
  185. <template #default="{row}">
  186. <span :class="'status-tag '+(row.refundMethod=='wechat'?'primary':'info')">
  187. {{row.refundMethod=='wechat'?'微信退款':'线下冲销'}}
  188. </span>
  189. </template>
  190. </el-table-column>
  191. <el-table-column prop="status" label="状态" width="100">
  192. <template #default="{row}">
  193. <span :class="'status-tag '+row.statusClass">{{row.statusText}}</span>
  194. </template>
  195. </el-table-column>
  196. <el-table-column prop="createTime" label="申请时间" width="150" />
  197. <el-table-column label="操作" width="180">
  198. <template #default>
  199. <el-button type="primary" link>处理</el-button>
  200. <el-button type="success" link>详情</el-button>
  201. </template>
  202. </el-table-column>
  203. </el-table>
  204. <div class="page-nav">
  205. <el-pagination background layout="prev, pager, next" :total="50" />
  206. </div>
  207. </div>
  208. <!-- 退款处理详情 -->
  209. <div class="card">
  210. <div class="form-section-title">退款处理 - REF20260319005</div>
  211. <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
  212. <!-- 左侧:退款信息 -->
  213. <div>
  214. <div class="refund-detail-card">
  215. <div class="form-section-title" style="margin-bottom:12px;">退款信息</div>
  216. <div class="refund-detail-row">
  217. <span class="refund-detail-label">退款单号</span>
  218. <span class="refund-detail-value">REF20260319005</span>
  219. </div>
  220. <div class="refund-detail-row">
  221. <span class="refund-detail-label">订单编号</span>
  222. <span class="refund-detail-value">ORD202603150023</span>
  223. </div>
  224. <div class="refund-detail-row">
  225. <span class="refund-detail-label">客户名称</span>
  226. <span class="refund-detail-value">XX餐厅</span>
  227. </div>
  228. <div class="refund-detail-row">
  229. <span class="refund-detail-label">订单金额</span>
  230. <span class="refund-detail-value">¥1,280.00</span>
  231. </div>
  232. <div class="refund-detail-row">
  233. <span class="refund-detail-label">退款金额</span>
  234. <span class="refund-detail-value highlight">¥560.00</span>
  235. </div>
  236. <div class="refund-detail-row">
  237. <span class="refund-detail-label">退款原因</span>
  238. <span class="refund-detail-value">商品质量问题,部分商品损坏</span>
  239. </div>
  240. <div class="refund-detail-row">
  241. <span class="refund-detail-label">退款方式</span>
  242. <span class="status-tag primary">微信退款</span>
  243. </div>
  244. <div class="refund-detail-row">
  245. <span class="refund-detail-label">申请时间</span>
  246. <span class="refund-detail-value">2026-03-19 09:30</span>
  247. </div>
  248. <div class="refund-detail-row">
  249. <span class="refund-detail-label">申请人</span>
  250. <span class="refund-detail-value">张三(客户)</span>
  251. </div>
  252. </div>
  253. </div>
  254. <!-- 右侧:处理操作 -->
  255. <div>
  256. <div class="refund-detail-card">
  257. <div class="form-section-title" style="margin-bottom:12px;">退款操作</div>
  258. <div style="margin-bottom:20px;">
  259. <div style="font-size:13px;color:#606266;margin-bottom:8px;">退款方式选择</div>
  260. <div style="display:flex;gap:12px;">
  261. <div style="flex:1;padding:12px;border:2px solid #1989fa;border-radius:8px;background:#ecf5ff;cursor:pointer;">
  262. <div style="font-weight:600;color:#1989fa;margin-bottom:4px;">微信退款</div>
  263. <div style="font-size:12px;color:#909399;">自动原路退回</div>
  264. </div>
  265. <div style="flex:1;padding:12px;border:2px solid #ebeef5;border-radius:8px;cursor:pointer;">
  266. <div style="font-weight:600;color:#606266;margin-bottom:4px;">线下冲销</div>
  267. <div style="font-size:12px;color:#909399;">手动处理</div>
  268. </div>
  269. </div>
  270. </div>
  271. <div style="margin-bottom:20px;">
  272. <div style="font-size:13px;color:#606266;margin-bottom:8px;">
  273. <span style="color:#ee0a24;">*</span> 退款金额
  274. </div>
  275. <el-input placeholder="输入退款金额" style="width:100%;">
  276. <template #prepend>¥</template>
  277. </el-input>
  278. <div style="font-size:12px;color:#909399;margin-top:4px;">最大可退:¥560.00</div>
  279. </div>
  280. <div style="margin-bottom:20px;">
  281. <div style="font-size:13px;color:#606266;margin-bottom:8px;">退款说明</div>
  282. <el-input type="textarea" :rows="3" placeholder="填写退款原因或备注信息" />
  283. </div>
  284. <div style="margin-bottom:20px;">
  285. <div style="font-size:13px;color:#606266;margin-bottom:8px;">上传凭证</div>
  286. <div class="voucher-upload">
  287. <el-icon style="font-size:32px;color:#c0c4cc;margin-bottom:8px;"><Upload /></el-icon>
  288. <div style="color:#909399;font-size:13px;">点击上传退款凭证</div>
  289. <div style="color:#c0c4cc;font-size:12px;margin-top:4px;">支持 JPG、PNG 格式</div>
  290. </div>
  291. </div>
  292. <div class="action-btn-group">
  293. <el-button type="primary" style="flex:1;">确认退款</el-button>
  294. <el-button style="flex:1;">取消</el-button>
  295. </div>
  296. </div>
  297. </div>
  298. </div>
  299. <!-- 处理进度 -->
  300. <div class="refund-detail-card" style="margin-top:20px;">
  301. <div class="form-section-title" style="margin-bottom:12px;">退款进度</div>
  302. <div class="process-timeline">
  303. <div class="timeline-item">
  304. <div class="timeline-dot success"><el-icon><Check /></el-icon></div>
  305. <div class="timeline-content">
  306. <div class="timeline-title">客户发起退款申请</div>
  307. <div class="timeline-desc">商品质量问题,部分商品损坏</div>
  308. <div class="timeline-time">2026-03-19 09:30</div>
  309. </div>
  310. </div>
  311. <div class="timeline-item">
  312. <div class="timeline-dot processing"><el-icon><Loading /></el-icon></div>
  313. <div class="timeline-content">
  314. <div class="timeline-title">运营人员处理中</div>
  315. <div class="timeline-desc">正在审核退款申请</div>
  316. <div class="timeline-time">2026-03-19 10:15</div>
  317. </div>
  318. </div>
  319. <div class="timeline-item">
  320. <div class="timeline-dot pending"></div>
  321. <div class="timeline-content">
  322. <div class="timeline-title">退款执行</div>
  323. <div class="timeline-desc">等待执行退款</div>
  324. </div>
  325. </div>
  326. <div class="timeline-item">
  327. <div class="timeline-dot pending"></div>
  328. <div class="timeline-content">
  329. <div class="timeline-title">退款完成</div>
  330. <div class="timeline-desc">退款成功到账</div>
  331. </div>
  332. </div>
  333. </div>
  334. </div>
  335. </div>
  336. <!-- 线下冲销说明 -->
  337. <div class="card">
  338. <div class="form-section-title">线下冲销处理说明</div>
  339. <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;">
  340. <div style="padding:20px;background:#f5f7fa;border-radius:8px;text-align:center;">
  341. <div style="width:48px;height:48px;background:#ecf5ff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;">
  342. <el-icon style="font-size:24px;color:#1989fa;"><Document /></el-icon>
  343. </div>
  344. <div style="font-weight:600;margin-bottom:8px;">填写冲销说明</div>
  345. <div style="font-size:13px;color:#909399;">详细说明退款原因及处理方式</div>
  346. </div>
  347. <div style="padding:20px;background:#f5f7fa;border-radius:8px;text-align:center;">
  348. <div style="width:48px;height:48px;background:#fdf6ec;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;">
  349. <el-icon style="font-size:24px;color:#ff976a;"><Picture /></el-icon>
  350. </div>
  351. <div style="font-weight:600;margin-bottom:8px;">上传凭证</div>
  352. <div style="font-size:13px;color:#909399;">上传转账截图或相关凭证</div>
  353. </div>
  354. <div style="padding:20px;background:#f5f7fa;border-radius:8px;text-align:center;">
  355. <div style="width:48px;height:48px;background:#f0f9eb;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;">
  356. <el-icon style="font-size:24px;color:#07c160;"><CircleCheck /></el-icon>
  357. </div>
  358. <div style="font-weight:600;margin-bottom:8px;">确认完成</div>
  359. <div style="font-size:13px;color:#909399;">运营确认后标记退款成功</div>
  360. </div>
  361. </div>
  362. </div>
  363. </div>
  364. </div>
  365. <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  366. <script src="https://unpkg.com/element-plus"></script>
  367. <script src="https://unpkg.com/@element-plus/icons-vue"></script>
  368. <script>
  369. const { createApp, ref } = Vue;
  370. const app = createApp({
  371. setup() {
  372. const refundList = ref([
  373. { refundNo: 'REF20260319005', orderNo: 'ORD202603150023', clientName: 'XX餐厅', region: '城东', refundAmount: '560.00', refundMethod: 'wechat', status: 'pending', statusClass: 'warning', statusText: '待处理', createTime: '2026-03-19 09:30' },
  374. { refundNo: 'REF20260319004', orderNo: 'ORD202603140018', clientName: 'YY超市', region: '城东', refundAmount: '320.00', refundMethod: 'wechat', status: 'processing', statusClass: 'primary', statusText: '处理中', createTime: '2026-03-19 08:45' },
  375. { refundNo: 'REF20260319003', orderNo: 'ORD202603130012', clientName: 'ZZ食堂', region: '城西', refundAmount: '180.00', refundMethod: 'offline', status: 'failed', statusClass: 'danger', statusText: '失败', createTime: '2026-03-19 08:00' },
  376. { refundNo: 'REF20260319002', orderNo: 'ORD202603120008', clientName: 'AA饭店', region: '城东', refundAmount: '420.00', refundMethod: 'wechat', status: 'success', statusClass: 'success', statusText: '成功', createTime: '2026-03-19 07:30' },
  377. { refundNo: 'REF20260319001', orderNo: 'ORD202603110005', clientName: 'BB商行', region: '城南', refundAmount: '260.00', refundMethod: 'offline', status: 'success', statusClass: 'success', statusText: '成功', createTime: '2026-03-19 07:00' },
  378. ]);
  379. return { refundList };
  380. }
  381. });
  382. app.use(ElementPlus);
  383. for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  384. app.component(key, component);
  385. }
  386. app.mount('#app');
  387. </script>
  388. </body>
  389. </html>