You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
349 lines
8.1 KiB
349 lines
8.1 KiB
<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.15); |
|
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>
|
|
|