From f0e29d3909325575b964021be9e65b05f6b3a3cc Mon Sep 17 00:00:00 2001
From: woody <woody@gmail.com>
Date: Tue, 29 Apr 2025 11:18:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(goodsDetail):=20=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/goodsDetails/index.vue | 565 ++++++++++++++++---------------
 1 file changed, 288 insertions(+), 277 deletions(-)

diff --git a/src/views/goodsDetails/index.vue b/src/views/goodsDetails/index.vue
index 4580d6e..46f1d35 100644
--- a/src/views/goodsDetails/index.vue
+++ b/src/views/goodsDetails/index.vue
@@ -8,204 +8,240 @@
       @showShare="showShare"
       ref="sideBar"
     ></Sidebar>
-    <!-- 面包屑 -->
-    <div class="mianbao">
-      <el-breadcrumb separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-        <el-breadcrumb-item
-          v-if="specialArea != 18 && specialArea != 19"
-          :to="{ path: '/shoppingMall?id=' + specialArea }"
-          >{{ labelName }}</el-breadcrumb-item
-        >
-        <el-breadcrumb-item v-else :to="{ path: '/spaceMallList' }">{{
-          labelName
-        }}</el-breadcrumb-item>
-        <el-breadcrumb-item>商品详情</el-breadcrumb-item>
-      </el-breadcrumb>
-    </div>
-    <div class="details_t">
-      <!-- 轮播图 -->
-      <Swiper :mainImgUrls="mainImgUrl" :imgUrlLists="imgUrlList"></Swiper>
-      <!-- 商品信息 -->
-      <div class="details_c">
-        <div class="dis_flex">
-          <div class="qzbq" v-if="goodDetail.prefixLabelTarget">
-            [{{ goodDetail.prefixLabelTarget.label }}]
-          </div>
-          <div class="c_tit1">
-            {{ goodDetail.waresName }}
-          </div>
+    <div class="product-body">
+      <div class="product-container">
+        <!-- 面包屑 -->
+        <div class="mianbao">
+          <el-breadcrumb separator-class="el-icon-arrow-right">
+            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+            <el-breadcrumb-item
+              v-if="specialArea != 18 && specialArea != 19"
+              :to="{ path: '/shoppingMall?id=' + specialArea }"
+              >{{ labelName }}</el-breadcrumb-item
+            >
+            <el-breadcrumb-item v-else :to="{ path: '/spaceMallList' }">{{
+              labelName
+            }}</el-breadcrumb-item>
+            <el-breadcrumb-item>商品详情</el-breadcrumb-item>
+          </el-breadcrumb>
         </div>
-
-        <div class="c_hui">{{ goodDetail.sellingPoints }}</div>
-
-        <div class="c_bai">
-          <div class="dis_flex jusc" v-if="goodDetail.preSaleStatus == 1">
+        <div class="details_t">
+          <!-- 轮播图 -->
+          <Swiper :mainImgUrls="mainImgUrl" :imgUrlLists="imgUrlList"></Swiper>
+          <!-- 商品信息 -->
+          <div class="details_c">
             <div class="dis_flex">
-              <img src="@/assets/images/clock.png" alt="" />
-              <div>预计发货</div>
+              <div class="qzbq" v-if="goodDetail.prefixLabelTarget">
+                [{{ goodDetail.prefixLabelTarget.label }}]
+              </div>
+              <div class="c_tit1">
+                {{ goodDetail.waresName }}
+              </div>
             </div>
-            <div class="dis_flex jusc_r">
-              <div>剩余时间:</div>
-              <div class="jusc_ri">{{ countDown }}</div>
-            </div>
-          </div>
-          <div class="c_bai_b">
-            <div class="dis_flex just">
-              <div class="dis_flex">
-                <div class="goods-price">
-                  {{ userInfo.currencyIcon
-                  }}{{ goodDetail.goodsPrice | toThousandthAndKeepDecimal }}
+
+            <div class="c_hui">{{ goodDetail.sellingPoints }}</div>
+
+            <div class="c_bai">
+              <div class="dis_flex jusc" v-if="goodDetail.preSaleStatus == 1">
+                <div class="dis_flex">
+                  <img src="@/assets/images/clock.png" alt="" />
+                  <div>预计发货</div>
                 </div>
