巡检点上传图片修正
This commit is contained in:
346
wuye-manager-uniapp/pageSubPack/ticket/repairMain.vue
Normal file
346
wuye-manager-uniapp/pageSubPack/ticket/repairMain.vue
Normal 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>
|
||||
Reference in New Issue
Block a user