group order

components/shop/group/index.vue

@@ -5,16 +5,15 @@
             <text>查看更多></text>
         </view>
         <view class="label">
-            <text>sda</text>
-            <text>asda</text>
-            <text>dsad</text>
-            <text>asdas</text>
-        </view>
-        <view class="list">
-            <sitem></sitem>
-            <sitem></sitem>
-            <sitem></sitem>
+            <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>
@@ -23,12 +22,27 @@ 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;
+		},
+	}
 }
 </script>
 <style lang="scss" scoped>

components/shop/group/item.vue

@@ -1,17 +1,19 @@
 <template>
     <view class="item">
-        <image class="head"></image>
-        <text class="title">商品名</text>
+        <image class="head" :src="info.pintuan_image"></image>
+        <text class="title u-line-1">{{ info.pintuan_goods_name }}</text>
         <view class="price">
-            <text>￥99</text>
-           <text>立即购买</text>
-
+            <text>￥{{ info.pintuan_goods_price }}</text>
+           	<text>立即购买</text>
         </view>
     </view>
 </template>
 <script>
 export default {
-    name:"item"
+	name:"item",
+	props: {
+		info: Object
+	}
 }
 </script>
 <style lang="scss" scoped>
@@ -24,6 +26,8 @@ export default {
 
     }
     .title{
+		display: inline-block;
+		width: 100%;
         font-size: 26rpx;
         color: #333;
         margin-top: 16rpx;