巡检点上传图片修正

wuye-manager-uniapp/pageSubPack/inspection/inspection_record.vue

@@ -1,43 +1,55 @@
 <template>
-  <view class="page_container inspection_record_box">
-    <TabsComponents :tabslist="tabslist" @update="handleChangeTabs"></TabsComponents>
-    <view class="record_body">
-      <!-- v-for -->
-      <view class="record_item" v-for="(item, index) in list" :key="index">
-        <view class="time">
-          <view>{{ item.day }}</view>
-        </view>
-        <view class="record_list_box">
-          <!-- v-for -->
-          <view class="record_list_item" v-for="(ite, ind) in item.list" :key="ind">
-            <view class="title flex items-center">
-              <view class="title_name"> {{ ite.title }} </view>
-              <view class="title_status" v-if="ite.status === 0"> 已巡检 </view>
-              <view class="title_status noinspection" v-else> 未巡检 </view>
-            </view>
-            <view class="items">
-              <!-- v-for -->
-              <view class="item" v-for="(it, inde) in ite.items" :key="inde">
-                <text>{{ it }}</text>
+  <!-- 顶部导航栏 -->
+  <view class="page_padding">
+    <view class="inspection_record_box flex-1 flex flex-col">
+      <navBar @clickLeft="navBack" title="巡检记录"></navBar>
+
+      <TabsComponents :tabslist="tabslist" @update="handleChangeTabs"></TabsComponents>
+      <scroll-view
+        class="record_body record-list"
+        scroll-y
+        lower-threshold="60"
+        @scrolltolower="scrolltolower"
+      >
+        <!-- v-for -->
+        <view class="record_item" v-for="(item, index) in list" :key="index">
+          <view class="time">
+            <view>{{ item.day }}</view>
+          </view>
+          <view class="record_list_box">
+            <!-- v-for -->
+            <view class="record_list_item" v-for="(ite, ind) in item.list" :key="ind">
+              <view class="title flex items-center">
+                <view class="title_name"> {{ ite.title }} </view>
+                <view class="title_status" v-if="ite.status === 0"> 已巡检 </view>
+                <view class="title_status noinspection" v-else> 未巡检 </view>
+              </view>
+              <view class="items">
+                <!-- v-for -->
+                <view class="item" v-for="(it, inde) in ite.items" :key="inde">
+                  <text>{{ it }}</text>
+                </view>
+              </view>
+              <view class="time">
+                <text>巡检时间：</text>
+                <text>{{ ite.time }}</text>
+              </view>
+              <view class="time user">
+                <text>巡检人：</text>
+                <text>{{ ite.user }}</text>
               </view>
-            </view>
-            <view class="time">
-              <text>巡检时间：</text>
-              <text>{{ ite.time }}</text>
-            </view>
-            <view class="time user">
-              <text>巡检人：</text>
-              <text>{{ ite.user }}</text>
             </view>
           </view>
         </view>
-      </view>
+      </scroll-view>
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
 import TabsComponents from '@/components/tabs/tabs.vue'
+import navBar from '@/components/navbar/navbar.vue'
+import { ref } from 'vue'
 const tabslist = [
   {
     name: '全部',
@@ -52,13 +64,11 @@ const tabslist = [
     value: 2
   }
 ]
-function handleChangeTabs(val: number) {
-  console.log('选择了：', val)
-}
+function handleChangeTabs(val: number) {}
 // ---------------------------------------------------------------------
 
 // ---------------------------------------------------------------------
-const list = [
+const list = ref([
   {
     day: '10月11日',
     list: [
@@ -77,87 +87,99 @@ const list = [
         user: '湖色'
       }
     ]
-  },
-  {
-    day: '10月12日',
-    list: [
-      {
-        title: '标题2',
-        status: 1,
-        items: ['防火设施检查'],
-        time: '09:00:00-12:00:00',
-        user: '郧西'
-      }
-    ]
-  },
-  {
-    day: '10月12日',
-    list: [
-      {
-        title: '标题2',
-        status: 1,
-        items: ['防火设施检查'],
-        time: '09:00:00-12:00:00',
-        user: '郧西'
-      }
-    ]
-  },
-  {
-    day: '10月12日',
-    list: [
-      {
-        title: '标题2',
-        status: 1,
-        items: ['防火设施检查'],
-        time: '09:00:00-12:00:00',
-        user: '郧西'
-      }
-    ]
-  },
-  {
-    day: '10月12日',
-    list: [
-      {
-        title: '标题2',
-        status: 1,
-        items: ['防火设施检查'],
-        time: '09:00:00-12:00:00',
-        user: '郧西'
-      }
-    ]
-  },
-  {
-    day: '10月12日',
-    list: [
-      {
-        title: '标题2',
-        status: 1,
-        items: ['防火设施检查'],
-        time: '09:00:00-12:00:00',
-        user: '郧西'
-      }
-    ]
-  },
-  {
-    day: '10月12日',
-    list: [
-      {
-        title: '标题2',
-        status: 1,
-        items: ['防火设施检查'],
-        time: '09:00:00-12:00:00',
-        user: '郧西'
-      }
-    ]
   }
-]
+])
+
+const queryParmas = ref({
+  pageNum: 1,
+  pageSize: 5
+})
+const isLoading = ref(false) // 加载锁
+const hasMore = ref(true) // 是否还有更多数据
+const total = ref(21)
+function scrolltolower() {
+  // 必须加这两个判断！
+  if (isLoading.value || !hasMore.value) {
+    return
+  }
+  queryParmas.value.pageNum += 1
+  getlist()
+}
+function getlist() {
+  // 1. 如果正在加载或没有更多数据，直接返回
+  if (isLoading.value || !hasMore.value) return
+  // 2. 开启锁
+  isLoading.value = true
+  uni.showLoading({
+    title: '加载中',
+    mask: true
+  })
+  const { pageNum, pageSize } = queryParmas.value
+
+  const startId = (pageNum - 1) * pageSize + 1
+  const arr = Array.from({ length: pageSize }).map((_, index) => {
+    const realId = startId + index // ✅ 修复 ID 错误
+
+    // ✅ 随机生成 0、1、2
+    const randomStatus = Math.floor(Math.random() * 2)
+    return {
+      day: '10月' + realId + '日',
+      list: [
+        {
+          title: '标题1',
+          status: randomStatus,
+          items: ['设备巡检'],
+          time: '07:00:00-09:00:00',
+          user: '李兴'
+        },
+        {
+          title: '标题3',
+          status: randomStatus,
+          items: ['设备巡检'],
+          time: '07:00:00-09:00:00',
+          user: '湖色'
+        }
+      ]
+    }
+  })
+
+  // 追加数据（正确方式）
+  list.value = [...list.value, ...arr]
+  // 判断是否还有更多
+  hasMore.value = list.value.length < total.value
+  isLoading.value = false
+  uni.hideLoading()
+}
+getlist()
+function resetList() {
+  list.value = []
+  queryParmas.value.pageNum = 1
+  hasMore.value = true
+  getlist()
+}
 // ---------------------------------------------------------------------
+
+// 返回上一页
+const navBack = () => {
+  uni.navigateBack()
+}
 </script>
 
 <style lang="scss" scoped>
 .inspection_record_box {
+  background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 50.71%);
+  padding: 20rpx 40rpx;
+  position: relative;
+  flex: 1;
+  height: 100vh;
+  overflow: hidden;
+  box-sizing: border-box;
   .record_body {
     margin-top: 20rpx;
+    flex: 1;
+    overflow: hidden;
+    overflow-y: auto;
+    box-sizing: border-box;
     .record_item {
       & > .time {
         width: 168rpx;