巡检点上传图片修正

This commit is contained in:
Zy
2026-05-09 17:10:50 +08:00
parent e29e1c1346
commit b29e03ab4d
29 changed files with 2836 additions and 1189 deletions

View File

@@ -0,0 +1,346 @@
<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>