112 lines
2.9 KiB
Vue
112 lines
2.9 KiB
Vue
<template>
|
||
<view class="list">
|
||
<view class="top">
|
||
商品推荐
|
||
</view>
|
||
<!-- <view class="label">
|
||
<text v-for="item in classifyList" :key="item.gc_id">{{ item.gc_name }}</text>
|
||
</view>
|
||
<view class="item">
|
||
<item v-for="item in goodsList" :key="item.goods_id" :info="item"></item>
|
||
</view> -->
|
||
<view>
|
||
<u-tabs-swiper ref="uTabs" :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" @transition="transition" @animationfinish="animationfinish" >
|
||
<swiper-item class="swiper-item" v-for="(_, index) in classifyList" :key="index">
|
||
<!-- <scroll-view scroll-y style="height: 800rpx;width: 100%;"> -->
|
||
<view class="item">
|
||
<item v-for="item in goodsList" :key="item.goods_id" :info="item"></item>
|
||
</view>
|
||
<u-empty text="暂无商品" mode="list" color="#000" v-if="!goodsList.length"></u-empty>
|
||
<!-- </scroll-view> -->
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import item from "./item"
|
||
export default {
|
||
name:"list",
|
||
data() {
|
||
return {
|
||
current: Number,
|
||
swiperCurrent: 0,
|
||
goodsList: [],
|
||
}
|
||
},
|
||
components:{
|
||
item
|
||
},
|
||
props: {
|
||
classifyList: Array
|
||
},
|
||
watch: {
|
||
current(index) {
|
||
const id = this.classifyList[index].gc_id;
|
||
this.getGoodsRecommend(id);
|
||
}
|
||
},
|
||
created() {
|
||
this.current = 0;
|
||
console.log(this.classifyList);
|
||
},
|
||
methods: {
|
||
getGoodsRecommend(gc_id) {
|
||
this.$u.api.getGoodsRecommend({
|
||
page: 1,
|
||
gc_id: gc_id,
|
||
}).then((res)=>{
|
||
if (res.errCode == 0) {
|
||
this.goodsList = res.data.goodsList;
|
||
console.log(this.goodsList);
|
||
}
|
||
})
|
||
},
|
||
// 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.$refs.uTabs.setFinishCurrent(current);
|
||
this.swiperCurrent = current;
|
||
this.current = current;
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.list{
|
||
.top{
|
||
font-size: 30rpx;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
text-align: center;
|
||
color: #333;
|
||
}
|
||
// .label{
|
||
// display: flex;
|
||
// color: #999;
|
||
// flex-wrap: wrap;
|
||
// >text{
|
||
// margin-right: 34rpx;
|
||
// margin-bottom: 10rpx;
|
||
// }
|
||
// }
|
||
// .item{
|
||
// display: flex;
|
||
// flex-wrap: wrap;
|
||
// justify-content: space-between;
|
||
// margin-top: 20rpx;
|
||
|
||
// }
|
||
}
|
||
</style> |