deming/components/shop/group/index.vue

<template>
    <view class="group">
        <view class="top">
            <text>全部拼团</text>
            <text @click="viewMore">查看更多></text>
        </view>
        <view class="label">
            <u-tabs-swiper ref="group" :list="classifyList" name="gc_name" :is-scroll="true" active-color="#FF780F" :current="current" font-size="24" :show-bar="false" @change="tabsChange" height="88"></u-tabs-swiper>
        </view>
		<swiper :current="swiperCurrent" @animationfinish="animationfinish" style="height: 260rpx">
			<swiper-item class="swiper-item list" v-for="(_, i) in classifyList" :key="i">
				<!-- 最多显示3个 -->
				<sitem :info="info" v-for="(info, index) in groupList.slice(0, 3)" :key="index"></sitem>
				<u-empty text="暂无拼团商品" mode="list" color="#000" v-if="!groupList.length" style="margin: 0 auto;"></u-empty>
			</swiper-item>
		</swiper>
    </view>
</template>
<script>
import sitem from "./item"
export default {
    name:"group",
    components:{
        sitem
	},
    data(){
        return {
			current: -1,
			swiperCurrent: 0,
			groupList: [], // 拼团商品
			classifyList: [],
        }
	},
	watch: {
		current(value) {
			this.getPinTuanList(this.classifyList[value].gc_id);
		}
	},
	created() {
		this.getGoodsClass();
	},
	methods: {
		// 获取优惠券拼团分类
		getGoodsClass() {
			this.$u.api.getGoodsClass().then(res => {
				if(res.errCode == 0) {
					this.classifyList = res.data;
					this.current = 0;
				}
			})
		},
		// 拼团列表
		getPinTuanList(id) {
			this.$u.api.getPinTuanList({
				page: 0,
				gc_id: id,
			}).then(res => {
				this.groupList = res.data;
			})
		},
		tabsChange(index) {
			this.swiperCurrent = index;
		},
		animationfinish(e) {
			let current = e.detail.current;
			this.swiperCurrent = current;
			this.current = current;
		},
		viewMore() {
			this.$u.route({
				url: 'pageC/groupBuy/index',
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.group{
	background-color: #ffffff;
    .top {
		padding: 0 30rpx;
        height: 90rpx;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        >text:first-child{
            font-size: 30rpx;
            color: #333;
        }
        >text:last-child{
            font-size: 18rpx;
            color: #999;
        }
    }
    .list {
		box-sizing: border-box;
		padding: 0 30rpx;
        display: flex;
		> view {
			&:not(:nth-child(3n)) {
				margin-right: 20rpx;
			}
		}
    }
}
</style>