group_web_merchant/src/views/orderManagement/detail.vue

<template>
  <div class="order-detail-box">
    <div class="detail-header">
      <el-button @click="goBack"> 返回 </el-button>
      <h2 class="detail-title">订单详情</h2>
    </div>
    <div class="detail-content">
      <div class="product-title">
        {{ formData.productName || "--" }}
      </div>
      <el-row :gutter="40" class="detail-row">
        <el-col :span="12">
          <div class="detail-section">
            <el-form :model="formData" label-width="120px">
              <el-form-item label="订单编号：">
                <span>{{ formData.orderNo || "--" }}</span>
              </el-form-item>
              <el-form-item label="下单时间：">
                <span>{{ formData.orderTime || "--" }}</span>
              </el-form-item>
              <el-form-item label="原价：">
                <span>¥{{ formData.originalPrice || 0 }}</span>
              </el-form-item>
              <el-form-item label="优惠价：">
                <span>¥{{ formData.discountedPrice || 0 }}</span>
              </el-form-item>
              <el-form-item label="数量：">
                <span>{{ formData.quantity || 0 }}</span>
              </el-form-item>
              <el-form-item label="优惠券减免：">
                <span>¥{{ formData.couponDiscount || 0 }}</span>
              </el-form-item>
              <el-form-item label="优惠券类型：">
                <span>{{ formData.couponType || "--" }}</span>
              </el-form-item>
              <el-form-item label="预留手机号：">
                <span>{{ formData.phone || "--" }}</span>
              </el-form-item>
              <el-form-item label="预计收入：">
                <span>¥{{ formData.estimatedIncome || 0 }}</span>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="detail-section">
            <div class="coupon-list">
              <div v-for="(coupon, index) in couponList" :key="index" class="coupon-item">
                <el-form :model="coupon" label-width="100px">
                  <el-form-item label="状态：">
                    <span>{{ getCouponStatusName(coupon.status) }}</span>
                  </el-form-item>
                  <el-form-item label="券码：">
                    <span>{{ coupon.code || "--" }}</span>
                  </el-form-item>
                  <el-form-item v-if="coupon.status === '2'" label="核销时间：">
                    <span>{{ coupon.verifyTime || "--" }}</span>
                  </el-form-item>
                  <el-form-item v-if="coupon.status === '3'" label="退款时间：">
                    <span>{{ coupon.refundTime || "--" }}</span>
                  </el-form-item>
                </el-form>
                <el-divider v-if="index < couponList.length - 1" />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="tsx" name="orderManagementDetail">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { getStaffConfigDeatail } from "@/api/modules/staffConfig";

const route = useRoute();
const router = useRouter();

const formData = ref<any>({});
const couponList = ref<any[]>([]);

const id = ref((route.query.id as string) || "");

// 券码状态映射
const getCouponStatusName = (status: string) => {
  const statusMap: Record<string, string> = {
    "1": "未核销",
    "2": "已核销",
    "3": "已退款"
  };
  return statusMap[status] || "--";
};

onMounted(async () => {
  await initData();
});

const initData = async () => {
  if (id.value) {
    try {
      // TODO: 根据实际API获取订单详情
      // const response = await getOrderDetail({ id: id.value });
      // if (response.code === 200) {
      //   formData.value = response.data;
      //   couponList.value = response.data.couponList || [];
      // }

      // 临时模拟数据
      formData.value = {
        productName: "4拼冰淇淋蛋糕套餐",
        orderNo: "17554469202966300062",
        orderTime: "2025/01/01 12:00:00",
        originalPrice: 400,
        discountedPrice: 380,
        quantity: 3,
        couponDiscount: 20,
        couponType: "商家优惠券/平台优惠券",
        phone: "18900000000",
        estimatedIncome: 380
      };

      couponList.value = [
        {
          status: "1",
          code: "B844556562220"
        },
        {
          status: "2",
          code: "B844556562220",
          verifyTime: "2025/01/01 12:00:00"
        },
        {
          status: "3",
          code: "B844556562220",
          refundTime: "2025/01/01 12:00:00"
        }
      ];
    } catch (error) {
      ElMessage.error("获取详情失败");
    }
  }
};

const goBack = () => {
  router.go(-1);
};
</script>

<style lang="scss" scoped>
.order-detail-box {
  height: 100%;
  padding: 20px;
  background: #ffffff;
}
.detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .detail-title {
    margin: 0 auto;
    font-size: 20px;
    font-weight: 500;
  }
}
.detail-content {
  .product-title {
    padding-bottom: 15px;
    margin-bottom: 30px;
    font-size: 18px;
    font-weight: 500;
    border-bottom: 1px solid #e4e7ed;
  }
  .detail-row {
    margin-top: 20px;
  }
  .detail-section {
    min-height: 400px;
    padding: 20px;

    //background: #fafafa;
    border-radius: 4px;
  }
  .coupon-list {
    .coupon-item {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
:deep(.el-form-item) {
  margin-bottom: 20px;
  .el-form-item__label {
    font-weight: normal;
    color: #606266;
  }
  span {
    color: #303133;
  }
}
</style>