caimei-applets-caimei/pages/h5/activity/components/template-picture/templateE.vue

<template>
    <view class="section_page_main clearfix">
        <view class="recommend-list" :style="{height: hasLessImage ? '105px' : ''}" v-if="productList.length > 0">
            <swiper
                class="tui-banner-swiper"
                :autoplay="true"
                :interval="5000"
                :duration="500"
                :circular="true"
                @change="swiperChange"
                :style="{height: hasLessImage ? '105px' : ''}"
            >
                <swiper-item v-for="(list, index1) in productList" :key="index1">
                    <view class="template-grid">
                        <view
                            class="img-box"
                            v-for="(product, index2) in list"
                            :key="index2"
                            @click="navigaitionTo(product)"
                        >
                            <image :src="product.appletsImage" mode="aspectFit"></image>
                            <view class="cm-cover" v-if="pageData.floorContent.templateClassify === 4"></view>
                        </view>
                    </view>
                </swiper-item>
            </swiper>
            <view class="swiper__recommenddots-box" v-if="productList.length > 1">
                <view
                    v-for="(item, idx) in productList"
                    :key="idx"
                    :class="[idx === swiperCurrent ? 'swiper__dots-long' : 'none']"
                    :data-index="swiperCurrent"
                    class="swiper__dots-item"
                ></view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import uniGrader from '@/components/uni-grade/uni-grade.vue'
import caimeiApi from '@/common/config/caimeiApi.js'
export default {
    name: 'templateE',
    components: {
        uniGrader
    },
    props: {
        pageData: {
            type: Object
        },
        userIdentity: {
            type: Number
        }
    },
    data() {
        return {
            productList: [],
            swiperCurrent: 0,
            pageSize: 4,
            imageCount: 2
        }
    },
    created() {
        this.initData(this.pageData)
    },
    computed: {
        hasLessImage() {
            return this.imageCount <= 2
        }
    },
    watch: {
        pageData: {
            handler: function(el) {
                //监听对象的变换使用 function，箭头函数容易出现this指向不正确
                this.pageData = el
                this.initData(this.pageData)
            },
            deep: true
        }
    },
    methods: {
        initData(data) {
            this.imageCount = data.floorImageList.length
            while (data.floorImageList.length > 0) {
                this.productList.push(data.floorImageList.splice(0, this.pageSize))
            }
            console.log(this.productList)
        },
        swiperChange(e) {
            //轮播切换
            const index = e.detail.current
            this.swiperCurrent = index
        },
        navigaitionTo(item) {
            if (item.adsImage === '' && item.linkType === -1) {
                return
            } else if (item.linkType === -1) {
                uni.navigateTo({
                    url: `/pages/h5/activity/activity-detail?adsImage=${item.adsImage}&title=${item.name}`
                })
            } else {
                caimeiApi.FlooryNavigateTo(item)
            }
        }
    }
}
</script>

<style lang="scss">
.section_page_main {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    .recommend-list {
        width: 100%;
        height: 500rpx;
        position: relative;
        padding-bottom: 20rpx;
        .tui-banner-swiper {
            width: 100%;
            margin: 0 auto;
            height: 445rpx;
            overflow: hidden;
            transform: translateY(0);
            .template-grid {
                width: 100%;
                height: 100%;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: repeat(2, 1fr);
                grid-gap: 12rpx;
            }
            .img-box {
                position: relative;
                width: 339rpx;
                height: 210rpx;
                float: left;
                overflow: hidden;
                border-radius: 16rpx;
                background: #fff;
                image {
                    width: 339rpx;
                    height: 210rpx;
                }
                &:nth-child(2n) {
                    margin-right: 0;
                }
                &:nth-child(1) {
                    margin-top: 0;
                }
                .cm-cover {
                    z-index: 99;
                    top: 0;
                    left: 0;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background: url(https://static.caimei365.com/app/img/icon2/cm_player.png) no-repeat center;
                    background-size: 40rpx 40rpx;
                }
            }
        }
    }
    .swiper__recommenddots-box {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex: 1;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 60rpx;
        .swiper__dots-item {
            width: 8rpx;
            height: 8rpx;
            border-radius: 100%;
            margin-left: 6px;
            background-color: rgba(225, 86, 22, 0.3);
        }
        .swiper__dots-long {
            width: 32rpx;
            height: 8rpx;
            border-radius: 4rpx;
            background-color: #FF5B00;
            transition: all 0.4s;
        }
    }
}
</style>