商品布局调整

components/views/cm-coupon-area/cm-coupon-area.vue

@@ -6,8 +6,9 @@
             :circular="true"
             :swiperHeight="500"
             :data="testList"
-            :perview="2"
-            :column="1"
+            :rows="2"
+            :columns="1"
+            :gapY="16"
             :autoplay="false"
         >
             <template v-slot:slide="{ row }">

components/views/cm-floor-template/cm-floor-template.vue

@@ -14,25 +14,32 @@
         </view>
         <!-- 商品区域 -->
         <view class="floor-product-area">
-            <view class="product-list">
+            <!-- <view class="product-list default-list">
                 <view class="product-item" v-for="(item, index) in productList" :key="index">
                     <cm-product :data="item"></cm-product>
                 </view>
+            </view> -->
+            <view class="simple-swiper">
+                <cm-simple-swiper
+                    @change="onChange"
+                    :current="current"
+                    :circular="true"
+                    :swiperHeight="940"
+                    :data="productList"
+                    :columns="3"
+                    :rows="2"
+                    :gapX="16"
+                    :gapY="16"
+                    padding="0 8rpx"
+                    :autoplay="false"
+                >
+                    <template v-slot:slide="{ row }">
+                        <div class="product-list">
+                            <view class="product-item"><cm-product :data="row"></cm-product></view>
+                        </div>
+                    </template>
+                </cm-simple-swiper>
             </view>
-            <cm-simple-swiper
-                @change="onChange"
-                :current="current"
-                :circular="true"
-                :swiperHeight="950"
-                :data="productList"
-                :perview="2"
-                :column="3"
-                :autoplay="false"
-            >
-                <template v-slot:slide="{ row }">
-                    <view class="product-item"><cm-product :data="row"></cm-product></view>
-                </template>
-            </cm-simple-swiper>
         </view>
     </view>
 </template>
@@ -116,18 +123,18 @@ export default {
 }
 
 .size-type-2 {
-    width: 338rpx;
-    height: 522rpx;
+    width: 343rpx;
+    height: 524rpx;
 }
 
 .size-type-3 {
-    width: 338rpx;
-    height: 250rpx;
+    width: 343rpx;
+    height: 254rpx;
 }
 
 // banner 区域
 .floor-banner-area {
-    padding: 0 12rpx;
+    padding: 0 16rpx;
     &::after {
         display: block;
         content: '';
@@ -135,7 +142,7 @@ export default {
     }
     .banner-item {
         float: left;
-        padding: 12rpx;
+        padding: 8rpx;
         .banner {
             width: 100%;
             height: 100%;
@@ -210,17 +217,19 @@ export default {
     }
 }
 
-
 // 商品区域样式
-.product-item {
-    padding: 12rpx 0;
-}
-
 .floor-product-area {
+    padding: 0 16rpx;
     .product-list {
         @extend .cm-flex-between;
         flex-wrap: wrap;
-        margin: 0 24rpx;
+        padding: 0 8rpx;
+        .product-item {
+            padding: 8rpx 0;
+        }
+    }
+    .simple-swiper {
+        padding-top: 8rpx;
     }
 }
 </style>

components/views/cm-simple-swiper/cm-simple-swiper.vue

@@ -22,15 +22,13 @@
                 @animationfinish="onAnimationfinish"
             >
                 <swiper-item v-for="(item, index1) in mapList" :key="index1">
-                    <view class="swiper__item">
+                    <view class="swiper__item" :style="layoutStyle">
                         <template v-if="item.length">
-                            <view v-for="(data, index2) in item" :key="index2">
+                            <view v-for="(data, index2) in item" class="grid" :key="index2">
                                 <slot :row="data" name="slide"></slot>
                             </view>
                         </template>
-                        <template v-else>
-                            <view> <slot name="slide" :item="item"></slot> </view>
-                        </template>
+                        <view v-else class="grid"><slot name="slide" :row="item"></slot></view>
                     </view>
                 </swiper-item>
             </swiper>
@@ -50,18 +48,30 @@ export default {
             default: () => []
         },
         // 行数
-        perview: {
+        rows: {
             type: Number,
             default: 1
         },
         // 列数
-        column: {
+        columns: {
             type: Number,
             default: 1
         },
         swiperHeight: {
             type: Number,
             default: 350
+        },
+        gapX: {
+            type: Number,
+            default: 0
+        },
+        gapY: {
+            type: Number,
+            default: 0
+        },
+        padding: {
+            type: String,
+            default: '0'
         }
     },
     computed: {
@@ -73,7 +83,7 @@ export default {
         },
         // 宽
         width() {
-            return 100 / this.column + '%'
+            return 100 / this.columns + '%'
         },
         dotsStyles() {
             return {
@@ -85,13 +95,23 @@ export default {
                 selectedBackgroundColor: '#FF457B',
                 selectedBorder: '#FF457B'
             }
+        },
+        layoutStyle() {
+            return `
+                display: grid;
+                padding: ${this.padding};
+                grid-template-columns: repeat(${this.columns}, 1fr);
+                grid-template-rows: repeat(${this.rows}, 1fr);
+                grid-column-gap: ${this.gapX}rpx;
+                grid-row-gap: ${this.gapX}rpx;
+            `
         }
     },
     methods: {
         // 处理轮播图数据列表
         formatSwiperList(list = []) {
             const result = []
-            const count = this.perview * this.column
+            const count = this.rows * this.columns
             // 一屏仅有一个时
             if (count === 1) {
                 return list
@@ -120,16 +140,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.simple-swiper {
-    .swiper {
-        width: 100%;
-    }
-    .swiper__item {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        flex-wrap: wrap;
-        margin: 0 24rpx;
-    }
+.grid {
+    display: flex;
+    justify-content: center;
 }
 </style>