对接产品分页接口数据

assets/css/common.scss

@@ -4,6 +4,7 @@
 .img_reset {
   width: 100%;
   height: 100%;
+  object-fit: cover;
 }
 .box_shadow {
   transition: all 0.3s linear;

components/aside-tree.vue

@@ -1,14 +1,21 @@
 <template>
   <aside class="aside-tree">
     <div>
-      <h3 class="aside-header">{{ headerTitle }}</h3>
+      <nuxt-link class="aside-header" :to="baseUrl">
+        <h3>{{ headerTitle }}</h3>
+      </nuxt-link>
       <nav class="tree-box">
+        <no-ssr>
           <el-tree
             :data="treeData"
             node-key="id"
             highlight-current
+            default-expand-all
             :props="props"
+            current-node-key="43bb1e22091c0f674453c8db7e89b4a3"
+            @current-change="handleNodeClick"
           />
+        </no-ssr>
       </nav>
     </div>
 
@@ -57,13 +64,38 @@ export default {
           label: 'label'
         }
       }
+    },
+    baseUrl: {
+      type: String,
+      default: '/'
     }
   },
   data () {
-    return {}
+    return {
+      currentNodeKey: ''
+    }
+  },
+  watch: {
+    '$route.query.catgId': {
+      handler (val) {
+        this.currentNodeKey = val
+      }
+    }
   },
   mounted () {
-
+  },
+  methods: {
+    handleNodeClick(row,node) {
+      if (node.isLeaf) {                
+        this.$router.push({
+          path: `${this.baseUrl}`,
+          query: {
+            ...this.$route.query,
+            catgId: row.id
+          }
+        })
+      }
+    }
   }
 }
 </script>
@@ -75,6 +107,7 @@ export default {
 .aside-tree {
   padding: 0;
   @mixin header {
+    display: block;
     margin: 0;
     padding: 1.5rem 0;
     text-indent: 2.125rem;

components/seo-pagination.vue

@@ -27,7 +27,7 @@ export default {
     total: {
       default: 99
     },
-    page: {
+    pageNum : {
       default: 1
     },
     rows: {
@@ -35,7 +35,7 @@ export default {
     },
     pageKey: {
       type: String,
-      default: 'page'
+      default: 'pageNum'
     },
   },
   watch: {

pages/products.vue

@@ -5,7 +5,12 @@
 
     <section class="container pt-4 pb-4">
       <div class="row">
-        <AsideTree class="col-md-3 mb-4 mb-md-0" :treeData="categoryTree" :headerTitle="$t('products.allProducts')"/>
+        <AsideTree 
+          class="col-md-3 mb-4 mb-md-0" 
+          :treeData="categoryTree" 
+          :headerTitle="$t('products.allProducts')"
+          baseUrl="/products"
+        />
         <main class="col-md-9">
           <div class="pretty-header">
             <h2>Low Bed Trailer</h2>

pages/products/index.vue

@@ -2,30 +2,32 @@
   <!-- 产品列表 -->
   <section class="products-list">
     <ul class="row pl-0">
-      <li class="col-12 col-md-4"  v-for="item in 6" :key="item">
+      <li class="col-12 col-md-4"  v-for="item in pordObj.records" :key="item.id">
         <nuxt-link 
           class="products-item box_shadow mt-2" 
           to="/products/123123"
         >
           <article class="product-card box_shadow">
-            <b-img src="~assets/image/banner/home-pord1.png" fluid alt="product"></b-img>
+            <img style="height: 200px;" class="img_reset" :src="item.mainPic" alt="product"></img>
             <div class="product-card-content">
-              <h4 class="text-ellipsis">SINOTRUK HOWO Tractor Truck Head</h4>
-              <p>{{ $t('common.truckModel') }}: ZZ4257N3247C1</p>
+              <h4 class="text-ellipsis">{{ item.title }}</h4>
+              <div class="prod-desc text-ellipsis" v-html="item.description"></div>
+              <!-- <p>{{ $t('common.truckModel') }}: ZZ4257N3247C1</p>
               <p>{{ $t('common.dimension') }}: 6800x2490x3668</p>
-              <p>{{ $t('common.approachingAngle/Departure') }}: 16/70</p>
+              <p>{{ $t('common.approachingAngle/Departure') }}: 16/70</p> -->
             </div>
           </article>
         </nuxt-link>
       </li>
     </ul>
-    <SeoPagination class="mt-4" />
+    <SeoPagination class="mt-4" :total="pordObj.total" />
   </section>
 </template>
 
 <script>
 export default {
   name: 'products-list',
+  watchQuery: ['pageNum', 'catgId'],
   data() {
     return {
       bannerTopOptions: {
@@ -33,6 +35,19 @@ export default {
       },
     }
   },
+  async asyncData({$axios,query}) {
+    let params = {
+      pageNum: query.pageNum || 1,
+      pageSize: 9,
+      catgId: query.catgId || '',
+    }
+    let {data: pordObj} = await $axios('/web/prodPageList', {params})
+    console.log(pordObj);
+    
+    return {
+      pordObj
+    }
+  },
   methods: {
     
   }
@@ -47,8 +62,16 @@ export default {
     li {
       padding: 0 .3125rem;
       .products-item {
+        width: 100%;
+        display: inline-block;
         border: 1px solid #e6e8ec;
+        .product-card {
+          width: 100%;
+          height: min-content;
+        }
         .product-card-content {
+          width: 100%;
+          height: 8.25rem;
           padding: 1.125rem 1rem;
           border-top: .0625rem solid #e6e8ec;
           font-size: .875rem;
@@ -61,6 +84,9 @@ export default {
           p {
             color: #878b90;
           }
+          .prod-desc {
+	          -webkit-line-clamp: 4;			//行数
+          }
           .view-details {
             margin: 0 auto;
             margin-top: 2rem;