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

968 lines
24 KiB
Vue

<template>
<view class="hzIndex">
<hzHeader title="详情"></hzHeader>
<view class="container hzContent">
<view class="details">
<view class="detail_msg">
<view class="info-item status">
<text v-if="item.is_inspection==0" class="label">{{pageTitle[item.fault_type]}}状态: </text>
<text v-if="item.is_inspection!=0" class="label">考核状态: </text>
<text v-if="item.reply_flag =='0'" class="infoSpan">未回复</text><!-- statusred -->
<text v-if="item.reply_flag =='1'" class="infoSpan" style="color: #FB8107;">已回复</text>
<text v-if="item.reply_flag =='2'" class="infoSpan" style="color: green;">已办结</text>
</view>
</view>
</view>
<view class="details">
<view class="detail_msg">
<view class="dateTit" style="padding: 24upx 0;">
<view class="leftIcon">
</view>
<text style="font-size:32upx;color:#333;font-weight: 600;">报修信息</text>
</view>
<view class="info-item">
<text v-if="item.is_inspection==1" class="label">外包项目: </text>
<text v-if="item.is_inspection==2" class="label">维保项目: </text>
<text v-if="item.is_inspection==0" class="label">{{pageTitle[item.fault_type]}}项目: </text>
<text class="infoSpan">{{ item.repair_option_name }}</text>
</view>
<view v-if="item.repair_option_sub_name" class="info-item">
<text v-if="item.is_inspection==1" class="label">外包小项: </text>
<text v-if="item.is_inspection==2" class="label">维保小项: </text>
<text v-if="item.is_inspection==0" class="label">问题小项: </text>
<text class="infoSpan">{{ item.repair_option_sub_name }}</text>
</view>
<view v-if="item.is_inspection==2&&item.repair_option_sub_name=='电梯维保'" class="info-item">
<text class="label">维保对象: </text>
<text class="infoSpan">{{ item.elevator_no }}</text>
</view>
<view v-if="item.is_inspection!=2" class="info-item">
<text v-if="item.is_inspection==1" class="label">考核位置: </text>
<!-- <text v-if="item.is_inspection==2" class="label">考核位置: </text> -->
<text v-if="item.is_inspection==0" class="label">{{pageTitle[item.fault_type]}}位置: </text>
<text
class="infoSpan">{{item.repair_place+" "+(item.repair_floor||'')+""+(item.repair_room_no?"-"+item.repair_room_no+'':'')}}</text>
</view>
<view v-if="item.is_inspection==2" class="info-item">
<text class="label">维保区域: </text>
<text class="infoSpan">{{item.repair_place}}</text>
</view>
<view v-if="item.is_inspection==2" class="info-item">
<text class="label">维保类型: </text>
<text class="infoSpan">{{item.wb_types}}</text>
</view>
<view class="info-item">
<text v-if="item.is_inspection==1" class="label">考核描述: </text>
<text v-if="item.is_inspection==2" class="label">维保内容: </text>
<text v-if="item.is_inspection==0" class="label">问题描述: </text>
<text class="infoSpan">{{item.fault_detail}}</text>
</view>
<view v-if="item.is_inspection!=0" class="info-item">
<text v-if="item.is_inspection==1" class="label">考核建议: </text>
<text v-if="item.is_inspection==2" class="label">维保人员: </text>
<text class="infoSpan">{{item.fault_proposal}}</text>
</view>
<view v-if="item.is_inspection==1" class="info-item">
<text class="label">考核评价: </text> <!-- //v-if="item.is_inspection==1" -->
<!-- <text v-if="item.is_inspection==2" class="label">考核评价: </text> -->
<text class="infoSpan">{{item.fault_evaluate}}</text>
</view>
<view v-if="item.is_inspection!=0" class="info-item">
<text class="label">考核分数: </text>
<text class="infoSpan">{{item.check_fraction+"分"}}</text>
</view>
<view class="info-item">
<text v-if="item.is_inspection!=0" class="label">考核时间: </text>
<text v-if="item.is_inspection==0" class="label">{{pageTitle[item.fault_type]}}时间: </text>
<text class="infoSpan">{{item.repair_time}}</text>
</view>
<view class="img-box">
<image v-for="(itemImg,imgIndex) in item.pictures" :key="imgIndex" :src="formatImgUrl(itemImg)"
mode="" @click="vbPicture(new Array(formatImgUrl(itemImg)))"></image>
</view>
</view>
</view>
<view class="details">
<view class="detail_msg">
<view class="dateTit" style="padding: 24upx 0;">
<view class="leftIcon">
</view>
<text style="font-size:32upx;color:#333;font-weight: 600;">报修人信息</text>
</view>
<view class="info-item">
<text v-if="item.is_inspection==0" class="label">{{pageTitle[item.fault_type]}}人: </text>
<text v-if="item.is_inspection!=0" class="label">考核人: </text>
<text class="infoSpan">{{item.repair_person_name}}</text>
</view>
<view @click="callPhone(item.repair_person_phone)" class="info-item">
<text class="label">联系方式: </text>
<text class="infoSpan">{{item.repair_person_phone}}</text>
</view>
</view>
</view>
<!-- <view class="details" v-if="item.reply_flag=='1'">
<view class="detail_msg">
<view class="info-item">
<text class="label">回复内容: </text>
<text class="infoSpan">{{item.reply_content}}</text>
</view>
<view class="info-item" >
<text class="label">回复时间: </text>
<text class="infoSpan">{{ formatDate(item.reply_date,'dateTime')}}</text>
</view>
<view class="img-box" >
<image v-for="(itemImg,imgIndex) in item.replyPictures" :key="imgIndex" :src="itemImg" mode=""></image>
</view>
</view>
</view> -->
<view class="details" style="padding: 24upx;">
<view class="dateTit" style="padding: 24upx 0;">
<view class="leftIcon">
</view>
<text style="font-size:32upx;color:#333;font-weight: 600;">报修反馈</text>
</view>
<view class="details" style="background-color: #F2F6FA;margin: unset;margin-top: 24upx;"
v-if="item.reply_flag!='0'" v-for="(reply,replyIndex) in item.replyList" :key="replyIndex">
<view class="detail_msg">
<view class="info-item">
<text class="label">回复内容: </text>
<text class="infoSpan">{{reply.reply_content}}</text>
</view>
<view class="info-item">
<text class="label">回复时间: </text>
<text class="infoSpan">{{ formatDate(reply.reply_date,'dateTime')}}</text>
</view>
<view class="img-box">
<image v-for="(itemImg,imgIndex) in reply.replyPictures" :key="imgIndex"
:src="formatImgUrl(itemImg)" mode=""
@click="vbPicture(new Array(formatImgUrl(itemImg)))">
</image>
</view>
</view>
</view>
</view>
<view style="clear: both;"></view>
<view v-if="item.reply_flag=='0'||item.reply_flag=='1'" style="margin-bottom: 60upx;" class="occupied">
</view>
<!-- ||item.reply_flag=='1' -->
<!-- <view v-if="item.reply_flag=='0'||item.reply_flag=='1'" class="footer-btn" @click="circulation()"><view class="btn">回复</view></view> -->
<view v-if="item.reply_flag=='0'||item.reply_flag=='1'"
style="position: fixed;bottom:0upx;height: 50upx;width: 100%;z-index: 88;">
<!-- uni-popup ref="butPopup" type="bottom" -->
<view>
<view class="footer-btn footer-btn-two batchBtn">
<view class="no-btn" @click="circulation()">回复</view>
<view class="s-btn" @click="submit()">办结</view>
</view>
</view>
</view>
<uni-popup ref="popup" type="bottom" style="z-index: 999;">
<view class="popup-ward">
<view class="popup-title">
<text>请填写回复内容:</text>
</view>
<view class="ipt-box">
<textarea v-model="replyContent" placeholder-style="color:#BDC4D2" placeholder="请输入回复内容" />
</view>
<view class="up-text">
<text>上传图片:</text>
</view>
<view class="pic">
<view class="img-box">
<view class="img-item" v-for="(item, index) in imgs" :key="index">
<image class="remove-btn" @click="removeImg(index)" src="/static/icons/delete-icon.png"
mode=""></image>
<image class="img" :src="item.replace(/[\r\n]/g,'')" mode=""></image>
</view>
<view class="img-item upload-btn" @click="chooseImg()" v-if="imgs.length < 2">
<image class="img" src="/static/imgs/tianjia-img.png" mode=""></image>
</view>
</view>
</view>
<view style="font-size: 28rpx;font-weight: 600;color: red;border-bottom: 1px solid #eee;">互联网信息系统严禁存储、传输、处理涉及国家秘密企业秘密以及敏感信息,违者将严肃问责追责!</view>
<view class="footer-btn footer-btn-two" style="position: absolute;margin-bottom: 20upx;">
<view class="no-btn" @click="closeCirculation()">取消</view>
<view class="s-btn" @click="replyFaultRepairInfo()">确定</view>
</view>
</view>
</uni-popup>
<!-- <view class="common-shade box box-center box-align-center" v-if="showAlert" @click="showAlert=false" >
<view style="background: white;height: 160upx;width: 100%;border-radius: 10upx 10upx 0upx 0upx;position: absolute;bottom: 0upx;">
<view @click="photo" style="border-bottom: 1px solid #000000; border-radius: 10upx 10upx 0upx 0upx; height: 80upx;line-height: 80upx;text-align: center;">
拍摄
</view>
<view @click="getImage" style="height: 80upx;line-height: 80upx;text-align: center;">
从相册选择
</view>
</view>
</view> -->
</view>
</view>
</template>
<script>
import {
getFaultRepairInfoById,
replyFaultRepairInfo,
finishFault
} from '@/common/api.js';
import {
callbackRequest,
getStorage,
alertTip,
formatDate,
sureAlterTip,
convertImgToBase64,
vbPicture,
callPhone,
wxSdk,
formatImgUrl,
uploadImg
} from '@/common/util.js';
import UniPopup from '@/components/uni-popup/uni-popup2.vue';
import {
pathToBase64
} from '@/js_sdk/mmmm-image-tools/index.js';
export default {
components: {
UniPopup
},
data() {
return {
callPhone: callPhone,
vbPicture: vbPicture,
formatImgUrl: formatImgUrl,
userInfo: '',
formatDate: formatDate,
item: {},
persons: [{
name: '',
id: ''
}],
index: 0,
pageTitle: ['报修', '报事'],
id: 0,
userId: getStorage('userInfo').id,
imgs: [],
imgsId: [],
replyContent: "",
showAlert: false,
}
},
onLoad(option) {
this.userInfo = getStorage('userInfo');
this.id = option.id || 0;
this.getFaultRepairInfoById();
},
methods: {
circulation() {
this.$refs.popup.open();
//this.closeButPopup();
},
closeCirculation() {
this.$refs.popup.close()
},
submit() {
var _that = this;
if (_that.item.reply_flag == '0') {
alertTip("您还没有进行回复,请先回复");
return;
}
let params = {
method: finishFault,
data: {
userId: _that.userId,
id: _that.id
}
};
uni.showModal({
title: '提示',
content: '是否确认办结',
success: function(res) {
if (res.confirm) {
callbackRequest(params).then(res => {
res = res.data;
if (res.returnCode == 1) {
// _that.$set(_that.item,'reply_flag',"2");
// alertTip(res.returnMsg);
const url = '/pages/malfunc-repair/repair-record?faultType=' +
_that.item.fault_type;
alertTip(res.returnMsg);
setTimeout(function() {
uni.redirectTo({
url
});
}, 1000);
} else {
alertTip(res.returnMsg);
}
});
}
}
});
},
getFaultRepairInfoById() {
let params = {
method: getFaultRepairInfoById,
data: {
userId: this.userId,
id: this.id
}
};
callbackRequest(params).then(res => {
res = res.data;
if (res.returnCode == 1) {
this.item = res.returnData;
} else {
alertTip(res.returnMsg);
}
});
},
replyFaultRepairInfo() {
if (this.replyContent == "") {
alertTip("请输入回复内容");
return;
}
let params = {
method: replyFaultRepairInfo,
data: {
userId: this.userId,
id: this.id,
replyContent: this.replyContent,
replyPic1: this.imgsId[0],
replyPic2: this.imgsId[1],
}
};
callbackRequest(params).then(res => {
res = res.data;
if (res.returnCode == 1) {
alertTip(res.returnMsg);
this.closeCirculation();
this.getFaultRepairInfoById();
} else {
alertTip(res.returnMsg);
}
});
},
cancel: function() {
this.$refs.popup.close();
},
async chooseImg() {
let chec = 0;
let sty = [];
let _this = this;
uni.showActionSheet({
itemList: ['拍照', '相册'],
success: function(resp) {
chec = resp.tapIndex;
if (chec == 0) {
sty = ['camera']; //从相册相机选择
} else {
sty = ['album']; //从相册相机选择
}
uni.chooseImage({
count: 3,
sizeType: ['compressed'],
sourceType: sty,
quality: 1,
success: async function(res) {
let resData = res.tempFilePaths;
for (let i = 0; i < resData.length; i++) {
if (_this.imgs.length > 3) {
break;
}
uni.getImageInfo({
src: resData[i],
success: async (path) => {
convertImgToBase64(path.path,
async function(base64) {
if (_this.imgs.length <
3) {
// _this.imgs.push(base64);
uni.showLoading({
title: '图片上传中'
})
let blength =
base64.length;
let glength = 7500;
if (blength <=
glength) {
let uploadParam = {
base64: base64,
userId: getStorage(
'userInfo'
)
.userId +
i,
groupEnd: '1'
}
await uploadImg
(
uploadParam
)
.then(
resu => {
resu =
resu
.data;
uni
.hideLoading();
if (resu
.returnCode !=
1
) {
alertTip
(resu
.returnMsg
);
} else {
_this
.imgs
.push(
base64
);
_this
.imgsId
.push(
resu
.returnData +
".jpg"
);
}
});
} else {
let fnum =
parseInt(
blength /
glength
);
for (let j =
1; j <
fnum +
1; j++) {
if (j ==
fnum) {
let groupBase =
base64
.slice(
(j -
1
) *
glength
);
console
.log(
groupBase
.length,
"groupBaselength"
);
let uploadParam = {
base64: groupBase,
userId: getStorage(
'userInfo'
)
.userId +
i,
groupEnd: '1'
}
await uploadImg
(
uploadParam
)
.then(
resu => {
resu =
resu
.data;
if (resu
.returnCode ==
1
) {
_this
.imgs
.push(
base64
);
_this
.imgsId
.push(
resu
.returnData +
".jpg"
);
} else {
uni
.hideLoading();
alertTip
(resu
.returnMsg
);
return;
}
}
);
} else {
let groupBase =
base64
.slice(
(j -
1
) *
glength,
glength *
j
);
let uploadParam = {
base64: groupBase,
userId: getStorage(
'userInfo'
)
.userId +
i,
groupEnd: '0'
}
await uploadImg
(
uploadParam
)
.then(
resu => {
resu =
resu
.data;
if (resu
.returnCode ==
1
) {} else {
uni
.hideLoading();
alertTip
(resu
.returnMsg
);
return;
}
}
);
}
}
uni
.hideLoading();
}
}
});
},
});
}
}
});
},
fail: function(resp) {
console.log(resp.errMsg);
}
});
},
//删除图片
removeImg(index) {
this.imgs.splice(index, 1);
this.imgsId.splice(index, 1);
},
}
}
</script>
<style lang="scss">
@import '@/static/css/common.scss';
.batchBtn {
position: absolute;
height: 140upx;
background: white;
padding-top: 30upx;
.btn1 {
width: 40%;
margin-left: 7%;
margin-right: 6%;
border-radius: 10upx;
}
.btn2 {
width: 40%;
border-radius: 10upx;
}
.btn3 {
width: 28%;
margin-left: 4%;
border-radius: 10upx;
}
.btn4 {
width: 28%;
margin-left: 4%;
border-radius: 10upx;
}
.btn5 {
width: 28%;
margin-left: 4%;
border-radius: 10upx;
background: #348CF2;
}
}
.img-box {
overflow: hidden;
padding-top: 20rpx;
padding-bottom: 10rpx;
.img-item {
float: left;
width: 200upx;
height: 200upx;
border: 1px solid #ddd;
margin: 0 22rpx 20upx 0upx;
position: relative;
box-sizing: border-box;
.img {
display: block;
width: 100%;
height: 100%;
}
.remove-btn {
position: absolute;
top: -18upx;
right: -18upx;
width: 44upx;
height: 44upx;
z-index: 2;
}
}
.upload-btn {
.img {
width: 60upx;
height: 60upx;
margin: 70upx auto 0;
}
}
}
.container {
.details {
font-size: 28upx;
color: #555555;
// height: 550upx;
background: white;
margin: 15upx;
border-radius: 15upx;
.detail_msg {
margin-left: 24upx;
border-radius: 10upx;
.info-item {
border-bottom: 1px solid #f8f8f8;
line-height: 96upx;
.label {
display: inline-block;
width: 188upx;
font-size: 28upx;
color: #333;
font-weight: 400;
}
}
.status {
.infoSpan {
color: #00c277;
}
.infoSpan2 {
color: #FB8107;
}
}
.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;
}
}
}
}
.dateTit {
width: 100%;
display: flex;
align-items: center;
// margin-left: 16upx;
image {
width: 35upx;
height: 35upx;
margin-right: 10upx;
}
.leftIcon {
width: 8upx;
height: 30upx;
background-image: linear-gradient(to bottom, #82E7B3, #94B8EF);
border-radius: 5px;
margin-right: 10upx;
}
}
.common-shade {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 9999;
}
.box {
display: flex;
display: -webkit-flex;
}
.box-row-reverse {
flex-direction: row;
}
/*上下排列*/
.box-column {
flex-direction: column;
}
/*上下排列*/
.box-left {
justify-content: flex-start;
}
/*居右*/
.box-right {
justify-content: flex-end;
}
/*居左*/
.box-center {
justify-content: center;
}
/*居中*/
.box-between {
justify-content: space-between;
}
/*两端对齐*/
.box-align-center {
align-items: center;
}
.box-wrap {
flex-wrap: wrap;
}
.footer-btn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
padding-top: unset;
}
.no-btn {
width: 160*2upx;
height: 44*2upx;
background: #E0F6F5;
border-radius: 22*2upx;
font-size: 16*2upx;
color: #00ADA6;
line-height: 44*2upx;
text-align: center;
}
.s-btn {
width: 160*2upx;
height: 44*2upx;
background: linear-gradient(94deg, #5BCE9D 0%, #00ADA6 100%);
border-radius: 22*2upx;
font-size: 16*2upx;
color: #FFFFFF;
line-height: 44*2upx;
text-align: center;
}
.popup-ward {
background: white;
width: 100%;
height: 365*2upx;
position: relative;
border-radius: 40upx 40upx 0 0;
padding: 0upx 48upx;
overflow: hidden;
.popup-title {
font-weight: bold;
font-size: 18*2upx;
color: #333333;
margin-top: 40upx;
}
.ipt-box {
margin-top: 24upx;
textarea {
height: 99*2upx;
background: #F2F6FA;
border-radius: 6px 6px 6px 6px;
padding-top: 24upx;
padding-left: 24upx;
font-size: 14*2upx;
}
}
.up-text {
margin-top: 24upx;
font-weight: bold;
font-size: 18*2upx;
color: #0E1A24;
}
}
.img-box {
overflow: hidden;
padding-top: 20rpx;
padding-bottom: 10rpx;
.img-item {
float: left;
width: 67*2upx;
height: 67*2upx;
background: #E6E8EE;
border-radius: 5*2upx;
// margin: 0 20upx 20upx 0upx;
position: relative;
display: flex;
align-items: center;
justify-content: center;
.img {
display: block;
width: 100%;
height: 100%;
}
.remove-btn {
position: absolute;
top: -18upx;
right: -18upx;
width: 44upx;
height: 44upx;
z-index: 2;
}
}
.upload-btn {
.img {
width: 60upx;
height: 60upx;
margin: unset;
}
}
}
</style>