You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
607 lines
14 KiB
607 lines
14 KiB
<template>
|
|
<view>
|
|
<view class="report">
|
|
<view class="report-time">
|
|
{{ myReportDetail.happenTime }}
|
|
</view>
|
|
<view class="report-content">
|
|
{{ myReportDetail.eventContent }}
|
|
</view>
|
|
<view>
|
|
<audio
|
|
v-if="voiceList.length > 0"
|
|
id="audio1"
|
|
:src="voiceList[0].attachmentUrl"
|
|
type="audio/webm"
|
|
controls
|
|
></audio>
|
|
</view>
|
|
<view
|
|
class="report-image"
|
|
v-if="imageList && imageList.length > 0"
|
|
>
|
|
<image
|
|
:src="item"
|
|
:data-value="index"
|
|
@click="previewImage"
|
|
v-for="(item, index) in imageList"
|
|
:key="index"
|
|
></image>
|
|
</view>
|
|
<view class="report-address">
|
|
<text>地址：</text>
|
|
<text>{{ myReportDetail.address }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="reply" v-if="replyList && replyList.length > 0">
|
|
<view class="reply-input" v-if="myReportDetail.replyFlag">
|
|
<textarea
|
|
placeholder="请输入补充内容"
|
|
onInput="handleReply"
|
|
maxlength="200"
|
|
:value="reply"
|
|
></textarea>
|
|
<view @click="replyBtn">确定</view>
|
|
</view>
|
|
<view class="reply-block" v-for="(item, index) in replyList" :key="index">
|
|
<view class="reply-title"
|
|
>{{
|
|
epmetUserId == item.createdBy ? "我" : item.userShowName
|
|
}}回复:</view
|
|
>
|
|
|
|
<view class="reply-time">
|
|
{{ item.createdTime }}
|
|
</view>
|
|
|
|
<view class="reply-content">
|
|
{{ item.content }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="handle item" v-if="processData">
|
|
<view class="item-title">处理状态</view>
|
|
<view class="handle-content">
|
|
<view class="handle-left">
|
|
<text></text>
|
|
<text></text>
|
|
</view>
|
|
<view v-if="processData.type == 'demand'" class="handle-right">
|
|
<view class="handle-right-title"
|
|
>【{{ processData.processName }}】</view
|
|
>
|
|
<view class="handle-right-time">
|
|
{{ processData.processTime }}
|
|
</view>
|
|
<view
|
|
class="handle-right-item"
|
|
v-if="processData.processName == '转服务'"
|
|
>
|
|
<view>
|
|
<text>服</text>
|
|
<text>务</text>
|
|
<text>时</text>
|
|
<text>间</text>
|
|
</view>
|
|
<text>:</text>
|
|
<text>{{ processData.serviceTime }}</text>
|
|
</view>
|
|
<view
|
|
class="handle-right-item"
|
|
v-if="processData.processName == '需求完成'"
|
|
>
|
|
<view>
|
|
<text>服</text>
|
|
<text>务</text>
|
|
<text>方</text>
|
|
</view>
|
|
<text>:</text>
|
|
<text>{{ processData.serviceParty }}</text>
|
|
</view>
|
|
<view
|
|
class="handle-right-item"
|
|
v-if="processData.processName == '需求完成'"
|
|
>
|
|
<view style="width: 200rpx">
|
|
<text>实</text>
|
|
<text>际</text>
|
|
<text>服</text>
|
|
<text>务</text>
|
|
<text>时</text>
|
|
<text>间</text>
|
|
</view>
|
|
<text>:</text>
|
|
<text style="width: 60%">{{ processData.actualServiceTime }}</text>
|
|
</view>
|
|
</view>
|
|
<view v-else class="handle-right">
|
|
<view class="handle-right-title"
|
|
>【{{ processData.processName }}】</view
|
|
>
|
|
<view class="handle-right-time">
|
|
{{ processData.processTime }}
|
|
</view>
|
|
<view class="handle-right-item">
|
|
<view>
|
|
<text>处</text>
|
|
<text>理</text>
|
|
<text>部</text>
|
|
<text>门</text>
|
|
</view>
|
|
<text>:</text>
|
|
<text>{{ processData.departmentName }}</text>
|
|
</view>
|
|
<view class="handle-right-item">
|
|
<view>
|
|
<text>说</text>
|
|
<text>明</text>
|
|
</view>
|
|
<text>:</text>
|
|
<text>{{ processData.publicReply }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="satisfaction item"
|
|
v-if="myReportDetail.status == 'closed_case'"
|
|
>
|
|
<view class="item-title">满意度评价</view>
|
|
<!--<view class="satisfaction-content"><view class="{{satisfaction == 'bad'?'check-block':''}}" @click="common" data-value="bad"><image src="../../data/images/report/satisfied_1.jpg" a:if="{{satisfaction == 'bad'}}" /><image src="../../data/images/report/satisfied_1_no.png" a:else /><view>
|
|
不满意</view></view><view class="{{satisfaction == 'good'?'check-block':''}}" @click="common" data-value="good"><image src="../../data/images/report/satisfied_2.jpg" a:if="{{satisfaction == 'good'}}" /><image src="../../data/images/report/satisfied_2_no.png" a:else /><view>
|
|
基本满意</view></view><view class="{{satisfaction == 'perfect'?'check-block':''}}" @click="common" data-value="perfect"><image src="../../data/images/report/satisfied_3.png" a:if="{{satisfaction == 'perfect'}}" /><image src="../../data/images/report/satisfied_3_no.jpg" a:else /><view>
|
|
非常满意</view></view></view> -->
|
|
<view>
|
|
<view class="stars">
|
|
<view class="stars-click">
|
|
<image
|
|
class="shop-score-star"
|
|
:src="
|
|
item.id > starId
|
|
? '../../data/images/report/no_star.png'
|
|
: '../../data/images/report/star.png'
|
|
"
|
|
@click="score_xing"
|
|
:data-index="index"
|
|
v-for="(item, index) in stars"
|
|
:key="index"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import topicAudio from "../../components/topic-audio/topic-audio";
|
|
// import { ddSdk } from './dingtalk-jsapi/lib/ddSdk';
|
|
import {
|
|
myreportdetail,
|
|
replylist,
|
|
process,
|
|
comment,
|
|
resiReply,
|
|
} from "../../utils/api/customerApi.js";
|
|
import { formatYYMMDDDate } from "../../utils/date";
|
|
import * as userTools from "../../utils/user";
|
|
const app = getApp();
|
|
export default {
|
|
components: {
|
|
topicAudio,
|
|
},
|
|
data() {
|
|
return {
|
|
icEventId: null,
|
|
gridId: null,
|
|
myReportDetail: {},
|
|
replyList: [],
|
|
processData: null,
|
|
reply: "",
|
|
satisfaction: null,
|
|
voiceList: [],
|
|
imageList: [],
|
|
epmetUserId: null,
|
|
|
|
stars: [
|
|
{
|
|
id: 1,
|
|
},
|
|
{
|
|
id: 2,
|
|
},
|
|
{
|
|
id: 3,
|
|
},
|
|
{
|
|
id: 4,
|
|
},
|
|
{
|
|
id: 5,
|
|
},
|
|
],
|
|
|
|
starId: 0,
|
|
attachmentUrl: "",
|
|
duration: "",
|
|
};
|
|
},
|
|
async onLoad(option) {
|
|
let userInfo = userTools.getStoreUserInfo();
|
|
this.setData({
|
|
icEventId: option.id,
|
|
gridId: option.gridId,
|
|
epmetUserId: userInfo.epmetUserId,
|
|
});
|
|
this.reportDetailFun();
|
|
this.replyFun();
|
|
this.processFun();
|
|
},
|
|
methods: {
|
|
score_xing(e) {
|
|
if (this.starId != 0) {
|
|
return;
|
|
}
|
|
let starId = e.currentTarget.dataset.index + 1;
|
|
this.setData({
|
|
starId: starId,
|
|
});
|
|
uni.confirm({
|
|
title: "温馨提示",
|
|
content: "提交当前评价?",
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
success: async (result) => {
|
|
if (result.confirm) {
|
|
const { code } = await comment({
|
|
satisfaction: this.starId,
|
|
icEventId: this.icEventId,
|
|
});
|
|
if (code == 0) {
|
|
uni.showToast({
|
|
type: "success",
|
|
content: "评价成功",
|
|
});
|
|
this.reportDetailFun();
|
|
}
|
|
} else {
|
|
this.setData({
|
|
starId: 0,
|
|
});
|
|
}
|
|
},
|
|
});
|
|
},
|
|
|
|
// 详情
|
|
async reportDetailFun() {
|
|
const { data } = await myreportdetail({
|
|
icEventId: this.icEventId,
|
|
});
|
|
this.setData({
|
|
myReportDetail: data,
|
|
starId: data.satisfaction ? data.satisfaction : 0,
|
|
voiceList: data.voiceList || [],
|
|
imageList: data.imageList || [],
|
|
});
|
|
},
|
|
|
|
// 回复列表
|
|
async replyFun() {
|
|
const { data } = await replylist({
|
|
icEventId: this.icEventId,
|
|
});
|
|
this.setData({
|
|
replyList: data,
|
|
});
|
|
},
|
|
|
|
// 处理事件
|
|
async processFun() {
|
|
const { data } = await process({
|
|
icEventId: this.icEventId,
|
|
});
|
|
if (Array.isArray(data) && data.length > 0) {
|
|
this.setData({
|
|
processData: data[0],
|
|
});
|
|
let time = formatYYMMDDDate(this.processData.processTime);
|
|
this.setData({
|
|
["processData.processTime"]: time,
|
|
});
|
|
} else {
|
|
this.setData({
|
|
processData: null,
|
|
});
|
|
}
|
|
},
|
|
|
|
// 回复
|
|
handleReply(e) {
|
|
this.setData({
|
|
reply: e.detail.value,
|
|
});
|
|
},
|
|
|
|
async replyBtn() {
|
|
let data = {
|
|
content: this.reply,
|
|
icEventId: this.icEventId,
|
|
};
|
|
const { code } = await resiReply(data);
|
|
if (code == 0) {
|
|
uni.showToast({
|
|
type: "success",
|
|
content: "回复成功",
|
|
});
|
|
this.setData({
|
|
reply: "",
|
|
});
|
|
this.reportDetailFun();
|
|
this.replyFun();
|
|
}
|
|
},
|
|
|
|
// 评价
|
|
common(e) {
|
|
if (this.satisfaction != "") {
|
|
return;
|
|
}
|
|
const { value } = e.currentTarget.dataset;
|
|
this.setData({
|
|
satisfaction: value,
|
|
});
|
|
uni.confirm({
|
|
title: "温馨提示",
|
|
content: "提交当前评价?",
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
success: async (result) => {
|
|
if (result.confirm) {
|
|
const { code } = await comment({
|
|
satisfaction: this.satisfaction,
|
|
icEventId: this.icEventId,
|
|
});
|
|
if (code == 0) {
|
|
uni.showToast({
|
|
type: "success",
|
|
content: "评价成功",
|
|
});
|
|
this.reportDetailFun();
|
|
}
|
|
} else {
|
|
this.setData({
|
|
satisfaction: "",
|
|
});
|
|
}
|
|
},
|
|
});
|
|
},
|
|
|
|
// 预览图片
|
|
previewImage(e) {
|
|
const { value } = e.currentTarget.dataset;
|
|
uni.previewImage({
|
|
current: value,
|
|
urls: this.myReportDetail.imageList,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
.report {
|
|
background-color: #fff;
|
|
width: 100vw;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.report-time {
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
margin: 20rpx 0;
|
|
}
|
|
|
|
.report-content {
|
|
font-size: 34rpx;
|
|
margin: 20rpx 0 30rpx;
|
|
}
|
|
|
|
.report-image {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.report-image image {
|
|
width: 30%;
|
|
height: 200rpx;
|
|
margin: 0 10rpx;
|
|
}
|
|
|
|
.report-address {
|
|
color: #666666;
|
|
font-size: 26rpx;
|
|
margin: 30rpx 0;
|
|
}
|
|
|
|
.reply {
|
|
margin: 20rpx 0;
|
|
padding: 30rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.reply-input {
|
|
padding: 0 0 80rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.reply-input textarea {
|
|
background: #f7f7f7;
|
|
font-size: 26rpx;
|
|
padding: 10rpx 10rpx 30rpx;
|
|
margin: 10rpx 0;
|
|
height: 240rpx;
|
|
}
|
|
|
|
.reply-input view {
|
|
width: 110rpx;
|
|
height: 48rpx;
|
|
border-radius: 48rpx;
|
|
background: #329AFF;
|
|
color: #fff;
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: 20rpx;
|
|
right: 20rpx;
|
|
font-size: 26rpx;
|
|
line-height: 48rpx;
|
|
}
|
|
|
|
.reply-title {
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.reply-time {
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
margin-top: 6rpx;
|
|
}
|
|
|
|
.reply-content {
|
|
font-size: 34rpx;
|
|
margin: 20rpx 0;
|
|
}
|
|
|
|
.item {
|
|
padding: 30rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.item .item-title {
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
padding: 0 0 20rpx;
|
|
border-bottom: 2rpx solid #e7eeee;
|
|
}
|
|
|
|
.handle-content {
|
|
display: flex;
|
|
}
|
|
|
|
.handle-left {
|
|
margin-top: 30rpx;
|
|
margin-right: 20rpx;
|
|
text-align: center;
|
|
position: relative;
|
|
width: 30rpx;
|
|
}
|
|
|
|
.handle-left text:first-child {
|
|
display: inline-block;
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
background-color: #e60000;
|
|
border-radius: 20rpx;
|
|
position: absolute;
|
|
top: 10rpx;
|
|
z-index: 2;
|
|
}
|
|
|
|
.handle-left text:last-child {
|
|
display: inline-block;
|
|
width: 2rpx;
|
|
height: 95%;
|
|
background-color: #e7eeee;
|
|
position: absolute;
|
|
left: 25rpx;
|
|
top: 10rpx;
|
|
}
|
|
|
|
.handle-right {
|
|
margin-top: 20rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
.handle-right-title {
|
|
font-weight: bold;
|
|
margin: 10rpx 0;
|
|
}
|
|
|
|
.handle-right-time {
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.handle-right-item {
|
|
margin: 14rpx 0;
|
|
}
|
|
|
|
.handle-right-item view {
|
|
width: 150rpx;
|
|
display: inline-block;
|
|
color: #999999;
|
|
margin-right: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
float: left;
|
|
}
|
|
|
|
.handle-right-item > text:nth-child(2) {
|
|
float: left;
|
|
}
|
|
|
|
.handle-right-item text {
|
|
font-size: 34rpx;
|
|
}
|
|
|
|
.handle-right-item > text:last-child {
|
|
width: 70%;
|
|
display: inline-block;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.satisfaction {
|
|
margin-top: 20rpx;
|
|
width: 100vw;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.satisfaction-content {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.satisfaction-content > view {
|
|
text-align: center;
|
|
color: #999999;
|
|
}
|
|
|
|
.satisfaction-content image {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.satisfaction-content .check-block {
|
|
color: #333;
|
|
}
|
|
|
|
.stars-click {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 40rpx 0;
|
|
}
|
|
|
|
.shop-score-star {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin: 0 30rpx;
|
|
}
|
|
</style>
|
|
|