hz-zhhq-app/pages/malfunc-repair/repair-details-cl.vue

281 lines
6.7 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="container">
<view class="details">
<view class="detail_msg">
<view class="info-item status">
<text class="label">报修状态 </text>
<text v-if="item.repair_status ==0" class="infoSpan" >未受理</text><!-- statusred -->
<text v-if="item.repair_status ==1" class="infoSpan" style="color: #ff9000;">维修中</text>
<text v-if="item.repair_status ==2" style="color: #00CE47;">已维修</text>
</view>
<!-- <view class="info-item">
<text class="label">部门: </text>
<text class="infoSpan">{{item.repair_dept_name}}</text>
</view> -->
<view class="info-item">
<text class="label">报修人: </text>
<text class="infoSpan">{{item.repair_person_name}}</text>
</view>
<view class="info-item">
<text class="label">联系方式: </text>
<text class="infoSpan">{{item.repair_person_phone}}</text>
</view>
<view class="info-item">
<text class="label">报修项目: </text>
<text class="infoSpan">{{ item.repair_option_name }}</text>
</view>
<view v-if="item.repair_option_sub_name" class="info-item">
<text class="label">问题小项: </text>
<text class="infoSpan">{{ item.repair_option_sub_name }}</text>
</view>
<view class="info-item">
<text class="label">报修位置: </text>
<text class="infoSpan">{{item.repair_place+" "+(item.repair_floor||'')+" "+(item.repair_room_no||'')}}</text>
</view>
<view v-if="item.fault_detail" class="info-item">
<text class="label">报修描述: </text>
<text class="infoSpan">{{item.fault_detail}}</text>
</view>
<view class="info-item">
<text class="label">报修时间: </text>
<text class="infoSpan">{{item.repair_time}}</text>
</view>
<view class="img-box" >
<image v-for="(itemImg,imgIndex) in item.pictures" :key="imgIndex" :src="itemImg" mode=""></image>
</view>
</view>
</view>
<view class="details" v-if="item.accept_date">
<view class="detail_msg">
<view v-if="item.accept_date" class="info-item" @click="details(item)">
<text class="label">受理时间: </text>
<text class="infoSpan">{{ formatDate(item.accept_date,'dateTime')}}</text>
</view>
<view v-if="item.finish_date" class="info-item" @click="details(item)">
<text class="label">处理时间:</text>
<text class="infoSpan">{{ formatDate(item.finish_date,'dateTime')}}</text>
</view>
<view class="info-item" v-if="item.person_id">
<text class="label">处理人: </text>
<text class="infoSpan">{{item.person_name +" "+item.person_mobile}}</text>
</view>
</view>
</view>
<view style="clear: both;"></view>
<view class="occupied"></view>
<view v-if="item.repair_status == 1" class="footer-btn" @click="dispose()"><view class="btn">已维修</view></view>
</view>
</template>
<script>
import {
submitFinish
} from '@/common/api.js';
import {
callbackRequest,
getStorage,
alertTip,
formatDate,
sureAlterTip
} from '@/common/util.js';
export default {
data() {
return {
userInfo:'',
formatDate:formatDate,
item: {},
fixList: [{
title: "空调",
more: "风系统"
},
{
title: "给排水",
more: "饮水、清洁、排水"
},
{
title: "电",
more: "照明、办公、生产"
},
{
title: "木",
more: "办公桌、椅、门等"
},
{
title: "安保",
more: "门禁、监控等"
},
{
title: "电梯",
more: "货运、人员等"
},
{
title: "消防",
more: "报警、逃生、灭火器"
},
{
title: "其它",
more: ""
},
],
index:0
}
},
onLoad(option) {
this.userInfo = getStorage('userInfo');
this.item = JSON.parse(decodeURIComponent(option.item));
},
methods: {
dispose: function(){
sureAlterTip('提示',"确定已维修?",true)
.then(res =>{
if (res === 200){
let params = {
"method": submitFinish,
"data":{
userId: this.userInfo.id,
id: this.item.id
}
};
callbackRequest(params).then(res => {
res = res.data;
alertTip(res.returnMsg);
if ( res.returnCode === "1"){
alertTip(res.returnMsg);
// 跳回列表页
setTimeout(function() {
uni.redirectTo({
url:'/pages/malfunc-repair/repair-record-cl'
})
// uni.navigateBack({
// delta:1
// })
}, 1500);
}
})
}
})
}
}
}
</script>
<style lang="scss">
@import '@/static/css/common.scss';
.container {
min-height:100vh;
background: #f8f8f8;
font-size: 28upx;
.details{
// height: 550upx;
background: white;
margin: 15upx;
border-radius: 15upx;
padding-bottom:15rpx;
.detail_header {
border-bottom: #f8f8f8 5upx solid;
height: 90upx;
line-height: 90upx;
margin: 15upx;
border-radius: 10upx;
.blueSign {
height: 28upx;
width: 5upx;
background: #00c277;
display: inline-block;
margin-left: 20upx;
}
.font-tilte {
font-weight:bold;
margin-left: 20upx;
}
}
.detail_msg {
margin-left: 20upx;
border-radius: 10upx;
.info-item{
border-bottom:1px solid #f8f8f8;
padding:20upx 10upx;
line-height: 50upx;
.label{
display:inline-block;
width:150upx;
font-size:28upx;
color:#333;
font-weight:bold;
}
}
.status {
.infoSpan{
color: red;
}
}
.img-box {
// background: #fff;
image{
width: 200upx;
height: 200upx;
margin:20upx 20upx 0 0;
}
}
}
}
.interviewee {
background: #FFFFFF;
width: 625rpx;
height: 270rpx;
border-radius: 10rpx;
.p-title {
background: #DCDFE6;
text-align: center;
border-radius: 10rpx;
font-size: 30rpx;
width: 100%;
height: 70rpx;
line-height: 70rpx;
}
.center {
padding: 26upx;
display: flex;
align-items: center;
position: relative;
border-bottom:1px solid #eee;
.input_left {
font-size:30rpx;
font-weight: bold;
}
.arrow{
float: right;
width: 16upx;
height: 29upx;
margin-top: 10upx;
}
.picker{
margin-right:40upx;
margin-left: 10upx;
font-size:28upx;
line-height:50upx;
color:#666;
width: 72%;
}
}
.bu{
margin: 10rpx;
.cancel{
width: 45%;
height: 80rpx;
margin-left: 10rpx;
background: #cc;
}
.confirm{
width: 45%;
height: 80rpx;
margin-right: 10rpx;
margin-top: -80rpx;
background: #00c277;
}
}
}
}
</style>