对接上报记录、bannar

wuye-manager-uniapp/pageSubPack/report-record/report-record.vue

@@ -41,56 +41,68 @@
       scroll-y
       :style="{ height: `calc(100vh - ${navHeight + statusTabHeight + typeTabHeight}px)` }"
     >
-      <!-- 空状态 -->
-      <view v-if="filteredRecords.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"
+        v-for="record in reportRecords"
         :key="record.id"
         class="record-card"
       >
         <!-- 标题 + 状态标签 -->
         <view class="card-header">
-          <text class="card-title">{{ record.title }}</text>
-          <view class="status-tag" :class="record.status">
-            {{ getStatusText(record.status) }}
+          <text class="card-title">{{ record.item }}</text>
+          <view class="status-tag" :class="getStatusClass(record.problemStatus)">
+            {{ getStatusText(record.problemStatus) }}
           </view>
         </view>
 
         <!-- 类型标签 -->
         <view class="tag-group">
-          <view class="tag-item">{{ record.reportType }}</view>
-          <view class="tag-item">{{ record.category }}</view>
+          <view class="tag-item">{{ record.projectTypeStr || '无 ' }}</view>
+          <view class="tag-item">{{ record.maintenanceItemName || '无'}}</view>
         </view>
 
         <!-- 内容 -->
         <view class="card-content">
-          {{ record.content }}
+          {{ record.problem }}
         </view>
 
         <!-- 底部信息 -->
         <view class="card-footer">
           <text class="create-time">{{ record.createTime }}</text>
-          <text v-if="record.repairman" class="repairman">维修师傅：{{ record.repairman }}</text>
+          <text v-if="record.repairName" class="repairman">维修师傅：{{ record.repairName }}</text>
         </view>
       </view>
+
+      <!-- 加载提示 + 没有更多数据 -->
+      <view class="load-more" v-if="reportRecords.length > 0">
+        <text v-if="loading">加载中...</text>
+        <text v-else-if="noMore">没有更多数据了</text>
+      </view>
+
+      <!-- 空数据 -->
+      <view class="empty" v-if="reportRecords.length === 0 && !loading">
+        暂无上报记录
+      </view>
     </scroll-view>
   </view>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
-import {onReady} from "@dcloudio/uni-app"
+import { ref } from 'vue'
+import {onReady, onReachBottom, onPullDownRefresh,onShow} from "@dcloudio/uni-app"
+import {getMyOrderList} from '../../api/api.js'
 
 // 导航栏/标签高度（适配不同设备）
 const navHeight = ref(44)
 const statusTabHeight = ref(88)
 const typeTabHeight = ref(88)
-
+// 分页
+const pageNum = ref(1)        // 当前页
+const pageSize = ref(5)      // 每页条数
+const total = ref(0)          // 总条数
+const loading = ref(false)    // 加载状态
+const noMore = ref(false)     // 是否没有更多
 // 筛选状态
 const activeStatus = ref('all') // 全部/待分配/待解决/已完成
 const activeType = ref('all')   // 全部/公共报修/个人报修
@@ -98,71 +110,95 @@ const activeType = ref('all')   // 全部/公共报修/个人报修
 // 状态筛选选项
 const statusTabs = ref([
   { label: '全部', value: 'all' },
-  { label: '待分配', value: 'pending' },
-  { label: '待解决', value: 'processing' },
-  { label: '已完成', value: 'completed' }
+  // { label: '待分配', value: 'pending' },
+  { label: '待解决', value: '1' },
+  { label: '已完成', value: '2' }
 ])
 
 // 类型筛选选项
 const typeTabs = ref([
   { label: '全部', value: 'all' },
-  { label: '公共报修', value: 'public' },
-  { label: '个人报修', value: 'private' }
+  { label: '公共报修', value: '0' },
+  { label: '个人报修', value: '1' }
 ])
 
