feat(details): 商品详情规格展示改版

pages/specialArea/details.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="content">
-    <backIcon></backIcon>
+    <!-- <backIcon></backIcon> -->
     <!-- 轮播图 -->
     <u-swiper
       :list="bannerImgList"
@@ -14,8 +14,14 @@
       <view v-if="goodDetail.preSaleStatus == 1">
         <view class="sTop">
           <view class="sTop_l">
+            <view class="disFlex">
+              <view class="bao" v-if="goodDetail.prefixLabelTarget"
+                >[{{ goodDetail.prefixLabelTarget.label }}]
+              </view>
+              <view class="t_hei">{{ goodDetail.waresName }}</view>
+            </view>
             <view class="f1">
-              {{ goodDetail.goodsPrice | toThousandthAndKeepDecimal }}
+              {{ formatPriceToThousandth(goodDetail.goodsPrice) }}
             </view>
             <view class="disFlex1">
               <img src="@/static/images/clock.png" alt="" />
@@ -24,7 +30,7 @@
           </view>
           <view class="sTop_l">
             <view class="f2" v-if="specialArea != 18 && specialArea != 13"
-              >业绩:{{ goodDetail.goodsAchive | toThousandthAndKeepDecimal }}
+              >业绩:{{ formatPriceToThousandth(goodDetail.goodsAchive) }}
             </view>
             <view class="f3">
               <view>{{ '剩余时间' }}:{{ countDown }}</view>
@@ -33,25 +39,23 @@
           </view>
         </view>
         <view class="kuang1">
-          <!-- <view class="disFlex" v-show="specialArea == 31">
-            <view class="t_hui">统一零售价:{{ goodDetail.retailPrice | numberToCurrency | isLocal  }}</view>
-          </view> -->
           <view class="disFlex">
-            <view class="t_hui">销量:{{ goodDetail.sales | seles }}</view>
+            <view class="t_hui">销量:{{ formatSales(goodDetail.sales) }}</view>
-          </view>
-          <view class="disFlex">
-            <view class="bao" v-if="goodDetail.prefixLabelTarget"
-              >[{{ goodDetail.prefixLabelTarget.label }}]
-            </view>
-            <view class="t_hei">{{ goodDetail.waresName }}</view>
           </view>
         </view>
       </view>
 
       <view class="kuang" v-else>
+        <view class="disFlex">
+          <view class="bao" v-if="goodDetail.prefixLabelTarget"
+            >[{{ goodDetail.prefixLabelTarget.label }}]
+          </view>
+          <view class="t_hei">{{ goodDetail.waresName }}</view>
+        </view>
+        <view class="t_hui1">销量:{{ formatSales(goodDetail.sales) }}</view>
         <view class="disFlex">
           <view class="t_red">{{
-            goodDetail.goodsPrice | numberToCurrency | isLocal
+            formatNumberToCurrency(goodDetail.goodsPrice, isLocalCurrency())
           }}</view>
           <view
             class="t_hui"
@@ -61,42 +65,95 @@
               specialArea != 31 &&
               specialArea != 10
             "
-            >业绩:{{ goodDetail.goodsAchive | numberToCurrency }}</view
+            >业绩:{{ formatNumberToCurrency(goodDetail.goodsAchive) }}</view
           >
           <view class="t_hui" v-if="specialArea == 10"
-            >积分可抵扣:{{ goodDetail.deductMoney | numberToCurrency }}</view
+            >积分可抵扣:{{
+              formatNumberToCurrency(goodDetail.deductMoney)
+            }}</view
           >
           <view
             class="t_hui"
             v-if="goodDetail.specialArea == 31 && user.isMakerSpace == 0"
-            >业绩:{{ goodDetail.goodsAchive | numberToCurrency }}</view
+            >业绩:{{ formatNumberToCurrency(goodDetail.goodsAchive) }}</view
           >
           <view class="t_hui" v-if="specialArea == 13"
-            >BV:{{ goodDetail.goodsAssAchive | numberToCurrency }}</view
+            >BV:{{ formatNumberToCurrency(goodDetail.goodsAssAchive) }}</view
           >
         </view>
-        <view class="t_hui1">销量:{{ goodDetail.sales | seles }}</view>
-        <!-- <view class="disFlex" v-show="specialArea == 31">
-            <view class="t_hui1">统一零售价:{{ goodDetail.retailPrice | numberToCurrency | isLocal  }}</view>
-          </view> -->
-        <view class="disFlex">
-          <view class="bao" v-if="goodDetail.prefixLabelTarget"
-            >[{{ goodDetail.prefixLabelTarget.label }}]
       </view>
