巡检点上传图片修正

wuye-manager-uniapp/pageSubPack/ticket/hall.vue

@@ -1,8 +1,9 @@
 <template>
   <view class="report-record-page page_padding">
     <!-- 顶部导航栏 -->
-    <NavBar title="工单大厅"></NavBar>
-    <view class="hall_body flex-1 flex flex-col">
+    <navBar @clickLeft="navBack" title="工单大厅"></navBar>
+    <view class="hall_body flex flex-col">
+      <view class="bgaction"> </view>
       <!-- 状态筛选标签 -->
       <TabsComponents
         :tabslist="statusTabs"
@@ -24,23 +25,31 @@
       </view>
 
       <!-- 上报记录列表 -->
-      <scroll-view
-        class="record-list flex-1"
-        scroll-y
-        :style="{ height: `calc(100vh - ${navHeight + statusTabHeight + typeTabHeight}px)` }"
-      >
+      <scroll-view class="record-list" scroll-y lower-threshold="60" @scrolltolower="scrolltolower">
         <!-- 空状态 -->
-        <view v-if="filteredRecords.length === 0" class="empty-state">
+        <view v-if="reportRecords.length === 0" class="empty-state">
           <uni-icons type="empty" size="60" color="#ccc"></uni-icons>
           <text class="empty-text">暂无上报记录</text>
         </view>
         <!-- 记录卡片 -->
-        <view v-for="record in filteredRecords" :key="record.id" class="record-card">
+        <view
+          v-for="(record, index) in reportRecords"
+          :key="index"
+          class="record-card"
+          @tap="handleMain(record.id)"
+        >
           <!-- 标题 + 状态标签 -->
           <view class="card-header">
             <text class="card-title">{{ record.title }}</text>
-            <view class="status-tag" :class="record.status">
-              {{ getStatusText(record.status) }}
+            <view
+              class="status-tag"
+              :class="{
+                pending: record.repairStatus === 0,
+                processing: record.repairStatus === 1,
+                completed: record.repairStatus === 2
+              }"
+            >
+              {{ getStatusText(record.repairStatus) }}
             </view>
           </view>
 
@@ -55,8 +64,9 @@
             {{ record.content }}
           </view>
           <!-- 工单图片 -->
-          <view class="card-image">
+          <view class="card-image" v-if="record.images.length > 0">
             <image
+              lazy-load
               v-for="(item, index) in record.images"
               :key="index"
               :src="item"
@@ -83,26 +93,23 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, nextTick } from 'vue'
 import { onReady } from '@dcloudio/uni-app'
 import TabsComponents from '@/components/tabs/tabs.vue'
 import NavBar from '@/components/navbar/navbar.vue'
 
 // 导航栏/标签高度（适配不同设备）
-const navHeight = ref(44)
-const statusTabHeight = ref(88)
-const typeTabHeight = ref(88)
 
 // 筛选状态
-const activeStatus = ref('all') // 全部/待分配/待解决/已完成
+const activeStatus = ref('0') // 全部/待分配/待解决/已完成
 const activeType = ref('all') // 全部/公共报修/个人报修
 
 // 状态筛选选项
 const statusTabs = ref([
-  { label: '全部', value: 'all' },
-  { label: '待分配', value: 'pending' },
-  { label: '待解决', value: 'processing' },
-  { label: '已完成', value: 'completed' }
+  { label: '全部', value: 0 },
+  { label: '待分配', value: 1 },
+  { label: '待解决', value: 2 },
+  { label: '已完成', value: 3 }
 ])
 
 // 类型筛选选项
@@ -113,97 +120,105 @@ const typeTabs = ref([
 ])
 
 // 模拟上报记录数据（实际项目替换为接口请求）
-const reportRecords = ref([
-  {
-    id: 1,
-    title: '标题巴拉巴拉巴拉',
-    status: 'pending', // pending/processing/completed
-    reportType: '公共报修',
-    category: '路灯',
-    content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
-    createTime: '2026-08-01 10:05:46',
-    repairman: '',
-    images: [
-      'https://picsum.photos/93',
-      'https://picsum.photos/93',
-      'https://picsum.photos/93',
-      'https://picsum.photos/93',
-      'https://picsum.photos/93'
-    ],
-    repairStatus: 0 // 0 待分配，1待解决 2已完成
-  },
-  {
-    id: 2,
-    title: '标题巴拉巴拉巴拉',
-    status: 'processing',
-    reportType: '公共报修',
-    category: '路灯',
-    content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
-    createTime: '2026-08-01 10:05:46',
-    repairman: '张三',
-    images: ['https://picsum.photos/93', 'https://picsum.photos/93', 'https://picsum.photos/93'],
-    repairStatus: 1 // 0 待分配，1待解决 2已完成
-  },
-  {
-    id: 3,
-    title: '标题巴拉巴拉巴拉',
-    status: 'completed',
-    reportType: '公共报修',
-    category: '路灯',
-    content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
-    createTime: '2026-08-01 10:05:46',
-    images: ['https://picsum.photos/93', 'https://picsum.photos/93', 'https://picsum.photos/93'],
-    repairman: '张三',
-    repairStatus: 2 // 0 待分配，1待解决 2已完成
-  }
-])
+const reportRecords = ref([])
 
