caimei-applets-caimei/components/cm-module/pageTemplate/templateL.vue

<template>
	<view class="section_page_main clearfix">
		<view class="recommend-list">
			<cm-simple-swiper
				@change="onChange"
				:current="current"
				:circular="true"
				:swiperHeight="1120"
				:indicatorDots="true"
				:indicatorColor="'rgba(255, 255, 255, 0.39)'"
				:indicator-active-color="'#FFFFFF'"
				:data="productList"
				:columns="2"
				:rows="swiperRows"
				:gapY="12"
				:gapX="12"
				:autoFill="true"
				:autoplay="autoplay"
				padding="0 10rpx"
			>
				<template v-slot:slide="{ row }">
					 <template-product :data="row.product"></template-product>
				</template>
			</cm-simple-swiper>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import CmSimpleSwiper from '@/components/cm-simple-swiper/cm-simple-swiper.vue'
import TemplateProduct from '@/components/cm-module/pageTemplate/template-product.vue'
export default {
	name: 'templateH',
	components: {
		CmSimpleSwiper,
		TemplateProduct 
	},
	props: {
		pageData: {
			type: Object
		},
		userIdentity: {
			type: Number
		},
		autoplay: {
		    type: Boolean,
		    default: true
		},
	},
	data() {
		return {
			shopId: 0,
			productList: [],
			current: 0,
			swiperCurrent: 0,
			pageSize: 4,
			productCount: 0
		}
	},
	created() {
		this.initData(this.pageData)
	},
	computed: {
		swiperRows() {
		    return this.productList.length === 1 ? 1 : 2
		},
		swiperHeight() {
		    return 516 * this.swiperRows
		}
	},
	watch: {
		pageData: {
			handler: function(el) {
				//监听对象的变换使用 function，箭头函数容易出现this指向不正确
				this.pageData = el
				this.initData(this.pageData)
			},
			deep: true
		}
	},
	methods: {
		async initData(data) {
			const userInfo = await this.$api.getStorage()
			this.shopId = userInfo.shopId ? userInfo.shopId : 0
			this.productList = data.floorImageList4
			// if (this.productCount > 0) {
			// 	this.productList.splice(0, this.productList.length)
			// 	for (var i = 0, j = data.floorImageList4.length; i < j; i += this.pageSize) {
			// 		this.productList.push(data.floorImageList4.slice(i, i + this.pageSize))
			// 	}
			// }
		},
		onChange(e) {
		    this.current = e.current
		},
	}
}
</script>

<style lang="scss">
.section_hot {
	width: 100%;
	height: 1290rpx;
	background: url(https://static.caimei365.com/app/img/hot/hot-bg.png);
	background-size: cover;
	box-sizing: border-box;
	padding: 0 24rpx;
	float: left;
}
.tui-group-name {
	width: 100%;
	height: 165rpx;
	box-sizing: border-box;
	padding: 40rpx 0 20rpx 0;
	position: relative;
	.tui-group-r {
		width: 144rpx;
		height: 54rpx;
		background: url(https://static.caimei365.com/app/img/hot/hot-bt@2x.png);
		background-size: cover;
		position: absolute;
		right: 16rpx;
		top: 69rpx;
	}
}
.tui-group-title {
	width: 100%;
	height: 50rpx;
	line-height: 50rpx;
	float: left;
	.tui-group-l {
		float: left;
		font-size: 38rpx;
		font-weight: bold;
		text-align: left;
		color: #ffffff;
	}
}
.tui-sub__desc {
	width: 100%;
	float: left;
	line-height: 50rpx;
	color: #ffffff;
	font-size: $font-size-28;
}
.section_page_main {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	.recommend-list {
		width: 100%;
		height: 1100rpx;
		position: relative;
		padding-bottom: 20rpx;
		.tui-banner-swiper {
			width: 100%;
			margin: 0 auto;
			height: 1100rpx;
			overflow: hidden;
			transform: translateY(0);
			
		}
	}
	.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: #ffffff;
		}
		.swiper__dots-long {
			width: 32rpx;
			height: 8rpx;
			border-radius: 4rpx;
			background-color: #ffffff;
			transition: all 0.4s;
		}
	}
}
</style>