Feat：县域详情加载优化

pkg_product/views/famousQianxianShop.vue

@@ -349,7 +349,7 @@
               </view>
             </view>
             <view class="v12-px-6" >
-              <u-divider :text="infoArray.length === 0 ? ' ·　暂无资讯　· ' : ' ·　已经到底啦　· '" textPosition="center"></u-divider>
+              <u-divider :text="infoArray.length === 0 ? ' ·　暂无资讯　· ' : ` ·　${getLoadMoreText(infoLoading, infoHasMore, infoArray)}　· `" textPosition="center"></u-divider>
             </view>
           </view>
         </view>
@@ -401,7 +401,7 @@
           v-if="activeIndex === 2"
           class="guide-section"
         >
-          <view v-if="isLoadInfoListSuccess">
+          <view v-if="isLoadGuideListoSuccess">
             <view class="guide-list">
               <view
                 v-for="(item, index) in guideList"
@@ -430,7 +430,7 @@
               class="no-data-loadend"
             /> -->
             <view class="v12-px-6" >
-              <u-divider :text="guideList.length === 0 ? ' ·　暂无攻略　· ' : ' ·　已经到底啦　· '" textPosition="center"></u-divider>
+              <u-divider :text="guideList.length === 0 ? ' ·　暂无攻略　· ' : ` ·　${getLoadMoreText(guideLoading, guideHasMore, guideList)}　· `" textPosition="center"></u-divider>
             </view>
           </view>
           <goo-skeleton v-else />
@@ -533,6 +533,9 @@
                 </view>
               </view>
             </view>
+            <view v-if="industryList.length > 0 || investmentFileList.length > 0" class="load-more-status">
+              {{ getLoadMoreText(industryLoading || investmentLoading, industryHasMore || investmentHasMore, industryList.length ? industryList : investmentFileList) }}
+            </view>
             <!-- <view class="project-wrap">
               <view class="title">
                 <image
@@ -633,6 +636,9 @@
                 </view>
               </view>
             </view>
+            <view v-if="shopList.length > 0" class="load-more-status">
+              {{ getLoadMoreText(shopLoading, shopHasMore, shopList) }}
+            </view>
           </view>
           <view v-if="industryTabIndex === 2">
             <view class="card-wrap">
@@ -698,6 +704,9 @@
                 </view>
               </view>
             </view>
+            <view v-if="jiaLouList.length > 0" class="load-more-status">
+              {{ getLoadMoreText(jiaLouLoading, jiaLouHasMore, jiaLouList) }}
+            </view>
           </view>
           <view v-if="industryTabIndex === 3">
             <view class="card-wrap">
@@ -769,6 +778,9 @@
                 </view>
               </view>
             </view>
+            <view v-if="villageList.length > 0" class="load-more-status">
+              {{ getLoadMoreText(villageLoading, villageHasMore, villageList) }}
+            </view>
           </view>
         </view>
         <!-- 产品 -->
