group_web_merchant/src/views/orderManagement/detail.vue

<template>
  <!-- 订单管理 - 详情页面 -->
  <div class="table-box" style="width: 100%; min-height: 100%; background-color: white">
    <div class="header">
      <el-button @click="goBack"> 返回 </el-button>
      <h2 class="title">订单详情</h2>
    </div>
    <div class="content">
      <!-- 左侧内容区域 -->
      <div class="contentLeft">
        <!-- 基础信息模块 -->
        <div class="model">
          <h3 style="font-weight: bold">基础信息：</h3>
          <!-- 订单名称 -->
          <div class="detail-item">
            <div class="detail-label">订单名称</div>
            <div class="detail-value">
              {{ formData.couponName || "--" }}
            </div>
          </div>
          <!-- 订单编号 -->
          <div class="detail-item">
            <div class="detail-label">订单编号</div>
            <div class="detail-value">
              {{ formData.orderNo || "--" }}
            </div>
          </div>
          <!-- 下单时间 -->
          <div class="detail-item">
            <div class="detail-label">下单时间</div>
            <div class="detail-value">
              {{ formData.createdTime?.replace(/-/g, "/") || "--" }}
            </div>
          </div>
          <!-- 原价 -->
          <div class="detail-item">
            <div class="detail-label">原价</div>
            <div class="detail-value">
              {{ formatCurrency(formData.originalPrice, 2, "￥") }}
            </div>
          </div>
          <!-- 优惠价 -->
          <div class="detail-item">
            <div class="detail-label">优惠价</div>
            <div class="detail-value">
              {{ formatCurrency(formData.price, 2, "￥") }}
            </div>
          </div>
          <!-- 数量 -->
          <div class="detail-item">
            <div class="detail-label">数量</div>
            <div class="detail-value">x{{ formData.orderCouponMiddleList ? formData.orderCouponMiddleList.length : 0 }}</div>
          </div>
          <!-- 优惠券减免 -->
          <div class="detail-item">
            <div class="detail-label">优惠券减免</div>
            <div class="detail-value">
              {{ formatCurrency(formData.nominalValue, 2, "￥") }}
            </div>
          </div>
          <!-- 优惠券类型 -->
          <div class="detail-item">
            <div class="detail-label">优惠券类型</div>
            <div class="detail-value">
              {{ getCouponType(formData.type) }}
            </div>
          </div>
          <!-- 预留手机号 -->
          <div class="detail-item">
            <div class="detail-label">预留手机号</div>
            <div class="detail-value">
              {{ formData.userPhone || "--" }}
            </div>
          </div>
          <!-- 预计收入 -->
          <div class="detail-item">
            <div class="detail-label">预计收入</div>
            <div class="detail-value">
              {{ formatCurrency(formData.expectIncome, 2, "￥") }}
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧内容区域 -->
      <div class="contentRight">
        <!-- 券码信息模块 -->
        <div class="model">
          <h3 style="font-weight: bold">券码信息：</h3>
          <div v-if="couponList && couponList.length > 0" class="coupon-list">
            <div v-for="(coupon, index) in couponList" :key="index" class="coupon-item">
              <!-- 状态 -->
              <div class="detail-item">
                <div class="detail-label">状态</div>
                <div class="detail-value">
                  {{ getCouponStatusName(coupon.status) }}
                </div>
              </div>
              <template v-for="(item, index) in coupon.list" :key="index">
                <!-- 券码 -->
                <div class="detail-item">
                  <div class="detail-label">券码</div>
                  <div class="detail-value">
                    {{ item.couponCode || "--" }}
                  </div>
                </div>
                <!-- 核销时间 -->
                <div v-if="item.usedTime && coupon.status == 2" class="detail-item">
                  <div class="detail-label">核销时间</div>
                  <div class="detail-value">
                    {{ item.usedTime || "--" }}
                  </div>
                </div>
                <!-- 退款时间 -->
                <div v-if="item.refundTime && coupon.status == 5" class="detail-item">
                  <div class="detail-label">退款时间</div>
                  <div class="detail-value">
                    {{ item.refundTime || "--" }}
                  </div>
                </div>
                <!-- 分隔线 -->
                <el-divider v-if="index < couponList.length - 1" style="margin: 20px 0" />
              </template>
            </div>
          </div>
          <div v-else class="empty-text">--</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx" name="orderManagementDetail">
