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

<template>
    <view class="floor-template" v-if="floorData">
        <cm-floor-title :title="floorData.title" @click="$emit('more', floorData)"></cm-floor-title>
        <!-- banner区域 -->
        <view class="floor-banner-area" :class="'template-' + templateType" v-if="templateType !== '8'">
            <view
                class="banner-item"
                :class="'banner-item-' + (index + 1)"
                v-for="(item, index) in bannerList"
                :key="index"
            >
                <image :src="item.image" class="banner" @click="$emit('onBannerClick', item)"></image>
            </view>
        </view>
        <!-- 商品区域 -->
        <view class="floor-product-area">
            <view class="simple-swiper" v-if="withSwiperLayout">
                <cm-simple-swiper
                    @change="onChange"
                    :current="current"
                    :circular="true"
                    :swiperHeight="swiperHeight"
                    :data="productList"
                    :columns="3"
                    :rows="swiperRows"
                    :gapX="16"
                    :gapY="16"
                    padding="0 8rpx"
                    :autoplay="false"
                >
                    <template v-slot:slide="{ row }">
                        <div class="product-list">
                            <view class="product-item" @click="$emit('onProductClick', row.heheProduct)">
                                <cm-product :data="row.heheProduct"></cm-product>
                            </view>
                        </div>
                    </template>
                </cm-simple-swiper>
            </view>
            <view class="product-list default-list" v-else>
                <view
                    class="product-item"
                    v-for="(item, index) in productList"
                    :key="index"
                    @click="$emit('onProductClick', item.heheProduct)"
                >
                    <cm-product :data="item.heheProduct"></cm-product>
                </view>
            </view>
        </view>
        <!-- banner区域 -->
        <view class="floor-banner-area template-8" v-if="templateType === '8'">
            <view class="banner-item banner-item-1">
                <image
                    :src="bannerList[0] && bannerList[0].image"
                    class="banner"
                    @click="$emit('onBannerClick', item)"
                ></image>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        floorData: {
            type: Object,
            default: () => null
        }
    },
    data() {
        return {
            // 商品区域
            current: 0
        }
    },
    computed: {
        // 楼层id
        templateType() {
            return this.floorData?.floorContent.templateType
        },
        // banner图列表
        bannerList() {
            return this.splitBannersMap()
        },
        // 商品列表
        productList() {
            return this.floorData?.floorImageList
        },
        // 使用轮播图布局
        withSwiperLayout() {
            return [5, 9].indexOf(parseInt(this.templateType)) > -1
        },
        // 轮播图行数
        swiperRows() {
            if (this.templateType === '5') return 2
            if (this.templateType === '9') return 1
            return 2
        },
        // 轮播图高度
        swiperHeight() {
            return 480 * this.swiperRows
        }
    },
    methods: {
        // 从楼层数据中拆分出banner与link的关系
        splitBannersMap() {
            const bannerList = []
            if (this.floorData) {
                const floorContent = this.floorData?.floorContent
                for (let key in floorContent) {
                    const linkValue = floorContent[key]
                    if (key.indexOf('appletsAdsImage') > -1 && linkValue) {
                        const obj = Object.create(null)
                        obj.id = parseInt(key[key.length - 1])
                        const subKey = 'adsLink' + obj.id
                        obj.image = linkValue
                        obj.link = floorContent[subKey]
                        bannerList.push(obj)
                    }
                }
            }
            return bannerList.sort((a, b) => a.id - b.id)
        },

        // 轮播图切换事件
        onChange(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;
    padding-bottom: 8rpx;
    &::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 {
        padding-top: 8rpx;
        .banner-item-1 {
            @extend .size-type-1;
        }
    }
    &.template-9 {
    }
}

// 商品区域样式
.floor-product-area {
    padding: 0 16rpx;
    .product-list {
        // @extend .cm-flex-between;
        // flex-wrap: wrap;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-row-gap: 16rpx;

        .product-item {
            @extend .cm-flex-center;
        }
    }
    .simple-swiper {
        padding-top: 8rpx;
    }
}
</style>