public-opinion/pagesA/detail/detail.vue

202 lines
7.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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.opinion_operate.operated_at || ''}}</view>
<view class="disjb bbot pad-x30">
<view class="">调查情况</view>
<view class="col9 tright" style="max-width: 50%;">{{detail.opinion_operate.operate_desc || '无'}}</view>
</view>
<view class="disjb bbot pad-sx30">
<view class="">处理结果</view>
<view class="col9 tright" style="max-width: 50%;">{{detail.opinion_operate.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.opinion_feedback">
<view class="pad-zy20 fon30" style="background-color: #f5f5f5;" v-for="(item,index) in detail.opinion_feedback.list" :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>