feat(specialArea): 会员专区布局样式处理

components/area-product-list/index.vue

@@ -4,6 +4,7 @@
       <view class="header-bg"></view>
       <text class="area-title">{{ title }}</text>
       <u-button
+        v-if="list.length > 0"
         type="primary"
         size="mini"
         shape="circle"
@@ -15,8 +16,8 @@
           height: '46rpx',
           lineHeight: '46rpx',
           width: 'fit-content',
-          padding: '0 24rpx',
-          margin: '0'
+          padding: '0 12rpx',
+          margin: '0',
         }"
         @click="goToMore"
       >
@@ -27,7 +28,12 @@
       </u-button>
     </view>
     <view class="product-container">
-      <view class="product-item" v-for="item in list" :key="item.pkWares" @click="handleProductClick(item)">
+      <view
+        class="product-item"
+        v-for="item in list"
+        :key="item.pkWares"
+        @click="handleProductClick(item)"
+      >
         <image :src="item.cover1" class="product-image" mode="aspectFill" />
         <view class="product-info">
           <view class="product-name">{{ item.waresCode }}</view>
@@ -41,12 +47,12 @@
               shape="circle"
               :custom-style="{
                 background: '#005bac',
-                padding: 0, 
+                margin: '0px',
                 width: '48rpx',
                 height: '48rpx',
-                minWidth: '48rpx' 
+                minWidth: '48rpx',
               }"
-              @click.stop="handleAddToCart(item)"
+              @click.native.stop="handleAddToCart(item)"
             >
               <u-icon name="plus" color="#ffffff" size="12"></u-icon>
             </u-button>
@@ -59,88 +65,108 @@
 
 <script>
 import { numberToCurrencyNo, isLocal, isLocaled } from '@/util/numberToCurrency'
-
+import { addShopping } from '@/config/goods'
 export default {
   props: {
     title: {
       type: String,
-      default: '热销专区'
+      default: '热销专区',
     },
     list: {
       type: Array,
       default: () => [
         {
           pkWares: 17024,
-          cover1: "https://bd-qd.oss-cn-beijing.aliyuncs.com/test_01/20250406/c2aea04b-174d-4703-acab-c52d928371bd.jpg",
-          waresCode: "HZSLXSJ2",
-          waresPrice: "6000.0000",
+          cover1:
+            'https://bd-qd.oss-cn-beijing.aliyuncs.com/test_01/20250406/c2aea04b-174d-4703-acab-c52d928371bd.jpg',
+          waresCode: 'HZSLXSJ2',
+          waresPrice: '6000.0000',
           specialArea: 25,
           isSale: 0,
-          preSaleStatus: 0
+          preSaleStatus: 0,
         },
         {
           pkWares: 17041,
-          cover1: "https://bd-qd.oss-cn-beijing.aliyuncs.com/test_01/20250406/c2aea04b-174d-4703-acab-c52d928371bd.jpg",
-          waresCode: "HZSLXSJ1",
-          waresPrice: "2000.0000",
+          cover1:
+            'https://bd-qd.oss-cn-beijing.aliyuncs.com/test_01/20250406/c2aea04b-174d-4703-acab-c52d928371bd.jpg',
+          waresCode: 'HZSLXSJ1',
+          waresPrice: '2000.0000',
           specialArea: 25,
           isSale: 0,
-          preSaleStatus: 0
+          preSaleStatus: 0,
         },
         {
           pkWares: 17042,
-          cover1: "https://bd-qd.oss-cn-beijing.aliyuncs.com/test_01/20250406/c2aea04b-174d-4703-acab-c52d928371bd.jpg",
-          waresCode: "HZSLXSJ3",
-          waresPrice: "3999.0000",
+          cover1:
+            'https://bd-qd.oss-cn-beijing.aliyuncs.com/test_01/20250406/c2aea04b-174d-4703-acab-c52d928371bd.jpg',
+          waresCode: 'HZSLXSJ3',
+          waresPrice: '3999.0000',
           specialArea: 25,
           isSale: 0,
-          preSaleStatus: 0
-        }
-      ]
+          preSaleStatus: 0,
+        },
+      ],
     },
     specialAreaId: {
       type: [Number, String],
-      default: '25'
-    }
+      default: '25',
+    },
   },
   methods: {
     isLocaled,
     formatPrice(price) {
       // 使用numberToCurrencyNo和isLocal函数来格式化价格
-      return isLocal(numberToCurrencyNo(price));
+      return isLocal(numberToCurrencyNo(price))
     },
     goToMore() {
       // 跳转到专区详情页面
       uni.navigateTo({
-        url: `/pages/specialArea/index?id=${this.specialAreaId}`
-      });
+        url: `/pages/specialArea/index?id=${this.specialAreaId}`,
+      })
     },
     handleProductClick(item) {
       // 商品点击事件，可根据需求实现跳转或其他逻辑
-      this.$emit('product-click', item);
+      this.$emit('product-click', item)
     },
     handleAddToCart(item) {
-      // 添加到购物车事件
-      this.$emit('add-cart', item);
-    }
-  }
-};
+      const params = {
+        pkCountry: this.pkCountry,
+        specialArea: item.specialArea,
+        number: 1,
+        waresCode: item.waresCode,
+        productGroup: item.productGroup,
+      }
+
+      addShopping(params).then(res => {
+        if (res.code == 200) {
+          uni.showToast({
+            title: '购物车添加成功',
+            icon: 'success',
+            mask: true,
+          })
+          this.$store.dispatch("getCarLength");
+        }
+      })
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>
 .area-product-list {
   background-color: #ffffff;
-  padding: 30rpx;
+  padding: 20rpx;
   padding-top: 0;
-  border-radius: 8px;
-  margin-bottom: 15px;
+  border-radius: 16rpx;
+  margin-bottom: 24rpx;
+  position: relative;
 }
 
 .area-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 15px;
