zhibo/pages/home/components/HotProduct.vue

<template>
    <view class="group-goods" v-if="detail.length>0">
        <view class="title-box x-bc"  >
            <text class="title">热门榜单</text>
            <view class="group-people x-f" @tap="navTo('/pages/home/productList')">
                <text class="tip">更多</text>
                <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">
                        <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/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;

        .title-box {
            padding-bottom: 20rpx;

            .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 {
            .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: 10rpx;
	
	    .seckill-current {
	      font-size: 30rpx;
	      font-weight: 500;
	      color: rgba(225, 33, 43, 1);
	    }
	
	    .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>