hz-zhhq-app/pages/report/report-detail.vue

849 lines
19 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="hzIndex">
<hzHeader title="服务报修"></hzHeader>
<view class="container hzContent">
<view class="details">
<view class="detail_msg">
<view class="info-item status">
<text class="label">受理状态 </text>
<text v-if="item.report_status ==0" class="infoSpan2">未回复</text><!-- statusred -->
<text v-if="item.report_status ==1" class="infoSpan" style="color: #ff9000;">已回复</text>
<text v-if="item.report_status ==2" class="infoSpan" style="color: #0DB0A7;">已办结</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 class="label">标题: </text>
<text class="infoSpan">{{item.title}}</text>
</view>
<view class="info-item">
<text class="label">内容: </text>
<text class="infoSpan">{{item.content}}</text>
</view>
<view class="info-item">
<text v-if="item.report_type==0" class="label">咨询日期: </text>
<text v-if="item.report_type==1" class="label">投诉日期: </text>
<text class="infoSpan">{{ formatDate(item.create_time,'dateTime') }}</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 class="label">联系人: </text>
<text class="infoSpan">{{ item.real_name }}</text>
</view>
<view @click="callPhone(item.mobile)" class="info-item">
<text class="label">联系方式: </text>
<text class="infoSpan" style="color: #00C277;">{{ item.mobile }}</text>
</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.report_status!=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.report_status==0||item.report_status==1" style="margin-bottom: 60upx;" class="occupied">
</view>
<view v-if="queryType==1 && (item.report_status==0||item.report_status==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="finishReport()">办结</view>
</view>
</view>
</view>
<!-- <view class="footer-btn" v-if="queryType==1 && item.report_status==0||item.report_status==1" @click="circulation()">
<view class="btn">回复</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="submit()">确定</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 {
queryReport,
replyReport,
finishReport
} 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-popup.vue"
import {
pathToBase64
} from '@/js_sdk/mmmm-image-tools/index.js';
export default {
components: {
UniPopup
},
data() {
return {
callPhone: callPhone,
vbPicture: vbPicture,
formatImgUrl: formatImgUrl,
userInfo: getStorage('userInfo'),
formatDate: formatDate,
item: {},
id: 0,
queryType: 0,
replyContent: '',
userId: getStorage('userInfo').id,
imgs: [],
imgsId: [],
showAlert: false,
}
},
onLoad(option) {
this.id = option.id;
this.queryType = option.queryType;
this.queryReport();
},
methods: {
queryReport() {
let params = {
"method": queryReport,
"data": {
id: this.id
}
};
callbackRequest(params).then(res => {
res = res.data;
if (res.returnCode === "1") {
this.item = res.returnData;
}
})
},
circulation() {
this.$refs.popup.open();
//this.closeButPopup();
},
closeCirculation() {
this.$refs.popup.close()
},
submit() {
let params = {
"method": replyReport,
"data": {
id: this.id,
replyContent: this.replyContent,
replyUser: this.userInfo.userId,
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.queryReport();
} else {
alertTip(res.returnMsg);
}
})
},
finishReport() {
var _that = this;
if (_that.item.report_status == 0) {
alertTip("您还没有进行回复,请先回复");
return;
}
let params = {
method: finishReport,
data: {
replyUser: _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/report/report-sl?reportType=' + _that.item
.report_type;
alertTip(res.returnMsg);
setTimeout(function() {
uni.redirectTo({
url
});
}, 1000);
} else {
alertTip(res.returnMsg);
}
});
}
}
});
},
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;
}
}
.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;
}
}
}
.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;
}
</style>