添加商品列表分页功能

src/utils/requestPhp.js

@@ -8,7 +8,7 @@ import Cookies from 'js-cookie'
 
 // 创建axios实例
 const service = axios.create({
-  baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_PHP_API : '/source',
+  baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_PHP_API: '/source',
   // baseURL: process.env.VUE_APP_PHP_API, // api 的 base_url
   timeout: Config.timeout // 请求超时时间
 })

src/views/product/components/addImages.vue

@@ -10,7 +10,8 @@
             </el-select>
             <el-button type="primary" @click="dialogTableVisibles = true">新增类型</el-button>
             <el-button type="primary" @click="showUpload = true">新增图片</el-button>
-            <imageComponent @onSelectImage="onSelectImage" @getList="getList" :list='dataImages'></imageComponent>
+            <imageComponent @onSelectImage="onSelectImage" @getList="getList" @getlists="getlists" :list='dataImages'>
+            </imageComponent>
             <span slot="footer" class="dialog-footer">
                 <el-button @click="dialogVisible = false">取 消</el-button>
                 <el-button type="primary" @click="sumbit">确 定</el-button>
@@ -67,7 +68,7 @@ export default {
             value: '',
             typedata: '',
             showUpload: false,
-
+            page: 1,
         }
     },
     mounted() {
@@ -137,6 +138,10 @@ export default {
                 }
             }
         },
+        getlists() {
+            this.page++
+            this.getList()
+        },
         sumbit() {
             this.dialogVisible = false
             this.$emit('successEvent', this.selectImage)
@@ -147,13 +152,17 @@ export default {
         async getList() {
             let obj = {
                 category: this.value,
-                page: 1,
-                size: 10,
+                page: this.page,
+                size: 20,
                 store_id: localStorage.getItem("shopId"),
 
             }
             const res = await getcommonpicture(obj);
-            this.dataImages = res.data
+            if (this.page == 1) {
+                this.dataImages = res.data
+            } else {
+                this.dataImages.push(...res.data)
+            }
         },
         async getType(valueIndex) {
             const res = await getcommonCategor({

src/views/product/components/imageComponent.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <ul class="ulStyle">
+        <ul class="ulStyle" v-infinite-scroll="load">
             <li v-for="item in list" :key="item.id" class="listyle" :class="[selectList.id == item.id ? 'active' : '']"
                 @click="clickEvent(item)">
                 <img :src="item.url" style="width: 100px;height: 100px;" alt="">
@@ -20,7 +20,14 @@ export default {
         return {
             selectList: [],
         }
-    }, methods: {
+    },
+    mounted() {
+
+    },
+    methods: {
+        load() {
+            this.$emit('getlists')
+        },
         clickEvent(d) {
             this.selectList = d
             this.$emit('onSelectImage', d)
@@ -48,6 +55,8 @@ li {
 .ulStyle {
     display: flex;
     flex-wrap: wrap;
+    overflow: auto;
+    height: 400px;
 }
 
 .listyle {