工单分配，维修人员，报修详情

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

@@ -7,6 +7,7 @@
       <!-- 状态筛选标签 -->
       <TabsComponents
         :tabslist="statusTabs"
+        :activeValue="activeStatus"
         :options="{ label: 'label', value: 'value' }"
         @update="switchStatus"
       ></TabsComponents>
@@ -40,49 +41,50 @@
         >
           <!-- 标题 + 状态标签 -->
           <view class="card-header">
-            <text class="card-title">{{ record.title }}</text>
+            <text class="card-title">{{ record.item }}</text>
             <view
               class="status-tag"
               :class="{
-                pending: record.repairStatus === 0,
-                processing: record.repairStatus === 1,
-                completed: record.repairStatus === 2
+                pending: record.problemStatus === statusMap.pending,
+                processing: record.problemStatus === statusMap.processing,
+                completed: record.problemStatus === statusMap.completed
               }"
             >
-              {{ getStatusText(record.repairStatus) }}
+              {{ 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-group" v-if="record.maintenanceItemName || record.projectTypeStr">
+            <view class="tag-item" v-if="record.projectTypeStr">{{ record.projectTypeStr }}</view>
+            <view class="tag-item" v-if="record.maintenanceItemName">{{
+              record.maintenanceItemName
+            }}</view>
           </view>
 
           <!-- 内容 -->
           <view class="card-content">
-            {{ record.content }}
+            {{ record.problem }}
           </view>
           <!-- 工单图片 -->
-          <view class="card-image" v-if="record.images.length > 0">
+          <view class="card-image" v-if="record.repairImageUrlList.length > 0">
             <image
               lazy-load
-              v-for="(item, index) in record.images"
+              v-for="(item, index) in record.repairImageUrlList"
               :key="index"
               :src="item"
               class="images"
               mode="scaleToFill"
-              @tap="handlePrivew(record.images)"
             ></image>
           </view>
 
           <!-- 底部信息 -->
           <view class="card-footer">
             <text class="create-time">{{ record.createTime }}</text>
-            <text v-if="record.repairStatus === 1" class="repairman"
-              >维修师傅：{{ record.repairman }}</text
+            <text v-if="record.problemStatus === statusMap.processing" class="repairman"
+              >维修师傅：{{ record.repairName }}</text
             >
-            <view class="share" v-if="record.repairStatus === 0">
+            <view class="share" v-if="record.problemStatus === statusMap.pending">
               <text>分配</text>
             </view>
           </view>
@@ -94,41 +96,44 @@
 
 <script setup>
 import { ref, computed, nextTick } from 'vue'
-import { onReady } from '@dcloudio/uni-app'
+import { onReady, onShow } from '@dcloudio/uni-app'
 import TabsComponents from '@/components/tabs/tabs.vue'
 import NavBar from '@/components/navbar/navbar.vue'
-
+import { getTicketHallList } from '@/api/ticket.js'
 // 导航栏/标签高度（适配不同设备）
 
 // 筛选状态
-const activeStatus = ref('0') // 全部/待分配/待解决/已完成
-const activeType = ref('all') // 全部/公共报修/个人报修
+const activeStatus = ref(-1) // 全部/待分配/待解决/已完成
+const activeType = ref(-1) // 全部/公共报修/个人报修
 
+// 0 已提交 1已分配 2维修完成
 // 状态筛选选项
 const statusTabs = ref([
-  { label: '全部', value: 0 },
-  { label: '待分配', value: 1 },
-  { label: '待解决', value: 2 },
-  { label: '已完成', value: 3 }
+  { label: '全部', value: -1 },
+  { label: '待分配', value: 0 },
+  { label: '待解决', value: 1 },
+  { label: '已完成', value: 2 }
 ])
 
 // 类型筛选选项
 const typeTabs = ref([
-  { label: '全部', value: 'all' },
-  { label: '公共报修', value: 'public' },
-  { label: '个人报修', value: 'private' }
+  { label: '全部', value: -1 },
+  { label: '公共报修', value: 0 },
+  { label: '个人报修', value: 1 }
 ])
 
 // 模拟上报记录数据（实际项目替换为接口请求）
 const reportRecords = ref([])
-
 const queryParmas = ref({
   pageNum: 1,
-  pageSize: 5
+  pageSize: 5,
+  itemType: undefined, // -1 全部/ 0 公共报修/ 1 个人报修
+  problemStatus: undefined // 0 已提交 1已分配 2维修完成
 })
 const isLoading = ref(false) // 加载锁
 const hasMore = ref(true) // 是否还有更多数据
-const total = ref(21)
+const total = ref(0)
+
 function scrolltolower() {
   // 必须加这两个判断！
   if (isLoading.value || !hasMore.value) {
@@ -137,68 +142,85 @@ function scrolltolower() {
   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()
+  getTicketHallList(queryParmas.value)
+    .then(res => {
+      reportRecords.value = [...reportRecords.value, ...res.rows]
+      reportRecords.value.forEach(item => {
+        item.repairImageUrlList = item.repairImageUrl
+          ? item.repairImageUrl.split(',').filter(item => item)
+          : []
+      })
+      total.value = res.total
+      hasMore.value = reportRecords.value.length < total.value
+    })
+    .catch(err => {
+      uni.showToast({
+        icon: 'error',
+        title: '网络错误'
+      })
+    })
+    .finally(() => {
+      isLoading.value = false
+      uni.hideLoading()
+    })
 }
-getlist()
+
+onShow(() => {
+  resetList()
+})
+
 function resetList() {
   reportRecords.value = []
   queryParmas.value.pageNum = 1
+  queryParmas.value.pageSize = 5
   hasMore.value = true
   getlist()
 }
+
 // 切换状态（全部/待分配/待解决/已完成）筛选
 const switchStatus = value => {
   activeStatus.value = value
+  if (value === -1) {
+    queryParmas.value.problemStatus = undefined
+  } else {
+    queryParmas.value.problemStatus = value
+  }
   resetList()
 }
 
 // 切换类型（公共/个人）筛选
 const switchType = value => {
   activeType.value = value
+  if (value === -1) {
+    queryParmas.value.itemType = undefined
+  } else {
+    queryParmas.value.itemType = value
+  }
   resetList()
 }
 
-const statusMap = ['待分配', '待解决', '已完成']
+const statusMap = {
+  已提交: '待分配',
+  已分配: '待解决',
+  已完成: '已完成',
+
+  pending: '已提交',
+  processing: '已分配',
+  completed: '已完成'
+}
 // 获取状态文本
 const getStatusText = status => {
   return statusMap[status] || ''
 }
+
 // 返回上一页
 const navBack = () => {
   uni.navigateBack()
@@ -334,10 +356,11 @@ function handlePrivew(imgs) {
 
 .card-title {
   margin-right: 20rpx;
-  font-weight: 450;
-  font-size: 32rpx;
+
+  font-weight: 400;
   color: #222222;
   line-height: 40rpx;
+  font-size: 32rpx;
 }
 
 /* 状态标签 */
@@ -389,11 +412,11 @@ function handlePrivew(imgs) {
 /* 内容 */
 .card-content {
   margin-bottom: 20rpx;
-  font-weight: 450;
+  letter-spacing: 2rpx;
+  font-weight: 400;
   font-size: 28rpx;
   color: #666666;
   line-height: 40rpx;
-  letter-spacing: 2rpx;
 }
 /* 图片  */
 .card-image {
@@ -417,6 +440,12 @@ function handlePrivew(imgs) {
   font-size: 28rpx;
   color: #999;
 }
+.create-time {
+  font-weight: 400;
+  font-size: 28rpx;
+  color: #999999;
+  line-height: 40rpx;
+}
 .share {
   width: 127rpx;
   height: 44rpx;
@@ -431,6 +460,9 @@ function handlePrivew(imgs) {
 }
 
 .repairman {
-  color: #999;
+  font-weight: 400;
+  font-size: 28rpx;
+  color: #999999;
+  line-height: 40rpx;
 }
 </style>