-                <!-- <div class="tit6"   v-show="
+                <div class="dis_flex jusc_r">
+                  <div>剩余时间:</div>
+                  <div class="jusc_ri">{{ countDown }}</div>
+                </div>
+              </div>
+              <div class="c_bai_b">
+                <div class="dis_flex just">
+                  <div class="dis_flex">
+                    <div class="goods-price">
+                      {{ userInfo.currencyIcon
+                      }}{{ goodDetail.goodsPrice | toThousandthAndKeepDecimal }}
+                    </div>
+                    <!-- <div class="tit6"   v-show="
                     goodDetail.specialArea == 31">
                   统一零售价:{{ userInfo.currencyIcon
                   }}{{ goodDetail.retailPrice | toThousandthAndKeepDecimal }}
                 </div> -->
-              </div>
-              <div class="tit7">累计销售</div>
-            </div>
-            <div class="dis_flex just m10">
-              <div class="tit4 dis_flex">
-                <div
-                  v-show="
-                    goodDetail.specialArea != 13 &&
-                    goodDetail.specialArea != 31 &&
-                    goodDetail.specialArea != 10
-                  "
-                  style="margin-right: 20px"
-                >
-                  业绩:{{ goodDetail.goodsAchive | toThousandthAndKeepDecimal }}
+                  </div>
+                  <div class="tit7">累计销售</div>
                 </div>
-                <div
-                  v-show="
-                    goodDetail.specialArea == 31 && userInfo.isMakerSpace == 0
-                  "
-                  style="margin-right: 20px"
-                >
-                  {{ "业绩" }}:{{
-                    goodDetail.goodsAchive | toThousandthAndKeepDecimal
-                  }}
-                </div>
-                <div
-                  v-show="
-                    goodDetail.specialArea == 10 || goodDetail.specialArea == 11
-                  "
-                >
-                  {{ "积分可抵扣" }}:{{
-                    goodDetail.deductMoney | numberToCurrency
-                  }}
-                </div>
-                <div v-show="goodDetail.specialArea == 13">
-                  BV:{{
-                    goodDetail.goodsAssAchive | toThousandthAndKeepDecimal
-                  }}
-                </div>
-              </div>
-              <div class="goods-price">{{ goodDetail.sales | seles }}</div>
-            </div>
-            <div class="dis_flex just m10">
-              <div class="dis_flex" v-if="goodDetail.giftNames">
-                <div class="tit8">赠品：</div>
-                <div class="tit9">{{ goodDetail.giftNames }}</div>
-              </div>
-              <div v-else></div>
-            </div>
-          </div>
-        </div>
-        <!-- 规格 -->
-        <div class="gui">
-          <div v-for="item in filteredProductParams" :key="item.productId">
-            <div class="gui_t">
-              <div class="gui_th">规格:</div>
-              <div class="gui_y">
-                <div class="gui_tt">{{ item.productName }}</div>
-                <div class="gui_yi">应选:</div>
-                <span class="coloNum">{{ item.quantity }}</span>
-                <div class="gui_yi">已选:</div>
-                <span class="coloNum">{{ item.quantitySel }}</span>
-              </div>
-            </div>
-            <div class="gui_b">
-              <div class="gui_bt">型号:</div>
-              <div class="gui_bb">
-                <div
-                  v-for="(ctem, cndex) in item.waresItemsParamsList"
-                  :key="ctem.pkSkuId"
-                  class="gui_i"
-                >
-                  <div class="gui_ia">
-                    <el-popover placement="top-start" trigger="hover">
-                      <div>{{ ctem.specsName }}</div>
-                      <div
-                        slot="reference"
-                        v-show="ctem.specsNameDian.length > 17"
-                        @click.stop="tapSku(index, cndex, ctem.quantity)"
-                        :class="['gui_ii', ctem.checked ? 'gui_a' : '']"
-                      >
-                        <img :src="ctem.specCover" alt="" />
-                        <div class="gui_iit">{{ ctem.specsNameDian }}</div>
-                      </div>
-                    </el-popover>
+                <div class="dis_flex just m10">
+                  <div class="tit4 dis_flex">
                     <div
-                      v-show="ctem.specsNameDian.length <= 17"
-                      @click.stop="tapSku(index, cndex, ctem.quantity)"
-                      :class="['gui_ii', ctem.checked ? 'gui_a' : '']"
+                      v-show="
+                        goodDetail.specialArea != 13 &&
+                        goodDetail.specialArea != 31 &&
+                        goodDetail.specialArea != 10
+                      "
+                      style="margin-right: 20px"
                     >