-// 筛选后的记录
-const filteredRecords = computed(() => {
-  return reportRecords.value.filter(record => {
-    // 状态筛选
-    const statusMatch = activeStatus.value === 'all' || record.status === activeStatus.value
-    // 类型筛选
-    const typeMatch =
-      activeType.value === 'all' ||
-      record.reportType === typeTabs.value.find(item => item.value === activeType.value)?.label
-    return statusMatch && typeMatch
-  })
+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() * 3)
+    return {
+      id: realId,
+      title: '标题巴拉巴拉巴拉' + startId + 1,
+      status: 'completed',
+      reportType: '公共报修',
+      category: '路灯',
+      content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
+      createTime: '2026-08-01 10:05:46',
+      images: ['https://picsum.photos/93', 'https://picsum.photos/93', 'https://picsum.photos/93'],
+      repairman: '张三',
+      repairStatus: randomStatus // 0 待分配，1待解决 2已完成
+    }
+  })
+
+  // 追加数据（正确方式）
+  reportRecords.value = [...reportRecords.value, ...arr]
+  // 判断是否还有更多
+  hasMore.value = reportRecords.value.length < total.value
+  isLoading.value = false
+  uni.hideLoading()
+}
+getlist()
+function resetList() {
+  reportRecords.value = []
+  queryParmas.value.pageNum = 1
+  hasMore.value = true
+  getlist()
+}
 // 切换状态（全部/待分配/待解决/已完成）筛选
 const switchStatus = value => {
   activeStatus.value = value
+  resetList()
 }
 
 // 切换类型（公共/个人）筛选
 const switchType = value => {
   activeType.value = value
+  resetList()
 }
 
+const statusMap = ['待分配', '待解决', '已完成']
 // 获取状态文本
 const getStatusText = status => {
-  const statusMap = {
-    pending: '待分配',
-    processing: '待解决',
-    completed: '已完成'
-  }
   return statusMap[status] || ''
 }
-
-// 页面渲染完成后适配高度
-onReady(() => {
-  // 可根据实际设备调整高度
-  uni.getSystemInfo({
-    success: res => {
-      if (res.platform === 'ios') {
-        navHeight.value = 44
-      } else {
-        navHeight.value = 48
-      }
+// 返回上一页
+const navBack = () => {
+  uni.navigateBack()
+}
+/*  0 待分配，1待解决 2已完成*/
+function handleMain(id) {
+  const find = reportRecords.value.find(item => item.id === id)
+  if (find) {
+    const status = find.repairStatus
+    if (status === 2) {
+      uni.navigateTo({
+        url: `/pageSubPack/ticket/repairMain?id=${id}&showbtn=${false}&path=hall`
+      })
+    } else {
+      uni.navigateTo({
+        url: `/pageSubPack/ticket/repairMain?id=${id}&showbtn=${false}&path=hall`
+      })
     }
-  })
-})
+  }
+}
 
 /* 预览图片 */
 function handlePrivew(imgs) {
@@ -219,18 +234,25 @@ function handlePrivew(imgs) {
 </script>
 
 <style scoped>
-.report-record-page {
+.bgaction {
+  position: absolute;
+  right: 0;
+  top: 20%;
   width: 100%;
-  min-height: 100vh;
-  max-height: 100vh;
-  overflow: hidden;
-  box-sizing: border-box;
-  background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 50.71%);
+  height: 100%;
+  z-index: 0;
+  background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 25%);
+}
+.report-record-page {
+  height: 100vh;
+  background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 25.71%);
 }
 
 .hall_body {
+  flex: 1;
   padding: 0 40rpx;
   overflow: hidden;
+  position: relative;
 }
 /* 状态筛选标签 */
 .status-tabs {
@@ -241,36 +263,6 @@ function handlePrivew(imgs) {
   align-items: center;
 }
 
-.status-tab-item {
-  /* flex: 1; */
-  display: flex;
-  justify-content: flex-start;
-  margin-right: 60rpx;
-  text-align: left;
-  font-size: 32rpx;
-  color: #666;
-  height: 100%;
-  line-height: 88rpx;
-  position: relative;
-}
-
-.status-tab-item.active {
-  color: #4d5dfa;
-  font-weight: 500;
-}
-
-.status-tab-item.active::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 80rpx;
-  height: 8rpx;
-  background: linear-gradient(to bottom, #4d5dfa, #bac0fa);
-  border-radius: 6rpx;
-}
-
 /* 类型筛选标签 */
 .type-tabs {
   display: flex;
@@ -304,6 +296,8 @@ function handlePrivew(imgs) {
 .record-list {
   box-sizing: border-box;
   padding-bottom: 40rpx;
+  overflow-y: auto;
+  flex: 1;
 }
 
 /* 空状态 */