kami_frontend/src/views/camel-oil-info/order/components/order-detail-modal.vue

<template>
  <a-modal
    v-model:visible="modalVisible"
    title="订单详情"
    width="800px"
    :footer="false"
  >
    <div v-if="order" class="order-detail">
      <!-- 基本信息 -->
      <a-card title="基本信息" class="detail-card">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="订单号">
            {{ order.orderNo }}
          </a-descriptions-item>
          <a-descriptions-item label="商户订单号">
            {{ order.merchantOrderNo || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="订单金额">
            <span class="amount-text">¥{{ order.amount }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="实际金额">
            <span class="actual-amount-text">
              ¥{{ order.actualAmount || order.amount }}
            </span>
          </a-descriptions-item>
          <a-descriptions-item label="充值账号">
            {{ order.accountName }}
          </a-descriptions-item>
          <a-descriptions-item label="充值手机">
            {{ order.accountPhone }}
          </a-descriptions-item>
          <a-descriptions-item label="账号ID">
            {{ order.accountId || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="商户ID">
            {{ order.merchantId || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <!-- 状态信息 -->
      <a-card title="状态信息" class="detail-card">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="订单状态">
            <a-tag :color="statusMapper(order.status).color">
              {{ statusMapper(order.status).text }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="支付状态">
            <a-tag :color="payStatusMapper(order.payStatus).color">
              {{ payStatusMapper(order.payStatus).text }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <!-- 时间信息 -->
      <a-card title="时间信息" class="detail-card">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="创建时间">
            {{ order.createdAt }}
          </a-descriptions-item>
          <a-descriptions-item label="支付完成时间">
            {{ order.paidAt || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="更新时间" :span="2">
            {{ order.updatedAt }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

// Props 定义
interface Props {
  visible: boolean;
  order: any;
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  order: null
});

// Emits 定义
interface Emits {
  (e: 'update:visible', value: boolean): void;
}

const emit = defineEmits<Emits>();

// 计算属性
const modalVisible = computed({
  get: () => props.visible,
  set: value => emit('update:visible', value)
});

/**
 * 订单状态映射器
 * 基于后端Go定义的CamelOilOrderStatus
 * @param status 状态值
 * @returns 状态文本和颜色
 */
const statusMapper = (status: number): { text: string; color: string } => {
  switch (status) {
    case 0:
      return { text: '待处理', color: 'orange' }; // CamelOilOrderStatusPending
    case 1:
      return { text: '处理中', color: 'blue' }; // CamelOilOrderStatusProcessing
    case 2:
      return { text: '已完成', color: 'green' }; // CamelOilOrderStatusCompleted
    case 3:
      return { text: '已失败', color: 'red' }; // CamelOilOrderStatusFailed
    default:
      return { text: '未知状态', color: 'gray' };
  }
};

/**
 * 支付状态映射器
 * 基于后端Go定义的CamelOilPayStatus
 * @param status 支付状态
 * @returns 支付状态文本和颜色
 */
const payStatusMapper = (status: number): { text: string; color: string } => {
  switch (status) {
    case 0:
      return { text: '未支付', color: 'orange' }; // CamelOilPaymentStatusUnpaid
    case 1:
      return { text: '已支付', color: 'green' }; // CamelOilPaymentStatusPaid
    case 2:
      return { text: '已退款', color: 'blue' }; // CamelOilPaymentStatusRefunded
    case 3:
      return { text: '已超时', color: 'red' }; // CamelOilPaymentStatusTimeout
    default:
      return { text: '未知状态', color: 'gray' };
  }
};
</script>

<style scoped>
.order-detail {
  padding: 16px 0;
}

.detail-card {
  margin-bottom: 16px;
}

.detail-card:last-child {
  margin-bottom: 0;
}

.amount-text {
  color: rgb(var(--primary-6));
  font-weight: 600;
  font-size: 16px;
}

.actual-amount-text {
  color: rgb(var(--success-6));
  font-weight: 600;
  font-size: 16px;
}

:deep(.arco-descriptions-item-label) {
  font-weight: 600;
  background-color: var(--color-fill-2);
}

:deep(.arco-modal-body) {
  max-height: 80vh;
  overflow-y: auto;

  /* 确保滚动条样式跟随主题 */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-3) transparent;
}

:deep(.arco-modal-body::-webkit-scrollbar) {
  width: 6px;
}

:deep(.arco-modal-body::-webkit-scrollbar-thumb) {
  background-color: var(--color-border-3);
  border-radius: 3px;
}

:deep(.arco-modal-body::-webkit-scrollbar-track) {
  background-color: transparent;
}
</style>