产品详情、品牌详情、器件详情、店铺详情、搜索结果、店铺等分页

components/mobile/brand/BrandDetail.vue

@@ -49,20 +49,22 @@
           <i @click="goodsSearch()" class="icon-sousuo iconfont"></i>
         </div>
       </div>
-      <ul class="product-list">
+      <ul class="product-list" v-if="productList.totalElements > 0">
         <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.totalPages || productList.totalPages == 0">
+      <div class="no-product" v-if="!productList.totalElements || productList.totalElements == 0">
         <img :src="!isSearch?'/images/mobile/@2x/car@2x.png':'/images/mobile/@2x/search-empty.png'" alt="">
         <div>抱歉，暂无产品信息</div>
       </div>
     </div>
+    <loading v-show="isSearchingMore"></loading>
   </div>
 </template>
 <script>
+  import { Loading } from '~components/mobile/common'
   export default {
     name: 'MobileBrandsDetail',
     data () {
@@ -82,9 +84,14 @@
         isInList: false,
         isSearch: false,
         isSearchingMore: false,
-        searchLists: []
+        searchLists: [],
+        isChange: false,
+        isFilter: false
       }
     },
+    components: {
+      Loading
+    },
     filters: {
       wordFilter: function (str) {
         return str.length > 65 ? str.substring(0, 65) + '...' : str
@@ -114,10 +121,16 @@
         return list
       },
       productList () {
-        console.log(this.pageParams)
         let list = this.$store.state.brandComponent.component.data
-        this.searchLists = this.searchLists.concat(list.content)
-        this.isSearchingMore = false
+        if (this.isChange || this.isFilter) {
+          this.searchLists = []
+          this.pageParams.page = 1
+          this.isChange = false
+          this.isFilter = false
+        } else {
+          this.searchLists = this.searchLists.concat(list.content)
+          this.isSearchingMore = false
+        }
         return list
       },
       allPage () {
@@ -214,6 +227,7 @@
       selectKind: function (data) {
         this.showKindList = false
         this.selectedKind = data.nameCn
+        this.isFilter = true
         if (this.parentid === data.id) {
           this.parentid = 0
           this.ids = null
@@ -233,18 +247,17 @@
       },
       goodsSearch () {
         this.pageParams.page = 1
-        this.pageParams.filter.brandid = this.brandDetail.id
         this.pageParams.filter.code = this.keyword
+        this.isFilter = true
         this.pageCommodity(this.pageParams)
       },
-      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)
+      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)
+        }
       },
       checkShowFilter: function () {
         if (!this.isInList) {
@@ -257,14 +270,18 @@
         }
       },
       setActiveType: function (type) {
-        if (type === 'product' && (this.pageParams.page !== 1 || this.keyword !== '')) {
-          this.pageParams.page = 1
+//        if (type === 'product' && (this.pageParams.page !== 1 || this.isFilter)) {
+//          this.pageParams = {
+//            page: 1,
+//            count: 10,
+//            filter: {brandid: this.brandDetail.id}
+//          }
+//          this.selectedKind = '全部分类'
 //          this.keyword = ''
-          this.searchLists = []
-          console.log(this.pageParams)
-          this.$store.dispatch('loadBrandComponent', this.pageParams)
+//          this.isChange = true
+//          this.$store.dispatch('loadBrandComponent', this.pageParams)
 //          this.pageCommodity(this.pageParams)
-        }
+//        }
         this.activeType = type
       }
     }

components/mobile/brand/ComponentDetail.vue

@@ -28,7 +28,7 @@
       </div>
     </div>
     <div class="product-store" v-if="activeType == 'store'">
-      <table v-if="storeList.content&&storeList.content.length > 0">
+      <table v-if="searchLists&&searchLists.length > 0">
         <thead>
           <tr>
             <th>商家</th>
@@ -39,7 +39,7 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="store in storeList.content">
+          <tr v-for="store in searchLists">
             <td class="store-name">
               <div>
                 <nuxt-link :to="'/mobile/shop/' + store.storeid">
