feat(index): 专区列表替换为组件， 专区列表组件添加size

components/area-product-list/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="area-product-list">
+  <view class="area-product-list" :class="sizeClass">
     <view class="area-header">
       <view class="header-bg"></view>
       <text class="area-title">{{ title }}</text>
@@ -71,46 +71,26 @@ 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',
-          specialArea: 25,
-          isSale: 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',
-          specialArea: 25,
-          isSale: 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',
-          specialArea: 25,
-          isSale: 0,
-          preSaleStatus: 0,
-        },
       ],
     },
     specialAreaId: {
       type: [Number, String],
-      default: '25',
+      default: '',
+    },
+    size: {
+      type: String,
+      default: 'normal', // 'normal' or 'small'
+      validator: (value) => ['normal', 'small'].includes(value),
+    },
+  },
+  computed: {
+    sizeClass() {
+      return this.size === 'small' ? 'area-product-list--small' : ''
     },
   },
   methods: {
@@ -161,6 +141,74 @@ export default {
   border-radius: 16rpx;
   margin-bottom: 24rpx;
   position: relative;
+  transition: all 0.3s ease; // Add transition for smoother size changes
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); // 添加阴影效果
+
+  &--small {
+    padding: 16rpx;
+    padding-top: 0;
+    margin-bottom: 20rpx;
+    border-radius: 12rpx;
+
+    .area-header {
+      margin-bottom: 20rpx;
+      padding: 16rpx 0;
+      height: 40rpx;
+    }
+
+    .header-bg {
+       left: -16rpx;
+       right: -16rpx;
+       border-top-left-radius: 6px;
+       border-top-right-radius: 6px;
+    }
+
+    .area-title {
+      font-size: 28rpx;
+    }
+
+    .more-btn-content {
+      // Adjust button style directly as u-button size='mini' might not be flexible enough
+      :deep(.u-button) {
+        height: 40rpx !important;
+        line-height: 40rpx !important;
+        padding: 0 10rpx !important;
+      }
+      .more-text {
+        font-size: 20rpx;
+        margin-right: 2rpx;
+      }
+      :deep(.u-icon) {
+        font-size: 12px !important; // u-icon size might need !important
+      }
+    }
+
+    .product-container {
+      margin: 0 -8rpx;
+    }
+
+    .product-item {
+       padding: 0 8rpx;
+    }
+
+    .product-image {
+      height: 160rpx;
+      border-radius: 6rpx;
+    }
+
+    .product-info {
+      margin-top: 10rpx;
+    }
+
+    .product-name {
+      font-size: 24rpx;
+      margin-bottom: 6rpx;
+    }
+
+    .product-price-row .product-price {
+      font-size: 20rpx;
+    }
+  }
 }
 
 .area-header {

pages/index/index.vue

@@ -50,10 +50,14 @@
             <view
               class="goods-view"
               @click="navTap(item)"
-              v-if="item.waresList != false && (index < 8 || moreFlag == true)"
+              v-if="item.waresList && (index < 8 || moreFlag == true)"
             >
-              <view :class="userInfo.skin ? 'bg-color1' : 'bg-color'"></view>
+              <area-product-list 
-              <view class="goods-top">
+                :list="item.waresList" 
+                :title="item.specialAreaName"
+                size="small"
+              ></area-product-list>
+              <!-- <view class="goods-top">
                 <view class="title">{{ item.specialAreaName }}</view>
               </view>
               <template v-if="item.waresList">
@@ -70,7 +74,7 @@
                     </view>
                   </view>
                 </view>
-              </template>
+              </template> -->
             </view>
           </view>
         </view>
@@ -173,19 +177,20 @@
 import * as api from "@/config/login.js";
 import * as apis from "@/config/index.js";
 import * as ban from "@/config/balance.js";
+import { getAreaGoods } from '@/config/special-area'
 import clTabbar from "@/components/cl-tabbar.vue";
 import noticePopup from "@/components/noticePopup.vue";
 import getTree from "@/components/getTree.vue";
 import znNewsPopup from "@/components/znNewsPopup.vue";
-import { getAreaGoods } from '@/config/special-area'
+import areaProductList from '@/components/area-product-list/index.vue'
-// import directrankPopup from "@/components/directrankPopup.vue";
+
 export default {
   components: {
     noticePopup,
     znNewsPopup,
     "cl-tabbar": clTabbar,
     getTree,
-    // directrankPopup,
+    areaProductList
   },
   filters: {
     seles(value) {
@@ -861,38 +866,17 @@ header {
 }
 
 .goods-flexs {
-  // display: flex;
-  padding: 20rpx 20rpx 10rpx 0;
-  position: relative;
-  flex-wrap: wrap; // margin-left: -25rpx;
 
-  .bg-color {
+
-    // width: 343rpx;
+  
-    width: 100%;
-    height: 72rpx;
-    background: linear-gradient(to bottom, #add8e6, #ffffff);
-    border-radius: 15rpx 15rpx 0 0;
-    position: absolute;
-    top: 0;
-    left: 0rpx;
-  }
-  .bg-color1 {
-    width: 343rpx;
-    height: 72rpx;
-    background: #acfbd5;
-    border-radius: 15rpx 15rpx 0 0;
-    position: absolute;
-    top: 0;
-    left: 0rpx;
-  }
 
   .goods-view {
     position: relative;
     // width: 302rpx; // height: 180rpx;
-    margin-left: 20rpx;
+    // margin-left: 20rpx;
-    background: #ffffff;
+    // background: #ffffff;
     border-radius: 15rpx;
-    padding: 20rpx 20rpx 10rpx 20rpx;
+    padding: 0 20rpx;
     margin-bottom: 20rpx;
 
     .goods-top {