308 lines
7.1 KiB
Vue
308 lines
7.1 KiB
Vue
<template>
|
|
<view class="repair-detail-container">
|
|
|
|
<!-- 维修流程模块 -->
|
|
<view class="info-section">
|
|
<view class="section-title">维修流程</view>
|
|
<uni-row class="demo-uni-row" :width="nvueWidth">
|
|
<uni-col :span="12">
|
|
<up-steps :current="currentStep" direction="column" space="30" active-color="#007aff">
|
|
<up-steps-item title="待处理" desc="提交报修成功"></up-steps-item>
|
|
<up-steps-item title="已派单" desc="维修师傅已接单"></up-steps-item>
|
|
<up-steps-item title="已完成" desc="维修完成"></up-steps-item>
|
|
</up-steps>
|
|
</uni-col>
|
|
<uni-col :span="12">
|
|
<view class="step-time" v-if="currentStep >= 0">{{timeData.createTime}}</view>
|
|
<view class="step-time" v-if="currentStep >= 1">{{timeData.dispatchTime}}</view>
|
|
<view class="step-time-3" v-if="currentStep >= 2">{{timeData.finishTime}}</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
</view>
|
|
|
|
<!-- 报修信息模块 -->
|
|
<view class="info-section">
|
|
<view class="section-title">报修信息</view>
|
|
<view class="info-item">
|
|
<view class="info-label">报修房屋</view>
|
|
<view class="info-value">{{repairInfo.house}}</view>
|
|
</view>
|
|
<view class="info-item">
|
|
<view class="info-label">维修项目</view>
|
|
<view class="info-value">{{repairInfo.project}}</view>
|
|
</view>
|
|
<view class="info-item">
|
|
<view class="info-label">标题</view>
|
|
<view class="info-value">{{repairInfo.title}}</view>
|
|
</view>
|
|
<view class="info-item-desc">
|
|
<view class="info-label">问题描述</view>
|
|
<view class="info-value multi-line">{{repairInfo.description}}</view>
|
|
</view>
|
|
<view class="info-item">
|
|
<view class="info-label">手机号</view>
|
|
<view class="info-value">{{repairInfo.phone}}</view>
|
|
</view>
|
|
<view class="info-item">
|
|
<view class="info-label">报修时间</view>
|
|
<view class="info-value">{{repairInfo.time}}</view>
|
|
</view>
|
|
<view class="info-item-desc">
|
|
<view class="info-label">问题照片</view>
|
|
<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>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 联系物业按钮 -->
|
|
<!-- <view class="btn-container">
|
|
<button class="contact-btn" @click="contactProperty">联系物业</button>
|
|
</view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { getRepairDetail } from '../api/api.js'
|
|
|
|
const nvueWidth = ref('300')
|
|
|
|
// 报修信息数据
|
|
const repairInfo = ref({
|
|
house: '',
|
|
project: '',
|
|
title: '',
|
|
description: '',
|
|
phone: '',
|
|
time: '',
|
|
images: []
|
|
})
|
|
|
|
// 步骤状态
|
|
const currentStep = ref(0)
|
|
// 三个步骤对应的时间
|
|
const timeData = ref({
|
|
createTime: '', // 待处理/提交时间
|
|
dispatchTime: '', // 已派单时间
|
|
finishTime: '' // 已完成时间
|
|
})
|
|
|
|
|
|
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 mapData = (data) => {
|
|
if (!data) return
|
|
const images = data.problemImageUrl ? data.problemImageUrl.split(',').filter(Boolean) : []
|
|
repairInfo.value = {
|
|
house: data.houseName || '',
|
|
project: data.maintenanceItemName || '',
|
|
title: data.item || '',
|
|
description: (data.problem || '').replace(/\\n/g, '\n'),
|
|
phone: data.phone || '',
|
|
time: data.createTime || '',
|
|
images
|
|
}
|
|
setStep(data.problemStatus)
|
|
// 三个步骤时间赋值
|
|
timeData.value.createTime = data.updateTime || ''
|
|
timeData.value.dispatchTime = data.updateTime || ''
|
|
timeData.value.finishTime = data.updateTime || ''
|
|
}
|
|
|
|
// 获取详情接口
|
|
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>
|
|
.repair-detail-container {
|
|
padding: 16px;
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.process-section,
|
|
.info-section {
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
padding: 13px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.repair-steps-container {
|
|
padding: 20rpx 30rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
margin-bottom: 30rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.step-time {
|
|
height: 54px;
|
|
line-height: 54px;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
.step-time-3{
|
|
height: 38px;
|
|
line-height: 38px;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 12px;
|
|
color: #333;
|
|
}
|
|
|
|
.slot-title {
|
|
position: absolute;
|
|
top: -10px;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.slot-desc {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
padding: 12px 0;
|
|
}
|
|
.info-item-desc {
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.info-section.active {
|
|
color: #007AFF;
|
|
}
|
|
|
|
.info-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.info-label {
|
|
width: 80px;
|
|
color: #222;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.info-value {
|
|
flex: 1;
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.multi-line {
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
line-height: 1.5;
|
|
border: 1px solid #f0f0f0;
|
|
border-radius: 8rpx;
|
|
padding: 30rpx;
|
|
margin: 30rpx 0;
|
|
}
|
|
|
|
.photo-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 4px;
|
|
margin-right: -12px;
|
|
margin-bottom: -12px;
|
|
}
|
|
|
|
.photo-item {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f5f5f5;
|
|
margin-right: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.btn-container {
|
|
padding: 16px;
|
|
}
|
|
|
|
.contact-btn {
|
|
background-color: #007AFF;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 8px;
|
|
height: 48px;
|
|
font-size: 16px;
|
|
width: 100%;
|
|
}
|
|
|
|
.contact-btn::after {
|
|
border: none;
|
|
}
|
|
/* ========== 颜色的代码 ========== */
|
|
/* 激活的步骤标题 + 描述 强制蓝色 */
|
|
:deep(.u-steps-item__content--current .u-text__value--main) {
|
|
color: #007aff !important;
|
|
}
|
|
:deep(.u-steps-item__content--current .u-text__value--tips) {
|
|
color: #007aff !important;
|
|
}
|
|
|
|
</style> |