@@ -907,7 +919,6 @@ import {
   postCountyFamousNewsZan,
   postCountyFamousNewsView,
   getCountyFamousIndustry,
-  getCountyFamousIndustryProject,
   getCountyFamousInvestmentFile,
   getCountyFamousVillage,
   getCountyFamousCityDetail,
@@ -958,6 +969,7 @@ export default {
       showShare: false,
       posterUrl: '', // 分享海报
       id: null,
+      pageSize: 10,
       partnerId: null,
       isLike: false, //点赞
       isFavorite: false,
@@ -1006,10 +1018,42 @@ export default {
       countyId: null,
       newsCategoryList: [],
       newsCurrent: 0,
+      newsCategoryInited: false,
+      newsCategoryLoading: false,
       shopList: [],
       shopTypeList: [],
       shopTypeActive: '',
-      detail: {}
+      shopTypeInited: false,
+      detail: {},
+      infoPage: 1,
+      infoHasMore: true,
+      infoLoading: false,
+      infoInited: false,
+      guidePage: 1,
+      guideHasMore: true,
+      guideLoading: false,
+      guideInited: false,
+      industryPage: 1,
+      industryHasMore: true,
+      industryLoading: false,
+      industryInited: false,
+      investmentPage: 1,
+      investmentHasMore: true,
+      investmentLoading: false,
+      investmentInited: false,
+      shopPage: 1,
+      shopHasMore: true,
+      shopLoading: false,
+      shopInited: false,
+      jiaLouPage: 1,
+      jiaLouHasMore: true,
+      jiaLouLoading: false,
+      jiaLouInited: false,
+      villagePage: 1,
+      villageHasMore: true,
+      villageLoading: false,
+      villageInited: false,
+      saleListInited: false
     }
   },
   onShareAppMessage() {
@@ -1027,6 +1071,35 @@ export default {
   onPageScroll(e) {
     this.scrollData = e
   },
+  onReachBottom() {
+    if (this.activeIndex === 3) {
+      this.getInfoReq()
+      return
+    }
+    if (this.activeIndex === 2) {
+      this.getGuideReq()
+      return
+    }
+    if (this.activeIndex !== 0) {
+      return
+    }
+    if (this.industryTabIndex === 0) {
+      this.getIndustryReq()
+      this.getInvestmentFileReq()
+      return
+    }
+    if (this.industryTabIndex === 1) {
+      this.getShopList()
+      return
+    }
+    if (this.industryTabIndex === 2) {
+      this.getJiaLouListReq()
+      return
+    }
+    if (this.industryTabIndex === 3) {
+      this.getVillageListReq()
+    }
+  },
   onLoad(options) {
     const id = options.id || ''
     this.id = id
@@ -1044,29 +1117,77 @@ export default {
     }
     if (this.partnerId) cookie.set('spread', this.partnerId)
     this.getShopDetailReq()
-    this.getInfoReq()
-    this.getGuideReq()
-    // this.initPoster()
     this.getListReq()
-    this.getSaleListReq()
     this.queryGuide('countyFamousIndex')
-    this.getCityNewsCategoryReq()
   },
   methods: {
+    getPageList(data) {
+      if (Array.isArray(data)) {
+        return data
+      }
+      return (data && (data.records || data.list || data.data)) || []
+    },
+    getHasMore(data, list, page) {
+      const pageCount = Number(
+        data && (data.pages || data.totalPage || data.last_page || data.pageCount || 0)
+      )
+      const total = Number(
+        data && (data.total || data.totalCount || data.count || 0)
+      )
+      if (pageCount > 0) {
+        return page < pageCount
+      }
+      if (total > 0) {
+        return page * this.pageSize < total
+      }
+      return list.length >= this.pageSize
+    },
+    getLoadMoreText(loading, hasMore, list) {
+      if (!list.length) return ''
+      if (loading) return '加载中...'
+      if (hasMore) return '上拉加载更多'
+      return '没有更多了'
+    },
+    formatInfoList(list = []) {
+      return list.map(info => {
+        var pt = info.createTime.replace(/-/g, "/")
+        info.year = formatDateTime(pt, 'yyyy')
+        info.monthDay = formatDateTime(pt, 'MM/dd')
+        info.time = formatDateTime(pt, 'HH:mm:ss')
+        info.showMore = false
+        return info
+      })
+    },
+    formatGuideList(list = []) {
+      return list.map((info) => {
+        var pt = info.createTime.replace(/-/g, "/")
+        info.year = formatDateTime(pt, 'yyyy')
+        info.monthDay = formatDateTime(pt, 'MM/dd')
+        info.time = formatDateTime(pt, 'HH:mm:ss')
+        return info
+      })
+    },
     /**
      * 获取县城资讯类别
      */
     getCityNewsCategoryReq() {
-      getCityNewsCategory().then(res => {
+      if (this.newsCategoryInited || this.newsCategoryLoading) {
+        return Promise.resolve()
+      }
+      this.newsCategoryLoading = true
+      return getCityNewsCategory().then(res => {
         if(res.status === 200) {
           this.newsCategoryList = [{name: '全部', id: ''}].concat(res.data || [])
+          this.newsCategoryInited = true
         }
+      }).finally(() => {
+        this.newsCategoryLoading = false
       })
     },
     changeNewsTab(index) {
       if (this.newsCurrent === index) return
       this.newsCurrent = index
-      this.getInfoReq()
+      this.getInfoReq(true)
     },
     formatterTime(time) {
       const now = new Date();
@@ -1229,27 +1350,18 @@ export default {
       } else {
          this.saleActived = e.id
       }
-      
+      this.getVillageListReq(true)
-      getCountyFamousVillage({
-        countyFamousDataId: this.id,
-        categoryId: this.saleActived,
-        page: 1,
-        limit: 9999
-      }).then(res => {
-        const { success, data } = res
-        if (success) {
-          this.villageList = data.records || []
-        }
-      })
     },
     getSaleListReq() {
-      const params = {
+      if (this.saleListInited) {
-        countyFamousDataId: this.id,
+        return Promise.resolve()
-        page: 1,
-        limit: 9999
       }
-      getSaleList(params).then(res => {
+      const params = {
+        countyFamousDataId: this.id
+      }
+      return getSaleList(params).then(res => {
         this.saleList =  [{name: '全部', id: ''}].concat(res.data || [])
+        this.saleListInited = true
       })
     },
     goStore(item) {
@@ -1276,49 +1388,9 @@ export default {
         }
       })
     },
-    getListReq(id) {
+    getListReq() {
-      // getPoster(this.id).then(({data}) => this.posterUrl = data)
+      this.getIndustryReq(true)
-      getCountyFamousIndustry({
+      this.getInvestmentFileReq(true)
-        countyFamousDataId: this.id,
-        page: 1,
-        limit: 9999
-      }).then(res => {
-        const { success, data } = res
-        if (success) {
-          this.industryList = data.records || []
-        }
-      })
-      getCountyFamousIndustryProject({
-        countyFamousDataId: this.id,
-        page: 1,
-        limit: 9999
-      }).then(res => {
-        const { success, data } = res
-        if (success) {
-          this.industryProjectList = data.records || []
-        }
-      })
-      getCountyFamousInvestmentFile({
-        countyFamousDataId: this.id,
-        page: 1,
-        limit: 9999
-      }).then(res => {
-        const { success, data } = res
-        if (success) {
-          this.investmentFileList = data.records || []
-        }
-      })
-      getCountyFamousVillage({
-        countyFamousDataId: this.id,
-        categoryId: id,
-        page: 1,
-        limit: 9999
-      }).then(res => {
-        const { success, data } = res
-        if (success) {
-          this.villageList = data.records || []
-        }
-      })
       getCountyFamousCityDetail(this.id).then(res => {
         const { success, data } = res
         if (success) {
@@ -1405,34 +1477,38 @@ export default {
       })
     },
     // 资讯
-    getInfoReq() {
+    getInfoReq(reset = false) {
       const _this = this
-      if (_this.loading) {
+      if (_this.infoLoading) {
+        return
+      }
+      if (!reset && !_this.infoHasMore) {
         return
       }
       _this.isLoadInfoListSuccess = false
-      _this.loading = true
+      _this.infoLoading = true
+      const page = reset ? 1 : _this.infoPage
+      if (reset) {
+        _this.infoPage = 1
+        _this.infoHasMore = true
         _this.infoArray = []
+      }
       const categoryId = this.newsCategoryList[this.newsCurrent] ? this.newsCategoryList[this.newsCurrent].id : ''
       getCountyFamousCityNews({
-        page: 1,
+        page,
-        limit: 9999,
+        limit: this.pageSize,
         countyFamousDataId: _this.id,
         categoryId: categoryId
       }).then(res => {
         const { data } = res
-        _this.loading = false
+        const list = _this.formatInfoList(_this.getPageList(data))
-        _this.infoArray.push.apply(_this.infoArray, _this.toTop(data.records).map((info) => {
+        const merged = page === 1 ? list : _this.infoArray.concat(list)
-          var pt = info.createTime.replace(/-/g, "/")
+        _this.infoArray = _this.toTop(merged)
-          info.year = formatDateTime(pt, 'yyyy')
+        _this.infoHasMore = _this.getHasMore(data, list, page)
-          info.monthDay = formatDateTime(pt, 'MM/dd')
+        _this.infoPage = page + 1
-          info.time = formatDateTime(pt, 'HH:mm:ss')
+        _this.infoInited = true
-          info.showMore = false
-          return info
-        }))
-        // console.log(this.toTop(_this.infoArray));
       }).finally(() => {
-        _this.loading = false
+        _this.infoLoading = false
         _this.isLoadInfoListSuccess = true
         uni.stopPullDownRefresh()
       })
@@ -1443,30 +1519,35 @@ export default {
       })
     },
     // 攻略
-    getGuideReq() {
+    getGuideReq(reset = false) {
       const _this = this
-      if (_this.loading) {
+      if (_this.guideLoading) {
+        return
+      }
+      if (!reset && !_this.guideHasMore) {
         return
       }
       _this.isLoadGuideListoSuccess = false
-      _this.loading = true
+      _this.guideLoading = true
+      const page = reset ? 1 : _this.guidePage
+      if (reset) {
+        _this.guidePage = 1
+        _this.guideHasMore = true
         _this.guideList = []
+      }
       getCountyFamousCityGuide({
-        page: 1,
+        page,
-        limit: 9999,
+        limit: this.pageSize,
         countyFamousDataId: _this.id
       }).then(res => {
         const { data } = res
-        _this.loading = false
+        const list = _this.formatGuideList(_this.getPageList(data))
-        _this.guideList.push.apply(_this.guideList, data.records.map((info) => {
+        _this.guideList = page === 1 ? list : _this.guideList.concat(list)
-          var pt = info.createTime.replace(/-/g, "/")
+        _this.guideHasMore = _this.getHasMore(data, list, page)
-          info.year = formatDateTime(pt, 'yyyy')
+        _this.guidePage = page + 1
-          info.monthDay = formatDateTime(pt, 'MM/dd')
+        _this.guideInited = true
-          info.time = formatDateTime(pt, 'HH:mm:ss')
-          return info
-        }))
       }).finally(() => {
-        _this.loading = false
+        _this.guideLoading = false
         _this.isLoadGuideListoSuccess = true
         uni.stopPullDownRefresh()
       })
@@ -1478,10 +1559,35 @@ export default {
       // 刷新数据
       switch (this.activeIndex) {
         case 3:
-          this.getInfoReq()
+          this.getCityNewsCategoryReq().finally(() => {
+            if (!this.infoInited) {
+              this.getInfoReq(true)
+            }
+          })
           break
         case 2:
-          this.getGuideReq()
+          if (!this.guideInited) {
+            this.getGuideReq(true)
+          }
+          break
+        case 0:
+          if (this.industryTabIndex === 1) {
+            if (!this.shopTypeInited) {
+              this.getShopTypeList()
+            }
+            if (!this.shopInited) {
+              this.getShopList(true)
+            }
+          }
+          if (this.industryTabIndex === 2 && !this.jiaLouInited) {
+            this.getJiaLouListReq(true)
+          }
+          if (this.industryTabIndex === 3) {
+            this.getSaleListReq()
+            if (!this.villageInited) {
+              this.getVillageListReq(true)
+            }
+          }
           break
         default:
           break
@@ -1726,26 +1832,30 @@ export default {
       if (index === this.industryTabIndex) return
       this.industryTabIndex = index
       if (index === 2) {
-        const params = {
+        if (!this.jiaLouInited) {
-          countyId: this.countyId,
+          this.getJiaLouListReq(true)
-          shopType: 'countyFamous',
-          name: '',
-          page: 1,
-          limit: 9999
         }
-        getJiaLouList(params).then(res => {
-          this.jiaLouList = res.data.records || []
-        })
       }
       if (index === 1) {
         this.shopTypeActive = ''
         if (this.shopTypeList.length === 0) {
           this.getShopTypeList()
         }
-        this.getShopList()
+        if (!this.shopInited) {
+          this.getShopList(true)
+        }
+      }
+      if (index === 3) {
+        this.getSaleListReq()
+        if (!this.villageInited) {
+          this.getVillageListReq(true)
+        }
       }
     },
     getShopTypeList() {
+      if (this.shopTypeInited) {
+        return
+      }
       getCountyFamousHotelType({
         page: 1,
         limit: 9999
@@ -1754,25 +1864,170 @@ export default {
           ? res.data
           : (res.data && (res.data.hotelTypeList || res.data.list || res.data.records)) || []
         this.shopTypeList = [{ name: '全部', id: '' }].concat(listData || [])
+        this.shopTypeInited = true
       })
     },
-    getShopList() {
+    getIndustryReq(reset = false) {
+      if (this.industryLoading) {
+        return
+      }
+      if (!reset && !this.industryHasMore) {
+        return
+      }
+      const page = reset ? 1 : this.industryPage
+      if (reset) {
+        this.industryPage = 1
+        this.industryHasMore = true
+        this.industryList = []
+      }
+      this.industryLoading = true
+      getCountyFamousIndustry({
+        countyFamousDataId: this.id,
+        page,
+        limit: this.pageSize
+      }).then(res => {
+        const { success, data } = res
+        if (success) {
+          const list = this.getPageList(data)
+          this.industryList = page === 1 ? list : this.industryList.concat(list)
+          this.industryHasMore = this.getHasMore(data, list, page)
+          this.industryPage = page + 1
+          this.industryInited = true
+        }
+      }).finally(() => {
+        this.industryLoading = false
+      })
+    },
+    getInvestmentFileReq(reset = false) {
+      if (this.investmentLoading) {
+        return
+      }
+      if (!reset && !this.investmentHasMore) {
+        return
+      }
+      const page = reset ? 1 : this.investmentPage
+      if (reset) {
+        this.investmentPage = 1
+        this.investmentHasMore = true
+        this.investmentFileList = []
+      }
+      this.investmentLoading = true
+      getCountyFamousInvestmentFile({
+        countyFamousDataId: this.id,
+        page,
+        limit: this.pageSize
+      }).then(res => {
+        const { success, data } = res
+        if (success) {
+          const list = this.getPageList(data)
+          this.investmentFileList = page === 1 ? list : this.investmentFileList.concat(list)
+          this.investmentHasMore = this.getHasMore(data, list, page)
+          this.investmentPage = page + 1
+          this.investmentInited = true
+        }
+      }).finally(() => {
+        this.investmentLoading = false
+      })
+    },
+    getJiaLouListReq(reset = false) {
+      if (this.jiaLouLoading || !this.countyId) {
+        return
+      }
+      if (!reset && !this.jiaLouHasMore) {
+        return
+      }
+      const page = reset ? 1 : this.jiaLouPage
+      if (reset) {
+        this.jiaLouPage = 1
+        this.jiaLouHasMore = true
+        this.jiaLouList = []
+      }
+      this.jiaLouLoading = true
+      const params = {
+        countyId: this.countyId,
+        shopType: 'countyFamous',
+        name: '',
+        page,
+        limit: this.pageSize
+      }
+      getJiaLouList(params).then(res => {
+        const list = this.getPageList(res.data)
+        this.jiaLouList = page === 1 ? list : this.jiaLouList.concat(list)
+        this.jiaLouHasMore = this.getHasMore(res.data, list, page)
+        this.jiaLouPage = page + 1
+        this.jiaLouInited = true
+      }).finally(() => {
+        this.jiaLouLoading = false
+      })
+    },
+    getShopList(reset = false) {
+      if (this.shopLoading) {
+        return
+      }
+      if (!reset && !this.shopHasMore) {
+        return
+      }
+      const page = reset ? 1 : this.shopPage
+      if (reset) {
+        this.shopPage = 1
+        this.shopHasMore = true
+        this.shopList = []
+      }
       const params = {
         countyFamousDataId: this.id,
-        page: 1,
+        page,
-        limit: 9999
+        limit: this.pageSize
       }
       if (this.shopTypeActive) {
         params.countyFamousHotelType = this.shopTypeActive
       }
+      this.shopLoading = true
       getCityShopList(params).then(res => {
-        this.shopList = (res.data && (res.data.records || res.data.list)) || []
+        const list = this.getPageList(res.data)
+        this.shopList = page === 1 ? list : this.shopList.concat(list)
+        this.shopHasMore = this.getHasMore(res.data, list, page)
+        this.shopPage = page + 1
+        this.shopInited = true
+      }).finally(() => {
+        this.shopLoading = false
       })
     },
     handleShopType(type) {
       if (this.shopTypeActive === type.id) return
       this.shopTypeActive = type.id
-      this.getShopList()
+      this.getShopList(true)
+    },
+    getVillageListReq(reset = false) {
+      if (this.villageLoading) {
+        return
+      }
+      if (!reset && !this.villageHasMore) {
+        return
+      }
+      const page = reset ? 1 : this.villagePage
+      if (reset) {
+        this.villagePage = 1
+        this.villageHasMore = true
+        this.villageList = []
+      }
+      this.villageLoading = true
+      getCountyFamousVillage({
+        countyFamousDataId: this.id,
+        categoryId: this.saleActived,
+        page,
+        limit: this.pageSize
+      }).then(res => {
+        const { success, data } = res
+        if (success) {
+          const list = this.getPageList(data)
+          this.villageList = page === 1 ? list : this.villageList.concat(list)
+          this.villageHasMore = this.getHasMore(data, list, page)
+          this.villagePage = page + 1
+          this.villageInited = true
+        }
+      }).finally(() => {
+        this.villageLoading = false
+      })
     },
     fileItemClick(file) {
       const url = file.attachment || ''
@@ -1900,6 +2155,12 @@ export default {
     white-space: nowrap;
   }
 }
+.load-more-status{
+  padding: 24rpx 0 8rpx;
+  text-align: center;
+  font-size: 24rpx;
+  color: #999;
+}
 .video-item {
   width: 100%;
   height: 400rpx;