85 lines
2.0 KiB
Vue
85 lines
2.0 KiB
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: 130px">
|
|
<swiper-item class="swiper-item" 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"></u-empty>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import sitem from "./item"
|
|
export default {
|
|
name:"group",
|
|
components:{
|
|
sitem
|
|
},
|
|
props: {
|
|
groupList: Array,
|
|
classifyList: Array,
|
|
},
|
|
data(){
|
|
return {
|
|
current: 0,
|
|
swiperCurrent: 0,
|
|
}
|
|
},
|
|
methods: {
|
|
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{
|
|
.top{
|
|
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;
|
|
}
|
|
}
|
|
.label{
|
|
display: flex;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
>text{
|
|
margin-right: 34rpx;
|
|
}
|
|
}
|
|
.list{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 21rpx;
|
|
|
|
}
|
|
}
|
|
</style> |