-          <view class="t_hei">{{ goodDetail.waresName }}</view>
+      <!-- <view class="kuang t_hei">
-        </view>
-      </view>
-      <view class="kuang t_hei">
         {{ '急速下单即享优先发货' }}
-      </view>
+      </view> -->
       <view class="kuang">
-        <view class="heng" @tap="selSku = true">
+        <view class="sku-selection-container">
-          <view class="disFlex">
+          <text class="sku-selection-title">规格：</text>
-            <view class="label">{{ '规格' }}</view>
+          <!-- Moved from popup body: SKU details -->
-            <view class="label1">{{ '已选' }}: {{ skuString }}</view>
+          <view class="sku-options-list">
+            <view
+              v-for="(item, groupIndex) in goodDetail.productParams"
+              :key="item.productId"
+              class="sku-product-group"
+            >
+              <view class="sku-product-name"
+                >{{ item.productName }} 应选 {{ item.quantity }} 已选
+                <text
+                  style="margin-left: 10rpx"
+                  :class="{
+                    'warning-text':
+                      getCurrentlySelectedCount(item) < item.quantity,
+                  }"
+                  >{{ getCurrentlySelectedCount(item) }}
+                </text>
               </view>
-          <u-icon name="arrow-right"></u-icon>
+              <u-row gutter="16" style="flex-wrap: wrap">
+                <u-col
+                  :span="item.waresItemsParamsList.length === 1 ? 12 : 6"
+                  v-for="(ctem, cndex) in item.waresItemsParamsList"
+                  :key="ctem.pkSkuId"
+                  class="sku-col-item"
+                >
+                  <view class="sku-item">
+                    <img :src="ctem.specCover" alt="" class="sku-item-cover" />
+                    <view class="sku-item-content-right">
+                      <view class="sku-item-name">{{ ctem.specsName }}</view>
+                      <u-number-box
+                        :min="0"
+                        :max="ctem.maxNum"
+                        @change="getNum(groupIndex, cndex, $event)"
+                        v-model="ctem.quantity"
+                      >
+                        <template v-slot:minus>
+                          <view :class="ctem.quantity == 0 ? 'hui' : 'minus'">
+                            <u-icon
+                              name="minus"
+                              color="#FFFFFF"
+                              size="12"
+                            ></u-icon>
                           </view>
+                        </template>
+                        <template v-slot:input>
+                          <text class="input">{{ ctem.quantity }}</text>
+                        </template>
+                        <template v-slot:plus>
+                          <view :class="ctem.quantity == 0 ? 'hui' : 'plus'">
+                            <u-icon
+                              name="plus"
+                              color="#FFFFFF"
+                              size="12"
+                            ></u-icon>
+                          </view>
+                        </template>
+                      </u-number-box>
+                    </view>
+                  </view>
+                </u-col>
+              </u-row>
+            </view>
+          </view>
+        </view>
+        <!-- END: Integrated SKU selection -->
+
         <view class="heng">
           <view class="disFlex">
             <view class="label">{{ '服务承诺' }}</view>
@@ -145,81 +202,11 @@
             (specialArea == 31 && user.isMakerSpace == 0) || specialArea != 31
           "
         >
-          <!-- <u-button type="success"
-                    class="uBtn"
-                    @tap="goBuy"
-                    shape="circle"
-                    color="linear-gradient(to right, #005BAC, #005BAC )">{{'立即购买'}} </u-button> -->
           <view class="btn1" @click="addCar()">加入购物车</view>
-          <!-- <view class="btn2">{{'立即购买'}}</view> -->
         </view>
       </view>
     </view>
     <!-- 选择规格 -->
-    <u-popup :show="selSku" mode="bottom" closeable @close="close">
-      <view class="pop_a">
-        <view class="pop_tt">
-          <view class="pop_t">
-            <img :src="imgUrlList[0]" alt="" />
-            <view>{{
-              goodDetail.goodsPrice | numberToCurrency | isLocal
-            }}</view>
-          </view>
-        </view>
-        <view class="zhan"></view>
-        <view class="pop">
-          <view
-            v-for="(item, index) in goodDetail.productParams"
-            :key="item.productId"
-            class="pop_c"
-          >
-            <view class="ggTit"
-              >{{ item.productName }}*{{ item.quantity }}</view
-            >
-            <view
-              v-for="(ctem, cndex) in item.waresItemsParamsList"
-              :key="ctem.pkSkuId"
-              class="pop_ci"
-            >
-              <view class="pop_cl">
-                <img :src="ctem.specCover" alt="" />
-                <view class="gui_iit">{{ ctem.specsNameDian }}</view>
-              </view>
-              <u-number-box
-                :min="0"
-                :max="ctem.maxNum"
-                @change="getNum(index, cndex, $event)"
-                v-model="ctem.quantity"
-              >
-                <view
-                  slot="minus"
-                  :class="ctem.quantity == 0 ? 'hui' : 'minus'"
-                >
-                  <u-icon name="minus" color="#FFFFFF" size="12"></u-icon>
-                </view>
-                <text slot="input" class="input">{{ ctem.quantity }}</text>
-                <view slot="plus" :class="ctem.quantity == 0 ? 'hui' : 'plus'">
-                  <u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
-                </view>
-              </u-number-box>
-            </view>
-          </view>
-        </view>
-        <view class="zhan1"></view>
-        <view class="pop_b">
-          <view class="pop_bb">
-            <u-button
-              type="success"
-              class="uBtn"
-              shape="circle"
-              color="linear-gradient(to right, #005BAC, #005BAC )"
-              @click="close"
-              >确认</u-button
-            >
-          </view>
-        </view>
-      </view>
-    </u-popup>
     <selSpaceGoods ref="selSpaceGoods" @getCar="getCatLength"></selSpaceGoods>
   </view>
 </template>
@@ -234,22 +221,12 @@ export default {
     backIcon,
     selSpaceGoods,
   },
