店铺、品牌器件分页

components/mobile/brand/BrandDetail.vue

@@ -6,8 +6,8 @@
       </div>
     </div>
     <div class="brand-switch-item">
-      <span :class="activeType=='detail'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='detail'">品牌</span>
-      <span :class="activeType=='product'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='product'">产品</span>
+      <span :class="activeType=='detail'?'mobile-switch-btn active':'mobile-switch-btn'" @click="setActiveType('detail')">品牌</span>
+      <span :class="activeType=='product'?'mobile-switch-btn active':'mobile-switch-btn'" @click="setActiveType('product')">产品</span>
     </div>
     <div class="brand-param-list" v-if="activeType=='detail'">
       <div class="brand-param-item" v-if="brandDetail.series">
@@ -34,7 +34,7 @@
       </div>
     </div>
     <div class="brand-product-list" v-if="activeType=='product'">
-      <div class="search-box" v-if="productList.content && productList.content.length > 0 || isSearch">
+      <div class="search-box" v-if="searchLists && searchLists.length > 0 || isSearch">
         <div class="kind-selecter">
           <div @mouseenter="isInList = true" @mouseleave="isInList = false">
             <span @click="showKindList = !showKindList" v-text="selectedKind.substring(0, 4)"></span>
@@ -50,12 +50,12 @@
         </div>
       </div>
       <ul class="product-list">
-        <li v-for="product in productList.content">
+        <li v-for="product in searchLists">
           <nuxt-link class="text-left" :to="'/mobile/brand/componentDetail/' + product.uuid">{{product.code}}</nuxt-link>
           <a class="text-right" @click="toShowPdf(product.attach)">规格书 <i class="icon-chakan iconfont"></i></a>
         </li>
       </ul>
-      <div class="no-product" v-if="!productList.content || productList.content.length == 0">
+      <div class="no-product" v-if="!productList.totalPages || productList.totalPages == 0">
         <img :src="!isSearch?'/images/mobile/@2x/car@2x.png':'/images/mobile/@2x/search-empty.png'" alt="">
         <div>抱歉，暂无产品信息</div>
       </div>
@@ -80,7 +80,9 @@
         },
         selectedKind: '全部分类',
         isInList: false,
