From 550d6550119930199ca7ac73c7d07300948e8616 Mon Sep 17 00:00:00 2001
From: zoujing <kidevelop@163.com>
Date: Tue, 26 Aug 2025 18:46:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=95=86=E5=93=81=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E7=9A=84=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../booking/QuickBookingContentList.vue       | 359 +++++++++--------
 .../detail/DetailCardGoodsContentList.vue     | 361 +++++++++---------
 2 files changed, 351 insertions(+), 369 deletions(-)

diff --git a/pages/module/booking/QuickBookingContentList.vue b/pages/module/booking/QuickBookingContentList.vue
index 48c3456..4b9cc85 100644
--- a/pages/module/booking/QuickBookingContentList.vue
+++ b/pages/module/booking/QuickBookingContentList.vue
@@ -1,214 +1,203 @@
 <template>
-    <view class="container">
-        <ModuleTitle :title="commodityDTO.title" />
-        <view class="container-scroll">
-            <view
-                v-for="(item, index) in commodityDTO.commodityList"
-                :key="`${item.commodityId}-${index}`"
-            >
-                <view class="mk-card-item" @click="placeOrderHandle(item)">
-                    <!-- <view class="card-badge">超值推荐</view> -->
-                    <image
-                        class="card-img"
-                        :src="item.commodityIcon"
-                        mode="aspectFill"
-                    />
-                    <view class="card-content">
-                        <view class="card-title-column">
-                            <text class="card-title">{{
-                                item.commodityName
-                            }}</text>
-                            <view
-                                class="card-tags"
-                                v-for="tag in item.commodityTradeRuleList"
-                                :key="tag"
-                            >
-                                <text class="card-tag">{{ tag }}</text>
-                            </view>
-                        </view>
-                        <template
-                            v-for="(
-                                serviceItem, index
-                            ) in item.commodityServices"
-                            :key="serviceItem.serviceTitle"
-                        >
-                            <view v-if="index < 3" class="card-desc"
-                                >· {{ serviceItem.serviceTitle }}</view
-                            >
-                        </template>
-                        <view class="card-bottom-row">
-                            <view class="card-price-row">
-                                <text class="card-price-fu">￥</text>
-                                <text class="card-price">{{
-                                    item.commodityPrice
-                                }}</text>
-                                <text class="card-unit">/人</text>
-                            </view>
-
-                            <text class="card-btn">下单</text>
-                        </view>
-                    </view>
-                </view>
+  <view class="container">
+    <ModuleTitle :title="commodityDTO.title" />
+    <view class="container-scroll">
+      <view
+        v-for="(item, index) in commodityDTO.commodityList"
+        :key="`${item.commodityId}-${index}`"
+      >
+        <view class="mk-card-item" @click="placeOrderHandle(item)">
+          <!-- <view class="card-badge">超值推荐</view> -->
+          <image class="card-img" :src="item.commodityIcon" mode="aspectFill" />
+          <view class="card-content">
+            <view class="card-title-column">
+              <text class="card-title">{{ item.commodityName }}</text>
+              <view
+                class="card-tags"
+                v-for="tag in item.commodityTradeRuleList"
+                :key="tag"
+              >
+                <text class="card-tag">{{ tag }}</text>
+              </view>
             </view>
+            <template
+              v-for="(serviceItem, index) in item.commodityServices"
+              :key="serviceItem.serviceTitle"
+            >
+              <view v-if="index < 3" class="card-desc"
+                >· {{ serviceItem.serviceTitle }}</view
+              >
+            </template>
+            <view class="card-bottom-row">
+              <view class="card-price-row">
+                <text class="card-price-fu">￥</text>
+                <text class="card-price">{{ item.commodityPrice }}</text>
+                <text class="card-unit">/人</text>
+              </view>
+
+              <text class="card-btn">下单</text>
+            </view>
+          </view>
         </view>
+      </view>
     </view>
