deming/pageC/groupBuy/index.vue
2020-07-27 17:59:47 +08:00

106 lines
2.9 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>
</view>
<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" :style="{height: swiperHeight}">
<swiper-item class="swiper-item" v-for="(_, index) in tabList" :key="index">
<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
<SpecialGoods v-for="(item, index) in pinTuanList" :key="index" :item="item" type='group'></SpecialGoods>
<loadmore ref="loadmore" @callback="getPinTuanList" bgColor="#FFF"></loadmore>
<u-empty text="暂无商品" mode="list" color="#000" v-if="!pinTuanList.length"></u-empty>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import loadmore from "@/components/loadmore/index";
import SpecialGoods from "../../components/shop/special-shop/index";
export default {
data() {
return {
tabList: [],
current: -1,
swiperCurrent: 0,
page: 0,
pinTuanList: [],
swiperHeight: '',
timer: '', // 限制下拉刷新
}
},
components: {
loadmore,
SpecialGoods,
},
onLoad() {
this.getGoodsClass();
this.setViewHeight();
},
watch: {
current(index) {
this.getPinTuanList({ id: this.tabList[index].gc_id });
}
},
methods: {
// 获取优惠券拼团分类
async getGoodsClass() {
return await this.$u.api.getGoodsClass().then(res => {
if(res.errCode == 0) {
this.tabList = res.data;
this.current = 0;
}
})
},
// 拼团列表
async getPinTuanList({ id, page }) {
const res = await this.$u.api.getPinTuanList({
page: this.page,
gc_id: id,
})
this.pinTuanList = res.data;
return res.data.length;
},
// tabs通知swiper切换
tabsChange(index) {
this.swiperCurrent = index;
},
// 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.swiperCurrent = current;
this.current = current;
},
// scroll-view到底部加载更多
onreachBottom() {
this.$$refs.loadmore.reachBottom();
if(!this.timer) return false;
this.loadStatus = "loading";
this.page++;
this.getPinTuanList().then(length => {
if(length == 0) {
this.page--;
this.status = 'nomore';
} else {
this.status = 'loading';
}
}).catch(() => {
this.loadStatus = "nomore";
this.page--;
})
},
setViewHeight() {
const res = uni.getSystemInfoSync();
this.swiperHeight = res.windowHeight - (88 / 2) + 'px';
},
}
};
</script>
<style lang="scss" scoped>
</style>