deming/pageC/groupBuy/index.vue

113 lines
3.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="group">
<view>
<!-- <u-tabs-swiper ref="uTabs" :list="tabList" name="gc_name" :current="current" @change="tabsChange" :is-scroll="true" active-color="#FF780F" swiperWidth="750" height="88" :show-bar="false"></u-tabs-swiper> -->
<u-tabs :list="tabList" name="gc_name" :is-scroll="true" :current="current" @change="tabsChange" active-color="#FF780F" :show-bar="false" height="88" font-size="24" inactive-color="#333333"></u-tabs>
</view>
<swiper :current="swiperCurrent" @animationfinish="animationfinish" :style="{height: swiperHeight}">
<swiper-item class="swiper-item" v-for="(_, index) in tabList" :key="index">
<scroll-view scroll-y style="width: 100%;" @scrolltolower="onreachBottom">
<view v-if="pinTuanList[index]">
<SpecialGoods v-for="(item, index) in pinTuanList[index]" :key="index" :item="item" type='group'></SpecialGoods>
</view>
<u-empty text="暂无商品" mode="list" color="#000" margin-top="120" v-if="!pinTuanList[index] || !pinTuanList[index].length"></u-empty>
<u-loadmore :status="loadStatus" bgColor="#FFF" margin-top="20" margin-bottom="20" v-if="pinTuanList[index] && pinTuanList[index].length>=pageSize" @loadmore="onreachBottom"></u-loadmore>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import SpecialGoods from "../../components/shop/special-shop/index";
export default {
data() {
return {
pageSize: 6,
tabList: [],
current: -1,
swiperCurrent: 0,
page: 0,
pinTuanList: [],
swiperHeight: '',
timer: true, // 限制下拉刷新
loadStatus: 'loadmore',
}
},
components: {
SpecialGoods,
},
onLoad() {
this.getGoodsClass();
this.setViewHeight();
},
watch: {
current(index) {
this.getPinTuanList({ id: this.tabList[index].gc_id, load: 'reload' });
}
},
methods: {
// 获取优惠券拼团分类
async getGoodsClass() {
return await this.$u.api.getGoodsClass().then(res => {
if(res.errCode == 0) {
this.current = 0;
this.tabList = res.data;
}
})
},
// 拼团列表
async getPinTuanList({ id, page, load }) {
const res = await this.$u.api.getPinTuanList({
page: this.page,
gc_id: id,
})
this.timer = true;
if (res.errCode == 0) {
if(load == 'reload') this.pinTuanList[this.current] = res.data;
else if(load == 'loadmore') this.pinTuanList[this.current].push(...res.data);
}
this.$forceUpdate();
return res.data.length;
},
// scroll-view到底部加载更多
onreachBottom() {
if(!this.timer) return false;
this.loadStatus = "loading";
this.page++;
this.getPinTuanList({
id: this.tabList[this.current].gc_id,
load: 'loadmore',
}).then(length => {
console.log(length);
if(length == 0) {
this.page--;
this.loadStatus = 'nomore';
} else {
this.loadStatus = 'loadmore';
}
}).catch(() => {
this.loadStatus = "nomore";
this.page--;
})
},
// tabs通知swiper切换
tabsChange(index) {
this.current = index;
this.swiperCurrent = index;
},
// 由于swiper的内部机制问题快速切换swiper不会触发dx的连续变化需要在结束时重置状态
// swiper滑动结束分别设置tabs和swiper的状态
animationfinish(e) {
let current = e.detail.current;
this.swiperCurrent = current;
this.current = current;
},
setViewHeight() {
const res = uni.getSystemInfoSync();
this.swiperHeight = res.windowHeight - (res.windowWidth / 750) * 88 + 'px';
},
}
};
</script>
<style lang="scss" scoped>
</style>