+  </view>
 </template>
 
 <script setup>
 import ModuleTitle from "@/components/ModuleTitle/index.vue";
 import { defineProps } from "vue";
 const props = defineProps({
-    commodityDTO: {
-        type: Object,
-        default: {},
-    },
+  commodityDTO: {
+    type: Object,
+    default: {},
+  },
 });
 
 /// 去下单
 const placeOrderHandle = (item) => {
-    uni.navigateTo({
-        url: `/pages/goods/index?commodityId=${item.commodityId}`,
-    });
+  uni.navigateTo({
+    url: `/pages/goods/index?commodityId=${item.commodityId}`,
+  });
 };
 </script>
 
 <style lang="scss" scoped>
 .container {
-    .container-scroll {
+  .container-scroll {
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+    margin: 4px 0;
+
+    .mk-card-item {
+      position: relative;
+
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      width: 188px;
+      //   height: 244px;
+      background-color: #ffffff;
+      border-radius: 10px;
+      margin-right: 8px;
+      padding-bottom: 12px;
+
+      .card-badge {
+        position: absolute;
+        top: 8px;
+        left: 8px;
+        background: #ffe7b2;
+        color: #b97a00;
+        font-size: 12px;
+        padding: 2px 8px;
+        border-radius: 4px;
+        z-index: 2;
+      }
+
+      .card-img {
+        width: 188px;
+        height: 114px;
+        border-radius: 10px;
+        object-fit: cover; /* 确保图片不变形，保持比例裁剪 */
+        flex-shrink: 0; /* 防止图片被压缩 */
+      }
+
+      .card-content {
+        box-sizing: border-box;
+        padding: 10px 12px 0 12px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: start;
+        width: 100%;
+        flex: 1; /* 让内容区域占据剩余空间 */
+        overflow: hidden; /* 防止内容溢出 */
+      }
+
+      .card-title-column {
+        display: flex;
+        align-items: start;
+        flex-direction: column;
+        width: 100%;
+      }
+
+      .card-title {
+        font-size: 16px;
+        font-weight: bold;
+        color: #222;
+        width: 100%;
+        /* 限制标题最多显示两行 */
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        line-height: 1.4;
+        max-height: 2.8em; /* 2行的高度 */
+      }
+
+      .card-tags {
         display: flex;
         flex-direction: row;
-        overflow-x: auto;
-        overflow-y: hidden;
-        margin: 4px 0;
+        align-items: start;
+        padding: 6px 0;
+      }
 
-        .mk-card-item {
-            position: relative;
+      .card-tag {
+        color: #ff6600;
+        font-size: 10px;
+        border-radius: 4px;
+        padding: 0 6px;
+        margin-left: 2px;
+        border: 1px solid #ff6600;
+      }
 
-            display: flex;
-            flex-direction: column;
-            align-items: start;
-            width: 188px;
-            //   height: 244px;
-            background-color: #ffffff;
-            border-radius: 10px;
-            margin-right: 8px;
-            padding-bottom: 12px;
+      .card-desc {
+        font-size: 13px;
+        color: #888;
+        margin-top: 2px;
+      }
 
-            .card-badge {
-                position: absolute;
-                top: 8px;
-                left: 8px;
-                background: #ffe7b2;
-                color: #b97a00;
-                font-size: 12px;
-                padding: 2px 8px;
-                border-radius: 4px;
-                z-index: 2;
-            }
+      .card-bottom-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 8px;
+        width: 100%;
+      }
 
-            .card-img {
-                width: 188px;
-                height: 114px;
-                border-radius: 10px;
-                object-fit: cover; /* 确保图片不变形，保持比例裁剪 */
-                flex-shrink: 0; /* 防止图片被压缩 */
-            }
-
-            .card-content {
-                box-sizing: border-box;
-                padding: 10px 12px 0 12px;
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-                align-items: start;
-                width: 100%;
-                flex: 1; /* 让内容区域占据剩余空间 */
-                overflow: hidden; /* 防止内容溢出 */
-            }
-
-            .card-title-column {
-                display: flex;
-                align-items: start;
-                flex-direction: column;
-                width: 100%;
-            }
-
-            .card-title {
-                font-size: 16px;
-                font-weight: bold;
-                color: #222;
-                width: 100%;
-                /* 限制标题最多显示两行 */
-                display: -webkit-box;
-                -webkit-box-orient: vertical;
-                -webkit-line-clamp: 2;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                line-height: 1.4;
-                max-height: 2.8em; /* 2行的高度 */
-            }
-
-            .card-tags {
-                display: flex;
-                flex-direction: row;
-                align-items: start;
-                padding: 6px 0;
-            }
-
-            .card-tag {
-                background: #f5f5f5;
-                color: #ff6600;
-                font-size: 10px;
-                border-radius: 4px;
-                padding: 0 6px;
-                margin-left: 2px;
-                border: 1px solid #ff6600;
-            }
-
-            .card-desc {
-                font-size: 13px;
-                color: #888;
-                margin-top: 2px;
-            }
-
-            .card-bottom-row {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                margin-top: 8px;
-                width: 100%;
-            }
-
-            .card-price-row {
-                .card-price-fu {
-                    color: #ff6600;
-                    font-size: 11px;
-                    font-weight: normal;
-                }
-
-                .card-price {
-                    color: #ff6600;
-                    font-size: 16px;
-                    font-weight: bold;
-                }
-                .card-unit {
-                    font-size: 11px;
-                    color: #888;
-                    font-weight: normal;
-                    margin-left: 2px;
-                }
-            }
-
-            .card-btn {
-                background: #ff6600;
-                color: #fff;
-                font-size: 15px;
-                border-radius: 20px;
-                padding: 0 18px;
-                height: 32px;
-                line-height: 32px;
-            }
+      .card-price-row {
+        .card-price-fu {
+          color: #ff6600;
+          font-size: 11px;
+          font-weight: normal;
         }
+
+        .card-price {
+          color: #ff6600;
+          font-size: 16px;
+          font-weight: bold;
+        }
+        .card-unit {
+          font-size: 11px;
+          color: #888;
+          font-weight: normal;
+          margin-left: 2px;
+        }
+      }
+
+      .card-btn {
+        background: #ff6600;
+        color: #fff;
+        font-size: 15px;
+        border-radius: 20px;
+        padding: 0 18px;
+        height: 32px;
+        line-height: 32px;
+      }
     }
+  }
 }
 </style>
diff --git a/pages/module/detail/DetailCardGoodsContentList.vue b/pages/module/detail/DetailCardGoodsContentList.vue
index 4807e16..16c92c3 100644
--- a/pages/module/detail/DetailCardGoodsContentList.vue
+++ b/pages/module/detail/DetailCardGoodsContentList.vue
@@ -1,214 +1,207 @@
 <template>
-    <view class="container">
-        <ModuleTitle title="相关商品" />
-        <view class="container-scroll">
-            <view
-                v-for="(item, index) in commodityList"
-                :key="`${item.commodityId}-${index}`"
-            >
-                <view class="mk-card-item" @click="placeOrderHandle(item)">
-                    <image
-                        class="card-img"
-                        :src="item.commodityPhoto"
-                        mode="aspectFill"
-                    />
-                    <view class="card-content">
-                        <view class="card-title-column">
-                            <text class="card-title">{{
-                                item.commodityName
-                            }}</text>
-                            <view
-                                class="card-tags"
-                                v-for="tag in item.commodityTradeRuleList"
-                                :key="tag"
-                            >
-                                <text class="card-tag">{{ tag }}</text>
-                            </view>
-                        </view>
-                        <template
-                            v-for="(
-                                serviceItem, index
-                            ) in item.commodityServices"
-                            :key="serviceItem.serviceTitle"
-                        >
-                            <view v-if="index < 3" class="card-desc"
-                                >· {{ serviceItem.serviceTitle }}</view
-                            >
-                        </template>
-                        <view class="card-bottom-row">
-                            <view class="card-price-row">
-                                <text class="card-price-fu">￥</text>
-                                <text class="card-price">{{
-                                    item.specificationPrice
-                                }}</text>
-                                <text class="card-unit">/人</text>
-                            </view>
-                            <text class="card-btn">下单</text>
-                        </view>
-                    </view>
-                </view>
+  <view class="container">
+    <ModuleTitle title="相关商品" />
+    <view class="container-scroll">
+      <view
+        v-for="(item, index) in commodityList"
+        :key="`${item.commodityId}-${index}`"
+      >
+        <view class="mk-card-item" @click="placeOrderHandle(item)">
+          <image
+            class="card-img"
+            :src="item.commodityPhoto"
+            mode="aspectFill"
+          />
+          <view class="card-content">
+            <view class="card-title-column">
+              <text class="card-title">{{ item.commodityName }}</text>
+              <view
+                class="card-tags"
+                v-for="tag in item.commodityTradeRuleList"
+                :key="tag"
+              >
+                <text class="card-tag">{{ tag }}</text>
+              </view>
             </view>