+  margin-bottom: 24rpx;
   position: relative;
   padding: 20rpx 0;
   height: 46rpx;
@@ -149,10 +175,10 @@ export default {
 .header-bg {
   position: absolute;
   top: 0;
-  left: -30rpx;
-  right: -30rpx;
+  left: -20rpx;
+  right: -20rpx;
   height: 100%;
-  background: linear-gradient(to bottom, #ADD8E6, #ffffff);
+  background: linear-gradient(to bottom, #add8e6, #ffffff);
   z-index: 0;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
@@ -184,14 +210,12 @@ export default {
   display: flex;
   flex-wrap: wrap;
   margin: 0 -10rpx;
-  padding-top: 15rpx;
 }
 
 .product-item {
   width: 33.33%;
   padding: 0 10rpx;
   box-sizing: border-box;
-  margin-bottom: 30rpx;
 }
 
 .product-image {
@@ -219,11 +243,10 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-}
-
-.product-price {
-  font-size: 32rpx;
-  font-weight: bold;
-  color: #005bac;
+  .product-price {
+    font-size: 24rpx;
+    font-weight: bold;
+    color: #005bac;
+  }
 }
 </style>

pages/shoppingCar/index.vue

@@ -428,6 +428,7 @@ export default {
           } else {
             this.getCarList();
           }
+          this.$store.dispatch("getCarLength");
         });
     },
     checkArea() {
@@ -537,7 +538,6 @@ export default {
                   ctem.waresItemsParamList.push(stem.waresItemsParamsList[0]);
                 }
               });
-            } else {
             }
           });
         });

pages/specialArea/index.vue

@@ -15,9 +15,7 @@
           :key="item.pkWares"
         >
           <view class="bg-color"></view>
-          <!-- <view class="goods-top">
-            <view class="title">{{item.specialAreaName}}</view>
-          </view> -->
+         
           <area-product-list v-if="item.waresList!=false" :list="item.waresList" :title="item.specialAreaName"></area-product-list>
         </view>
       </view>
@@ -400,15 +398,10 @@ export default {
 .goods-sort {
   padding-bottom: 130rpx;
   .goods-flexs {
-    // display: flex;
-    padding: 30rpx 30rpx 20rpx 35rpx;
+    padding: 30rpx 20rpx 20rpx;
     position: relative;
-    // flex-wrap: wrap;
-    margin-left: -25rpx;
     .bg-color {
-      // width: 335rpx;
       width: 100%;
-      // height: 72rpx;
       background: linear-gradient(
         -180deg,
         rgba(255, 226, 226, 0.85) 0%,
@@ -421,12 +414,8 @@ export default {
     }
     .goods-view {
       position: relative;
-      // width: 295rpx;
-      // height: 180rpx;
-      margin-left: 20rpx;
       background: #ffffff;
       border-radius: 15rpx;
-      // padding: 20rpx 20rpx 10rpx 20rpx;
       margin-bottom: 20rpx;
       .goods-top {
         z-index: 1;