新增商家商品模版显示分页显示

seller/src/views/goods/goods-seller/addGoods.scss

@@ -76,15 +76,13 @@
     text-align: left;
   }
 }
-.sku-val{
+.sku-val {
   justify-content: flex-start;
   flex-wrap: wrap;
-  >.ivu-form{
+  > .ivu-form {
     flex-wrap: wrap !important;
   }
-  /deep/ .sku-item-content-val{
-  
-    
+  /deep/ .sku-item-content-val {
     margin-right: 20px;
   }
 }
@@ -123,16 +121,16 @@ div.base-info-item {
         display: flex;
         width: 100% !important;
         flex: 1;
-      
+
         flex-direction: column;
         align-items: flex-start;
         justify-content: flex-start;
         width: 100%;
-        >.ivu-card-body{
+        > .ivu-card-body {
           width: 100%;
         }
 
-        .ivu-card-body{
+        .ivu-card-body {
           width: 100%;
           justify-content: center;
           align-items: flex-start;
@@ -145,7 +143,6 @@ div.base-info-item {
           width: 100%;
         }
       }
-
     }
 
     .shop-category-text {
@@ -456,38 +453,6 @@ div.base-info-item {
 .goods-type-list {
   max-height: 500px;
   overflow-y: auto;
-
-  > .goods-type-item {
-    padding: 20px 0;
-    width: 100%;
-    cursor: pointer;
-    transition: 0.35s;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    /deep/ img {
-      margin-right: 20px;
-      width: 100px;
-    }
-
-    /deep/ h2 {
-      cursor: pointer;
-      font-size: 21px;
-      padding: 10px 0;
-      color: #333;
-    }
-
-    /deep/ p {
-      color: #999;
-      font-size: 14px;
-      margin-top: 10px;
-    }
-  }
-
-  > .goods-type-item:hover {
-    transform: translateY(-10px);
-  }
 }
 
 .template-item {
@@ -499,3 +464,40 @@ div.base-info-item {
   max-height: auto !important;
   min-height: 240px !important;
 }
+
+.goods-type-item {
+  padding: 20px 0;
+  width: 100%;
+  cursor: pointer;
+  transition: 0.35s;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  /deep/ img {
+    margin-right: 20px;
+    width: 100px;
+    margin-left: 10px;
+  }
+
+
+
+  /deep/ p {
+    color: #999;
+    font-size: 14px;
+    margin-top: 10px;
+  }
+}
+
+.goods-type-item:hover {
+  background: #ededed;
+}
+.goods-list-box {
+  height: 450px;
+  overflow: auto;
+}
+h2 {
+  cursor: pointer;
+  font-size: 21px;
+  color: #333;
+}

seller/src/views/goods/goods-seller/goodsOperationFirst.vue

@@ -19,17 +19,21 @@
       </div>
       <div v-else class="goods-type-list">
         <h2 @click="showGoodsTemplates = !showGoodsTemplates">返回</h2>
-        <div
-          class="goods-type-item template-item"
-          @click="handleClickGoodsTemplate(item)"
-          v-for="(item, tempIndex) in goodsTemplates"
-          :key="tempIndex"
-        >
-          <img :src="item.thumbnail" />
-          <div>
-            <h2>{{ item.goodsName }}</h2>
-            <p>{{ item.sellingPoint || "" }}</p>
-          </div>
+        <div class="goods-list-box">
+          <Scroll :on-reach-bottom="handleReachBottom">
+            <div
+              class="goods-type-item template-item"
+              @click="handleClickGoodsTemplate(item)"
+              v-for="(item, tempIndex) in goodsTemplates"
+              :key="tempIndex"
+            >
+              <img :src="item.thumbnail" />
+              <div>
+                <h2>{{ item.goodsName }}</h2>
+                <p>{{ item.sellingPoint || "" }}</p>
+              </div>
+            </div>
+          </Scroll>
         </div>
       </div>
     </Modal>
@@ -133,9 +137,29 @@ export default {
       categoryListLevel2: [],
       /** 3级分类列表*/
       categoryListLevel3: [],
+      searchParams: {
+        saveType: "TEMPLATE",
+        sort: "create_time",
+        order: "desc",
+        pageSize: 10,
+        pageNumber: 1,
+      },
+      templateTotal:0,
     };
   },
   methods: {
+    // 商品模版触底加载
+    handleReachBottom() {
+      setTimeout(() => {
+        if (
+          this.searchParams.pageNumber * this.searchParams.pageSize <=
+          this.templateTotal
+        ) {
+          this.searchParams.pageNumber++;
+          this.GET_GoodsTemplate();
+        }
+      }, 1000);
+    },
     // 点击商品类型
     handleClickGoodsType(val) {
       this.goodsTypeWay.map((item) => {
@@ -159,14 +183,10 @@ export default {
     },
     // 获取商品模板
     GET_GoodsTemplate() {
-      let searchParams = {
-        saveType: "TEMPLATE",
-        sort: "create_time",
-        order: "desc",
-      };
-      API_GOODS.getDraftGoodsListData(searchParams).then((res) => {
+      API_GOODS.getDraftGoodsListData(this.searchParams).then((res) => {
         if (res.success) {
-          this.goodsTemplates = res.result.records;
+          this.goodsTemplates.push(...res.result.records)
+          this.templateTotal = res.result.total
         }
       });
     },
@@ -217,7 +237,10 @@ export default {
         if (this.selectedTemplate.id) {
           this.$emit("change", { tempId: this.selectedTemplate.id });
         } else {
-          this.$emit("change", { category: this.category, goodsType: this.goodsType });
+          this.$emit("change", {
+            category: this.category,
+            goodsType: this.goodsType,
+          });
         }
       }
     },
@@ -229,4 +252,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import "./addGoods.scss";
+/deep/ .ivu-scroll-container{
+  height:450px !important;
+}
 </style>