|
|
|
|
<template>
|
|
|
|
|
<view class="group-goods">
|
|
|
|
|
<!-- <view class="group-goods pa20 mx20 mb10" v-if="detail.length>0"> -->
|
|
|
|
|
<!-- <view class="title-box x-bc" @tap="$yrouter.push({ path: '/pages/shop/HotNewGoods/index',query:{type:2} })">
|
|
|
|
|
<text class="title">热门榜单</text>
|
|
|
|
|
<view class="group-people x-f">
|
|
|
|
|
<text class="tip">更多</text>
|
|
|
|
|
<text class="cuIcon-right"></text>
|
|
|
|
|
</view>
|
|
|
|
|
</view> -->
|
|
|
|
|
<view class="classify-tab-box acea-row">
|
|
|
|
|
<view :class="'classify-item ' + (classifyType == index?'on':'')" v-for="(item,index) in classifyList" :key="index" @click="changeClassify(index)">
|
|
|
|
|
{{item.listName}}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="goods-box">
|
|
|
|
|
<!-- <view class="goods-box swiper-box x-f"> -->
|
|
|
|
|
<view class="top-box">
|
|
|
|
|
<view class="top-item acea-row" v-for="(item,index) in topList" :key="index" @tap="jump('/pages/shop/GoodsCon/index',{id:item.id})">
|
|
|
|
|
<view class="top-num-box">
|
|
|
|
|
<view class="">{{index+1}}</view>
|
|
|
|
|
<view class="tip">{{index===0?'ST':index===1?'ND':index===2?'RD':'TH'}}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<image class="img" :src="item.image" mode="aspectFill"></image>
|
|
|
|
|
<view class="info-box">
|
|
|
|
|
<view class="title more-t">{{item.storeName}}</view>
|
|
|
|
|
<view class="price-box">¥{{ item.price }}<text>¥{{item.otPrice}}</text> </view>
|
|
|
|
|
<view class="original">{{ item.sales }}+人购买</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<PromotionGood v-if="goodsList.length" :benefit="goodsList" />
|
|
|
|
|
<!-- <swiper class="carousel" circular @change="swiperChange" :autoplay="true" 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.id">
|
|
|
|
|
<view class="min-goods" @tap="jump('/pages/shop/GoodsCon/index',{id:mgoods.id})">
|
|
|
|
|
<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>
|
|
|
|
|
// import shActivityGoods from '@/components/sh-activity-goods.vue';
|
|
|
|
|
import PromotionGood from '@/components/PromotionGood'
|
|
|
|
|
export default {
|
|
|
|
|
name: "HotCommodity",
|
|
|
|
|
components: {
|
|
|
|
|
PromotionGood
|
|
|
|
|
// shActivityGoods
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
classifyList: [],
|
|
|
|
|
classifyType: 0,
|
|
|
|
|
topList: [],
|
|
|
|
|
goodsList: [],
|
|
|
|
|
swiperCurrent: 0
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
props: {
|
|
|
|
|
detail: Array
|
|
|
|
|
},
|
|
|
|
|
computed: {},
|
|
|
|
|
created() {
|
|
|
|
|
console.log('oArr detail', this.detail)
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
detail(next) {
|
|
|
|
|
this.classifyList = next;
|
|
|
|
|
this.goodsList = this.sortData(next[this.classifyType].productInfo, 4);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
changeClassify(i) {
|
|
|
|
|
if(this.classifyType == i) return;
|
|
|
|
|
this.classifyType = i;
|
|
|
|
|
this.goodsList = this.sortData(this.classifyList[this.classifyType].productInfo, 4);
|
|
|
|
|
},
|
|
|
|
|
swiperChange(e) {
|
|
|
|
|
this.swiperCurrent = e.detail.current;
|
|
|
|
|
},
|
|
|
|
|
// 数据分层
|
|
|
|
|
sortData(oArr, length) {
|
|
|
|
|
let arr = [];
|
|
|
|
|
let minArr = [];
|
|
|
|
|
if(oArr.length > 5) {
|
|
|
|
|
this.topList = oArr.slice(0, 5);
|
|
|
|
|
arr = oArr.slice(5, oArr.length);
|
|
|
|
|
} else {
|
|
|
|
|
this.topList = oArr;
|
|
|
|
|
}
|
|
|
|
|
// console.log('oArr', oArr)
|
|
|
|
|
// oArr.forEach(c => {
|
|
|
|
|
// if (minArr.length === length) {
|
|
|
|
|
// minArr = [];
|
|
|
|
|
// }
|
|
|
|
|
// if (minArr.length === 0) {
|
|
|
|
|
// arr.push(minArr);
|
|
|
|
|
// }
|
|
|
|
|
// minArr.push(c);
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
return arr;
|
|
|
|
|
},
|
|
|
|
|
jump(path, query) {
|
|
|
|
|
this.$yrouter.push({
|
|
|
|
|
path,
|
|
|
|
|
query,
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.group-goods {
|
|
|
|
|
// position: relative;
|
|
|
|
|
// z-index: 9;
|
|
|
|
|
font-family: PingFang SC;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.classify-tab-box {
|
|
|
|
|
padding: 4rpx 32rpx 22rpx;
|
|
|
|
|
.classify-item {
|
|
|
|
|
width: 124rpx;
|
|
|
|
|
height: 40rpx;
|
|
|
|
|
border-radius: 16rpx;
|
|
|
|
|
border: 2rpx solid #2EB5AE;
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: #2DB5AE;
|
|
|
|
|
line-height: 36rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
.on {
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
background: #2DB5AE;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top-box {
|
|
|
|
|
padding: 0rpx 32rpx 12rpx;
|
|
|
|
|
.top-item {
|
|
|
|
|
width: 686rpx;
|
|
|
|
|
height: 174rpx;
|
|
|
|
|
background: #F5F6F8;
|
|
|
|
|
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
|
|
|
|
|
border-radius: 16rpx;
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
.top-num-box {
|
|
|
|
|
width: 146rpx;
|
|
|
|
|
height: 174rpx;
|
|
|
|
|
padding: 24rpx 0rpx 24rpx 12rpx;
|
|
|
|
|
font-size: 80rpx;
|
|
|
|
|
font-family: Futura;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
color: #2DB5AE;
|
|
|
|
|
line-height: 106rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
.tip {
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
line-height: 42rpx;
|
|
|
|
|
position: relative;
|
|
|
|
|
top: -22rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.img {
|
|
|
|
|
width: 168rpx;
|
|
|
|
|
height: 162rpx;
|
|
|
|
|
border-radius: 8rpx;
|
|
|
|
|
margin: 6rpx 0rpx;
|
|
|
|
|
}
|
|
|
|
|
.info-box {
|
|
|
|
|
width: 370rpx;
|
|
|
|
|
height: 174rpx;
|
|
|
|
|
padding: 16rpx 18rpx 16rpx 10rpx;
|
|
|
|
|
.title {
|
|
|
|
|
height: 76rpx;
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: #3A3A3C;
|
|
|
|
|
line-height: 38rpx;
|
|
|
|
|
}
|
|
|
|
|
.price-box {
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
font-family: Futura;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #3A3A3C;
|
|
|
|
|
line-height: 40rpx;
|
|
|
|
|
text {
|
|
|
|
|
font-size: 20rpx;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: #999999;
|
|
|
|
|
line-height: 26rpx;
|
|
|
|
|
text-decoration: line-through;
|
|
|
|
|
padding-left: 10rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.original {
|
|
|
|
|
font-size: 20rpx;
|
|
|
|
|
color: #999999;
|
|
|
|
|
line-height: 26rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// .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: 28rpx;
|
|
|
|
|
// padding-left: 30rpx;
|
|
|
|
|
// color: #666;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .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;
|
|
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
</style>
|