+            <template
+              v-for="(serviceItem, index) in item.commodityServices"
+              :key="serviceItem.serviceTitle"
+            >
+              <view v-if="index < 3" class="card-desc"
+                >· {{ serviceItem.serviceTitle }}</view
+              >
+            </template>
+            <view class="card-bottom-row">
+              <view class="card-price-row">
+                <text class="card-price-fu">￥</text>
+                <text class="card-price">{{ item.specificationPrice }}</text>
+                <text class="card-unit">/人</text>
+              </view>
+              <text class="card-btn">下单</text>
+            </view>
+          </view>
         </view>
+      </view>
     </view>
+  </view>
 </template>
 
 <script setup>
 import ModuleTitle from "@/components/ModuleTitle/index.vue";
 import { defineProps } from "vue";
 const props = defineProps({
-    commodityList: {
-        type: Array,
-        default: [],
-    },
+  commodityList: {
+    type: Array,
+    default: [],
+  },
 });
 
 /// 去下单
 const placeOrderHandle = (item) => {
-    uni.navigateTo({
-        url: `/pages/goods/index?commodityId=${item.commodityId}`,
-    });
+  uni.navigateTo({
+    url: `/pages/goods/index?commodityId=${item.commodityId}`,
+  });
 };
 </script>
 
 <style lang="scss" scoped>
 .container {
-    margin: 6px 0 0;
+  margin: 6px 0 0;
 
-    .container-scroll {
+  .container-scroll {
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+    margin: 4px 0;
+
+    .mk-card-item {
+      position: relative;
+
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      width: 188px;
+      //   height: 244px;
+      background-color: #ffffff;
+      border-radius: 10px;
+      margin-right: 8px;
+      padding-bottom: 12px;
+
+      .card-badge {
+        position: absolute;
+        top: 8px;
+        left: 8px;
+        background: #ffe7b2;
+        color: #b97a00;
+        font-size: 12px;
+        padding: 2px 8px;
+        border-radius: 4px;
+        z-index: 2;
+      }
+
+      .card-img {
+        width: 188px;
+        height: 114px;
+        border-radius: 10px;
+        object-fit: cover; /* 确保图片不变形，保持比例裁剪 */
+        flex-shrink: 0; /* 防止图片被压缩 */
+      }
+
+      .card-content {
+        box-sizing: border-box;
+        padding: 10px 12px 0 12px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: start;
+        width: 100%;
+        flex: 1; /* 让内容区域占据剩余空间 */
+        overflow: hidden; /* 防止内容溢出 */
+      }
+
+      .card-title-column {
+        display: flex;
+        align-items: start;
+        flex-direction: column;
+        width: 100%;
+      }
+
+      .card-title {
+        font-size: 16px;
+        font-weight: bold;
+        color: #222;
+        width: 100%;
+        /* 限制标题最多显示两行 */
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        line-height: 1.4;
+        max-height: 2.8em; /* 2行的高度 */
+      }
+
+      .card-tags {
         display: flex;
         flex-direction: row;
-        overflow-x: auto;
-        overflow-y: hidden;
-        margin: 4px 0;
+        align-items: start;
+        padding: 6px 0;
+      }
 
-        .mk-card-item {
-            position: relative;
+      .card-tag {
+        color: #ff6600;
+        font-size: 10px;
+        border-radius: 4px;
+        padding: 0 6px;
+        margin-left: 2px;
+        border: 1px solid #ff6600;
+      }
 
-            display: flex;
-            flex-direction: column;
-            align-items: start;
-            width: 188px;
-            //   height: 244px;
-            background-color: #ffffff;
-            border-radius: 10px;
-            margin-right: 8px;
-            padding-bottom: 12px;
+      .card-desc {
+        font-size: 13px;
+        color: #888;
+        margin-top: 2px;
+      }
 
-            .card-badge {
-                position: absolute;
-                top: 8px;
-                left: 8px;
-                background: #ffe7b2;
-                color: #b97a00;
-                font-size: 12px;
-                padding: 2px 8px;
-                border-radius: 4px;
-                z-index: 2;
-            }
+      .card-bottom-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 8px;
+        width: 100%;
+      }
 
-            .card-img {
-                width: 188px;
-                height: 114px;
-                border-radius: 10px;
-                object-fit: cover; /* 确保图片不变形，保持比例裁剪 */
-                flex-shrink: 0; /* 防止图片被压缩 */
-            }
-
-            .card-content {
-                box-sizing: border-box;
-                padding: 10px 12px 0 12px;
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-                align-items: start;
-                width: 100%;
-                flex: 1; /* 让内容区域占据剩余空间 */
-                overflow: hidden; /* 防止内容溢出 */
-            }
-
-            .card-title-column {
-                display: flex;
-                align-items: start;
-                flex-direction: column;
-                width: 100%;
-            }
-
-            .card-title {
-                font-size: 16px;
-                font-weight: bold;
-                color: #222;
-                width: 100%;
-                /* 限制标题最多显示两行 */
-                display: -webkit-box;
-                -webkit-box-orient: vertical;
-                -webkit-line-clamp: 2;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                line-height: 1.4;
-                max-height: 2.8em; /* 2行的高度 */
-            }
-
-            .card-tags {
-                display: flex;
-                flex-direction: row;
-                align-items: start;
-                padding: 6px 0;
-            }
-
-            .card-tag {
-                background: #f5f5f5;
-                color: #ff6600;
-                font-size: 10px;
-                border-radius: 4px;
-                padding: 0 6px;
-                margin-left: 2px;
-                border: 1px solid #ff6600;
-            }
-
-            .card-desc {
-                font-size: 13px;
-                color: #888;
-                margin-top: 2px;
-            }
-
-            .card-bottom-row {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                margin-top: 8px;
-                width: 100%;
-            }
-
-            .card-price-row {
-                .card-price-fu {
-                    color: #ff6600;
-                    font-size: 11px;
-                    font-weight: normal;
-                }
-
-                .card-price {
-                    color: #ff6600;
-                    font-size: 16px;
-                    font-weight: bold;
-                }
-                .card-unit {
-                    font-size: 11px;
-                    color: #888;
-                    font-weight: normal;
-                    margin-left: 2px;
-                }
-            }
-
-            .card-btn {
-                background: #ff6600;
-                color: #fff;
-                font-size: 15px;
-                border-radius: 20px;
-                padding: 0 18px;
-                height: 32px;
-                line-height: 32px;
-            }
+      .card-price-row {
+        .card-price-fu {
+          color: #ff6600;
+          font-size: 11px;
+          font-weight: normal;
         }
+
+        .card-price {
+          color: #ff6600;
+          font-size: 16px;
+          font-weight: bold;
+        }
+        .card-unit {
+          font-size: 11px;
+          color: #888;
+          font-weight: normal;
+          margin-left: 2px;
+        }
+      }
+
+      .card-btn {
+        background: #ff6600;
+        color: #fff;
+        font-size: 15px;
+        border-radius: 20px;
+        padding: 0 18px;
+        height: 32px;
+        line-height: 32px;
+      }
     }
+  }
 }
 </style>