对接在线报修接口

property-uniapp-project/pageSubPack/online-repair/onlineRepair.vue

@@ -66,88 +66,103 @@
       <view class="repair-item" v-for="(item, index) in repairList" :key="index">
         <!-- 标题和状态 -->
         <view class="item-header">
-          <text class="item-title">标题标题标题</text>
+          <text class="item-title">{{ item.title || '报修' }}</text>
           <text class="item-status" :class="item.statusClass">{{ item.status }}</text>
         </view>
 
         <!-- 标签 -->
-        <view class="item-tags">
-          <text class="tag">公共报修</text>
-          <text class="tag">路灯</text>
+        <view class="item-tags" v-if="item.repairTypeName || item.category">
+          <text class="tag" v-if="item.repairTypeName">{{ item.repairTypeName }}</text>
+          <text class="tag" v-if="item.category">{{ item.category }}</text>
         </view>
 
         <!-- 内容 -->
         <view class="item-content">
-          {{ item.content }}
+          {{ item.content || item.description || '' }}
         </view>
 
         <!-- 图片占位 -->
-        <view class="item-imgs">
-          <view class="img-placeholder" v-for="(i,index) in item.imageList" :key="index">
-            <!-- <uni-icons type="image" size="20" color="#ccc"></uni-icons> -->
-			<image :src="i.img" style="width: 100%;height: 100%;"></image>
+        <view class="item-imgs" v-if="item.imageList && item.imageList.length">
+          <view class="img-placeholder" v-for="(img, idx) in item.imageList" :key="idx">
+            <image :src="typeof img === 'string' ? img : img.img" style="width: 100%;height: 100%;"></image>
           </view>
         </view>
 
         <!-- 时间和详情 -->
         <view class="item-footer">
-          <text class="item-time">{{ item.time }}</text>
+          <text class="item-time">{{ item.time || item.createTime || '' }}</text>
           <text class="detail-btn" @click="goDetail(item)">报修详情</text>
         </view>
       </view>
+	  <!-- 空状态 -->
+	  <view v-if="repairList.length === 0" class="empty-state">
+	    <uni-icons type="info" size="30" color="#ccc"></uni-icons>
+	    <text class="empty-text">暂无数据</text>
+	  </view>
     </view>
   </view>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, watch } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+import { getQueryRepair } from '../api/api.js';
 
 // 报修类型（public:公共报修，personal:个人报修）
 const activeType = ref('public');
 // 报修状态（pending:待派单，assigned:已派单，completed:已完成）
 const activeStatus = ref('pending');
 
-// 模拟报修列表数据（根据activeStatus过滤）
-const repairList = computed(() => {
-	let statusText = ""
-	let statusClass = ""
-	if(activeStatus.value === 'pending'){
-		statusText = '待派单',
-		statusClass = 'pending'
-	} else if(activeStatus.value === 'assigned'){
-		statusText = '已派单',
-		statusClass = 'assigned'
-	}else{
-		statusText = '已完成',
-		statusClass = 'completed'
+const repairList = ref([]);
+const loading = ref(false);
+
+// 状态映射
+const statusMap = {
+	pending: { text: '待派单', class: 'pending', value: '0' },
+	assigned: { text: '已派单', class: 'assigned', value: '1' },
+	completed: { text: '已完成', class: 'completed', value: '2' }
+};
+
+// 获取报修列表
+const fetchRepairList = async () => {
+	const villageId = uni.getStorageSync('currentVillageId');
+	if (!villageId || villageId === '0') {
+		uni.showToast({ title: '请先选择小区', icon: 'none' });
+		return;
 	}
-	
-  // 原始数据
-  const mockData = [
-    {
-      status: statusText,
-      statusClass: statusClass,
-      content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
-      time: '2023-08-01 10:05:46',
-	  imageList:[
-		  {img:'http://47.104.199.163:9090/images/repair/house1.png'},
-		  {img:'http://47.104.199.163:9090/images/repair/house2.png'},
-		  {img:'http://47.104.199.163:9090/images/repair/house3.png'},
-	  ]
-    },
-	{
-	  status: statusText,
-	  statusClass: statusClass,
-	  content: '西门的门禁不好用了，草坪有好多的草，话题也应高擦了',
-	  time: '2025-08-01 10:05:46',
-	  imageList:[
-	  		  {img:'http://47.104.199.163:9090/images/repair/house1.png'},
-	  		  {img:'http://47.104.199.163:9090/images/repair/house2.png'},
-	  		  {img:'http://47.104.199.163:9090/images/repair/house3.png'},
-	  ]
+
+	loading.value = true;
+	try {
+		const statusInfo = statusMap[activeStatus.value];
+		const params = {
+			villageId,
+			// 报修类型：0-公共报修，1-个人报修（按后端实际字段调整）
+			projectType: activeType.value === 'public' ? '0' : '1',
+			// 状态：0-待派单，1-已派单，2-已完成（按后端实际字段调整）
+			problemStatus: statusInfo.value
+		};
+		const res = await getQueryRepair(params);
+		if (res.code === 200) {
+			// 按后端实际返回结构调整
+			const list = res.data|| [];
+			repairList.value = list.map(item => ({
+				...item,
+				status: statusInfo.text,
+				statusClass: statusInfo.class
+			}));
+		} else {
+			uni.showToast({ title: res.msg || '获取失败', icon: 'none' });
+		}
+	} catch (e) {
+		uni.showToast({ title: '网络异常', icon: 'none' });
+	} finally {
+		loading.value = false;
 	}
-  ];
-  return mockData;
+};
+
+// 监听状态变化自动刷新
+watch(activeStatus, () => {
+	fetchRepairList();
 });
 
 function publicClick(){
@@ -174,7 +189,7 @@ const goBack = () => {
   	})
   }
   uni.removeStorageSync('sourcePage')
- 
+
 }
 // 跳转报修详情
 const goDetail = (item) => {
@@ -183,6 +198,10 @@ const goDetail = (item) => {
     url: `/pageSubPack/online-repair/repairDetail?item = ${itemStr}`
   });
 };
+
+onLoad(() => {
+	fetchRepairList();
+});
 </script>
 
 <style scoped>
@@ -391,6 +410,20 @@ const goDetail = (item) => {
   justify-content: center;
   margin-right: 8px;
 }
+.empty-state {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 100rpx 0;
+}
+		
+.empty-text {
+	font-size: 32rpx;
+	color: #999;
+	margin-top: 20rpx;
+	margin-bottom: 10rpx;
+}
 
 /* 底部时间和详情 */
 .item-footer {