yantai-app/yt_wodebaoshi/pages/detail/detail.vue

<template>
	<view>
		<view class="report">
			<view class="report-time">
				{{ myReportDetail.happenTime }}
			</view>
			<view class="report-content">
				{{ myReportDetail.eventContent }}
			</view>
			<view>
				<!-- <topic-audio
                    v-if="voiceList.length > 0"
                    :url="voiceList[0].attachmentUrl"
                    :duration="voiceList[0].duration"
                    onAudioDel="handleAudioDel"
                    :show-del="false"
                    :disabled="true"
                /> -->
				<audio v-if="voiceList.length > 0" id="audio1" :src="voiceList[0].attachmentUrl" type="audio/webm"
					controls></audio>
			</view>
			<view class="report-image">
				<image :src="item" :data-value="index" @click="previewImage"
					v-for="(item, index) in myReportDetail.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: [],
				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
				});
				console.log('data::', data);
				this.setData({
					myReportDetail: data,
					starId: data.satisfaction ? data.satisfaction : 0,
					voiceList: data.voiceList
				});
			},

			// 回复列表
			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: #22BDF0;
		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>