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

<template>
	<view class="group-goods" v-if="detail.length>0">
		<view class="title-box x-bc">
			<text class="title"><text class="color-orange">新品</text>首发</text>
			<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">new</view> -->
									<view class="tag">新品首发</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: "NewProduct",

		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;
	}

	.swiper-box,
	.carousel {
		width: 700rpx;
		height: 240rpx;
		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, #FFEBD7 0%, #FFFFFF 100%);

			.title {
				font-size: 34rpx;
				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: 140rpx;
			height: 140rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			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);
			// }
			.tag {
				position: absolute;
				right: 0;
				top: 0rpx;
				z-index: 2;
				line-height: 18rpx;
				background: linear-gradient(120deg, #FF7F4E 0%, #FA531C 100%);
				// border-radius: 0px 18rpx 18rpx 0px;
				width: 48rpx;
				height: 56rpx;

				padding: 18rpx 20rpx;
				font-size: 14rpx;
				font-family: PingFang SC;
				font-weight: Semibold;
				color: #FFFFFF;
			}

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

			}
		}

		.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>