Browse Source

feat(cbd/detail,devicePhoto): add pagination and scroll loading for image list

1. 为设备照片页面添加分页参数page和page_size
2. 为图片查看区域添加scroll-view实现下拉加载更多
3. 改造initImageList方法支持加载更多逻辑
4. 新增滚动到底部触发加载更多的处理函数
5. 移除多余的console日志打印
allen 1 tuần trước cách đây
mục cha
commit
c77261ae81
2 tập tin đã thay đổi với 36 bổ sung11 xóa
  1. 34 11
      pages/cbd/detail.vue
  2. 2 0
      pages/cbd/devicePhoto.vue

+ 34 - 11
pages/cbd/detail.vue

@@ -94,14 +94,17 @@
         </view>
       </view>
       <view v-if="activeTab === 'viewImage'">
-        <photoImage
-          :images="imageList"
-          :pestList="pestList"
-          :disableShow="disableShow"
-          @changeTab="changeTab"
-          :currentYear="currentYear"
-          :deviceInfo="deviceInfo"
-        />
+        <!-- 实现下拉加载 -->
+         <scroll-view class="scroll-view" scroll-y style="height: 60vh;" @scrolltolower="handleReachBottom">
+          <photoImage
+            :images="imageList"
+            :pestList="pestList"
+            :disableShow="disableShow"
+            @changeTab="changeTab"
+            :currentYear="currentYear"
+            :deviceInfo="deviceInfo"
+          />
+        </scroll-view>
       </view>
       <view v-if="activeTab === 'deviceData'">
         <DeviceData
@@ -169,6 +172,7 @@ export default {
       deviceType: '',
       location: '',
       total: 0,
+      imgTotal: 0,
       day: [],
       pest: [],
       page:1,
@@ -212,6 +216,14 @@ export default {
     }
   },
   methods: {
+    handleReachBottom(){
+      if (this.activeTab === 'viewImage') {
+        if(this.imageList.length >= this.imgTotal){
+          return
+        }
+        this.initImageList(true);
+      }
+    },
     handleSimClick(){
       // this.showSim = true;
       //`/pages/deviceDetails/weatherStation/${type}?deviceInfo=${encodeURIComponent(JSON.stringify(this.deviceInfo))}`
@@ -335,7 +347,6 @@ export default {
       return `${year}-${month}-${day}`;
     },
     handleChange(e){
-      console.log(e,'eeeeeeee');
       this.startDate = e.startDate;
       this.endDate = e.endDate;
       this.page = 1;
@@ -376,7 +387,13 @@ export default {
       });
       this.deviceStatic = res;
     },
-    async initImageList(){
+    async initImageList(isLoadMore){
+      if(isLoadMore){
+        this.page++;
+      }
+      uni.showLoading({
+        title: '加载中',
+      })
       const res = await this.$myRequest({
         url: '/api/api_gateway?method=forecast.new_cbd.photo_list',
         method: 'POST',
@@ -392,7 +409,13 @@ export default {
         },
       });
       const data = res?.data || [];
-      this.imageList = data
+      uni.hideLoading();
+      this.imgTotal = res?.num || 0;
+      if (isLoadMore) {
+        this.imageList = [...this.imageList, ...data];
+      } else {
+        this.imageList = data;
+      }
     },
     async initPest(){
       const res = await this.$myRequest({

+ 2 - 0
pages/cbd/devicePhoto.vue

@@ -283,6 +283,8 @@ export default {
         data: {
           identify_model:'B',
           cmd:'cbd',
+          page:1,
+          page_size:500,
           time_begin: this.time_begin + ' 00:00:00',
           time_end: this.time_end + ' 23:59:59',
           identify_model:'B',