-  filters: {
-    seles(value) {
-      if (value > 999) {
-        return 999 + '+'
-      } else {
-        return value
-      }
-    },
-  },
   data() {
     return {
       waresCode: '',
       specialArea: '',
       goodDetail: '',
       imgUrlList: [],
-      selSku: false,
       skuString: '',
       num: 1,
       isWidth: 375,
@@ -279,6 +256,45 @@ export default {
     // }
   },
   methods: {
+    getCurrentlySelectedCount(productGroup) {
+      if (!productGroup || !productGroup.waresItemsParamsList) {
+        return 0
+      }
+      return productGroup.waresItemsParamsList.reduce((sum, sku) => {
+        return sum + (sku.quantity || 0)
+      }, 0)
+    },
+    formatPriceToThousandth(value) {
+      if (value === null || value === undefined || isNaN(parseFloat(value))) {
+        return value
+      }
+      let numStr = parseFloat(value).toFixed(2)
+      let parts = numStr.split('.')
+      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+      return parts.join('.')
+    },
+    formatSales(value) {
+      if (value > 999) {
+        return '999+'
+      } else {
+        return value
+      }
+    },
+    formatNumberToCurrency(value, isLocal = false) {
+      if (value === null || value === undefined || isNaN(parseFloat(value))) {
+        return ''
+      }
+      let num = parseFloat(value)
+      // Removed a ssumed currency symbol logic. Now only formats to two decimal places.
+      return num.toFixed(2)
+    },
+    isLocalCurrency() {
+      // Helper to determine if local currency formatting is needed
+      // This is a placeholder. The original `isLocal` filter's logic might be more complex
+      // and depend on `this.pkCountry` or other global settings.
+      // For now, let's assume it's true if pkCountry is 1 (China).
+      return this.pkCountry === 1
+    },
     toIndex() {
       uni.switchTab({ url: '/pages/index/index' })
     },
@@ -309,6 +325,9 @@ export default {
         productGroup: [],
         pkCountry: this.pkCountry,
       }
+      uni.showLoading({
+        title: '加载中',
+      })
       this.goodDetail.productParams.forEach(item => {
         item.waresItemsParamsList.forEach(ctem => {
           if (ctem.quantity != 0) {
@@ -323,7 +342,9 @@ export default {
       if (this.goodDetail.isMakerGift == 2) {
         this.$refs.selSpaceGoods.getData(carList)
       } else {
-        api.addShopping(carList).then(res => {
+        api
+          .addShopping(carList)
+          .then(res => {
             if (res.code == 200) {
               uni.showToast({
                 title: '购物车添加成功',
@@ -333,21 +354,14 @@ export default {
               this.$store.dispatch('getCarLength')
             }
           })
+          .finally(() => {
+            uni.hideLoading()
+          })
       }
     },
     getCatLength() {
       this.$store.dispatch('getCarLength', this.goodDetail.specialArea)
     },
-    close() {
-      this.selSku = false
-    },
-    goBuy() {
-      uni.navigateTo({
-        url:
-          '/pages/shareArea/orderShare?allData=' +
-          JSON.stringify(this.goodDetail),
-      })
-    },
     getDetails() {
       api
         .waresDetail({
@@ -573,6 +587,13 @@ export default {
       // 作为返回值返回
       return d + '天' + h + ':' + m + ':' + s
     },
+    goBuy() {
+      uni.navigateTo({
+        url:
+          '/pages/shareArea/orderShare?allData=' +
+          JSON.stringify(this.goodDetail),
+      })
+    },
   },
 }
 </script>
@@ -650,7 +671,7 @@ export default {
   }
 }
 .t_hei {
-  font-size: 13px;
+  font-size: 32rpx;
   font-family:
     PingFang SC-Semibold,
     PingFang SC;
@@ -697,87 +718,90 @@ export default {
     margin: 10rpx auto;
   }
 }
-.pop_a {
+
-  background: #f7f7f7;
+// START: Styles for integrated SKU selection
-  max-height: 80vh;
+.sku-selection-container {
-  overflow-y: auto;
+  padding: 20rpx 0;
-}
+  .sku-selection-title {
-.pop_tt {
+    font-size: 16px;
-  padding: 0 10rpx;
+    font-weight: 600;
-  margin: 0rpx 10rpx;
+    color: #333;
-  height: 172rpx;
-  background: #fff;
-  position: fixed;
-  width: calc(100% - 40rpx);
-  display: flex;
-  align-items: center;
-  z-index: 1;
-  .pop_t {
-    display: flex;
-    align-items: center;
-    img {
-      width: 58px;
-      height: 58px;
-      border-radius: 8px 8px 8px 8px;
-      margin-right: 40rpx;
-    }
-    font-size: 28px;
-    font-family: Arial-Bold, Arial;
-    font-weight: bold;
-    color: #b42b2a;
-  }
-}
-.zhan {
-  height: 172rpx;
-}
-.zhan1 {
-  height: 130rpx;
-}
-.pop {
-  padding: 10rpx 20rpx;
-  margin: 20rpx 10rpx;
-  box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5);
-  border-radius: 8px 8px 8px 8px;
-  background: #fff;
-  .pop_c {
-    border-bottom: 8rpx solid rgba(0, 0, 0, 0.05);
-    padding: 10rpx 0 20rpx 0;
-    .ggTit {
-      font-size: 12px;
-      font-family:
-        PingFang SC-Medium,
-        PingFang SC;
-      font-weight: 500;
-      color: #333333;
-      margin: 20rpx 0;
-    }
-    .pop_ci {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      background: #eeeeee;
-      border-radius: 4px 4px 4px 4px;
-      opacity: 1;
     margin-bottom: 20rpx;
-      padding: 4rpx 12rpx;
+    display: block;
-      .pop_cl {
+  }
+
+  .sku-options-list {
+    // Styles for the list of product groups
+  }
+
+  .sku-product-group {
+    margin-bottom: 20rpx;
+    &:last-child {
+      margin-bottom: 0;
+    }
+    .sku-product-name {
+      font-size: 14px;
+      font-weight: 500;
+      color: #444;
+      margin-bottom: 15rpx;
+      padding-left: 8rpx;
+    }
+  }
+
+  .sku-col-item {
+    margin-bottom: 20rpx;
+  }
+
+  .sku-item {
     display: flex;
+    flex-direction: row;
     align-items: center;
-        .gui_iit {
+    background: #f9f9f9;
-          margin-left: 20rpx;
+    border-radius: 8px;
+    padding: 12rpx;
+    height: auto;
+    box-sizing: border-box;
+    justify-content: space-between;
+
+    .sku-item-cover {
+      width: 80rpx;
+      height: 80rpx;
+      border-radius: 4px;
+      margin-right: 15rpx;
+      flex-shrink: 0;
+    }
+
+    .sku-item-content-right {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      width: 0;
+    }
+
+    .sku-item-name {
+      font-size: 13px;
+      color: #333;
+      line-height: 1.4;
+      margin-bottom: 8rpx;
+      text-align: right;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .u-number-box {
+      width: auto;
+      align-self: flex-end;
     }
   }
 }
-    img {
+// END: Styles for integrated SKU selection
-      width: 48rpx;
+
-      height: 48rpx;
+.warning-text {
-      border-radius: 4px 4px 4px 4px;
+  color: #e54d42; /* 警告红色 */
-    }
-  }
-}
-::v-deep .u-popup__content__close {
-  z-index: 2;
 }
+
 .hui {
   width: 22px;
   height: 22px;
@@ -812,16 +836,6 @@ export default {
   margin: 0 10rpx;
   border-radius: 3px 3px 3px 3px;
 }
-.pop_b {
-  position: fixed;
-  bottom: 0;
-  height: 166rpx;
-  background: #ffffff;
-  width: 100%;
-}
-.pop_bb {
-  padding: 20rpx 40rpx;
-}
 .footer_f {
   position: fixed;
   bottom: 0;