caimei-applets-store/components/views/cm-floor-template/cm-floor-template.vue

<template>
    <view class="floor-template">
        <cm-floor-title title="楼层名称"></cm-floor-title>
        <!-- banner区域 -->
        <view class="floor-banner-area" :class="'template-' + 7">
            <view
                class="banner-item"
                :class="'banner-item-' + (index + 1)"
                v-for="(item, index) in bannerList"
                :key="index"
            >
                <image :src="item.image" class="banner"></image>
            </view>
        </view>
        <!-- 商品区域 -->
        <view class="floor-product-area">
            <!-- <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>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        floorData: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            // banner区域
            templateType: 1,
            bannerList: [
                {
                    image: ''
                },
                {
                    image: ''
                },
                {
                    image: ''
                },
                {
                    image: ''
                },
                {
                    image: ''
                }
            ],
            // 商品区域
            current: 0,
            product: {
                activeStatus: 0,
                clubTaxPoint: 10,
                collageProduct: null,
                collageStatus: 0,
                couponsLogo: true,
                includedTax: '1',
                invoiceType: '2',
                mainImage: 'https://img-b.caimei365.com/group1/M00/03/20/Cmgy62BHH8aAFiGIAAGHr5DovGA124.jpg',
                name: '【测试用】Dermaheal HSR 德玛莉肌活丝蕴凝颜精华液',
                normalPrice: null,
                price: 2,
                productId: 6419,
                recommend: '0',
                unit: '片'
            }
        }
    },
    computed: {
        productList() {
            let list = []
            for (let i = 0; i < 10; i++) {
                list.push(this.product)
            }
            return list
        }
    },
    methods: {
        onChange(e) {
            console.log(e)
            this.current = e.current
        }
    }
}
</script>

<style lang="scss" scoped>
.floor-template {
    background-color: #f7f7f7;
}

// 轮播图尺寸
.size-type-1 {
    width: 702rpx;
    height: 240rpx;
}

.size-type-2 {
    width: 343rpx;
    height: 524rpx;
}

.size-type-3 {
    width: 343rpx;
    height: 254rpx;
}

// banner 区域
.floor-banner-area {
    padding: 0 16rpx;
    &::after {
        display: block;
        content: '';
        clear: both;
    }
    .banner-item {
        float: left;
        padding: 8rpx;
        .banner {
            width: 100%;
            height: 100%;
            display: block;
            background: pink;
            border-radius: 16rpx;
        }
    }

    &.template-1 {
        .banner-item-1 {
            @extend .size-type-1;
        }
    }
    &.template-2 {
        .banner-item-1 {
            @extend .size-type-1;
        }
        .banner-item-2 {
            @extend .size-type-2;
        }
        .banner-item-3 {
            @extend .size-type-2;
        }
    }
    &.template-3 {
        .banner-item-1 {
            @extend .size-type-2;
        }
        .banner-item-2 {
            @extend .size-type-2;
        }
    }
    &.template-4 {
    }
    &.template-5 {
    }
    &.template-6 {
        .banner-item-1 {
            @extend .size-type-2;
        }
        .banner-item-2 {
            @extend .size-type-3;
        }
        .banner-item-3 {
            @extend .size-type-3;
        }
    }
    &.template-7 {
        .banner-item-1 {
            @extend .size-type-2;
        }
        .banner-item-2 {
            @extend .size-type-3;
        }
        .banner-item-3 {
            @extend .size-type-3;
        }
        .banner-item-4 {
            @extend .size-type-3;
        }
        .banner-item-5 {
            @extend .size-type-3;
        }
    }
    &.template-8 {
        .banner-item-1 {
            @extend .size-type-1;
        }
    }
    &.template-9 {
    }
}

// 商品区域样式
.floor-product-area {
    padding: 0 16rpx;
    .product-list {
        @extend .cm-flex-between;
        flex-wrap: wrap;
        padding: 0 8rpx;
        .product-item {
            padding: 8rpx 0;
        }
    }
    .simple-swiper {
        padding-top: 8rpx;
    }
}
</style>