-                      <img :src="ctem.specCover" alt="" />
-                      <div class="gui_iit">{{ ctem.specsNameDian }}</div>
+                      业绩:{{
+                        goodDetail.goodsAchive | toThousandthAndKeepDecimal
+                      }}
+                    </div>
+                    <div
+                      v-show="
+                        goodDetail.specialArea == 31 &&
+                        userInfo.isMakerSpace == 0
+                      "
+                      style="margin-right: 20px"
+                    >
+                      {{ "业绩" }}:{{
+                        goodDetail.goodsAchive | toThousandthAndKeepDecimal
+                      }}
+                    </div>
+                    <div
+                      v-show="
+                        goodDetail.specialArea == 10 ||
+                        goodDetail.specialArea == 11
+                      "
+                    >
+                      {{ "积分可抵扣" }}:{{
+                        goodDetail.deductMoney | numberToCurrency
+                      }}
+                    </div>
+                    <div v-show="goodDetail.specialArea == 13">
+                      BV:{{
+                        goodDetail.goodsAssAchive | toThousandthAndKeepDecimal
+                      }}
                     </div>
                   </div>
-                  <div class="jbq" v-show="ctem.checked">
-                    <el-input-number
-                      @change="getNum(index, cndex, $event)"
-                      v-model="ctem.quantity"
-                      :max="ctem.maxNum"
-                      :min="0"
-                    >
-                    </el-input-number>
-                  </div>
-                  <div class="jbq" v-show="!ctem.checked"></div>
+                  <div class="goods-price">{{ goodDetail.sales | seles }}</div>
                 </div>
+                <div class="dis_flex just m10">
+                  <div class="dis_flex" v-if="goodDetail.giftNames">
+                    <div class="tit8">赠品：</div>
+                    <div class="tit9">{{ goodDetail.giftNames }}</div>
+                  </div>
+                  <div v-else></div>
+                </div>
+              </div>
+            </div>
+            <!-- 规格 -->
+            <div class="gui">
+              <div v-for="item in filteredProductParams" :key="item.productId">
+                <div class="gui_t">
+                  <div class="gui_th">规格:</div>
+                  <div class="gui_y">
+                    <div class="gui_tt">{{ item.productName }}</div>
+                    <div class="gui_yi">应选:</div>
+                    <span class="coloNum">{{ item.quantity }}</span>
+                    <div class="gui_yi">已选:</div>
+                    <span class="coloNum">{{ item.quantitySel }}</span>
+                  </div>
+                </div>
+                <div class="gui_b">
+                  <div class="gui_bt">型号:</div>
+                  <div class="gui_bb">
+                    <div
+                      v-for="(ctem, cndex) in item.waresItemsParamsList"
+                      :key="ctem.pkSkuId"
+                      class="gui_i"
+                    >
+                      <div class="gui_ia">
+                        <el-popover placement="top-start" trigger="hover">
+                          <div>{{ ctem.specsName }}</div>
+                          <div
+                            slot="reference"
+                            v-show="ctem.specsNameDian.length > 17"
+                            @click.stop="tapSku(index, cndex, ctem.quantity)"
+                            :class="['gui_ii', ctem.checked ? 'gui_a' : '']"
+                          >
+                            <img :src="ctem.specCover" alt="" />
+                            <div class="gui_iit">{{ ctem.specsNameDian }}</div>
+                          </div>
+                        </el-popover>
+                        <div
+                          v-show="ctem.specsNameDian.length <= 17"
+                          @click.stop="tapSku(index, cndex, ctem.quantity)"
+                          :class="['gui_ii', ctem.checked ? 'gui_a' : '']"
+                        >
+                          <img :src="ctem.specCover" alt="" />
+                          <div class="gui_iit">{{ ctem.specsNameDian }}</div>
+                        </div>
+                      </div>
+                      <div class="jbq" v-show="ctem.checked">
+                        <el-input-number
+                          @change="getNum(index, cndex, $event)"
+                          v-model="ctem.quantity"
+                          :max="ctem.maxNum"
+                          :min="0"
+                        >
+                        </el-input-number>
+                      </div>
+                      <div class="jbq" v-show="!ctem.checked"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- 数量 -->
+            <div
+              class="dis_flex"
+              v-if="userInfo.registerShare == 0 || userInfo.registerFans == 0"
+            >
+              <div>数量：</div>
+              <el-input-number v-model="num" :min="1"></el-input-number>
+            </div>
+            <div
+              class="addCar"
+              v-if="
+                (specialArea == 31 && userInfo.isMakerSpace == 0) ||
+                specialArea != 31
+              "
+              @click="toAddCar"
+            >
+              加入购物车
+            </div>
+            <!-- <div class="addCar" v-else @click="goBuy">{{ '购买' }}</div> -->
+            <!-- {{ '服务承诺' }} -->
+            <div
+              v-if="
+                goodDetail.ensureLabelList &&
+                goodDetail.ensureLabelList.length > 0
+              "
+              class="dis_flex fw"
+            >
+              <div>服务承诺:</div>
+              <div
+                class="fw_i"
+                v-for="item in goodDetail.ensureLabelList"
+                :key="item.pkId"
+              >
+                <img src="@/assets/images/duihao.png" alt="" />
+                <div>{{ item.label }}</div>
               </div>
             </div>
           </div>
         </div>
