feat(detail):调整页面样式

src/views/groupPackageManagement/detail.vue

@@ -33,7 +33,7 @@
           <div class="detail-item">
             <div class="detail-label">团购名称</div>
             <div class="detail-value">
-              {{ storeInfoModel.groupName || "-" }}
+              {{ storeInfoModel.groupName || "--" }}
             </div>
           </div>
           <!-- 开始售卖时间 -->
@@ -47,14 +47,14 @@
           <div class="detail-item">
             <div class="detail-label">结束时间</div>
             <div class="detail-value">
-              {{ storeInfoModel.endTime ? formatDate(storeInfoModel.endTime) : "-" }}
+              {{ storeInfoModel.endTime ? formatDate(storeInfoModel.endTime) : "--" }}
             </div>
           </div>
           <!-- 库存数量 -->
           <div class="detail-item">
             <div class="detail-label">库存数量</div>
             <div class="detail-value">
-              {{ storeInfoModel.inventoryNum || "-" }}
+              {{ storeInfoModel.inventoryNum || "--" }}
             </div>
           </div>
           <!-- 每人限购 -->
@@ -78,7 +78,7 @@
                   </div>
                 </div>
               </div>
-              <span v-else class="empty-text">-</span>
+              <span v-else class="empty-text">--</span>
             </div>
           </div>
         </div>
@@ -89,14 +89,14 @@
           <div class="detail-item">
             <div class="detail-label">原价(¥)</div>
             <div class="detail-value">
-              {{ storeInfoModel.originalPrice || "-" }}
+              {{ storeInfoModel.originalPrice || "--" }}
             </div>
           </div>
           <!-- 优惠价 -->
           <div class="detail-item">
             <div class="detail-label">优惠价(¥)</div>
             <div class="detail-value">
-              {{ storeInfoModel.preferentialPrice || "-" }}
+              {{ storeInfoModel.preferentialPrice || "--" }}
             </div>
           </div>
         </div>
@@ -143,7 +143,7 @@
           <div class="detail-item">
             <div class="detail-label">适用人数</div>
             <div class="detail-value">
-              {{ storeInfoModel.applicableNum ? storeInfoModel.applicableNum + "人" : "-" }}
+              {{ storeInfoModel.applicableNum ? storeInfoModel.applicableNum + "人" : "--" }}
             </div>
           </div>
           <!-- 其他规则 -->
@@ -385,7 +385,7 @@ const getStartTimeText = () => {
   } else if (storeInfoModel.value.startTimeType === 1 && storeInfoModel.value.startTimeValue) {
     return formatDate(storeInfoModel.value.startTimeValue);
   }
-  return "-";
+  return "--";
 };
 
 /**
@@ -397,7 +397,7 @@ const getQuotaText = () => {
   } else if (storeInfoModel.value.quotaType === 1) {
     return storeInfoModel.value.quotaValue ? `不限量/${storeInfoModel.value.quotaValue}` : "不限量";
   }
-  return "-";
+  return "--";
 };
 
 /**
@@ -408,14 +408,14 @@ const getEffectiveDateText = () => {
     if (storeInfoModel.value.expirationDate) {
       return `用户购买后${storeInfoModel.value.expirationDate}天内有效`;
     }
-    return "-";
+    return "--";
   } else if (storeInfoModel.value.effectiveDateType === 1) {
     if (storeInfoModel.value.expirationDateList && storeInfoModel.value.expirationDateList.length === 2) {
       return `${formatDate(storeInfoModel.value.expirationDateList[0])}-${formatDate(storeInfoModel.value.expirationDateList[1])}`;
     }
-    return "-";
+    return "--";
   }
-  return "-";
+  return "--";
 };
 
 /**
@@ -456,17 +456,17 @@ const getDisableDateText = () => {
       parts.push(holidays.join("、"));
     }
 
-    return parts.length > 0 ? parts.join("、") : "-";
+    return parts.length > 0 ? parts.join("、") : "--";
   } else if (storeInfoModel.value.disableDateType === 2) {
     if (storeInfoModel.value.disableDateList && storeInfoModel.value.disableDateList.length > 0) {
       const dateStrings = storeInfoModel.value.disableDateList
         .filter((date: any) => date && date.length === 2)
         .map((date: any) => `${formatDate(date[0])}-${formatDate(date[1])}`);
-      return dateStrings.length > 0 ? dateStrings.join("、") : "-";
+      return dateStrings.length > 0 ? dateStrings.join("、") : "--";
     }
-    return "-";
+    return "--";
   }
-  return "-";
+  return "--";
 };
 
 /**
@@ -475,7 +475,7 @@ const getDisableDateText = () => {
  * @returns 格式化后的日期字符串 (YYYY/MM/DD)
  */
 const formatDate = (date: string) => {
-  if (!date) return "-";
+  if (!date) return "--";
   return date.replace(/-/g, "/");
 };
 

