综合子页面渲染

src/pages/goods_list/goods_list.vue

@@ -1,13 +1,41 @@
 <template>
-  <view>
+  <view class="goods_list">
     <!-- 1.搜索栏 -->
     <ygSearch></ygSearch>
     
-    <!-- 2. tabs -->
+    <!-- 2. tabs栏 -->
     <view class="tabs">
       <u-tabs :list="tabs" :current="tabsCurrent" inactive-color="#666" active-color="#eb4450" @change="onTapsChange"></u-tabs>
     </view>
 
+    <!-- 3.子页面 -->
+    <!-- 3.1 综合 -->
+    <block v-if="tabsCurrent===0">
+      <view class="composite">
+        <navigator class="composite_item" v-for="item in goods" :key="item.goods_id">
+          <!-- 3.1.1 图片 -->
+          <view class="goods_img">
+            <image mode="widthFix" :src="item.goods_small_logo"></image>
+          </view>
+          <!-- 3.1.2 商品信息-->
+          <view class="goods_info">
+            <view class="goods_name">{{item.goods_name}}</view>
+            <view class="goods_price">￥{{item.goods_price||99999}}</view>
+          </view>
+
+        </navigator>
+      </view>
+    </block>
+
+    <!-- 3.1 销量 -->
+    <block v-else-if="tabsCurrent===1">
+      <view class="Sales">销量</view>
+    </block>
+
+    <!-- 3.1 价格 -->
+    <block v-else-if="tabsCurrent===2">
+      <view class="price">价格</view>
+    </block>
   </view>
 </template>
 
@@ -17,16 +45,18 @@ export default {
     return{
       tabs: [
         {
-          name: "待收货",
+          name: "综合",
         },
         {
-          name: "待付款",
+          name: "销量",
         },
         {
-          name: "待评价",
+          name: "价格",
         },
       ],
       tabsCurrent: 0,
+      // 商品列表
+      goods: []
     }
   },
 
@@ -35,10 +65,13 @@ export default {
     const params = {
       // 关键字
       query: "",
+
       // 分类id
       cid: id,
+
       // 页码
       pagenum: 1,
+
       // 页容量 一页有几条数据
       pagesize: 10
     }
@@ -46,6 +79,7 @@ export default {
     // 从接口拿数据
     const {message} = await this.$u.api.getGoods(params)
     console.log(message)
+    this.goods = message.goods
   },
 
   methods: {
@@ -56,6 +90,47 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
+.composite {
+  .composite_item {
+    display: flex;
+    border-top: 1rpx solid #000;
+    padding: 10rpx 0;
+    .goods_img {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      image {
+        width: 190rpx;
+        height: 190rpx;
+        background-color: #eee;
+      }
+    }
 
+    .goods_info {
+      flex: 2;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .goods_name {
+        font-size: 30rpx;
+        color: #333;
+
+        display: -webkit-box;
+        overflow: hidden;
+        white-space: normal !important;
+        text-overflow: ellipsis;
+        word-wrap: break-word;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+
+      .goods_price {
+        font-size: 30rpx;
+        color: #eb4450;
+      }
+    }
+  }
+}
 </style>