398 lines
11 KiB
Vue
398 lines
11 KiB
Vue
<template>
|
||
<view class="page_padding">
|
||
<view class="repairMain h-full">
|
||
<view class="stop">
|
||
<Stops :steps="stepList" :current="currentStep" color="#4d5dfa">
|
||
<template #item="{ index, status, data }">
|
||
<view
|
||
class="items"
|
||
:class="{
|
||
active: currentStep >= index,
|
||
nobottom: index >= stepList.length - 1
|
||
}"
|
||
>
|
||
<view class="title">
|
||
<text>{{ data.title }}</text>
|
||
</view>
|
||
<view class="flex justify-between">
|
||
<span class="subtitle">{{ data.desc }}</span>
|
||
<span class="subtime" v-if="currentStep == index + 1">{{
|
||
repairInfo.updateTime
|
||
}}</span>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</Stops>
|
||
</view>
|
||
|
||
<view class="info">
|
||
<view class="info_title">
|
||
<text>保修信息</text>
|
||
</view>
|
||
<view class="info_body">
|
||
<view class="item">
|
||
<view class="label"> <text>报修房屋</text> </view>
|
||
<view class="value">
|
||
<text>{{ repairInfo.houseName }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="label"> <text>维修项目</text> </view>
|
||
<view class="value">
|
||
<text>{{ repairInfo.maintenanceItemName }} </text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="label"> <text>标题</text> </view>
|
||
<view class="value">
|
||
<text> {{ repairInfo.item }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item descrition">
|
||
<view class="label"> <text>问题描述</text> </view>
|
||
<view class="value">
|
||
<text>{{ repairInfo.problem }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="label"> <text>手机号</text> </view>
|
||
<view class="value">
|
||
<text> {{ repairInfo.phone }} </text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="label"> <text>报修时间</text> </view>
|
||
<view class="value">
|
||
<text> {{ repairInfo.createTime }} </text>
|
||
</view>
|
||
</view>
|
||
<view class="item photobox">
|
||
<view class="label"> <text>问题照片</text> </view>
|
||
<view class="value" v-if="problemImageUrl.length > 0">
|
||
<image
|
||
v-for="(item, index) in problemImageUrl"
|
||
:key="index"
|
||
class="images"
|
||
:src="item"
|
||
mode=""
|
||
></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view
|
||
class="info"
|
||
v-if="
|
||
(currentStep >= 2 && prevPath === 'hall') || (currentStep >= 2 && prevPath === 'myticket')
|
||
"
|
||
>
|
||
<view class="info_title">
|
||
<text>维修信息</text>
|
||
</view>
|
||
<view class="info_body">
|
||
<view class="item">
|
||
<view class="label"> <text>姓名</text> </view>
|
||
<view class="value"> {{ repairInfo.repairName }} </view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="label"> <text>状态</text> </view>
|
||
<view class="value"> {{ repairInfo.repairStatus === 0 ? '正常' : '异常' }} </view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="label"> <text>角色</text> </view>
|
||
<view class="value"> {{ repairInfo.repairRoleName }} </view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="label"> <text>手机号</text> </view>
|
||
<view class="value"> {{ repairInfo.repairPhone }} </view>
|
||
</view>
|
||
<view class="" v-if="currentStep >= 3">
|
||
<view class="item descrition flex-col">
|
||
<view class="label"> <text>问题描述</text> </view>
|
||
<view class="value" v-if="repairInfo.repairDes && repairInfo.repairDes.trim()">
|
||
{{ repairInfo.repairDes }}
|
||
</view>
|
||
</view>
|
||
<view class="item photobox">
|
||
<view class="label"> <text>问题照片</text> </view>
|
||
<view class="value" v-if="repairImageUrl.length > 0">
|
||
<image
|
||
v-for="(item, index) in repairImageUrl"
|
||
:key="index"
|
||
class="images"
|
||
:src="item"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="action_btn" @tap="handleSelecthouse" v-if="currentStep === 1">
|
||
<text>分配</text>
|
||
</view>
|
||
<view class="action_btn" @tap="handleRepairCompluted" v-if="currentStep === 2 && Showbtn">
|
||
<text>维修完成</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||
import Stops from '@/components/stops/stops.vue'
|
||
import { getTicketMainById } from '@/api/ticket.js'
|
||
// --------------------------------------
|
||
/** 维修步骤：0提交 1分配 2维修完成 / 待解决 3记录完成 完成*/
|
||
const currentStep = ref(2)
|
||
// 步骤数据
|
||
const stepList = ref([
|
||
{ title: '提交维修信息', desc: '等待提交报修' },
|
||
{ title: '待分配', desc: '等待物业派单中' },
|
||
{ title: '待解决', desc: '等待维修人员' },
|
||
{ title: '维修完成', desc: '填写维修记录' }
|
||
])
|
||
// --------------------------------------
|
||
const queryParams = ref({
|
||
id: null
|
||
})
|
||
// 展示 button
|
||
const Showbtn = ref(false)
|
||
// 上一个页面地址
|
||
const prevPath = ref('')
|
||
// 工单信息
|
||
const repairInfo = ref({
|
||
createTime: null,
|
||
houseId: null,
|
||
houseName: '',
|
||
id: '',
|
||
isCheckStr: null,
|
||
item: '',
|
||
maintenanceItemId: '',
|
||
maintenanceItemName: '',
|
||
manageIsCheck: '',
|
||
orderDate: '',
|
||
phone: '',
|
||
problem: '',
|
||
problemImageUrl: '',
|
||
problemStatus: '1',
|
||
projectType: null,
|
||
projectTypeStr: '',
|
||
repairDes: '',
|
||
repairId: '',
|
||
repairImageUrl: '',
|
||
repairIsCheck: '',
|
||
repairName: '',
|
||
residentId: '',
|
||
residentName: '',
|
||
updateTime: ''
|
||
})
|
||
// 报修图片
|
||
const problemImageUrl = ref([])
|
||
// 维修图片
|
||
const repairImageUrl = ref([])
|
||
|
||
onLoad(options => {
|
||
queryParams.value.id = options.id
|
||
Showbtn.value = JSON.parse(options.showbtn)
|
||
prevPath.value = options.path
|
||
})
|
||
onShow(() => {
|
||
getTicketById()
|
||
})
|
||
|
||
function getTicketById() {
|
||
getTicketMainById(queryParams.value.id)
|
||
.then(res => {
|
||
repairInfo.value = res.data
|
||
|
||
problemImageUrl.value = repairInfo.value.problemImageUrl
|
||
? repairInfo.value.problemImageUrl.split(',').filter(item => item)
|
||
: []
|
||
|
||
repairImageUrl.value = repairInfo.value.repairImageUrl
|
||
? repairInfo.value.repairImageUrl.split(',').filter(item => item)
|
||
: []
|
||
handleStop(res.data)
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
})
|
||
}
|
||
|
||
// --------------------------------------
|
||
function handleStop(row) {
|
||
// 0 已提交 1 已分配 2已解决
|
||
let status = row.problemStatus
|
||
// 维修步骤：0提交 1分配 2维修完成 / 待解决 3记录完成 完成
|
||
if (status === '0') {
|
||
currentStep.value = 1
|
||
stepList.value[0].desc = '提交报修成功'
|
||
} else if (status === '1') {
|
||
currentStep.value = 2
|
||
stepList.value[1].title = '已派单'
|
||
stepList.value[1].desc = '物业已派单'
|
||
stepList.value[2].title = '待解决'
|
||
stepList.value[2].desc = `维修人员(${row.repairName})维修中`
|
||
} else if (status === '2') {
|
||
currentStep.value = 4
|
||
stepList.value[2].title = '已解决'
|
||
stepList.value[2].desc = `维修人员(${row.repairName})已解决`
|
||
} else {
|
||
currentStep.value = 0
|
||
}
|
||
}
|
||
/** 选择维修人员 */
|
||
function handleSelecthouse() {
|
||
uni.navigateTo({
|
||
url: '/pageSubPack/ticket/shareUser'
|
||
})
|
||
}
|
||
|
||
/** 跳转到维修完成 */
|
||
function handleRepairCompluted() {
|
||
uni.navigateTo({
|
||
url: '/pageSubPack/ticket/repairCompleted?id=' + repairInfo.value.id
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.repairMain {
|
||
padding: 20rpx 40rpx;
|
||
background-color: #f9f9f9;
|
||
box-sizing: border-box;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
flex: 1;
|
||
position: relative;
|
||
|
||
.stop {
|
||
padding: 30rpx 40rpx;
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
&:deep(.items) {
|
||
height: 120rpx;
|
||
color: #999999;
|
||
margin-bottom: 50rpx;
|
||
|
||
&.nobottom {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
&.active {
|
||
color: #4d5dfa;
|
||
}
|
||
.title {
|
||
margin-bottom: 12rpx;
|
||
font-weight: 550;
|
||
font-size: 28rpx;
|
||
line-height: 44rpx;
|
||
}
|
||
.subtitle {
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
.subtime {
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 报修信息
|
||
.info {
|
||
margin-top: 20rpx;
|
||
padding: 0 42rpx;
|
||
padding-bottom: 34rpx;
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
box-sizing: border-box;
|
||
|
||
.info_title {
|
||
height: 88rpx;
|
||
box-sizing: border-box;
|
||
font-weight: 550;
|
||
font-size: 32rpx;
|
||
color: #222222;
|
||
line-height: 88rpx;
|
||
border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 46rpx;
|
||
&.descrition {
|
||
flex-direction: column;
|
||
margin-bottom: 30rpx;
|
||
.label {
|
||
margin-bottom: 32rpx;
|
||
}
|
||
.value {
|
||
height: 162rpx;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid rgba(0, 0, 0, 0.1);
|
||
box-sizing: border-box;
|
||
padding: 24rpx 30rpx 26rpx 28rpx;
|
||
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
line-height: 36rpx;
|
||
}
|
||
}
|
||
&.photobox {
|
||
flex-direction: column;
|
||
.label {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.value {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
text-align: left;
|
||
.images {
|
||
margin: 10rpx;
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
}
|
||
}
|
||
}
|
||
.label {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #222222;
|
||
line-height: 36rpx;
|
||
width: 35%;
|
||
}
|
||
.value {
|
||
flex: 1;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
line-height: 36rpx;
|
||
text-wrap: wrap;
|
||
}
|
||
}
|
||
}
|
||
|
||
.action_btn {
|
||
width: 670rpx;
|
||
height: 80rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
margin-top: 20rpx;
|
||
background: #4d5dfa;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
}
|
||
}
|
||
</style>
|