caimei-applets-caimei/components/cm-module/pcitureTemplate/templateH.vue

<template>
	<view class="picture">
		<view class="section" v-for="(item,index) in productList" :key="index" @click="navigaitionTo(item)">
			<image :src="item.appletsImage" ></image>
            <view class="cm-cover" v-if="pageData.floorContent.templateClassify === 4"></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.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">
.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: 257rpx;
		}
		&: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>