Feat：康养列表加载优化

pkg_product/views/healthFoods.vue

@@ -164,10 +164,13 @@
         <image :src="webUrl + '/orderIcon/微信图片_20241009220552.png'" mode="widthFix"></image>
       </view>
     </view>
+    <view v-if="items.length > 0" class="load-more-status">
+      {{ loading ? '加载中...' : (hasMore ? '上拉加载更多' : '没有更多了') }}
+    </view>
   </view>
 </template>
 <script>
-import { getCategory,getWellnessPlace } from '@/api/health'
+import { getCategory } from '@/api/health'
 import { getJiaLouList } from '@/api/qianxian'
 import { getWellnessTopImage } from '@/api/health'
 export default {
@@ -176,12 +179,15 @@ export default {
       webUrl: this.$VUE_APP_RESOURCES_URL,
       tabs: [],
       items: [],
-      traveItems: [],
       actived: 0,
       cityId: '',
       cityName: '',
       categoryId: null,
-      topImageConfig: {}
+      topImageConfig: {},
+      page: 1,
+      pageSize: 10,
+      loading: false,
+      hasMore: true
     }
   },
   computed: {
@@ -208,11 +214,13 @@ export default {
     getCategory().then(res => {
       this.tabs = res.data
       this.categoryId = res.data[0].id
-      this.getList()
+      this.getList(true)
     })
-    this.getTop()
     this.getTopImage()
   },
+  onReachBottom() {
+    this.getList()
+  },
   onUnload() {
     // uni.navigateBack({
     //   delta: 0
@@ -220,9 +228,10 @@ export default {
   },
   methods: {
     handleTab(index, tab) {
+      if (this.actived === index) return
       this.actived = index
       this.categoryId = tab.id
-      this.getList()
+      this.getList(true)
     },
     toSanctun() {
       uni.redirectTo({
@@ -234,18 +243,52 @@ export default {
         url: '/pkg_product/views/healthFoods?city=' + this.cityId + '&cityName=' + this.cityName
       })
     },
-    getList() {
+    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
+    },
+    getList(reset = false) {
+      if (this.loading) return
+      if (!reset && !this.hasMore) return
+      const page = reset ? 1 : this.page
+      if (reset) {
+        this.page = 1
+        this.hasMore = true
+        this.items = []
+      }
       const params = {
         // countyId: this.cityId,
         goodCityId: this.cityId,
         wellnessPlaceCateId : this.categoryId,
         shopType: 'wellnessCate',
-        page: 1,
+        page,
-        limit: 9999
+        limit: this.pageSize
       }
+      this.loading = true
       getJiaLouList(params).then(res => {
-        // console.log(res);
+        const list = this.getPageList(res.data)
-        this.items = res.data.records
+        this.items = page === 1 ? list : this.items.concat(list)
+        this.hasMore = this.getHasMore(res.data, list, page)
+        this.page = page + 1
+      }).finally(() => {
+        this.loading = false
       })
     },
     search() {
@@ -253,18 +296,6 @@ export default {
         url: '/pkg_product/views/healthSearch?city=' + this.cityId + '&cityName=' + this.cityName
       })
     },
-    getTop() {
-      const params = {
-        goodCityId: this.cityId,
-        shopType: 'wellnessTop',
-        page: 1,
-        limit: 9999
-      }
-      getJiaLouList(params).then(res => {
-        // console.log(res);
-        this.traveItems = res.data.records
-      })
-    },
     toStore(item) {
       if(item.dataType === 'wellnessPlace'){
         this.$yrouter.push({
@@ -436,4 +467,10 @@ export default {
   border-radius: 100rpx;
   padding: 4rpx 20rpx;
 }
+.load-more-status{
+  padding: 24rpx 0 40rpx;
+  text-align: center;
+  font-size: 24rpx;
+  color: #999;
+}
 </style>

pkg_product/views/healthSanctum.vue

@@ -134,24 +134,27 @@
         <image :src="webUrl + '/orderIcon/微信图片_20241009220552.png'" mode="widthFix"></image>
       </view>
     </view>
+    <view v-if="items.length > 0" class="load-more-status">
+      {{ loading ? '加载中...' : (hasMore ? '上拉加载更多' : '没有更多了') }}
+    </view>
   </view>
 </template>
 <script>
-import { getCategory,getWellnessPlace } from '@/api/health'
 import { getJiaLouList } from '@/api/qianxian'
 import { getWellnessTopImage } from '@/api/health'
 export default {
   data() {
     return {
       webUrl: this.$VUE_APP_RESOURCES_URL,
-      tabs: [],
       items: [],
       traveItems: [],
-      actived: 0,
       cityId: '',
       cityName: '',
-      categoryId: null,
+      topImageConfig: {},
-      topImageConfig: {}
+      page: 1,
+      pageSize: 10,
+      loading: false,
+      hasMore: true
     }
   },
   computed: {
@@ -175,41 +178,69 @@ export default {
     
     this.cityId = opts.city
     this.cityName = decodeURIComponent(decodeURIComponent(opts.cityName))
-    getCategory().then(res => {
+    this.getList(true)
-      this.tabs = res.data
-      this.categoryId = res.data[0].id
-      this.getList()
-    })
     this.getTop()
     this.getTopImage()
   },
+  onReachBottom() {
+    this.getList()
+  },
   onUnload() {
     // uni.navigateBack({
     //   delta: 0
     // })
   },
   methods: {
-    handleTab(index, tab) {
-      this.actived = index
-      this.categoryId = tab.id
-      this.getList()
-    },
     toFoods() {
       uni.redirectTo({
         url: '/pkg_product/views/healthFoods?city=' + this.cityId + '&cityName=' + this.cityName
       })
     },
-    getList() {
+    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
+    },
+    getList(reset = false) {
+      if (this.loading) return
+      if (!reset && !this.hasMore) return
+      const page = reset ? 1 : this.page
+      if (reset) {
+        this.page = 1
+        this.hasMore = true
+        this.items = []
+      }
       const params = {
         // countyId: this.cityId,
         goodCityId: this.cityId,
         shopType: 'wellnessTravel',
-        page: 1,
+        page,
-        limit: 9999
+        limit: this.pageSize
       }
+      this.loading = true
       getJiaLouList(params).then(res => {
-        // console.log(res);
+        const list = this.getPageList(res.data)
-        this.items = res.data.records
+        this.items = page === 1 ? list : this.items.concat(list)
+        this.hasMore = this.getHasMore(res.data, list, page)
+        this.page = page + 1
+      }).finally(() => {
+        this.loading = false
       })
     },
     search() {
@@ -222,11 +253,10 @@ export default {
         goodCityId: this.cityId,
         shopType: 'wellnessTop',
         page: 1,
-        limit: 9999
+        limit: 10
       }
       getJiaLouList(params).then(res => {
-        // console.log(res);
+        this.traveItems = this.getPageList(res.data)
-        this.traveItems = res.data.records
       })
     },
     toStore(item) {
@@ -390,4 +420,10 @@ export default {
   border-radius: 6rpx;
   bottom: 5rpx;
 }
+.load-more-status{
+  padding: 24rpx 0 40rpx;
+  text-align: center;
+  font-size: 24rpx;
+  color: #999;
+}
 </style>