-// 模拟上报记录数据（实际项目替换为接口请求）
-const reportRecords = ref([
-  {
-    id: 1,
-    title: '标题巴拉巴拉巴拉',
-    status: 'pending', // pending/processing/completed
-    reportType: '公共报修',
-    category: '路灯',
-    content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
-    createTime: '2026-08-01 10:05:46',
-    repairman: ''
-  },
-  {
-    id: 2,
-    title: '标题巴拉巴拉巴拉',
-    status: 'processing',
-    reportType: '公共报修',
-    category: '路灯',
-    content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
-    createTime: '2026-08-01 10:05:46',
-    repairman: '张三'
-  },
-  {
-    id: 3,
-    title: '标题巴拉巴拉巴拉',
-    status: 'completed',
-    reportType: '公共报修',
-    category: '路灯',
-    content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
-    createTime: '2026-08-01 10:05:46',
-    repairman: '张三'
+// 上报记录数据
+const reportRecords = ref([])
+
+// 获取列表数据
+const getReportList = (isRefresh = false) => {
+  // 防止重复请求
+  if (loading.value || noMore.value) return
+
+  loading.value = true
+  const params = {
+    pageSize: pageSize.value,
+    pageNum: pageNum.value
   }
-])
+  if (activeType.value !== 'all') {
+    params.itemType = activeType.value
+  }
+  if (activeStatus.value !== 'all') {
+    params.problemStatus = activeStatus.value
+  }
+  getMyOrderList(params).then(res => {
+    if (res.code === 200) {
+      total.value = res.total || 0
+      const data = res.rows || []
 
-// 筛选后的记录
-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
+      // 第一页：覆盖，分页：追加
+      if (pageNum.value === 1) {
+        reportRecords.value = data
+      } else {
+        reportRecords.value = [...reportRecords.value, ...data]
+      }
+
+      // 判断是否还有更多
+      noMore.value = reportRecords.value.length >= total.value
+    }
+  }).catch(() => {
+    uni.showToast({ title: '加载失败', icon: 'none' })
+  }).finally(() => {
+    loading.value = false
+    if (isRefresh) {
+      uni.stopPullDownRefresh()
+    }
   })
+}
+// 上拉加载更多
+onReachBottom(() => {
+  if (noMore.value || loading.value) return
+  pageNum.value++
+  getReportList()
 })
 
-// 切换状态（全部/待分配/待解决/已完成）筛选
+// 下拉刷新
+onPullDownRefresh(() => {
+  pageNum.value = 1
+  noMore.value = false
+  getReportList(true)
+})
+
+// 筛选/分页重置后重新拉数据
+const reloadList = () => {
+  pageNum.value = 1
+  noMore.value = false
+  reportRecords.value = []
+  getReportList()
+}
+
+// 切换状态（全部/待解决/已完成）筛选
 const switchStatus = (value) => {
+  if (activeStatus.value === value) return
   activeStatus.value = value
+  reloadList()
 }
 
 // 切换类型（公共/个人）筛选
 const switchType = (value) => {
+  if (activeType.value === value) return
   activeType.value = value
+  reloadList()
 }
 
 // 返回上一页
@@ -175,12 +211,25 @@ const navBack = () => {
 // 获取状态文本
 const getStatusText = (status) => {
   const statusMap = {
-    pending: '待分配',
-    processing: '待解决',
-    completed: '已完成'
+      // "pending": '已分配',
+    "1": '待解决',
+    '2': '已完成'
   }
   return statusMap[status] || ''
 }
+// 获取状态标签样式类名
+const getStatusClass = (status) => {
+  const classMap = {
+    '1': 'processing',
+    '2': 'completed'
+  }
+  return classMap[status] || ''
+}
+onShow(() => {
+  pageNum.value = 1
+  noMore.value = false
+  getReportList()
+})
 
 // 页面渲染完成后适配高度
 onReady(() => {
@@ -278,22 +327,6 @@ onReady(() => {
   box-sizing: border-box;
 }
 
-/* 空状态 */
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 100rpx 0;
-  color: #ccc;
-}
-
-.empty-text {
-  font-size: 32rpx;
-  color: #999;
-  margin-top: 20rpx;
-}
-
 /* 记录卡片 */
 .record-card {
   background-color: #fff;
@@ -373,4 +406,17 @@ onReady(() => {
 .repairman {
   color: #999;
 }
+.load-more {
+  text-align: center;
+  padding: 30rpx;
+  color: #999;
+  font-size: 26rpx;
+}
+
+.empty {
+  text-align: center;
+  padding: 100rpx 0;
+  color: #999;
+  font-size: 28rpx;
+}
 </style>