179crm_user_app/pages/home/components/HotProduct.vue

<template>
	<view class="group-goods" v-if="detail.length>0">
		<view class="title-box x-bc">
			<view class="row">
				<image class="w40 h40 mr4" src="/static/images/hot.png"></image><text class="title"><text
						class="color-red">热门</text>榜单</text>
			</view>
			<view class="group-people x-f row" @tap="navTo('/pages/home/productList')">
				<text class="tip ">更多</text>
				<image class='w48 h48' src="/static/images/right.png"></image>
				<!-- <text class="cuIcon-right"></text> -->
			</view>
		</view>
		<view class="goods-box swiper-box x-f">
			<swiper class="carousel" circular @change="swiperChange" :autoplay="true" interval="10000" duration="2000">
				<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
					<view class="goods-list-box x-f" style="align-items: flex-start;">
						<block v-for="mgoods in goods" :key="mgoods.productId">
							<view class="min-goods" @tap="showProduct(mgoods)">
								<view class="img-box">
									<!-- <view class="tag">hot</view> -->
									<image class="img" :src="mgoods.image" mode="widthFix"></image>
								</view>
								<view class="price-box">
									<view class="y-f">
										<text class="seckill-current">{{ mgoods.price  }}</text>
										<!-- <text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text> -->
									</view>
								</view>
								<view class="title">
									<slot name="titleText"></slot>
								</view>
							</view>
						</block>
					</view>
				</swiper-item>
			</swiper>
			<view class="swiper-dots" v-if="goodsList.length > 1">
				<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length"
					:key="index"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "HotProduct",

		data() {
			return {
				goodsList: [],
				swiperCurrent: 0
			};
		},
		props: {
			detail: Array
		},
		computed: {},
		created() {},
		watch: {
			detail(next) {
				this.goodsList = this.sortData(next, 4);
			}
		},
		methods: {
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
			},
			// 数据分层
			sortData(oArr, length) {
				let arr = [];
				let minArr = [];
				oArr.forEach(c => {
					if (minArr.length === length) {
						minArr = [];
					}
					if (minArr.length === 0) {
						arr.push(minArr);
					}
					minArr.push(c);
				});

				return arr;
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			showProduct(item) {
				uni.navigateTo({
					url: '/pages/shopping/productDetails?productId=' + item.productId
				})
			},

		}
	}
</script>


<style lang="scss" scoped>
	.group-goods {
		position: relative;
		z-index: 1;
		background: #FFFFFF;
		border-radius: 16upx;
		margin-bottom: 20upx;
		margin-top: 20upx;
		// padding: 20upx;
	}

	.swiper-box,
	.carousel {
		width: 700rpx;
		height: 240upx;
		position: relative;
		border-radius: 20rpx;

		.carousel-item {
			width: 100%;
			height: 100%;
			// padding: 0 28upx;
			overflow: hidden;
		}

		.swiper-image {
			width: 100%;
			height: 100%;
			// border-radius: 10upx;
			background: #ccc;
		}
	}

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0rpx;
		z-index: 66;

		.dot {
			width: 45rpx;
			height: 3rpx;
			background: #eee;
			border-radius: 50%;
			margin-right: 10rpx;
		}

		.dot-active {
			width: 45rpx;
			height: 3rpx;
			background: #a8700d;
			border-radius: 50%;
			margin-right: 10rpx;
		}
	}

	// 今日必拼+限时抢购
	.group-goods {
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.title-box {
			padding-bottom: 20rpx;
			padding: 34rpx 32rpx;
			background: linear-gradient(180deg, #FFDCDC 0%, #FFFFFF 100%);


			.title {
				font-size: 32rpx;
				font-weight: bold;
			}

			.group-people {
				.time-box {
					font-size: 26rpx;
					color: #edbf62;

					.count-text-box {
						width: 30rpx;
						height: 34rpx;
						background: #edbf62;
						text-align: center;
						line-height: 34rpx;
						font-size: 24rpx;
						border-radius: 6rpx;
						color: rgba(#fff, 0.9);
						margin: 0 8rpx;
					}
				}

				.head-box {
					.head-img {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						background: #ccc;
					}
				}

				.tip {
					font-size: 24rpx;
					padding-left: 30rpx;
					color: #999999;
				}

				.cuIcon-right {
					font-size: 30rpx;
					line-height: 28rpx;
					color: #666;
				}
			}
		}

		.goods-box {
			padding: 0 32rpx;

			.goods-item {
				margin-right: 22rpx;

				&:nth-child(4n) {
					margin-right: 0;
				}
			}
		}

		.min-goods {
			margin-right: 22rpx;

		}
	}

	.min-goods {
		width: 152rpx;
		background: #fff;

		.img-box {
			width: 152rpx;
			height: 152rpx;
			overflow: hidden;
			position: relative;

			.tag {
				position: absolute;
				left: 0;
				bottom: 0rpx;
				z-index: 2;
				line-height: 35rpx;
				background: linear-gradient(132deg, rgba(243, 223, 177, 1), rgba(243, 223, 177, 1), rgba(236, 190, 96, 1));
				border-radius: 0px 18rpx 18rpx 0px;
				padding: 0 10rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(120, 79, 6, 1);
			}

			.img {
				width: 100%;
				background-color: #ccc;
			}
		}

		.price-box {
			width: 100%;
			margin-top: 24rpx;

			.seckill-current {
				font-weight: 600;
				font-size: 26rpx;
				color: #FF5030;
			}

			.original {
				font-size: 20rpx;
				font-weight: 400;
				// text-decoration: line-through;
				color: rgba(153, 153, 153, 1);
				margin-left: 14rpx;
			}
		}

		.title {
			font-size: 26rpx;
		}
	}
</style>