public-opinion/pagesA/detail/detail.vue

<template>
	<view>
		<view class="pad-zy20 fon24">
			<view class="disjbac fon30 bbot pad-sx30">
				<view class="colb bold flexs">序号</view>
				<view class="col9">LH20220729130234</view>
			</view>
			<view class="disjbac fon30 bbot pad-sx30">
				<view class="colb bold flexs">审核状态</view>
				<view class="col9">待审核</view>
			</view>
			<view class="disjbac bbot pad-sx20">
				<view class="fon30 colb bold flexs">真实姓名</view>
				<view class="col9">测试村</view>
			</view>
			<view class="disjbac bbot pad-sx20">
				<view class="fon30 colb bold flexs">联系方式</view>
				<view class="col9">测试村</view>
			</view>
			<view class="disjbac fon30 bbot pad-sx30">
				<view class="colb bold flexs">社区</view>
				<view class="col9">新华社区</view>
			</view>
			<view class="disjbac fon30 bbot pad-sx30">
				<view class="colb bold flexs">村</view>
				<view class="col9">测试村</view>
			</view>
			<view class="dis fon30 bbot pad-sx30">
				<view class="colb bold flexs">图片</view>
				<view class="disac width100 fe">
					<image src="" mode="aspectFill" class="width155 radius30 mar-z20"></image>
				</view>
			</view>
			<view class="dis fon30 bbot pad-sx30">
				<view class="colb bold flexs">视频</view>
				<view class="disac width100 fe">
					<image src="" mode="aspectFill" class="width155 radius30 mar-z20"></image>
				</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%;">我想问下我们村的机耕道什么 时候可以弄好？当前以及严重 影响我们出行了！</view>
			</view>
			<view class="dis fon30 bbot pad-sx30">
				<view class="colb bold flexs">语音</view>
				<view class="disac col9 width100 fe">
					<view @tap="playVoice" 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>
			<view class="disjbac fon30 bbot pad-sx30">
				<view class="colb bold flexs">类别</view>
				<view class="col9">测试村</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">2021年7月19日 21：30</view>
					<view class="disjb bbot pad-x30">
						<view class="">调查情况</view>
						<view class="col9 tright" style="max-width: 50%;">情况属实，马上安排人员 处理，请耐心等待</view>
					</view>
					<view class="disjb bbot pad-sx30">
						<view class="">处理结果</view>
						<view class="col9 tright" style="max-width: 50%;">情况属实，马上安排人员 处理，请耐心等待</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="pad-zy20 fon30" style="background-color: #f5f5f5;">
					<view class="col9 pad-sx30">2021年7月19日 21：30</view>
					<view class="disjb bbot pad-x30">
						<view class="">反馈意见（不满意）</view>
						<view class="col9 tright" style="max-width: 50%;">等了好久了还没有上门 处理！</view>
					</view>
				</view>
			</view>
		</view>
		<view class="disjcac pad-sx50" v-if="ifManager==0">
			<view class="disjcac enter-btn" style="margin: 0;" @tap="handleEv">立即办理</view>
		</view>
		<view class="disjcac pad-sx50" v-if="ifManager==1">
			<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 {
				audioText:'',
				detail:{}, //工单详情
				ifManager:0, // 是否是管理员
				id:0, //工单id
			}
		},
		onLoad(op) {
			if(op.manager) this.ifManager = op.manager;
			if(op.id) this.id = op.id;
			// 查询详情
			this.getDetailEv();
		},
		onHide() {
			innerAudioContext.stop();
		},
		methods: {
			// 播放录音
			playVoice() {
				if (this.audioText) {
					innerAudioContext.src = this.audioText;
					innerAudioContext.play();
				}
			},
			
			// 查询工单详情
			getDetailEv(){
				this.$requst.post('user/opinionInfo',{id:this.id}).then(res => {
					if(res.code==0){
						console.log(res,'社区工单详情');
						this.detail = res.data;
					} else {
						this.$toolAll.tools.showToast(res.msg);
					}
					uni.hideLoading();
					this.isLoading = true;
				})
			},
			
			// 督办复审
			reexamineEv(){
				this.$requst.post('/api/administrator/examine',{id:this.id}).then(res => {
					if(res.code==0){
						console.log(res,'督办复审');
						// 返回
						uni.navigateBack({
							delta:1
						})
					} 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>