order 7.23

components/shop/list/index.vue

@@ -3,19 +3,13 @@
         <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 :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" :style="{height: swiperHeight}">
 			<swiper-item class="swiper-item" v-for="(_, index) in classifyList" :key="index">
 				<!-- <scroll-view scroll-y style="height: 800rpx;width: 100%;"> -->
-					<view class="item">
+					<view class="goods-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>
@@ -30,17 +24,16 @@ export default {
 	name:"list",
 	data() {
 		return {
-			current: Number,
+			current: -1,
 			swiperCurrent: 0,
 			goodsList: [],
+			classifyList: [],
+			swiperHeight: '',
 		}
 	},
     components:{
         item
 	},
-	props: {
-		classifyList: Array
-	},
 	watch: {
 		current(index) {
 			const id = this.classifyList[index].gc_id;
@@ -48,21 +41,35 @@ export default {
 		}
 	},
 	created() {
-		this.current = 0;
-		console.log(this.classifyList);
+		this.getGoodsClassRecommend();
 	},
 	methods: {
+		getGoodsClassRecommend(gc_id) {
+			this.$u.api.getGoodsClassRecommend().then(res => {
+				if (res.errCode == 0) {
+					// 初始化 current
+					this.current = 0;
+					this.classifyList = res.data.gc_recommend;
+					// this.getGoodsRecommend(this.classifyList[0].gc_id);
+				}
+			})
+		},
 		getGoodsRecommend(gc_id) {
 			this.$u.api.getGoodsRecommend({
 				page: 1,
 				gc_id: gc_id,
-			}).then((res)=>{
+			}).then(res => {
 				if (res.errCode == 0) {
 					this.goodsList = res.data.goodsList;
-					console.log(this.goodsList);
+					// console.log(this.goodsList);
+					this.setSwiperHeight();
 				}
 			})
 		},
+		setSwiperHeight() {
+			// height: 230px, margin-bottom: 13
+			this.swiperHeight = Math.ceil(this.goodsList.length / 2) * (230 + 13) + 'px';
+		},
 		// tabs通知swiper切换
 		tabsChange(index) {
 			this.swiperCurrent = index;
@@ -108,5 +115,11 @@ export default {
     //     margin-top: 20rpx;
 
     // }
+	.goods-item {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		margin-top: 20rpx;
+	}
 }
 </style>