RunForge-Frontend/src/pages/admin/goods/orderDetail.vue

<template>
  <div class="admin-order-detail">
    <Breadcrumb />
    <a-spin :loading="loading" style="width: 100%">
      <div v-if="!loading && data.orderId" class="detail-grid">
        <a-card :bordered="false" class="detail-card detail-card--status">
          <template #title>订单进度</template>
          <a-steps :current="stepCurrent" :status="stepStatus" label-placement="vertical">
            <a-step description="用户提交订单">待支付</a-step>
            <a-step description="支付成功，系统处理">待处理</a-step>
            <a-step description="权益已发放">已完成</a-step>
          </a-steps>
          <div class="state-center">
            <a-tag :color="stateMeta.color" size="large">{{ stateMeta.label }}</a-tag>
          </div>
        </a-card>

        <a-card :bordered="false" class="detail-card">
          <template #title>订单信息</template>
          <a-descriptions :column="{ xs: 1, sm: 2 }" bordered>
            <a-descriptions-item label="订单号">{{ data.orderId }}</a-descriptions-item>
            <a-descriptions-item label="商品">{{ data.name || '-' }}</a-descriptions-item>
            <a-descriptions-item v-if="data.original_price" label="商品原价">
              ¥{{ data.original_price }}
            </a-descriptions-item>
            <a-descriptions-item v-if="data.coupon_code" label="优惠码">
              {{ data.coupon_code }}
            </a-descriptions-item>
            <a-descriptions-item v-if="data.discount_amount > 0" label="优惠减免">
              ¥{{ data.discount_amount }}
            </a-descriptions-item>
            <a-descriptions-item label="实付金额">
              <span class="price">¥{{ data.price }}</span>
            </a-descriptions-item>
            <a-descriptions-item label="支付方式">{{ getPayTypeLabel(data.pay_type) }}</a-descriptions-item>
            <a-descriptions-item label="下单时间">{{ formatStoreTimeFull(data.create_time) }}</a-descriptions-item>
            <a-descriptions-item label="支付时间">{{ formatStoreTimeFull(data.pay_time) }}</a-descriptions-item>
            <a-descriptions-item v-if="data.pay_id" label="支付平台单号" :span="2">
              {{ data.pay_id }}
            </a-descriptions-item>
            <a-descriptions-item v-if="data.lepao_count != null" label="乐跑次数">
              {{ data.lepao_count }}
            </a-descriptions-item>
            <a-descriptions-item v-if="data.ic_count != null" label="IC次数">
              {{ data.ic_count }}
            </a-descriptions-item>
          </a-descriptions>
        </a-card>

        <a-card :bordered="false" class="detail-card">
          <template #title>买家信息</template>
          <a-descriptions :column="{ xs: 1, sm: 2 }" bordered>
            <a-descriptions-item label="用户名">{{ data.username || '-' }}</a-descriptions-item>
            <a-descriptions-item label="邮箱">{{ data.user_email || '-' }}</a-descriptions-item>
            <a-descriptions-item label="用户 UUID" :span="2">{{ data.create_user || '-' }}</a-descriptions-item>
          </a-descriptions>
        </a-card>

        <a-card v-if="goodsContent" :bordered="false" class="detail-card detail-card--full">
          <template #title>商品详情</template>
          <div class="goods-content" v-html="goodsContent" />
        </a-card>
      </div>
    </a-spin>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { adminOrderDetail } from '@/api/order'
import { Notification } from '@arco-design/web-vue'
import {
  formatStoreTimeFull,
  getPayTypeLabel,
  getOrderStateMeta,
  decodeGoodsContent
} from '@/utils/storeFormat'

const route = useRoute()
const loading = ref(true)
const data = ref({})
const goodsContent = ref('')

const stateMeta = computed(() => getOrderStateMeta(data.value?.state ?? -1))

const stepCurrent = computed(() => {
  const state = data.value?.state
  if (state === 0 || state === 3) return 1
  if (state === 1) return 2
  if (state === 2 || state === 4) return 3
  return 1
})

const stepStatus = computed(() => {
  const state = data.value?.state
  if (state === 3 || state === 4) return 'error'
  if (state === 2) return 'finish'
  return 'process'
})

const fetchDetail = async () => {
  try {
    loading.value = true
    const res = await adminOrderDetail({ orderId: route.params.orderId })
    if (!res || res.code !== 0) {
      return Notification.error({
        title: '获取订单详情失败',
        content: res?.msg ?? '请稍后再试'
      })
    }
    data.value = res.data || {}
    goodsContent.value = decodeGoodsContent(res.data?.content)
  } catch (error) {
    Notification.error({
      title: '获取订单详情失败',
      content: error.message || '请稍后再试'
    })
  } finally {
    loading.value = false
  }
}

onMounted(fetchDetail)
</script>

<style scoped lang="less">
.admin-order-detail {
  padding: 0 20px 20px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;

  @media (min-width: 960px) {
    grid-template-columns: 1fr 1fr;

    .detail-card--status,
    .detail-card--full {
      grid-column: 1 / -1;
    }
  }
}

.detail-card {
  border-radius: 12px;
  border: 1px solid var(--color-border-2);
}

.state-center {
  margin-top: 20px;
  text-align: center;
}

.price {
  font-weight: 700;
  color: #e85d04;
}

.goods-content {
  line-height: 1.75;

  :deep(img) {
    max-width: 100%;
  }
}
</style>