public-opinion/pagesA/detail/detail.vue

<template>
	<view v-if="loading">
		<view class="pad-zy20 fon24">
			<view class="disjbac fon30 bbot pad-sx30">
				<view class="colb bold flexs">序号</view>
				<view class="col9">{{detail.coding}}</view>
			</view>
			<view class="disjbac fon30 bbot pad-sx30">
				<view class="colb bold flexs">审核状态</view>
				<view class="col9">{{detail.state_text}}</view>
			</view>
			<view class="disjbac bbot pad-sx20" v-if="detail.u_name">
				<view class="fon30 colb bold flexs">真实姓名</view>
				<view class="col9">{{detail.u_name}}</view>
			</view>
			<view class="disjbac bbot pad-sx20" v-if="detail.u_name">
				<view class="fon30 colb bold flexs">联系方式</view>
				<view class="col9">{{detail.u_phone}}</view>
			</view>
			<view class="disjbac fon30 bbot pad-sx30">
				<view class="colb bold flexs">社区</view>
				<view class="col9">{{detail.community.name}}</view>
			</view>
			<view class="disjbac fon30 bbot pad-sx30">
				<view class="colb bold flexs">村</view>
				<view class="col9">{{detail.village.name}}</view>
			</view>
			<view class="dis fon30 bbot pad-sx30">
				<view class="colb bold flexs">图片</view>
				<view class="disac width100 fe" v-if="detail.images">
					<image :src="item" v-for="(item,index) in detail.images.split(',')" :key="index" @tap="preVedio(index,0)" mode="aspectFill" class="width155 radius30 mar-z20"></image>
				</view>
				<view class="disac col9 width100 fe" v-else>未上传</view>
			</view>
			<view class="dis fon30 bbot pad-sx30">
				<view class="colb bold flexs">视频</view>
				<view class="disac width100 fe" v-if="detail.videos">
					<view class="width155 radius30 mar-z20" v-for="(item,index) in detail.videos.split(',')" :key="index" style="overflow: hidden;" @tap="preVedio(index,1)">
						<video :src="item" :controls="false" class="width155 radius30"></video>
					</view>
				</view>
				<view class="disac col9 width100 fe" v-else>未上传</view>
			</view>
			<view class="disjb bbot pad-sx20">
				<view class="fon30 colb bold flexs">描述文案</view>
				<view class="col9 tright line-h40" style="max-width: 60%;">{{detail.description}}</view>
			</view>
			<view class="dis fon30 bbot pad-sx30">
				<view class="colb bold flexs">语音</view>
				<view class="disac col9 width100 fe" v-if="detail.audios" @tap="playVoice">
					<view class="col9 radius30 disjcac fc posir mar-y20 item-box width155" style="border: 1px solid #d9d9d9;">
						<image src="/static/icon/icon-audio.png" mode="aspectFill" style="width: 74rpx;height: 85rpx;"></image>
					</view>
				</view>
				<view class="disac col9 width100 fe" v-else>未上传</view>
			</view>
			<view class="disjbac fon30 bbot pad-sx30">
				<view class="colb bold flexs">类别</view>
				<view class="col9">{{detail.type_text}}</view>
			</view>
			<view class="" style="margin: 0 -20rpx;" v-if="ifManager!=2">
				<view class="disac pad-zy20 pad-x30 pad-s40">
					<view class="cricle-box"></view>
					<view class="fon36 mar-z20 bold">处理反馈</view>
				</view>
				<view class="pad-zy20 fon30" style="background-color: #f5f5f5;">
					<view class="col9 pad-sx30">{{detail.operateLog[0].operated_at || ''}}</view>
					<view class="disjb bbot pad-x30">
						<view class="">调查情况</view>
						<view class="col9 tright" style="max-width: 50%;">{{detail.operateLog[0].operate_desc || '无'}}</view>
					</view>
					<view class="disjb bbot pad-sx30">
						<view class="">处理结果</view>
						<view class="col9 tright" style="max-width: 50%;">{{detail.operateLog[0].operate_result || '无'}}</view>
					</view>
				</view>
				<view class="disac pad-zy20 pad-x30 pad-s40">
					<view class="cricle-box"></view>
					<view class="fon36 mar-z20 bold">群众反馈</view>
				</view>
				<view class="" v-if="detail.feedbackLog">
					<view class="pad-zy20 fon30" style="background-color: #f5f5f5;" v-for="(item,index) in detail.feedbackLog" :key="index">
						<view class="col9 pad-sx30">{{item.create_time}}</view>
						<view class="disjb bbot pad-x30">
							<view class="">反馈意见（{{['不满意','满意'][item.satisfied]}}）</view>
							<view class="col9 tright" style="max-width: 50%;">{{item.content}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="disjcac pad-sx50" v-if="ifManager==0 && detail.state_text!='已办理'">
			<view class="disjcac enter-btn" style="margin: 0;" @tap="handleEv(detail.id)">立即办理</view>
		</view>
		<view class="disjcac pad-sx50" v-if="ifManager==1 && detail.state_text!='待办理'">
			<view class="disjcac enter-btn" style="margin: 0;background-color: #f71200;border-color: #f71200;" @tap="reexamineEv">督办复审</view>
		</view>
	</view>
</template>

<script>
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	export default {
		data() {
			return {
				detail:'', //工单详情
				ifManager:0, // 是否是管理员
				id:0, //工单id
				loading:false
			}
		},
		onLoad(op) {
			if(op.manager) this.ifManager = op.manager;
			if(op.id) this.id = op.id;
			// 查询详情
			this.getDetailEv(op.id);
		},
		onHide() {
			innerAudioContext.stop();
		},
		methods: {
			// 预览视频
			preVedio(index,num){
				let arr = [];
				let tempArr = [this.detail.images.split(','),this.detail.videos.split(',')][num];
				if(tempArr.length){
					tempArr.forEach(item=>{
						let obj = {
							url:item,
							type:['image','video'][num]
						}
						arr.push(obj);
					})
				}
				uni.previewMedia({
					current:index,
					sources:arr
				})
			},
			// 播放录音
			playVoice() {
				innerAudioContext.src = this.detail.audios;
				innerAudioContext.play();
			},
			// 查询工单详情
			getDetailEv(id){
				this.$toolAll.tools.showToast('加载中...');
				this.$requst.post('user/opinionInfo',{id}).then(res => {
					if(res.code==0){
						this.detail = res.data.opinion;
						this.loading = true;
						uni.hideToast();
					} else {
						this.$toolAll.tools.showToast(res.msg);
					}
					uni.hideLoading();
					this.isLoading = true;
				})
			},
			
			// 督办复审
			reexamineEv(){
				this.$requst.post('administrator/examine',{id:this.id}).then(res => {
					if(res.code==0){
						this.$toolAll.tools.showToast('督办成功');
						setTimeout(()=>{
							// 返回
							uni.navigateBack({
								delta:1
							})
						},500)
					} else {
						this.$toolAll.tools.showToast(res.msg);
					}
					uni.hideLoading();
					this.isLoading = true;
				})
			},
			
			// 前往立即办理
			handleEv(id){
				uni.navigateTo({
					url:`/pagesA/community/handle/handle?id=${id}`
				})
			},
		}
	}
</script>

<style>
.del-btn{
	background-color: #39d091;width: 45rpx;height: 45rpx;border-radius: 100%;top: -20rpx;right: -20rpx;
}
.width155{
	width: 155rpx;
	height: 150rpx;
}
.item-box{border: 1px solid #FFFFFF;}
</style>