249 lines
6.5 KiB
Vue
249 lines
6.5 KiB
Vue
<template>
|
|
<div class="photo-detail">
|
|
<AiGroup noBorder>
|
|
<h2>{{ info.content }}</h2>
|
|
<div class="status-name" :class="detailStatus.cls" v-text="detailStatus.label"/>
|
|
</AiGroup>
|
|
<AiGroup description noBorder labelColor="#999">
|
|
<AiItem label="事件来源" :value="$dict.getLabel('residentEventSource', info.eventSource)"/>
|
|
<AiItem label="事件类型" :value="info.groupName"/>
|
|
<AiItem label="所属网格" :value="info.girdName"/>
|
|
<AiItem label="上报时间" :value="info.createTime"/>
|
|
<AiItem label="照片" top-label>
|
|
<div class="flex wrap">
|
|
<image class="imageItem" v-for="(item, index) in info.files" @click="preview(item.url)" :key="index" :src="item.url"/>
|
|
</div>
|
|
<span v-if="!info.files.length">暂无照片</span>
|
|
</AiItem>
|
|
</AiGroup>
|
|
<!-- <u-gap height="24"/>
|
|
<AiGroup title="处理详情" v-if="info.eventStatus > 1" description noBorder labelColor="#999">
|
|
<AiItem label="处理结果" top-label :value="result.doExplain"/>
|
|
<AiItem label="照片" top-label>
|
|
<div class="flex wrap">
|
|
<image class="fill imageItem" v-for="(item, index) in result.files" @click="preview(item.url)" :key="index" :src="item.url"/>
|
|
</div>
|
|
<span v-if="!result.files.length">暂无照片</span>
|
|
</AiItem>
|
|
</AiGroup> -->
|
|
<!-- <u-gap height="24"/> -->
|
|
<!-- <u-tabs :list="[{name:'办理进度'},{name:'我的评价'}]" :current="currentTab" @change="v=>currentTab=v"/> -->
|
|
<div class="tab-content">
|
|
<div class="tab-item" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)" :class="currentTab == index ? 'active' : ''">{{ item.name }}
|
|
<span class="active-line" v-if="currentTab == index"/>
|
|
</div>
|
|
</div>
|
|
<u-gap height="24"/>
|
|
<AiGroup noBorder v-if="currentTab=='0'">
|
|
<AiStep v-for="(item,i) in process" :key="item.id" :index="i">
|
|
<div class="flex start">
|
|
<div class="fill stepTitle" v-text="item.systemExplain"/>
|
|
<div class="color-999 mar-r32 stepTime" v-text="item.doTime"/>
|
|
</div>
|
|
<div v-if="item.doExplain" class="stepContent mar-t8" v-text="item.doExplain"/>
|
|
<div class="imgs">
|
|
<img :src="e.url" alt="" v-for="(e, index) in item.files" :key="index" @click="previewImage(item.files, e.url)"/>
|
|
</div>
|
|
<u-gap height="48"/>
|
|
</AiStep>
|
|
</AiGroup>
|
|
<AiEvaluation v-if="currentTab=='1' && showEvaluation" :bid="info.id" type="show"/>
|
|
<AiEvaluation v-if="info.eventStatus > 1 && showEvaluation" v-model="evaluation" class="fixed-bottom bg-fff" :bid="info.id">
|
|
<div class="bottomBtn">去评价</div>
|
|
</AiEvaluation>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
appName: "居民上报详情",
|
|
data() {
|
|
return {
|
|
info: {},
|
|
result: {},
|
|
currentTab: 0,
|
|
evaluation: {},
|
|
id: '',
|
|
showEvaluation: false
|
|
// tabList: [{name:'办理进度'},{name:'我的评价'}]
|
|
}
|
|
},
|
|
computed: {
|
|
detailStatus: v => {
|
|
const status = !v.evaluation.id ? v.info.eventStatus : 'evaluation'
|
|
return {
|
|
cls: 'status-' + status,
|
|
label: !v.evaluation.id ? v.$dict.getLabel('clapEventStatus', v.info.eventStatus) : "已评价"
|
|
}
|
|
},
|
|
process() {
|
|
const list = this.info.processList
|
|
if (this.evaluation.id) {
|
|
const {id, createUserName, score, createTime: doTime, rateText: doExplain} = this.evaluation
|
|
list.splice(0, 0, {
|
|
id, doTime, doExplain,
|
|
systemExplain: `${createUserName}完成评价 (${score}星评价)`
|
|
})
|
|
}
|
|
return list
|
|
},
|
|
tabList() {
|
|
var list = !this.evaluation.id ? [{name:'办理进度'}] : [{name:'办理进度'},{name:'我的评价'}]
|
|
return list
|
|
}
|
|
},
|
|
onShow() {
|
|
this.showEvaluation = false
|
|
this.getInfo()
|
|
},
|
|
onLoad(query) {
|
|
this.id = query.id
|
|
this.$dict.load(['clapEventStatus', 'residentEventSource'])
|
|
},
|
|
methods: {
|
|
tabClick(index) {
|
|
this.currentTab = index
|
|
},
|
|
getInfo() {
|
|
this.$loading()
|
|
this.$instance.post(`/app/appresidentreportinfo/queryDetailById?id=${this.id}`).then(res => {
|
|
if (res?.data) {
|
|
this.info = res.data
|
|
if (res.data.eventStatus > 1) {
|
|
this.result = res.data.processList[0]
|
|
}
|
|
this.showEvaluation = true
|
|
}
|
|
}).finally(() => this.$hideLoading())
|
|
},
|
|
previewResult(url) {
|
|
uni.previewImage({
|
|
urls: this.result.files.map(v => v.url),
|
|
current: url
|
|
})
|
|
},
|
|
|
|
preview(url) {
|
|
uni.previewImage({
|
|
urls: this.info.files.map(v => v.url),
|
|
current: url
|
|
})
|
|
},
|
|
previewImage(images, img) {
|
|
uni.previewImage({
|
|
urls: images.map(v => v.url),
|
|
current: img
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.photo-detail {
|
|
padding: 32px 0 160px;
|
|
margin-bottom: 60px;
|
|
background: #fff;
|
|
|
|
h2 {
|
|
width: calc(100% - 32px);
|
|
line-height: 1.3;
|
|
margin-bottom: 26px;
|
|
color: #333333;
|
|
text-align: justify;
|
|
font-size: 40px;
|
|
}
|
|
|
|
::v-deep.stepTitle {
|
|
min-height: 44px;
|
|
font-family: PingFangSC-Regular;
|
|
font-weight: 400;
|
|
font-size: 32px;
|
|
}
|
|
|
|
.stepTime {
|
|
line-height: 44px;
|
|
}
|
|
|
|
.stepContent {
|
|
color: #343D65;
|
|
}
|
|
|
|
.status-name {
|
|
width: 96px;
|
|
height: 44px;
|
|
line-height: 44px;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
background: #FF883C;
|
|
color: #fff;
|
|
font-size: 26px;
|
|
border-radius: 8px;
|
|
|
|
&.status-1, &.status-evaluation {
|
|
background: #1AAAFF;
|
|
}
|
|
|
|
&.status-2 {
|
|
background: #42D784;
|
|
}
|
|
|
|
&.status-3 {
|
|
background: #FF4466;
|
|
}
|
|
}
|
|
|
|
.imageItem {
|
|
width: calc(33% - 16px);
|
|
height: 226px;
|
|
flex-shrink: 0;
|
|
margin-right: 16px;
|
|
margin-bottom: 16px;
|
|
|
|
&:nth-of-type(3n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.imgs {
|
|
margin-top: 10px;
|
|
|
|
img {
|
|
width: 136px;
|
|
height: 136px;
|
|
border-radius: 4px;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
img:nth-of-type(3n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.tab-content {
|
|
.tab-item {
|
|
display: inline-block;
|
|
width: 50%;
|
|
position: relative;
|
|
height: 88px;
|
|
line-height: 88px;
|
|
font-size: 32px;
|
|
color: #666;
|
|
text-align: center;
|
|
.active-line {
|
|
position: absolute;
|
|
top: 80px;
|
|
left: 50%;
|
|
margin-left: -40px;
|
|
width: 80px;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
background-color: #197DF0;
|
|
}
|
|
}
|
|
.active {
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
</style>
|