@@ -88,10 +88,11 @@
       <div v-if="activeType == 'param'">抱歉，暂无参数信息！</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 {
     data () {
       return {
@@ -111,11 +112,22 @@
             ignoreStore: false,
             storeIds: ''
           }
-        }
+        },
+        isSearchingMore: false,
+        searchLists: []
       }
     },
     components: {
-      RemindBox
+      RemindBox,
+      Loading
+    },
+    mounted: function () {
+      let _this = this
+      _this.$nextTick(function () {
+        window.addEventListener('scroll', function () {
+          _this.scroll()
+        }, false)
+      })
     },
     computed: {
       component () {
@@ -140,8 +152,13 @@
             this.UmallExist = true
           }
         }
+        this.searchLists = this.searchLists.concat(storeList.content)
+        this.isSearchingMore = false
         return storeList
       },
+      allPage () {
+        return this.storeList.totalPages
+      },
       colList () {
         return this.$store.state.product.common.collectList.data
       },
@@ -209,6 +226,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.page < this.allPage) {
+          this.getMoreStore()
+        }
+      },
+      getMoreStore: function () {
+        if (!this.isSearchingMore) {
+          this.params.page++
+          this.isSearchingMore = true
+          this.$store.dispatch('loadComponentInformation', this.params)
+        }
+      },
       goAttach: function (url) {
         if (url && url !== '1') {
           window.location.href = url

components/mobile/store/StoreDetail.vue

@@ -27,7 +27,7 @@
         </tr>
         </thead>
         <tbody>
-        <tr v-for="commodity in commodities.content" @click="goProductDetail(commodity.uuid)">
+        <tr v-for="commodity in searchLists" @click="goProductDetail(commodity.uuid)">
           <td class="store-name">
             <div>{{commodity.kindNameCn}}</div>
             <div>{{commodity.brandNameCn}}</div>
@@ -71,20 +71,33 @@
       </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 {
     data () {
       return {
         activeType: 'detail',
         collectResult: '收藏成功',
-        timeoutCount: 0
+        timeoutCount: 0,
+        isSearchingMore: false,
+        searchLists: [],
+        page: 1
       }
     },
     components: {
-      RemindBox
+      RemindBox,
+      Loading
+    },
+    mounted: function () {
+      let _this = this
+      _this.$nextTick(function () {
+        window.addEventListener('scroll', function () {
+          _this.scroll()
+        }, false)
+      })
     },
     filters: {
       currency: function (num) {
@@ -117,13 +130,44 @@
         return this.$store.state.shop.storeInfo.store.data
       },
       commodities () {
-        return this.$store.state.shop.storeInfo.storeCommodity.data
+        let list = this.$store.state.shop.storeInfo.storeCommodity.data
+        this.searchLists = this.searchLists.concat(list.content)
+        this.isSearchingMore = false
+        return list
+      },
+      allPage () {
+        return this.commodities.totalPages
       },
       isFocus () {
         return this.$store.state.shop.storeInfo.focusList.data
       }
     },
     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.activeType === 'product') {
+          this.getMoreCom()
+        }
+      },
+      getMoreCom: function () {
+        if (!this.isSearchingMore) {
+          this.page++
+          this.isSearchingMore = true
+          console.log(this.page)
+          this.pageCommodity({ page: this.page, count: 6 })
+        }
+      },
+      async pageCommodity (pageParams, kindId, keyword) {
+        let params = { storeid: this.$route.params.uuid, origin: 'store', kindUuid: kindId, code: keyword }
+        params.page = pageParams.page
+        params.count = pageParams.count
+        try {
+          let { data } = await this.$http.get('/api/commodity/commodities', { params })
+          this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_SUCCESS', data)
+        } catch (err) {
+          this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_FAILURE', err)
+        }
+      },
       goProductDetail: function (uuid) {
         this.$router.push('/mobile/brand/componentDetail/' + uuid)
       },

pages/mobile/shop/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="shop">
     <div class="shop-top">
-      <p><i class="iconfont icon-dianpu1"></i><span>{{list.totalElements}}</span>家店铺</p>
+      <p><i class="iconfont icon-dianpu1"></i><span>{{list.totalElements || 0}}</span>家店铺</p>
       <span @click="onClick()">{{downName}} <i class="iconfont icon-arrow-down"></i></span>
       <ul class="supdown" v-if="down">
         <li @click="onDown('ORIGINAL_FACTORY-DISTRIBUTION-AGENCY' )" v-show="downName !== '全部'">全部</li>