112 lines
2.6 KiB
Vue
112 lines
2.6 KiB
Vue
<template>
|
|
<view class="group">
|
|
<view class="top">
|
|
<text>全部拼团</text>
|
|
<view class="more" @click="viewMore">
|
|
<text>查看更多</text>
|
|
<u-icon name="arrow-right" color="#999" size="22"></u-icon>
|
|
</view>
|
|
</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="60"></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:80rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
>text:first-child{
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
}
|
|
.more {
|
|
font-size: 18rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #999;
|
|
}
|
|
}
|
|
.list {
|
|
box-sizing: border-box;
|
|
padding: 0 30rpx;
|
|
display: flex;
|
|
> view {
|
|
&:not(:nth-child(3n)) {
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |