对接在线报修的新增报修和报修详情接口

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

@@ -13,7 +13,7 @@
 						</up-steps>
 					</uni-col>
 					<uni-col :span="12">
-						<view class="step-time">2026-03-24 09:30:38</view>
+						<view class="step-time">2026-03-26 09:30:38</view>
 						<view class="step-time">2026-03-26 09:30:38</view>
 						<view class="step-time-3">2026-03-28 09:30:38</view>
 					</uni-col>
@@ -49,8 +49,11 @@
 				</view>
 				<view class="info-item-desc">
 					<view class="info-label">问题照片</view>
-					<view class="photo-container">
-						<view class="photo-item" v-for="(item, index) in 2" :key="index">
+					<view class="photo-container" v-if="repairInfo.images && repairInfo.images.length">
+						<image class="photo-item" v-for="(img, index) in repairInfo.images" :key="index" :src="img" mode="aspectFill" @click="previewImage(img)"></image>
+					</view>
+					<view class="photo-container" v-else>
+						<view class="photo-item">
 							<uni-icons type="plusempty" size="24" color="#ccc"></uni-icons>
 						</view>
 					</view>
@@ -65,54 +68,88 @@
 </template>
 
 <script setup>
-	import { ref, computed } from 'vue'
-	import { onLoad } from '@dcloudio/uni-app'
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getRepairDetail } from '../api/api.js'
 
-	const nvueWidth = ref('300')
+const nvueWidth = ref('300')
 
-	// 报修信息数据
-	const repairInfo = ref({
-		house: '桂花园(别墅) 2号楼2层',
-		project: '照明-路灯',
-		title: '1栋楼下道路灯不亮了',
-		description: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
-		phone: '15688888888',
-		time: '2023-08-01 15:30'
-	})
+// 报修信息数据
+const repairInfo = ref({
+  house: '',
+  project: '',
+  title: '',
+  description: '',
+  phone: '',
+  time: '',
+  images: []
+})
 
-	// 步骤状态
-	const currentStep = ref(1)
+// 步骤状态
+const currentStep = ref(0)
 
-	onLoad((option) => {
-		const optionstr = decodeURIComponent(JSON.stringify(option))
-		// console.log('接收参数：', optionstr)
-		
-		// ✅ 正确解析参数
-		const status = optionstr.statusClass
-		
-		// ✅ 正确赋值
-		switch (status) {
-			case 'pending': //待处理 
-				currentStep.value = 0
-				break
-			case 'assignde': //已派单
-				currentStep.value = 1
-				break
-			case 'completed': //已完成
-				currentStep.value = 2
-				break
-			default:
-				currentStep.value = 0
-		}
-	})
+const setStep = (status) => {
+  if (status === '0' || status === 0) currentStep.value = 0
+  else if (status === '1' || status === 1) currentStep.value = 1
+  else if (status === '2' || status === 2) currentStep.value = 2
+  else currentStep.value = 0
+}
 
-	// 联系物业按钮点击事件
-	const contactProperty = () => {
-		uni.showToast({
-			title: '正在联系物业...',
-			icon: 'none'
-		})
-	}
+const mapData = (data) => {
+  if (!data) return
+  const images = data.problemImageUrl ? data.problemImageUrl.split(',').filter(Boolean) : []
+  repairInfo.value = {
+    house: data.houseName || '',
+    project: data.maintenanceItemName || '',
+    title: data.title || data.maintenanceItemName || '',
+    description: data.problem || '',
+    phone: data.phone || '',
+    time: data.orderDate || '',
+    images
+  }
+  setStep(data.problemStatus)
+}
+
+// 获取详情接口
+const fetchDetail = async (id) => {
+  if (!id) {
+    return
+  } 
+  try {
+    const res = await getRepairDetail({ id })
+    
+    if (res.code === 200) {
+      mapData(res.data || {})
+    } else {
+      uni.showToast({ title: res.msg || '获取详情失败', icon: 'none' })
+    }
+  } catch (e) {
+    uni.showToast({ title: '网络异常', icon: 'none' })
+  }
+}
+
+onLoad((option) => {
+  console.log("页面打开，路由参数：", option)
+  
+  // 传了 id 才调用接口
+  if (option?.id) {
+    fetchDetail(option.id) // 调用接口
+  } else {
+    uni.showToast({ title: '参数错误', icon: 'none' })
+  }
+})
+
+// 预览图片
+const previewImage = (url) => {
+  uni.previewImage({ urls: repairInfo.value.images, current: url })
+}
+
+// 联系物业按钮点击事件
+const contactProperty = () => {
+  uni.makePhoneCall({
+    phoneNumber: '物业电话' // 换成真实电话
+  })
+}
 </script>
 
 <style scoped>