/**
 * 订单管理 - 详情页面
 * 功能：显示订单的详细信息
 */
import { ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { getStaffConfigDeatail } from "@/api/modules/staffConfig";
import { queryUserOrderDetail } from "@/api/modules/orderManagement";
import { formatCurrency } from "@/utils/formatCurrency";

// ==================== 响应式数据定义 ====================

// 路由相关
const route = useRoute();
const router = useRouter();

// 页面ID参数
const id = ref((route.query.id as string) || "");

// 订单数据
const formData = ref<any>({});
const couponList = ref<any[]>([]);

// ==================== 工具函数 ====================

/**
 * 获取券码状态名称
 */
const getCouponStatusName = computed(() => {
  return status => {
    switch (status) {
      case 0:
        return "待支付";
      case 1:
        return "未核销";
      case 2:
        return "已核销";
      case 3:
        return "已过期";
      case 4:
        return "已取消";
      case 5:
        return "已退款";
      default:
        return "--";
    }
  };
});
const getCouponType = computed(() => {
  return status => {
    switch (status) {
      case 1:
        return "优惠券";
      case 2:
        return "红包";
      case 3:
        return "平台优惠券";
      default:
        return "--";
    }
  };
});
// ==================== 生命周期钩子 ====================

/**
 * 组件挂载时初始化
 * 从路由参数中获取ID并加载详情数据
 */
onMounted(async () => {
  await initData();
});

// ==================== 事件处理函数 ====================

/**
 * 返回上一页
 */
const goBack = () => {
  router.go(-1);
};

// ==================== 数据加载函数 ====================

/**
 * 初始化数据
 */
const initData = async () => {
  if (id.value) {
    try {
      const res: any = await queryUserOrderDetail({ orderId: id.value });
      if (res.code === 200) {
        formData.value = res.data;
        couponList.value = groupByA(formData.value.orderCouponMiddleList) || [];
      }
    } catch (error) {
      ElMessage.error("获取详情失败");
    }
  }
};
const groupByA = arr => {
  // 创建一个映射表存储每个status值对应的条目
  const map = {};

  // 遍历原始数组
  arr.forEach(item => {
    // 从当前项中提取status字段
    const { status, ...rest } = item;
    // 如果当前status值在映射表中不存在，则创建一个新条目
    if (!map[status]) {
      map[status] = {
        status: status,
        list: []
      };
    }

    // 将剩余的所有字段添加到对应status的list中
    map[status].list.push(rest);
  });

  // 将映射表的值转换为数组并返回
  return Object.values(map);
};
</script>

<style scoped lang="scss">
/* 页面容器 */
.table-box {
  display: flex;
  flex-direction: column;
  height: auto !important;
  min-height: 100%;
}

/* 头部区域 */
.header {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  background-color: #ffffff;
  border-bottom: 1px solid #e4e7ed;
  box-shadow: 0 2px 4px rgb(0 0 0 / 2%);
}
.title {
  flex: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  text-align: center;
}

/* 内容区域布局 */
.content {
  display: flex;
  flex: 1;
  column-gap: 24px;
  width: 98%;
  padding: 0 12px;
  margin: 24px auto;

  /* 左侧内容区域 */
  .contentLeft {
    width: 50%;
    padding-right: 12px;
  }

  /* 右侧内容区域 */
  .contentRight {
    width: 50%;
    padding-left: 12px;
  }
}

/* 模块容器 */
.model {
  margin-bottom: 50px;
  h3 {
    padding-bottom: 12px;
    margin: 0 0 20px;
    font-size: 16px;
    color: #303133;
    border-bottom: 2px solid #e4e7ed;
  }
}

/* 详情项样式 */
.detail-item {
  display: flex;
  align-items: flex-start;
  min-height: 32px;
  margin-bottom: 24px;
}
.detail-label {
  flex-shrink: 0;
  min-width: 120px;
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
  color: #606266;
}
.detail-value {
  flex: 1;
  font-size: 14px;
  line-height: 32px;
  color: #303133;
  word-break: break-word;
}
.empty-text {
  color: #909399;
}

/* 券码列表样式 */
.coupon-list {
  .coupon-item {
    margin-bottom: 0;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>