Homestay_manage_app/pagesSub/complaintProgress/complaintProgress.vue

<template>
	<view class="container" v-if="info">
		<!-- 头部订单信息区域 -->
		<view class="header">
			<view class="header_title">
				<view class="title_left">{{ info.title }}</view>
				<view class="title_right">{{ info.detailsVoList[0].progressType }}</view>
			</view>
			<view class="header_info">
				<view class="info_box">
					<view class="box_key">订单号</view>
					<view class="box_value">{{ info.bookingId }}</view>
				</view>
				<view class="info_box">
					<view class="box_key">投诉单号</view>
					<view class="box_value">{{ info.complaintId }}</view>
				</view>
				<view class="info_box">
					<view class="box_key">反馈时间</view>
					<view class="box_value">{{ info.dateTime.slice(0, 19) }}</view>
				</view>
			</view>
		</view>

		<!-- 进度详情区域 -->
		<view class="progress" v-if="info.detailsVoList">
			<view class="progress_title">进度详情</view>
			<!-- 进度条区域 -->
			<view class="progress_body">
				<!-- 每一个进度区域 -->
				<view class="body_item" v-for="(item, index) in info.detailsVoList" :key="index">
					<view class="item_left">
						<view class="left_top">{{ item.dateTime.slice(5, 10) }}</view>
						<view class="left_bottom">{{ item.dateTime.slice(11, 16) }}</view>
						<view class="left_dot"></view>
					</view>
					<view class="item_right">
						<view class="right_top">{{ item.progressType }}</view>
						<view class="right_bottom" v-if="item.title">标题：{{ item.title }}</view>
						<view class="right_bottom" v-if="item.content">问题描述：{{ item.content }}</view>
						<view class="right_bottom" v-if="item.progressType === '待处理'">问题跟进中</view>
						<view class="right_bottom" v-if="item.progressType === '处理中'">问题处理中</view>
						<view class="right_bottom" v-if="item.progressType === '已处理'">您的问题已处理</view>
						<!-- 图片区域 -->
						<view class="right_bottom" v-if="item.urlList.length">
							<view class="bottom_key">图片：</view>
							<view class="bottom_value">
								<img
									mode="aspectFill"
									v-for="(img, index2) in item.urlList"
									:key="index2"
									:src="img"
									v-if="img.indexOf('jpg') !== -1 || img.indexOf('png') !== -1"
									@click="handleClickImg(img, index2)"
								/>
								<video
									id="myVideo"
									class="video"
									:show-fullscreen-btn="false"
									:show-play-btn="false"
									v-for="(video, index3) in item.urlList"
									:key="index3"
									v-if="video.indexOf('mp4') !== -1"
									:src="video"
									@fullscreenchange="fullscreenchange"
									@click="handleClickVideo"
								></video>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮区域 -->
		<view class="foot">
			<view class="btn_phone">服务热线</view>
			<view class="btn_finish" v-if="info.detailsVoList[0].progressType !== '已处理'" @click="handleFinish">处理完成</view>
		</view>
	</view>
</template>

