update

liujie

2026-09-11 4f6f15b818704079ff2e4e4719b798f48d68a335

 frontend/src/views/OrderDetailView.vue

@@ -42,7 +42,28 @@
  REFUND_FAILED: '\u9000\u6b3e\u5931\u8d25',
}[order.value?.refundStatus] || (order.value?.status === 'REFUNDED' ? '\u5df2\u9000\u6b3e' : '')))
const hasRefund = computed(() => order.value?.status === 'REFUNDED'
  || (order.value?.refundStatus && order.value.refundStatus !== 'NONE'))
  || (order.value?.refundStatus && order.value.refundStatus !== 'NONE')
  || (Array.isArray(order.value?.refundRecords) && order.value.refundRecords.length > 0))
const refundRecords = computed(() => {
  const records = order.value?.refundRecords
  if (Array.isArray(records) && records.length) return records
  if (!hasRefund.value) return []
  return [{
    id: order.value.id,
    refundAmount: order.value.refundAmount,
    refundStatus: order.value.refundStatus || (order.value.status === 'REFUNDED' ? 'REFUNDED' : ''),
    refundTime: order.value.refundTime,
    createdAt: order.value.refundTime,
    refundOrderNo: order.value.refundOrderNo,
    refundMethod: order.value.refundMethod,
  }]
})
const refundRecordStatusLabel = (record) => ({
  REFUNDING: '退款处理中',
  PARTIAL: '部分退款',
  REFUNDED: '已退款',
  REFUND_FAILED: '退款失败',
}[record?.refundStatus] || '-')
const packageName = computed(() => orderTypeMap[order.value?.orderType] || order.value?.packageName || '-')
const originalPrice = computed(() => order.value?.originalPrice ?? order.value?.unitPrice)
const discountPrice = computed(() => order.value?.discountPrice ?? order.value?.unitPrice)
@@ -178,14 +199,27 @@

      <section v-if="hasRefund" class="detail-section">
        <h3>退款信息</h3>
        <div class="field-grid">
          <div class="field-item"><span>退款状态</span><div>{{ refundStatusLabel }}</div></div>
          <div class="field-item"><span>本次退款金额</span><div>{{ formatMoney(order.refundAmount) }}</div></div>
        <div class="refund-summary">
          <div class="field-item"><span>当前退款状态</span><div>{{ refundStatusLabel }}</div></div>
          <div class="field-item"><span>累计退款金额</span><div>{{ formatMoney(order.refundedAmount) }}</div></div>
          <div class="field-item"><span>退款时间</span><div>{{ formatDateTime(order.refundTime) }}</div></div>
          <div class="field-item"><span>退款流水号</span><div>{{ displayValue(order.refundOrderNo) }}</div></div>
          <div class="field-item"><span>退款方式</span><div>{{ paymentMethodMap[order.refundMethod] || order.refundMethod || '-' }}</div></div>
        </div>
        <el-table :data="refundRecords" border class="refund-records-table" row-key="id">
          <el-table-column label="退款状态" min-width="110" align="center">
            <template #default="{ row }">{{ refundRecordStatusLabel(row) }}</template>
          </el-table-column>
          <el-table-column label="本次退款金额" min-width="120" align="center">
            <template #default="{ row }">{{ formatMoney(row.refundAmount) }}</template>
          </el-table-column>
          <el-table-column label="退款时间" min-width="170" align="center">
            <template #default="{ row }">{{ formatDateTime(row.refundTime || row.createdAt) }}</template>
          </el-table-column>
          <el-table-column label="退款流水号" min-width="220" align="center">
            <template #default="{ row }">{{ displayValue(row.refundOrderNo) }}</template>
          </el-table-column>
          <el-table-column label="退款方式" min-width="110" align="center">
            <template #default="{ row }">{{ paymentMethodMap[row.refundMethod] || row.refundMethod || '-' }}</template>
          </el-table-column>
        </el-table>
      </section>

      <footer class="detail-actions">
@@ -264,6 +298,9 @@
.detail-actions { display: flex; gap: 46px; padding: 30px 34px; border-top: 10px solid #f4f7fb; }
.detail-actions .el-button { width: 138px; }
.refund-content { padding: 4px 20px 10px; }
.refund-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 42px; margin-bottom: 22px; }
.refund-records-table :deep(th.el-table__cell) { color: #53657d; background: #f4f6fa; }
.refund-records-table :deep(.el-table__cell) { padding: 9px 0; }
.refund-info-grid { display: grid; grid-template-columns: 92px minmax(120px, 1fr) 92px minmax(120px, 1fr); gap: 22px 12px; align-items: center; }
.refund-label { color: #303133; font-weight: 600; }
.refund-flow-no { grid-column: span 3; overflow-wrap: anywhere; }
@@ -277,6 +314,7 @@
  .field-item { grid-template-columns: 82px minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .refund-summary { grid-template-columns: 1fr; row-gap: 12px; }
  .refund-info-grid { grid-template-columns: 92px 1fr; }
  .refund-flow-no { grid-column: auto; }
}