-        isSearch: false
+        isSearch: false,
+        isSearchingMore: false,
+        searchLists: []
       }
     },
     filters: {
@@ -89,24 +91,17 @@
       }
     },
     mounted: function () {
-      this.$nextTick(function () {
-        document.addEventListener('click', this.checkShowFilter)
+      let _this = this
+      _this.$nextTick(function () {
+        window.addEventListener('scroll', function () {
+          _this.scroll()
+        }, false)
+        document.addEventListener('click', _this.checkShowFilter)
       })
     },
     watch: {
       keyword: function (val, oldVal) {
         this.isSearch = true
-      },
-      activeType: function (val, oldVal) {
-        if (val === 'product') {
-          this.pageParams = {
-            page: 1,
-            count: 10,
-            filter: {}
-          }
-          this.keyword = ''
-          this.pageCommodity(this.pageParams)
-        }
       }
     },
     computed: {
@@ -115,10 +110,18 @@
         if (list.application && list.application !== '') {
           this.applications = list.application.split(',')
         }
+        this.pageParams.filter.brandid = list.id
         return list
       },
       productList () {
-        return this.$store.state.brandComponent.component.data || []
+        console.log(this.pageParams)
+        let list = this.$store.state.brandComponent.component.data
+        this.searchLists = this.searchLists.concat(list.content)
+        this.isSearchingMore = false
+        return list
+      },
+      allPage () {
+        return this.productList.totalPages || 0
       },
       kindList () {
         let brands = this.$store.state.brandCategories.categories.data
@@ -186,6 +189,19 @@
       }
     },
     methods: {
+      scroll: function () {
+        let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
+        if (Math.ceil(scrolled + window.screen.availHeight) >= document.body.scrollHeight && !this.isSearchingMore && this.pageParams.page < this.allPage && this.activeType === 'product') {
+          this.getMoreProduct()
+        }
+      },
+      getMoreProduct: function () {
+        if (!this.isSearchingMore) {
+          this.pageParams.page++
+          this.isSearchingMore = true
+          this.pageCommodity(this.pageParams, this.ids)
+        }
+      },
       getKinds: function (list, kindList) {
         if (list.children && list.children.length > 0) {
           for (let i = 0; i < list.children.length; i++) {
@@ -221,13 +237,14 @@
         this.pageParams.filter.code = this.keyword
         this.pageCommodity(this.pageParams)
       },
-      async pageCommodity (params) {
-        try {
-          let { data } = await this.$http.get('/api/product/component/list', { params })
-          this.$store.commit('brandComponent/GET_COMPONENT_SUCCESS', data)
-        } catch (err) {
-          this.$store.commit('brandComponent/GET_COMPONENT_FAILURE', err)
-        }
+      pageCommodity (params) {
+//        try {
+//          let { data } = await this.$http.get('/api/product/component/list', { params })
+//          this.$store.commit('brandComponent/GET_COMPONENT_SUCCESS', data)
+//        } catch (err) {
+//          this.$store.commit('brandComponent/GET_COMPONENT_FAILURE', err)
+//        }
+        this.$store.dispatch('loadBrandComponent', this.pageParams)
       },
       checkShowFilter: function () {
         if (!this.isInList) {
@@ -238,6 +255,17 @@
         if (url && url !== '1') {
           window.location.href = url
         }
+      },
+      setActiveType: function (type) {
+        if (type === 'product' && (this.pageParams.page !== 1 || this.keyword !== '')) {
+          this.pageParams.page = 1
+//          this.keyword = ''
+          this.searchLists = []
+          console.log(this.pageParams)
+          this.$store.dispatch('loadBrandComponent', this.pageParams)
+//          this.pageCommodity(this.pageParams)
+        }
+        this.activeType = type
       }
     }
   }

components/mobile/common/Loading.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="loading">
+    <img src="/images/all/loading.gif" alt="">
+  </div>
+</template>
+<style lang="scss" scoped>
+  .loading {
+    text-align: center;
+    background: #fff;
+    >img {
+      width: .64rem;
+      height: .64rem;
+      margin: .2rem 0;
+    }
+  }
+</style>

components/mobile/common/PullDown.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="loading" v-show="isSearchingMore">
+    <img src="/images/all/loading.gif" alt="">
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        isSearchingMore: false,
+        searchLists: [],
+        page: 1
+      }
+    },
+    props: ['searchMore', 'allPage', 'count'],
+    mounted: function () {
+      let _this = this
+      _this.$nextTick(function () {
+        window.addEventListener('scroll', function () {
+          _this.scroll()
+        }, false)
+      })
+    },
+    methods: {
+      scroll: function () {
+        let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
+        if (Math.ceil(scrolled + window.screen.availHeight) >= document.body.scrollHeight && !this.isSearchingMore && this.page < this.allPage) {
+          this.getMore()
+        }
+      },
+      getMore: function () {
+        if (!this.isSearchingMore) {
+          this.page++
+          this.isSearchingMore = true
+          this.searchMore(this.page, this.count)
+        }
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .loading {
+    text-align: center;
+    background: #fff;
+    >img {
+      width: .64rem;
+      height: .64rem;
+      margin: .2rem 0;
+    }
+  }
+</style>

components/mobile/common/index.js

@@ -0,0 +1,4 @@
+import Loading from './Loading.vue'
+import RemindBox from './RemindBox.vue'
+
+export { Loading, RemindBox }

pages/mobile/search/_keycode.vue

@@ -44,14 +44,12 @@
       <a @click="goLastPage">返回上一页</a>
     </div>
     <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
-    <div class="loading" v-show="isSearchingMore">
-      <img src="/images/all/loading.gif" alt="">
-    </div>
+    <loading v-show="isSearchingMore"></loading>
   </div>
 </template>
 
 <script>
-  import RemindBox from '~components/mobile/common/RemindBox.vue'
+  import {RemindBox, Loading} from '~components/mobile/common'
   export default {
     layout: 'mobile',
     data () {
@@ -72,7 +70,8 @@
       }
     },
     components: {
-      RemindBox
+      RemindBox,
+      Loading
     },
     mounted: function () {
       let _this = this
@@ -351,14 +350,6 @@
         background: #d4d;
       }
     }
-    .loading {
-      text-align: center;
-      >img {
-        width: .64rem;
-        height: .64rem;
-        margin: .2rem 0;
-      }
-    }
   }
 
 </style>

pages/mobile/shop/index.vue

@@ -10,7 +10,7 @@
         <li @click="onDown('DISTRIBUTION')" v-show="downName !== '经销'">经销</li>
       </ul>
     </div>
-    <div class="shop-list" v-for="item in list.content" @click="goStoreDetail(item.uuid)">
+    <div class="shop-list" v-for="item in searchLists" @click="goStoreDetail(item.uuid)">
       <h3>{{item.storeName}}</h3>
       <div class="list-item">
         <div class="item-img">
@@ -26,50 +26,76 @@
       </div>
     </div>
     <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
+    <loading v-show="isSearchingMore"></loading>
   </div>
 </template>
 
 <script>
-  import RemindBox from '~components/mobile/common/RemindBox.vue'
+  import {RemindBox, Loading} from '~components/mobile/common'
   export default {
     layout: 'mobile',
     data () {
       return {
-        page: '',
-        count: '',
-        types: '',
+        page: 1,
+        count: 10,
+        types: 'ORIGINAL_FACTORY-DISTRIBUTION-AGENCY',
         down: false,
         downName: '全部',
         isFocus: true,
         collectResult: '收藏成功',
-        timeoutCount: 0
+        timeoutCount: 0,
+        isSearchingMore: false,
+        searchLists: [],
+        isChange: false
       }
     },
     components: {
-      RemindBox
+      RemindBox,
+      Loading
     },
     fetch ({ store }) {
       return Promise.all([
-        store.dispatch('provider/findStoreListInMobil', { page: 1, count: 100, types: 'ORIGINAL_FACTORY-DISTRIBUTION-AGENCY' })
+        store.dispatch('provider/findStoreListInMobil', { page: 1, count: 10, types: 'ORIGINAL_FACTORY-DISTRIBUTION-AGENCY' })
       ])
     },
     computed: {
       list () {
-        return this.$store.state.provider.stores.storeList.data
+        let list = this.$store.state.provider.stores.storeList.data
+        if (this.isChange) {
+          this.searchLists = []
+          this.page = 1
+          this.isChange = false
+        } else {
+          this.searchLists = this.searchLists.concat(list.content)
+          this.isSearchingMore = false
+        }
+        return list
+      },
+      allPage () {
+        return this.list.totalPages
       }
     },
-    mounted () {
-      this.$nextTick(function () {
-        window.addEventListener('onScrollMove ', this.onScroll(event))
+    mounted: function () {
+      let _this = this
+      _this.$nextTick(function () {
+        window.addEventListener('scroll', function () {
+          _this.scroll()
+        }, false)
       })
     },
     methods: {
-      onScroll: function (e) {
-//        let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
-//        let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
-//        let x = Math.min(width - 20, e.touches[0].clientX)
-//        let y = Math.min(height - 20, e.touches[0].clientY)
-        console.log(1)
+      scroll: function () {
+        let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
+        if (Math.ceil(scrolled + window.screen.availHeight) >= document.body.scrollHeight && !this.isSearchingMore && this.page < this.allPage) {
+          this.getMoreStore()
+        }
+      },
+      getMoreStore: function () {
+        if (!this.isSearchingMore) {
+          this.page++
+          this.isSearchingMore = true
+          this.$store.dispatch('provider/findStoreListInMobil', { page: this.page, count: this.count, types: this.types })
+        }
       },
       isType (type) {
         let bgurl = ''
@@ -88,20 +114,19 @@
         this.down = !this.down
       },
       onDown (type) {
-        this.$store.dispatch('provider/findStoreListInMobil', { page: 1, count: 10, types: type })
+        this.isChange = true
         this.down = !this.down
+        this.types = type
         if (type === 'ORIGINAL_FACTORY') {
           this.downName = '原厂'
-        }
-        if (type === 'DISTRIBUTION') {
+        } else if (type === 'DISTRIBUTION') {
           this.downName = '经销'
-        }
-        if (type === 'AGENCY') {
+        } else if (type === 'AGENCY') {
           this.downName = '代理'
-        }
-        if (type === 'ORIGINAL_FACTORY-DISTRIBUTION-AGENCY') {
+        } else if (type === 'ORIGINAL_FACTORY-DISTRIBUTION-AGENCY') {
           this.downName = '全部'
         }
+        this.$store.dispatch('provider/findStoreListInMobil', { page: 1, count: 10, types: type })
       },
       focusStore: function (item, $event) {
 //        item.isFocus = item.isFocus === 'false' ? 'true' : 'false'