snapshot-wx/pagesBase/Order/View.vue

<template>
	<view class="container" v-if="isShow">
		<view class="evaluateBtn" v-if="type == 'mine' && infoData.isVisit" @tap="onEvaluateViewTo(infoData.id)">查看满意度评价</view>
		<view class="itemBox" v-if="type == 'mine'">
			<view v-if="infoData.redPackStatusTxt">
				<view class="itemHeader">奖励审核结果</view>
				<view class="itemBody">
					<text>{{infoData.redPackStatusTxt}}</text>
				</view>
			</view>
			<view v-if="infoData.auditRemark">
				<view class="itemHeader" style="padding-top: 40rpx;">审批意见</view>
				<view class="itemBody">
					<text>{{infoData.auditRemark}}</text>
				</view>
			</view>
		</view>
		<view class="itemBox">
			<view class="itemHeader">线索信息</view>
			<view class="itemBody">
				<view class="infoItemBox">
					<text class="infoLable">工单编号</text>
					<text class="infoText">{{infoData.no || ''}}</text>
				</view>
				<!-- <view class="infoItemBox" style="display: none;">
					<text class="infoLable">线索类型</text>
					<text class="infoText">{{infoData.AcceptanceType || ''}}</text>
				</view> -->
				<view class="infoItemBox">
					<text class="infoLable">线索标题</text>
					<text class="infoText">{{infoData.title || ''}}</text>
				</view>
				<view class="infoItemBox">
					<view class="fway-form-lable-block" style="width: 100%;padding: 10rpx 0;">
						<view class="fway-form-lable-title" style="width: 160rpx;color: #666666;">事件描述</view>
						<view class="fway-form-lable-btn" style="width: calc(100% - 180rpx);">
							<view class="vioceBox">
								<view v-if="vioceList.length > 0" class="vioceListBox">
									<view class="vioceItemBox" v-for="(item, index) in vioceList" :key="index">
										<view class="vioceItemImgBox" @tap="onPlayVioce(item.tempFilePath)">
											<view class="vioceItemBG" :style="'width: '+ vioceItemBGWidth + '%'"></view>
											<image class="vioceItemImg" src="/static/img/write/bofang.png"
												v-if="!item.isPlay"></image>
											<image class="vioceItemImg" src="/static/img/write/zanting.png" v-else>
											</image>
											<text class="vioceItemDuration"
												v-if="item.duration > 0">{{Math.round(item.duration / 1000)}}s</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<text class="infoText"
						style="width: calc(100% - 10rpx);margin-left: 10rpx;">{{infoData.content || ''}}</text>
				</view>
				<view class="infoItemBox">
					<text class="infoLable">事发地点</text>
					<text class="infoText">{{infoData.county || ''}}</text>
				</view>
				<view class="infoItemBox">
					<text class="infoLable">是否保密</text>
					<text class="infoText" v-if="infoData.isSecret == '1'">保密</text>
					<text class="infoText" v-else>不保密</text>
				</view>
				<view class="infoItemBox">
					<text class="infoLable">上报时间</text>
					<text class="infoText">{{infoData.creationTime || ''}}</text>
				</view>
				<view class="infoItemBox" v-if="photoList.length > 0">
					<text class="infoLable">现场图片</text>
					<view class="infoContent">
						<view class="photoListBox">
							<view class="photoItemBox" v-for="(item, index) in photoList" :key="index"
								@tap="onPreviewImage" :data-url="item.tempFilePath">
								<image class="photoItemImg" :src="item.tempFilePath" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="infoItemBox" v-if="videoList.length > 0">
					<text class="infoLable">现场视频</text>
					<view class="infoContent">
						<view class="photoListBox">
							<view class="photoItemBox" v-for="(item, index) in videoList" :key="index">
								<video class="photoItemImg" :id="index" :src="item.tempFilePath"></video>
							</view>
						</view>
					</view>
				</view>
				<view class="infoItemBox" v-if="fileList.length > 0">
					<text class="infoLable">其他附件</text>
					<view class="infoContent">
						<view class="fileListBox">
							<view class="fileItemBox" v-for="(item, index) in fileList" :key="index" @tap="onPreviewFile(item.tempFilePath)">
								<text class="fileName">{{item.FileName}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="itemBox">
			<view class="itemHeader">回复结果</view>
			<view class="itemBody">
				<text v-if="infoData.opinion">{{infoData && infoData.opinion}}</text>
				<view class="noneBox" v-else>
					<image class="noneImg" src="/static/img/mine/noneBG.png"></image>
					<text class="noneText">暂无办理结果，请稍后</text>
				</view>
			</view>
		</view>
		<view class="itemBox">
			<view class="itemHeader">办理流程</view>
			<view class="example-body">
				<uni-steps :options="listDetail" active-color="#007AFF" :active="active" direction="column" />
			</view>
		</view>
		<!-- <block v-if="infoData.ProcState == '办理完成'">
			<view class="fway-btnBox">
				<button class="fway-btn" @tap="onAppraiseTo" v-if="isCanAppraise == '1'">满意度评价</button>
				<button class="fway-btn" @tap="onAppraiseViewTo" v-elif="isCanAppraise == '0'">查看满意度评价</button>
			</view>
		</block> -->
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	var that;
	export default {
		data() {
			return {
				isShow: false,
				id: '',
				type: 'mine', // mine:我提交的隐患  open:隐患公示
				userType: '',
				infoData: null,
				vioceList: [],
				vioceItemBGWidth: 0,
				photoList: [],
				videoList: [],
				fileList: [],
				isCanAppraise: '',
				active: 1,
				listDetail: []
			}
		},
		onLoad(options) {
			that = this;
			that.id = options.id;
			that.type = options.type;
			that.userType = uni.getStorageSync('userInfo').userType;
			if (that.type == 'open'){
				that.onGetOpenData(function(){
					that.isShow = true;
				});
			}else if (that.type == 'mine'){
				that.onGetMineData(function(){
					that.isShow = true;
				});
			}
		},
		methods: {
			onGetOpenData(fun) {
				that.$admin.reqDirect({
					method: 'GET',
					url: '/api/v1/Snapshot/order/published/' + that.id
				}).then(res => {
					if (res) {
						if (res.fileJson && res.fileJson.length > 0){
							that.onFileData(res.fileJson);
						}
						if (res.workflow && res.workflow.length > 0){
							that.onFlowData(res.workflow)
						}
						res.creationTime = that.$util.formatTime(new Date(res.creationTime))
						that.infoData = res;
					}
					typeof fun === 'function' && fun();
				})
			},
			onGetMineData(fun) {
				that.$admin.req({
					method: 'GET',
					url: '/api/v1/Snapshot/order/' + that.id
				}).then(res => {
					if (res) {
						if (res.fileJson && res.fileJson.length > 0){
							that.onFileData(res.fileJson);
						}
						if (res.workflow && res.workflow.length > 0){
							that.onFlowData(res.workflow)
						}
						res.creationTime = that.$util.formatTime(new Date(res.creationTime))
						that.infoData = res;
					}
					typeof fun === 'function' && fun();
				})
			},
			// 附件数据生成
			onFileData(arrData){
				arrData.forEach((item, index) => {
					let fileType = item.fileType;
					switch (fileType) {
						// 照片
						case 'jpg':
						case 'png':
						case 'jpeg':
						case 'svg':
						case 'gif':
						case 'webp':
						case 'bmp':
							let strImg = item.path ? item.path : '';
							if (strImg) {
								that.photoList.push({
									tempFilePath: strImg
								})
							}
							break;
						case 'mp4':
						case '3gp':
						case 'm3u8':
							// 视频
							let strVideo = item.path ? item.path : '';
							if (strVideo) {
								that.videoList.push({
									tempFilePath: strVideo
								})
							}
							break;
						case 'mp3':
						case 'aac':
						case 'm4a':
						case 'wav':
							// 音频
							let strVioce = item.path ? item.path : '';
							if (strVioce) {
								that.vioceList.push({
									tempFilePath: strVioce,
									duration: item.Duration * 1,
									isPlay: false
								})
							}
							break;
						case 'xls':
						case 'xlsx':
						case 'xlsm':
						case 'pdf':
						case 'doc':
						case 'docx':
							// 其他附件
							let strFile = item.path ? item.path : '';
							if (strFile) {
								that.fileList.push({
									tempFilePath: strFile,
									FileName: item.fileName
								})
							}
							break;
						default:
							console.log('文件格式暂不支持')
							break;
					}
				})
			},
			// 流程数据生成
			onFlowData(data){
				data.forEach((item, index) => {
					that.listDetail.push({title: item.name, desc: that.$util.formatTime(new Date(item.handleTime))})
				})
				that.active = that.listDetail.length - 1
			},
			onPreviewImage(e) {
				let arrStrPhoto = [];
				that.photoList.forEach((item, index) => {
					arrStrPhoto.push(item.tempFilePath)
				})
				uni.previewImage({
					urls: arrStrPhoto,
					current: e.currentTarget.dataset.url
				});
			},
			onPreviewFile(filePath) {
				// #ifdef MP-WEIXIN
				wx.downloadFile({
					url: filePath,
					success: function (res) {
						const strFilePath = res.tempFilePath
						wx.openDocument({
							filePath: strFilePath
						})
					}
				})
				// #endif
			},
			onPlayVioce(src) {
				let that = this;
				if (src) {
					let indexVioce = '';
					that.vioceList.forEach((item, index) => {
						if (item.tempFilePath == src) {
							indexVioce = index;
							that.vioceList[index].isPlay = true;
							that.$set(that.vioceList, index, that.vioceList[index]);
						}
					})
					innerAudioContext.src = src;
					innerAudioContext.play();
					// 设置录音控制
					let vioceInterval = '';
					let vioceTime = 0;
					innerAudioContext.onPlay(function() {
						// 定时器设置背景色宽度
						vioceInterval = setInterval(() => {
							vioceTime += 100;
							let numTime = (vioceTime / that.vioceList[indexVioce].duration).toFixed(3) * 100;
							that.vioceItemBGWidth = numTime > 100 ? 100 : numTime
						}, 100)
					});
					innerAudioContext.onEnded(function() {
						that.vioceList[indexVioce].isPlay = false;
						that.$set(that.vioceList, indexVioce, that.vioceList[indexVioce]);
						clearInterval(vioceInterval);
						that.vioceItemBGWidth = 0
					});
				}
			},
			onEvaluateViewTo(id) {
				uni.navigateTo({
					url: '/pagesBase/Order/EvaluateView?id=' + encodeURIComponent(id)
				})
			}
		}
	}
</script>

<style lang="less">
	.container {
		background-color: #efefef;
	}

	.evaluateBtn {
		background-color: #3e6ffd;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		margin: 26rpx 100rpx;
		padding: 30rpx 20rpx;
		border-radius: 10rpx;
	}

	.itemBox {
		background-color: #ffffff;
		margin: 26rpx 20rpx;
		padding: 30rpx 20rpx;
		border-radius: 10rpx;
	}

	.itemHeader {
		color: #000006;
		font-weight: bold;
		margin-bottom: 30rpx;
		font-size: 34rpx;
	}

	.itemBody {
		line-height: 48rpx;
		color: #333333;
		font-size: 28rpx;
	}

	.noneBox {
		text-align: center;
	}

	.noneImg {
		width: 190rpx;
		height: 180rpx;
		margin-bottom: 10rpx;
	}

	.noneText {
		display: block;
		color: #999999;
		font-size: 28rpx;
	}

	.infoItemBox {
		font-size: 28rpx;
		line-height: 60rpx;
	}

	.infoLable {
		width: 160rpx;
		display: inline-block;
		vertical-align: top;
		color: #666666;
	}

	.infoText {
		width: calc(100% - 160rpx);
		display: inline-block;
		vertical-align: top;
		color: #333333;
		word-break: break-all;
	}

	.infoContent {
		margin-top: 10rpx;
	}

	.photoListBox {
		width: calc(100%);
		line-height: 2;
	}

	.photoItemBox {
		width: calc(30% - 2rpx);
		height: 160rpx;
		position: relative;
		display: inline-block;
		border: 2rpx #E5E5E5 solid;
		margin-right: 3%;
	}

	.photoItemImg {
		width: 100%;
		height: 160rpx;
	}

	.vioceBox {
		display: inline-block;
		margin-right: 10rpx;
		height: 100%;
	}

	.vioceListBox {
		height: 100%;
	}

	.vioceItemBox {
		height: 100%;
		width: calc(100%);
	}

	.vioceItemImgBox {
		display: inline-block;
		vertical-align: middle;
		width: 100rpx;
		padding: 6rpx 20rpx;
		background-color: #fff;
		color: #999999;
		border: 2rpx #ccc solid;
		border-radius: 10rpx;
		text-align: left;
		position: relative;
	}

	.vioceItemBG {
		background-color: #bfbfbf;
		width: 0;
		position: absolute;
		left: 0;
		top: 0;
		height: 44rpx;
		border-radius: 10rpx;
		z-index: 0;
	}

	.isPlay {
		background-color: #F6F7F8;
		color: #000;
	}

	.vioceItemImg {
		width: 32rpx;
		height: 32rpx;
		display: inline-block;
		vertical-align: middle;
		margin-right: 20rpx;
		position: relative;
		z-index: 99;
	}

	.vioceItemDuration {
		color: #515151;
		display: inline-block;
		vertical-align: middle;
		position: relative;
		z-index: 99;
	}
	
	.fileListBox{
		padding: 10rpx 10rpx 20rpx;
	}
	 
	.fileItemBox{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	
	.fileItemBox + .fileItemBox{
		margin-top: 30rpx;
	}
	 
	.fileName{
		width: calc(100%);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #53d4fc;
	}
</style>