巡检图片视频，下拉加载

pages/tabBar/xjPage/xjRecord.vue

@@ -1,11 +1,13 @@
 <!-- 巡检记录 -->
 <template>
-  <scroll-view class="content" 
+  <scroll-view
+    class="content"
     scroll-y
     refresher-enabled
     :refresher-triggered="isRefreshing"
     @refresherrefresh="refreshData"
-    @scrolltolower="loadMore">
+    @scrolltolower="loadMore"
+  >
     <view class="conItem" v-for="item in listData" :key="item.id">
       <view class="conItemTitle">
         <image src="/static/img/巡检记录列表里.png" class="titleImg"></image>
@@ -26,14 +28,30 @@
         </view>
         <view class="recordItem">
           <view class="recordItemName">图片/视频</view>
-          <view class="recordItemCon" style="display: flex;flex-wrap: wrap;">
+          <view class="recordItemCon" style="display: flex; flex-wrap: wrap">
-            <view  v-for="(v,index) in item.imageList" :key="v.id" @click="handlePreviewImage(item.imageList,index)">
+            <view
-              <image v-if="v.format == 'image'" :src="v.url" class="recordItemConImg"></image>
+              v-for="(v, index) in item.imageList"
+              :key="v.id"
+              @click="handlePreviewImage(item.imageList, index)"
+            >
+              <image
+                v-if="v.format == 'image/png'"
+                :src="v.url"
+                class="recordItemConImg"
+              ></image>
             </view>
             <view v-for="v in item.imageList" :key="v.id">
-              <view v-if="v.format == 'video'" style="width: 420rpx;height: 240rpx;padding:20rpx;">
+              <view
-                <video id="myVideo" style="width: 100%;height: 100%;" :src="v.url"
+                v-if="v.format == 'video/mp4'"
-                    @error="videoErrorCallback" controls></video>
+                style="width: 420rpx; height: 240rpx; padding: 20rpx"
+              >
+                <video
+                  id="myVideo"
+                  style="width: 100%; height: 100%"
+                  :src="v.url"
+                  @error="videoErrorCallback"
+                  controls
+                ></video>
               </view>
             </view>
           </view>
@@ -44,36 +62,32 @@
         </view>
       </view>
     </view>
-    <view style="text-align: center;" v-if="isLoading">加载中...</view>
+    <view style="text-align: center" v-if="isLoading">加载中...</view>
-    <view v-else class="no-data">
+    <view v-else-if="listData.length <= 0" class="no-data"> 暂无数据~ </view>
-      暂无数据~
-    </view>
   </scroll-view>
 </template>
 
 <script>
-
+import { queryDeptDropdownList } from "@/common/rec";
-import {
+import { getdeptList, myInspection } from "@/common/api.js";
-  queryDeptDropdownList,
-} from "@/common/rec";
-import { getdeptList, myInspection } from '@/common/api.js';
 export default {
-  data () {
+  data() {
     return {
       isLoading: false,
       isRefreshing: false,
-      form:{
+      form: {
-        pageNum:1,
+        pageNum: 1,
         pageSize: 10,
       },
-      listData: []
+      listData: [],
-    }
+      noMore: false,
+    };
   },
-  onLoad () {
+  onLoad() {
-    this.refreshData()
+    this.refreshData();
   },
   methods: {
-    getTree(){
+    getTree() {
       getdeptList().then(async (res) => {
         this.deptOptions = this.handleTree(
           res.data,
@@ -82,7 +96,10 @@ export default {
           "children",
           2
         );
-        this.deptOptions = await this.getListByParentId("1", this.deptOptions[0].children[0].deptId);
+        this.deptOptions = await this.getListByParentId(
+          "1",
+          this.deptOptions[0].children[0].deptId
+        );
         // console.log(this.deptOptions);
       });
     },
@@ -96,63 +113,75 @@ export default {
     },
     // 刷新数据
     refreshData() {
-      console.log('下拉刷新');
+      console.log("下拉刷新");
-      this.isRefreshing = true
+      this.isRefreshing = true;
-      this.list = []
+      this.noMore = false; // 新增
+      this.listData = [];
       this.form.pageNum = 1; // 重置页码到第一页
-      this.fetchData()
+      this.fetchData();
     },
     // 加载更多数据（分页）
     loadMore() {
-      console.log('上拉加载');
+      console.log("上拉加载");
-      if (this.isLoading) return
+      if (this.isLoading || this.noMore) return; // 新增 noMore 判断
       this.isLoading = true;
-      this.form.pageNum++
+      this.form.pageNum++;
-      this.fetchData()
+      this.fetchData();
     },
     // 获取数据的方法，模拟异步请求
     async fetchData() {
-      myInspection(this.form).then((res)=>{
+      myInspection(this.form).then((res) => {
-        const tempList = res.rows
+        const tempList = res.rows;
-        let page = this.form.pageNum
+        let page = this.form.pageNum;
         if (page == 1) {
-          this.listData = tempList
+          this.listData = tempList;
         } else {
           if (tempList.length > 0) {
-            const list = [...this.listData, ...tempList]
+            const list = [...this.listData, ...tempList];
-            this.listData = list
+            this.listData = list;
-          } else {
+          }
-            const page = this.form.pageNum - 1
+        }
-            this.form.pageNum = page
+        // 判断是否还有更多
+        if (tempList.length < this.form.pageSize) {
+          this.noMore = true;
+          if (page !== 1) {
             uni.showToast({
-              content: '已经加载全部'
+              content: "已经加载全部",
-            })
+            });
           }
         }
         this.isLoading = false;
-        this.isRefreshing = false
+        this.isRefreshing = false;
         uni.stopPullDownRefresh();
-      })
+      });
     },
 
-    handlePreviewImage(list,index){
+    handlePreviewImage(list, index) {
-      const filePaths = list.filter(item=> item.format == 'image').map(item=> item.url)
+      const filePaths = list
+        .filter((item) => item.format == "image")
+        .map((item) => item.url);
       uni.previewImage({
         urls: filePaths,
-        current:index,
+        current: index,
         longPressActions: {
-          itemList: ['发送给朋友', '保存图片', '收藏'],
+          itemList: ["发送给朋友", "保存图片", "收藏"],
-          success: function(data) {
+          success: function (data) {
-            console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
+            console.log(
+              "选中了第" +
+                (data.tapIndex + 1) +
+                "个按钮,第" +
+                (data.index + 1) +
+                "张图片"
+            );
           },
-          fail: function(err) {
+          fail: function (err) {
             console.log(err.errMsg);
-          }
+          },
-        }
+        },
       });
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
 <style lang="scss" scoped>