src/views/orderManagement/detail.vue

@@ -1,90 +1,162 @@
 <template>
-  <div class="order-detail-box">
-    <div class="detail-header">
+  <!-- 订单管理 - 详情页面 -->
+  <div class="table-box" style="width: 100%; min-height: 100%; background-color: white">
+    <div class="header">
       <el-button @click="goBack"> 返回 </el-button>
-      <h2 class="detail-title">订单详情</h2>
+      <h2 class="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 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.productName || "--" }}
+            </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.orderTime || "--" }}
+            </div>
+          </div>
+          <!-- 原价 -->
+          <div class="detail-item">
+            <div class="detail-label">原价</div>
+            <div class="detail-value">
+              {{ formData.originalPrice ? `¥${formData.originalPrice}` : "--" }}
+            </div>
+          </div>
+          <!-- 优惠价 -->
+          <div class="detail-item">
+            <div class="detail-label">优惠价</div>
+            <div class="detail-value">
+              {{ formData.discountedPrice ? `¥${formData.discountedPrice}` : "--" }}
+            </div>
+          </div>
+          <!-- 数量 -->
+          <div class="detail-item">
+            <div class="detail-label">数量</div>
+            <div class="detail-value">
+              {{ formData.quantity || "--" }}
+            </div>
+          </div>
+          <!-- 优惠券减免 -->
+          <div class="detail-item">
+            <div class="detail-label">优惠券减免</div>
+            <div class="detail-value">
+              {{ formData.couponDiscount ? `¥${formData.couponDiscount}` : "--" }}
+            </div>
+          </div>
+          <!-- 优惠券类型 -->
+          <div class="detail-item">
+            <div class="detail-label">优惠券类型</div>
+            <div class="detail-value">
+              {{ formData.couponType || "--" }}
+            </div>
           </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 class="detail-item">
+            <div class="detail-label">预留手机号</div>
+            <div class="detail-value">
+              {{ formData.phone || "--" }}
+            </div>
+          </div>
+          <!-- 预计收入 -->
+          <div class="detail-item">
+            <div class="detail-label">预计收入</div>
+            <div class="detail-value">
+              {{ formData.estimatedIncome ? `¥${formData.estimatedIncome}` : "--" }}
+            </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>
+              <!-- 券码 -->
+              <div class="detail-item">
+                <div class="detail-label">券码</div>
+                <div class="detail-value">
+                  {{ coupon.code || "--" }}
+                </div>
+              </div>
+              <!-- 核销时间 -->
+              <div v-if="coupon.status === '2'" class="detail-item">
+                <div class="detail-label">核销时间</div>
+                <div class="detail-value">
+                  {{ coupon.verifyTime || "--" }}
+                </div>
+              </div>
+              <!-- 退款时间 -->
+              <div v-if="coupon.status === '3'" class="detail-item">
+                <div class="detail-label">退款时间</div>
+                <div class="detail-value">
+                  {{ coupon.refundTime || "--" }}
+                </div>
               </div>
