347 lines
9.6 KiB
Vue
347 lines
9.6 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">2026/08/01 10:30:35</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.repairProject }} </text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="label"> <text>标题</text> </view>
|
||
<view class="value">
|
||
<text> {{ repairInfo.title }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item descrition">
|
||
<view class="label"> <text>问题描述</text> </view>
|
||
<view class="value">
|
||
<text>{{ repairInfo.descrtion }}</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.time }} </text>
|
||
</view>
|
||
</view>
|
||
<view class="item photobox">
|
||
<view class="label"> <text>问题照片</text> </view>
|
||
<view class="value">
|
||
<image
|
||
v-for="(item, index) in repairInfo.photo"
|
||
:key="index"
|
||
class="images"
|
||
:src="item"
|
||
mode=""
|
||
></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="info" v-if="(currentStep >= 2 && prevPath === 'hall') || currentStep > 2">
|
||
<view class="info_title">
|
||
<text>维修信息</text>
|
||
</view>
|
||
<view class="info_body">
|
||
<view class="item">
|
||
<view class="label"> <text>姓名</text> </view>
|
||
<view class="value"> {{ repairInfo.repairUser.name }} </view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="label"> <text>状态</text> </view>
|
||
<view class="value"> {{ repairInfo.repairUser.status }} </view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="label"> <text>角色</text> </view>
|
||
<view class="value"> {{ repairInfo.repairUser.role }} </view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="label"> <text>手机号</text> </view>
|
||
<view class="value"> {{ repairInfo.repairUser.phone }} </view>
|
||
</view>
|
||
<view class="" v-if="currentStep >= 3">
|
||
<view class="item descrition flex-col">
|
||
<view class="label"> <text>问题描述</text> </view>
|
||
<view class="value"> {{ repairInfo.repairUser.descrtion }} </view>
|
||
</view>
|
||
<view class="item photobox">
|
||
<view class="label"> <text>问题照片</text> </view>
|
||
<view class="value">
|
||
<image
|
||
v-for="(item, index) in repairInfo.repairUser.photo"
|
||
:key="index"
|
||
class="images"
|
||
:src="item"
|
||
mode=""
|
||
></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 } from '@dcloudio/uni-app'
|
||
import Stops from '@/components/stops/stops.vue'
|
||
// --------------------------------------
|
||
/** 维修步骤：0提交 1分配 2维修完成 / 待解决 3记录完成 完成*/
|
||
const currentStep = ref(2)
|
||
|
||
// 步骤数据
|
||
const stepList = ref([
|
||
{ title: '提交维修信息', desc: '提交报修成功', time: '2026/08/01 10:30:26' },
|
||
{ title: '待分配', desc: '等待物业派单中', time: '2026/08/01 10:32:21' },
|
||
{ title: '维修/待解决', desc: '维修人员进行维修', time: '2026/08/01 10:38:07' },
|
||
{ title: '维修完成', desc: '填写维修记录', time: '2026/08/01 10:40:33' }
|
||
])
|
||
// --------------------------------------
|
||
const queryParams = ref({
|
||
id: null
|
||
})
|
||
const Showbtn = ref(false)
|
||
const prevPath = ref('')
|
||
const repairInfo = ref({
|
||
houseName: '桂花园（别墅）2号楼2层',
|
||
repairProject: '照明-路灯',
|
||
title: '1栋楼下道路灯不亮了',
|
||
descrtion: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||
phone: '15688888888',
|
||
time: '2023-08-01 15:30',
|
||
photo: [
|
||
'https://picsum.photos/80',
|
||
'https://picsum.photos/80',
|
||
'https://picsum.photos/80',
|
||
'https://picsum.photos/80'
|
||
],
|
||
|
||
repairUser: {
|
||
name: '盘下但',
|
||
status: '正常',
|
||
role: '维修人员',
|
||
phone: '15688888888',
|
||
descrtion: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||
photo: [
|
||
'https://picsum.photos/80',
|
||
'https://picsum.photos/80',
|
||
'https://picsum.photos/80',
|
||
'https://picsum.photos/80'
|
||
]
|
||
}
|
||
})
|
||
|
||
onLoad(options => {
|
||
queryParams.value.id = options.id
|
||
Showbtn.value = JSON.parse(options.showbtn)
|
||
prevPath.value = options.path
|
||
})
|
||
|
||
// --------------------------------------
|
||
/** 选择维修人员 */
|
||
function handleSelecthouse() {
|
||
uni.navigateTo({
|
||
url: '/pageSubPack/ticket/shareUser',
|
||
events: {
|
||
backData: val => {
|
||
currentStep.value += 1
|
||
//api;
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
/** 跳转到维修完成 */
|
||
function handleRepairCompluted() {
|
||
uni.navigateTo({
|
||
url: '/pageSubPack/ticket/repairCompleted'
|
||
})
|
||
}
|
||
</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: 24rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
.subtime {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
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: 45%;
|
||
}
|
||
.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>
|