-        <!-- 数量 -->
-        <div
-          class="dis_flex"
-          v-if="userInfo.registerShare == 0 || userInfo.registerFans == 0"
-        >
-          <div>数量：</div>
-          <el-input-number v-model="num" :min="1"></el-input-number>
-        </div>
-        <div
-          class="addCar"
-          v-if="
-            (specialArea == 31 && userInfo.isMakerSpace == 0) ||
-            specialArea != 31
-          "
-          @click="toAddCar"
-        >
-          加入购物车
-        </div>
-        <!-- <div class="addCar" v-else @click="goBuy">{{ '购买' }}</div> -->
-        <!-- {{ '服务承诺' }} -->
-        <div
-          v-if="
-            goodDetail.ensureLabelList && goodDetail.ensureLabelList.length > 0
-          "
-          class="dis_flex fw"
-        >
-          <div>服务承诺:</div>
+        <div class="menuList">
           <div
-            class="fw_i"
-            v-for="item in goodDetail.ensureLabelList"
-            :key="item.pkId"
+            :class="['menu_i', isMenu == 0 ? 'actMenu' : '']"
+            @click="isMenu = 0"
           >
-            <img src="@/assets/images/duihao.png" alt="" />
-            <div>{{ item.label }}</div>
+            商品介绍
           </div>
+          <div
+            :class="['menu_i', isMenu == 1 ? 'actMenu' : '']"
+            @click="isMenu = 1"
+          >
+            售后保障
+          </div>
+        </div>
+        <div class="xian"></div>
+        <div class="allDetail">
+          <div
+            v-show="isMenu == 0"
+            class="allDetail_i"
+            v-html="goodDetail.details"
+          ></div>
+          <div
+            v-show="isMenu == 1"
+            class="allDetail_i"
+            v-html="goodDetail.afterGuarantee"
+          ></div>
         </div>
       </div>
       <!-- 推荐 -->
@@ -242,35 +278,6 @@
         </div>
       </div>
     </div>
-
-    <div class="menuList">
-      <div
-        :class="['menu_i', isMenu == 0 ? 'actMenu' : '']"
-        @click="isMenu = 0"
-      >
-        商品介绍
-      </div>
-      <div
-        :class="['menu_i', isMenu == 1 ? 'actMenu' : '']"
-        @click="isMenu = 1"
-      >
-        售后保障
-      </div>
-    </div>
-    <div class="xian"></div>
-    <div class="allDetail">
-      <div
-        v-show="isMenu == 0"
-        class="allDetail_i"
-        v-html="goodDetail.details"
-      ></div>
-      <div
-        v-show="isMenu == 1"
-        class="allDetail_i"
-        v-html="goodDetail.afterGuarantee"
-      ></div>
-    </div>
-
     <selSpaceGoods ref="selSpaceGoods" @getCar="getCatLength"></selSpaceGoods>
   </div>
 </template>
@@ -968,39 +975,6 @@ export default {
   margin-top: 30px;
 }
 