+              <!-- 分隔线 -->
+              <el-divider v-if="index < couponList.length - 1" style="margin: 20px 0" />
             </div>
           </div>
-        </el-col>
-      </el-row>
+          <div v-else class="empty-text">--</div>
+        </div>
+      </div>
     </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();
 
+// 页面ID参数
+const id = ref((route.query.id as string) || "");
+
+// 订单数据
 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": "未核销",
@@ -94,10 +166,30 @@ const getCouponStatusName = (status: string) => {
   return statusMap[status] || "--";
 };
 
+// ==================== 生命周期钩子 ====================
+
+/**
+ * 组件挂载时初始化
+ * 从路由参数中获取ID并加载详情数据
+ */
 onMounted(async () => {
   await initData();
 });
 
+// ==================== 事件处理函数 ====================
+
+/**
+ * 返回上一页
+ */
+const goBack = () => {
+  router.go(-1);
+};
+
+// ==================== 数据加载函数 ====================
+
+/**
+ * 初始化数据
+ */
 const initData = async () => {
   if (id.value) {
     try {
@@ -143,63 +235,102 @@ const initData = async () => {
     }
   }
 };
-
-const goBack = () => {
-  router.go(-1);
-};
 </script>
 
-<style lang="scss" scoped>
-.order-detail-box {
-  height: 100%;
-  padding: 20px;
-  background: #ffffff;
+<style scoped lang="scss">
+/* 页面容器 */
+.table-box {
+  display: flex;
+  flex-direction: column;
+  height: auto !important;
+  min-height: 100%;
 }
-.detail-header {
+
+/* 头部区域 */
+.header {
   display: flex;
   align-items: center;
-  margin-bottom: 20px;
-  .detail-title {
-    margin: 0 auto;
-    font-size: 20px;
-    font-weight: 500;
-  }
+  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;
 }
-.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;
+/* 内容区域布局 */
+.content {
+  display: flex;
+  flex: 1;
+  column-gap: 24px;
+  width: 98%;
+  padding: 0 12px;
+  margin: 24px auto;
+
+  /* 左侧内容区域 */
+  .contentLeft {
+    width: 50%;
+    padding-right: 12px;
   }
-  .coupon-list {
-    .coupon-item {
-      margin-bottom: 20px;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
+
+  /* 右侧内容区域 */
+  .contentRight {
+    width: 50%;
+    padding-left: 12px;
   }
 }
-:deep(.el-form-item) {
-  margin-bottom: 20px;
-  .el-form-item__label {
-    font-weight: normal;
-    color: #606266;
-  }
-  span {
+
+/* 模块容器 */
+.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>

src/views/voucherManagement/detail.vue

@@ -15,35 +15,35 @@
           <div class="detail-item">
             <div class="detail-label">代金券名称</div>
             <div class="detail-value">
-              {{ voucherModel.name || "-" }}
+              {{ voucherModel.name || "--" }}
             </div>
           </div>
           <!-- 抵扣价格 -->
           <div class="detail-item">
             <div class="detail-label">抵扣价格</div>
             <div class="detail-value">
-              {{ voucherModel.offprice ? `¥${voucherModel.offprice}` : "-" }}
+              {{ voucherModel.offprice ? `¥${voucherModel.offprice}` : "--" }}
             </div>
           </div>
           <!-- 售卖价格 -->
           <div class="detail-item">
             <div class="detail-label">售卖价格</div>
             <div class="detail-value">
-              {{ voucherModel.price ? `¥${voucherModel.price}` : "-" }}
+              {{ voucherModel.price ? `¥${voucherModel.price}` : "--" }}
             </div>
           </div>
           <!-- 开始售卖时间 -->
           <div class="detail-item">
             <div class="detail-label">开始售卖时间</div>
             <div class="detail-value">
-              {{ voucherModel.startDate ? formatDate(voucherModel.startDate) : "-" }}
+              {{ voucherModel.startDate ? formatDate(voucherModel.startDate) : "--" }}
             </div>
           </div>
           <!-- 结束售卖时间 -->
           <div class="detail-item">
             <div class="detail-label">结束售卖时间</div>
             <div class="detail-value">
-              {{ voucherModel.endDate ? formatDate(voucherModel.endDate) : "-" }}
+              {{ voucherModel.endDate ? formatDate(voucherModel.endDate) : "--" }}
             </div>
           </div>
         </div>
@@ -75,7 +75,7 @@
           <div class="detail-item">
             <div class="detail-label">库存</div>
             <div class="detail-value">
-              {{ voucherModel.singleQty || "-" }}
+              {{ voucherModel.singleQty || "--" }}
             </div>
           </div>
         </div>
@@ -89,14 +89,14 @@
           <div class="detail-item">
             <div class="detail-label">单次可用数量</div>
             <div class="detail-value">
-              {{ voucherModel.singleCanUse || "-" }}
+              {{ voucherModel.singleCanUse || "--" }}
             </div>
           </div>
           <!-- 限购数量 -->
           <div class="detail-item">
             <div class="detail-label">限购数量</div>
             <div class="detail-value">
-              {{ voucherModel.purchaseLimitCode || "-" }}
+              {{ voucherModel.purchaseLimitCode || "--" }}
             </div>
           </div>
           <!-- 适用范围 -->
@@ -110,7 +110,7 @@
           <div class="detail-item">
             <div class="detail-label">补充说明</div>
             <div class="detail-value">
-              {{ voucherModel.supplement || "详情请进店咨询" }}
+              {{ voucherModel.supplement || "--" }}
             </div>
           </div>
         </div>
@@ -315,7 +315,7 @@ const loadDetailData = async () => {
  * @returns 格式化后的日期字符串 (YYYY.MM.DD)
  */
 const formatDate = (date: string) => {
-  if (!date) return "-";
+  if (!date) return "--";
   return date.replace(/-/g, ".");
 };
 
@@ -328,7 +328,7 @@ const getUsageTimeText = () => {
     const endHour = formatHour(voucherModel.value.buyUseEndTime);
     return `${startHour}-${endHour}`;
   }
-  return "-";
+  return "--";
 };
 
 /**
@@ -350,7 +350,7 @@ const getExpirationText = () => {
     if (voucherModel.value.expirationDate) {
       return `购买后${voucherModel.value.expirationDate}天`;
     }
-    return "-";
+    return "--";
   } else if (voucherModel.value.expirationType === "1" || voucherModel.value.expirationType == 1) {
     if (
       voucherModel.value.validityPeriod &&
@@ -361,9 +361,9 @@ const getExpirationText = () => {
       const endDate = formatDate(voucherModel.value.validityPeriod[1]);
       return `${startDate}-${endDate}`;
     }
-    return "-";
+    return "--";
   }
-  return "-";
+  return "--";
 };
 
 /**
@@ -404,7 +404,7 @@ const getUnavailableDateText = () => {
       parts.push(holidays.join("、"));
     }
 
-    return parts.length > 0 ? parts.join("、") : "-";
+    return parts.length > 0 ? parts.join("、") : "--";
   } else if (voucherModel.value.unusedType === "2" || voucherModel.value.unusedType == 2) {
     if (voucherModel.value.disableDateList && voucherModel.value.disableDateList.length > 0) {
       const dateStrings = voucherModel.value.disableDateList
@@ -414,11 +414,11 @@ const getUnavailableDateText = () => {
           const endDate = formatDate(date[1]);
           return startDate === endDate ? startDate : `${startDate}-${endDate}`;
         });
-      return dateStrings.length > 0 ? dateStrings.join("、") : "-";
+      return dateStrings.length > 0 ? dateStrings.join("、") : "--";
     }
-    return "-";
+    return "--";
   }
-  return "-";
+  return "--";
 };
 
 /**
@@ -433,7 +433,7 @@ const getApplyScopeText = () => {
     }
     return "全场通用";
   }
-  return "-";
+  return "--";
 };
 </script>