theluyuan/deming
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

group buy 8.8

Browse Source
This commit is contained in:
ghusermoon
2020-08-08 12:07:50 +08:00
parent 1ee0dd4b25
commit 02702bc447
16 changed files with 110 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
components/shop/list/index.vue
View File

@@ -2,14 +2,15 @@
<view class="list">
<view class="top">商品推荐</view>
<view>
<u-tabs-swiper ref="uTabs" :list="classifyList" name="gc_name" :is-scroll="true" active-color="#FF780F" :current="current" font-size="26" :show-bar="false" @change="tabsChange" height="60"></u-tabs-swiper>
<!-- <u-tabs-swiper ref="uTabs" :list="classifyList" name="gc_name" :is-scroll="true" active-color="#FF780F" :current="current" font-size="26" :show-bar="false" @change="tabsChange" height="60"></u-tabs-swiper> -->
<u-tabs :list="classifyList" name="gc_name" :is-scroll="true" :current="current" @change="tabsChange" active-color="#FF780F" :show-bar="false" height="60" font-size="24" inactive-color="#333333"></u-tabs>
</view>
<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" :style="{height: swiperHeight}">
<swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish" :style="{height: swiperHeight}">
<swiper-item class="swiper-item" v-for="(_, index) in classifyList" :key="index">
<view class="goods-item" v-if="goodsList.length">
<item v-for="item in goodsList" :key="item.goods_id" :info="item"></item>
<view class="goods-item">
<item v-for="item in goodsList[index]" :key="item.goods_id" :info="item"></item>
</view>
<u-empty text="暂无商品" mode="list" color="#000" margin-top="20" v-else></u-empty>
<u-empty text="暂无商品" mode="list" color="#000" margin-top="20" v-if="!goodsList[index] || !goodsList[index].length"></u-empty>
</swiper-item>
</swiper>
<!-- 加载更多 -->
@@ -39,7 +40,7 @@ export default {
watch: {
current(index) {
this.page = 1;
this.goodsList = [];
// this.goodsList = [];
const id = this.classifyList[index].gc_id;
this.getGoodsRecommend({gc_id: id});
}
@@ -86,34 +87,30 @@ export default {
// this.swiperCurrent = this.current;
if (res.errCode == 0) {
this.timer = true;
if(reload) this.goodsList = res.data.goodsList;
else this.goodsList.push(...res.data.goodsList);
if(reload) this.goodsList[this.current] = res.data.goodsList;
else this.goodsList[this.current].push(...res.data.goodsList);
// console.log(this.goodsList);
this.setSwiperHeight();
}
this.$forceUpdate();
return res.data.goodsList.length;
},
setSwiperHeight() {
// height: 230px, margin-bottom: 13
const height = Math.ceil(this.goodsList.length / 2) * (500 + 26);
// height: 480rpx, margin-bottom: 26rpx
const height = Math.ceil(this.goodsList[this.current].length / 2) * (480 + 26);
this.swiperHeight = height == 0 ? '230rpx' : height + 'rpx';
// this.swiperHeight = Math.ceil(this.goodsList.length / 2) * (270 + 13) + 'px';
// console.log(this.swiperHeight);
},
// tabs通知swiper切换
tabsChange(index) {
this.current = index;
this.swiperCurrent = this.current;
// this.getGoodsRecommend({ gc_id: this.classifyList[this.current].gc_id });
},
// swiper-item左右移动，通知tabs的滑块跟随移动
transition(e) {
let dx = e.detail.dx;
this.$refs.uTabs.setDx(dx);
},
// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
// swiper滑动结束，分别设置tabs和swiper的状态
animationfinish(e) {
let current = e.detail.current;
this.$refs.uTabs.setFinishCurrent(current);
this.current = current;
this.swiperCurrent = current;
// this.getGoodsRecommend({ gc_id: this.classifyList[this.current].gc_id });
@@ -136,8 +133,7 @@ export default {
}
.swiper-box {
height: 100%;
padding: 20rpx 0;
margin-bottom: 10rpx;
padding-top: 20rpx;
.swiper-item {
// height: 100%;
.goods-item {

1
components/shop/list/item.vue
View File

@@ -65,6 +65,7 @@ export default {
margin-bottom: 16rpx;
font-size: 26rpx;
font-weight: 600;
height: 60rpx;
line-height: 30rpx;
color: #333;
}