caimei-applets-caimei/pages/h5/activity/components/template-video/templateA.vue

<template>
    <view class="picture">
        <view class="section" v-for="(item, index) in productList" :key="index" @click="navigaitionTo(item)">
            <image :src="item.appletsImage || item.image"></image>
            <view class="cm-cover"></view>
        </view>
    </view>
</template>

<script>
import caimeiApi from '@/common/config/caimeiApi.js'
export default {
    data() {
        return {
            productList: []
        }
    },
    props: {
        pageData: {
            type: Object
        },
        userIdentity: {
            type: Number
        },
        flag: {
            type: Boolean,
            default: false
        }
    },
    created() {
        this.initData(this.pageData)
    },
    watch: {
        pageData: {
            handler: function(el) {
                //监听对象的变换使用 function，箭头函数容易出现this指向不正确
                this.pageData = el
                this.initData(this.pageData)
            },
            deep: true
        }
    },
    methods: {
        initData(data) {
            if (this.flag) {
                this.productList = data.floorImageList
            } else {
                this.productList = data.floorImageList.slice(0, 6)
            }
        },
        navigaitionTo(item) {
            if (item.link === '' && item.linkType === -1) {
            	return
            }else if(item.linkType === -1){
            	const url = `/pages/h5/activity/activity-detail?type=video&videoUrl=${item.link}&title=${item.name}`
            	return uni.navigateTo({ url })
            }else{
            	caimeiApi.FlooryNavigateTo(item)
            }
        }
    }
}
</script>

<style lang="scss">
.picture {
    width: 100%;
    .section {
        float: left;
        position: relative;
        margin-bottom: 14rpx;
        margin-right: 14rpx;
        width: 224rpx;
        height: 157rpx;
        overflow: hidden;
        border-radius: 16rpx;
        image {
            width: 224rpx;
            height: 100%;
        }
        &:nth-child(1),
        &:nth-child(2),
        &:nth-child(3) {
            margin-top: 0;
        }
        &:nth-child(3n) {
            margin-right: 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;
        }
    }
}
</style>