-.details_t {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 60px;
-  margin-top: 40px;
-  .details_c {
-    flex: 1;
-    margin: 0 60px 0 40px;
-    .c_tit1 {
-      font-size: 22px;
-      font-weight: 600;
-      color: #333333;
-    }
-    .c_hui {
-      padding: 22px 20px;
-      background: #eeeeee;
-      border-radius: 10px 10px 10px 10px;
-      font-size: 18px;
-      color: #333333;
-      margin-top: 20px;
-    }
-    .c_bai {
-      // padding: 20px;
-      background: #ffffff;
-      box-shadow: 0px 0px 20px 0px rgba(204, 204, 204, 0.5);
-      border-radius: 10px 10px 10px 10px; // margin-top: 20px;
-      .c_bai_b {
-        padding: 20px;
-      }
-    }
-  }
-}
-
 .dis_flex {
   display: flex;
   align-items: center;
@@ -1019,46 +993,82 @@ export default {
 .m10 {
   margin-top: 10px;
 }
-
-.goodList {
-  width: 320px; /* Define a fixed width for the sticky column */
-  position: sticky;
-  top: 20px; /* Adjust as needed based on header/breadcrumb height */
-  align-self: flex-start; /* Prevent stretching vertically with flex items */
-  padding-bottom: 20px; /* Add some padding at the bottom */
-
-  .tited {
-    font-size: 18px;
-    font-weight: 600;
-    color: #333333;
-    margin-bottom: 10px;
-  }
-  .good_i {
-    margin-bottom: 20px;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    cursor: pointer;
-    border-radius: 10px;
-    overflow: hidden;
-    .goodBtm {
-      padding: 10px 20px 10px 20px;
-      background: #ffffff;
-      border-radius: 0px 0px 10px 10px;
-      margin-top: -5px;
-      position: relative;
-      z-index: 1;
-    }
-    &:hover {
-      transform: translateY(-5px);
-      box-shadow: 0px 8px 20px rgba(100, 100, 100, 0.2);
-      position: relative;
-      z-index: 2;
+.product-body {
+  display: flex;
+  .product-container {
+    flex: 1;
+    .details_t {
+      display: flex;
+      justify-content: space-between;
+      padding: 0 0 0px 60px;
+      margin-top: 40px;
+      .details_c {
+        flex: 1;
+        margin: 0 60px 0 40px;
+        .c_tit1 {
+          font-size: 22px;
+          font-weight: 600;
+          color: #333333;
+        }
+        .c_hui {
+          padding: 22px 20px;
+          background: #eeeeee;
+          border-radius: 10px 10px 10px 10px;
+          font-size: 18px;
+          color: #333333;
+          margin-top: 20px;
+        }
+        .c_bai {
+          // padding: 20px;
+          background: #ffffff;
+          box-shadow: 0px 0px 20px 0px rgba(204, 204, 204, 0.5);
+          border-radius: 10px 10px 10px 10px; // margin-top: 20px;
+          .c_bai_b {
+            padding: 20px;
+          }
+        }
+      }
     }
   }
-  .goodImg {
-    width: 318px;
-    height: 318px;
-    border-radius: 10px 10px 0px 0px;
-    display: block;
+  .goodList {
+    width: 320px; /* Define a fixed width for the sticky column */
+    align-self: flex-start; /* Prevent stretching vertically with flex items */
+    padding-bottom: 20px; /* Add some padding at the bottom */
+    padding-top: 80px;
+    margin-right: 60px;
+    .tited {
+      font-size: 18px;
+      font-weight: 600;
+      color: #333333;
+      margin-bottom: 10px;
+    }
+    .good_i {
+      margin-bottom: 20px;
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+      cursor: pointer;
+      border-radius: 10px;
+      overflow: hidden;
+      .goodBtm {
+        padding: 10px 20px 10px 20px;
+        background: #ffffff;
+        border-radius: 0px 0px 10px 10px;
+        margin-top: -5px;
+        position: relative;
+        z-index: 1;
+      }
+      &:hover {
+        transform: translateY(-5px);
+        box-shadow: 0px 8px 20px rgba(100, 100, 100, 0.2);
+        position: relative;
+        z-index: 2;
+      }
+    }
+    .goodImg {
+      width: 318px;
+      height: 318px;
+      border-radius: 10px 10px 0px 0px;
+      display: block;
+    }
   }
 }
 
@@ -1273,6 +1283,7 @@ export default {
   height: 5px;
   background: rgba(0, 0, 0, 0.05);
   margin-top: -5px;
+  width: calc(100% - 60px);
 }
 
 .allDetail {