<script>
var dayjs = require('dayjs')
export default {
	data() {
		return {
			// 进度条列表数据
			list: [],
			id: '',
			// 进度详情数据
			info: null,
			videoContext: null,
			// 是否是全屏状态
			isFullScreen: false
		}
	},
	onReady() {
		this.videoContext = uni.createVideoContext('myVideo')
	},
	onLoad(options) {
		this.id = options.id
		this.getData()
	},
	methods: {
		// 进入全屏和退出全屏时触发的回调
		fullscreenchange(e) {
			this.isFullScreen = e.detail.fullScreen
		},
		// 点击视频控件时触发的回调
		handleClickVideo() {
			if (this.isFullScreen) {
				this.videoContext.stop()
				this.videoContext.exitFullScreen()
			} else {
				this.videoContext.requestFullScreen()
				this.videoContext.play()
			}
		},
		// 获取进度详情数据
		async getData() {
			const res = await this.$myRequest({
				url: '/mhotel/complaintprogressDetails.action',
				data: {
					complaintId: this.id
				}
			})
			// console.log(res)
			if (res.code === 200) {
				this.info = res.page
			}
		},
		// 处理完成按钮回调
		handleFinish() {
			uni.showModal({
				title: '提示',
				content: '确定处理完成了吗？',
				success: async (res) => {
					if (res.confirm) {
						let time = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
						const res = await this.$myRequest({
							url: '/mhotel/complaintresolutionComplaint.action',
							data: {
								complaintId: this.info.complaintId,
								createId: uni.getStorageSync('userInfo').id,
								createDate: time,
								modifyDate: time
							}
						})
						// console.log(res)
						if (res.code === 200) {
							uni.redirectTo({
								url: '/pagesSub/myComplaint/myComplaint'
							})
						}
					}
				}
			})
		},
		// 点击进度条图片回调
		handleClickImg(url, index) {
			// console.log(url)
			// console.log(index)
			if (this.videoContext) {
				this.videoContext.stop()
			}
			uni.previewImage({
				current: index,
				urls: [url]
			})
		}
	}
}
</script>

<style lang="scss">
.container {
	height: 100vh;
	overflow-y: auto;
	background-color: #f7f7f7;

	.header {
		box-sizing: border-box;
		padding: 0 30rpx;
		height: 290rpx;
		background-color: #fff;

		.header_title {
			display: flex;
			align-items: center;
			height: 89rpx;
			font-size: 28rpx;
			border-bottom: 1rpx solid #e5e5e5;

			.title_left {
				flex: 4;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.title_right {
				flex: 1;
				text-align: end;
				color: #a6a6a6;
			}
		}

		.header_info {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			height: 200rpx;
			font-size: 28rpx;

			.info_box {
				display: flex;
				align-items: center;

				.box_key {
					width: 130rpx;
					color: #808080;
				}
				.box_value {
					color: #383838;
				}
			}
		}
	}

	.progress {
		box-sizing: border-box;
		padding: 0 30rpx;
		margin-top: 20rpx;
		background-color: #fff;

		.progress_title {
			display: flex;
			align-items: center;
			height: 89rpx;
			font-size: 28rpx;
			font-weight: bold;
			border-bottom: 1rpx solid #e5e5e5;
		}

		.progress_body {
			padding-top: 22rpx;
			padding-bottom: 47rpx;

			.body_item {
				display: flex;

				.item_left {
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding-right: 20rpx;
					width: 100rpx;
					border-right: 1rpx dotted #a6a6a6;

					.left_top {
						font-size: 28rpx;
					}
					.left_bottom {
						font-size: 20rpx;
					}

					.left_dot {
						position: absolute;
						top: 18rpx;
						right: -8rpx;
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						background-color: #096562;
					}
				}

				.item_right {
					flex: 1;
					margin-top: -10rpx;
					margin-left: 30rpx;
					padding-bottom: 20rpx;
					overflow: hidden;

					.right_top {
						margin-bottom: 8rpx;
						font-weight: bold;
						font-size: 28rpx;
					}
					.right_bottom {
						display: flex;
						margin-bottom: 12rpx;
						font-size: 24rpx;
						color: #808080;

						.bottom_key {
							width: 75rpx;
						}

						.bottom_value {
							flex: 1;
							display: grid;
							grid-template-columns: repeat(auto-fill, 103rpx);
							gap: 12rpx;

							img {
								width: 103rpx;
								height: 122rpx;
								border-radius: 5rpx;
							}

							.video {
								width: 120rpx;
								height: 122rpx;
								border-radius: 5rpx;
							}
						}
					}
				}
			}
		}
	}

	.foot {
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 66rpx 30rpx;
		font-size: 28rpx;

		.btn_phone {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 330rpx;
			height: 84rpx;
			color: #096562;
			border-radius: 22rpx;
			border: 1rpx solid #096562;
		}
		.btn_finish {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 330rpx;
			height: 84rpx;
			color: #fff;
			border-radius: 22rpx;
			background-color: #096562;
		}
	}
}
</style>