cfc/cfc-web/src/views/admin/OrderDetail.vue

<template>
  <div class="order-detail admin-page" v-loading="loading">
    <div class="page-header">
      <el-button type="text" @click="$router.push('/order-manage')">&lt; 返回订单管理</el-button>
      <h2>订单详情</h2>
    </div>

    <template v-if="order">
      <el-card style="margin-bottom:20px;">
        <div slot="header">
          <span>基本信息</span>
          <el-tag :type="statusType(order.status)" style="margin-left:10px;">{{ statusLabel(order.status) }}</el-tag>
        </div>
        <el-descriptions :column="3" border>
          <el-descriptions-item label="订单编号">{{ order.orderNo }}</el-descriptions-item>
          <el-descriptions-item label="商品名称">{{ order.productName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="商品类型">{{ typeLabel(order.productType) }}</el-descriptions-item>
          <el-descriptions-item label="数量">{{ order.quantity }}</el-descriptions-item>
          <el-descriptions-item label="单价">{{ formatPrice(order.unitPrice) }}</el-descriptions-item>
          <el-descriptions-item label="总金额">{{ formatPrice(order.totalAmount) }}</el-descriptions-item>
          <el-descriptions-item label="优惠金额">{{ order.discountAmount ? formatPrice(order.discountAmount) : '-' }}</el-descriptions-item>
          <el-descriptions-item label="支付方式">{{ payMethodLabel(order.paymentMethod) }}</el-descriptions-item>
          <el-descriptions-item label="支付时间">{{ order.paidAt ? formatTime(order.paidAt) : '-' }}</el-descriptions-item>
          <el-descriptions-item label="下单时间">{{ formatTime(order.createdAt) }}</el-descriptions-item>
          <el-descriptions-item label="买家备注">{{ order.remark || '-' }}</el-descriptions-item>
          <el-descriptions-item label="交易号">{{ order.transactionId || '-' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-card style="margin-bottom:20px;">
        <div slot="header"><span>收货信息</span></div>
        <el-descriptions :column="3" border>
          <el-descriptions-item label="配送方式">{{ order.deliveryMethod == 2 ? '自提' : '快递' }}</el-descriptions-item>
          <el-descriptions-item label="自提码">{{ order.pickupCode || '-' }}</el-descriptions-item>
          <el-descriptions-item label="收货人">{{ addressInfo.receiverName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ addressInfo.phone || '-' }}</el-descriptions-item>
          <el-descriptions-item label="收货地址">{{ addressInfo.fullAddress }}</el-descriptions-item>
          <el-descriptions-item label="物流公司">{{ order.logisticsCompany || '-' }}</el-descriptions-item>
          <el-descriptions-item label="物流单号">{{ order.logisticsNo || order.trackingNumber || '-' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-card v-if="order.refundStatus" style="margin-bottom:20px;">
        <div slot="header"><span>退款信息</span></div>
        <el-descriptions :column="3" border>
          <el-descriptions-item label="退款状态">{{ refundStatusLabel(order.refundStatus) }}</el-descriptions-item>
          <el-descriptions-item label="退款原因">{{ order.refundReason || '-' }}</el-descriptions-item>
          <el-descriptions-item label="退款金额">{{ order.refundAmount ? formatPrice(order.refundAmount) : '-' }}</el-descriptions-item>
          <el-descriptions-item label="退款时间">{{ order.refundTime ? formatTime(order.refundTime) : '-' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <div style="margin-top:20px;">
        <el-button type="success" @click="handleShip" v-if="order.status === 'paid'">发货</el-button>
        <el-button type="danger" @click="handleClose" v-if="['paid','pending_receipt','refunding'].includes(order.status)">关闭订单</el-button>
        <el-button type="warning" @click="showRefundDialog" v-if="order.status === 'refunding'">退款审核</el-button>
      </div>
    </template>

    <div v-else-if="!loading" style="text-align:center;padding:60px;color:#999;">
      <p>未找到订单信息</p>
    </div>

    <!-- Ship Dialog -->
    <el-dialog title="发货" :visible.sync="shipDialogVisible" width="450px">
      <el-alert title="确认发货" type="info" :closable="false" style="margin-bottom:15px;">
        <template slot>订单号：<strong>{{ order?.orderNo }}</strong></template>
      </el-alert>
      <el-form :model="shipForm" label-width="90px">
        <el-form-item label="物流公司">
          <el-input v-model="shipForm.expressCompany" placeholder="如：顺丰、中通" />
        </el-form-item>
        <el-form-item label="物流单号">
          <el-input v-model="shipForm.trackingNumber" placeholder="请输入物流单号" />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="shipDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmShip" :loading="shipLoading">确认发货</el-button>
      </span>
    </el-dialog>

    <!-- Refund Dialog -->
    <el-dialog title="退款审核" :visible.sync="refundDialogVisible" width="450px">
      <el-alert title="退款申请" type="warning" :closable="false" style="margin-bottom:15px;">
        <template slot>
          订单号：<strong>{{ order?.orderNo }}</strong><br>
          退款原因：{{ order?.refundReason || '-' }}
        </template>
      </el-alert>
      <el-input v-model="refundRejectReason" type="textarea" placeholder="拒绝原因（选填）" :rows="3" />
      <span slot="footer">
        <el-button @click="refundDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="handleRejectRefund" :loading="refundLoading">拒绝退款</el-button>
        <el-button type="success" @click="handleApproveRefundConfirm" :loading="refundLoading">同意退款</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getOrderDetail, shipOrder, closeOrder, approveRefund, rejectRefund } from '@/api/admin'

export default {
  data() {
    return {
      order: null,
      loading: false,
      shipDialogVisible: false,
      shipLoading: false,
      shipForm: { expressCompany: '', trackingNumber: '' },
      refundDialogVisible: false,
      refundLoading: false,
      refundRejectReason: ''
    }
  },
  computed: {
    addressInfo() {
      var s = this.order && this.order.addressSnapshot
      if (!s) return { receiverName: '', phone: '', fullAddress: '-' }
      try {
        var a = JSON.parse(s)
        if (a.receiverName || a.phone || a.province || a.street) {
          var full = String((a.province || '') + (a.city || '') + (a.district || '') + (a.street || '')).trim()
          return {
            receiverName: a.receiverName || '',
            phone: a.phone || '',
            fullAddress: full || '-'
          }
        }
        return { receiverName: '', phone: '', fullAddress: s }
      } catch (e) {
        return { receiverName: '', phone: '', fullAddress: s }
      }
    }
  },
  mounted() {
    this.loadOrder()
  },
  methods: {
    async loadOrder() {
      var orderNo = this.$route.params.orderNo
      if (!orderNo) return
      this.loading = true
      try {
        var res = await getOrderDetail(orderNo)
        this.order = res.data
      } catch (e) {
        this.$message.error('加载订单详情失败')
      } finally {
        this.loading = false
      }
    },
    handleShip() {
      this.shipForm = { expressCompany: '', trackingNumber: '' }
      this.shipDialogVisible = true
    },
    async confirmShip() {
      if (!this.shipForm.trackingNumber.trim()) {
        return this.$message.warning('请填写物流单号')
      }
      this.shipLoading = true
      try {
        await shipOrder(this.order.orderNo, this.shipForm.trackingNumber, this.shipForm.expressCompany)
        this.$message.success('发货成功')
        this.shipDialogVisible = false
        this.loadOrder()
      } catch (e) {
        this.$message.error(e.message || '发货失败')
      } finally {
        this.shipLoading = false
      }
    },
    async handleClose() {
      try {
        await this.$confirm('确定关闭订单 ' + this.order.orderNo + '？', '提示', { type: 'warning' })
        await closeOrder(this.order.orderNo)
        this.$message.success('订单已关闭')
        this.loadOrder()
      } catch (e) {
        if (e !== 'cancel') {
          this.$message.error(e.message || '关闭失败')
        }
      }
    },
    showRefundDialog() {
      this.refundRejectReason = ''
      this.refundDialogVisible = true
    },
    async handleApproveRefundConfirm() {
      this.refundLoading = true
      try {
        await this.$confirm('确认同意退款？', '提示', { type: 'warning' })
        await approveRefund(this.order.orderNo)
        this.$message.success('已同意退款')
        this.refundDialogVisible = false
        this.loadOrder()
      } catch (e) {
        if (e !== 'cancel') {
          this.$message.error(e.message || '操作失败')
        }
      } finally {
        this.refundLoading = false
      }
    },
    async handleRejectRefund() {
      this.refundLoading = true
      try {
        await this.$confirm('确认拒绝退款？', '提示', { type: 'warning' })
        await rejectRefund(this.order.orderNo, this.refundRejectReason)
        this.$message.success('已拒绝退款')
        this.refundDialogVisible = false
        this.loadOrder()
      } catch (e) {
        if (e !== 'cancel') {
          this.$message.error(e.message || '操作失败')
        }
      } finally {
        this.refundLoading = false
      }
    },
    statusType(status) {
      var map = { pending: 'warning', paid: 'primary', pending_receipt: '', completed: 'success', cancelled: 'info', refunding: 'danger', refunded: 'danger', closed: 'info' }
      return map[status] || 'info'
    },
    statusLabel(status) {
      var map = { pending: '待支付', paid: '待发货', pending_receipt: '待收货', completed: '已完成', cancelled: '已取消', refunding: '退款中', refunded: '已退款', closed: '已关闭' }
      return map[status] || status
    },
    payMethodLabel(method) {
      var map = { wechat: '微信支付', balance: '余额支付', points: '积分兑换', test: '测试支付' }
      return map[method] || method || '-'
    },
    typeLabel(type) {
      var map = { physical: '实物商品', virtual: '虚拟商品', coupon: '优惠券' }
      return map[type] || type || '-'
    },
    refundStatusLabel(rs) {
      var map = { 0: '无退款', 1: '申请中', 2: '已退款', 3: '已拒绝' }
      return map[rs] || rs || '-'
    },
    formatPrice(cents) {
      if (cents == null) return '-'
      return '¥' + (cents / 100).toFixed(2)
    },

  }
}
</script>

<style scoped>
.order-detail { padding: 20px; }
.page-header { margin-bottom: 20px; }
.page-header h2 { margin: 10px 0 0; }
</style>