<template>
|
<div class="clap_detail">
|
<div class="head">
|
<div>
|
<div class="title">随手拍详情</div>
|
<div v-if="detail.status === 3" class="tag">已驳回</div>
|
</div>
|
<el-button @click="$router.go(-1)" size="medium" type="primary"
|
>返回</el-button
|
>
|
</div>
|
<v-tool-scroll ids="clap-detail-scroll" class="content">
|
<div class="fm w_row clearfix">
|
<!-- <p class="w_col_8">事件主键：{{detail.id}}</p> -->
|
<p class="w_col_8">发起人：{{ detail.sponsorName }}</p>
|
<p class="w_col_8">创建时间：{{ detail.createAt }}</p>
|
<p class="w_col_8"></p>
|
<p class="w_col_8">发起人手机号：{{ detail.phone }}</p>
|
<p class="w_col_8" v-if="detail.easyType">
|
类型：{{ detail.easyType == 1 ? "心情类" : "治理类" }}
|
</p>
|
<p class="w_col_8" v-if="detail.activityType">
|
内容质量：{{
|
["", "优秀", "良好", "普通", "合格"][detail.activityType]
|
}}（{{ detail.activityAmount || 0 }}元）
|
</p>
|
<p class="w_col_24">事件详情：{{ detail.detail }}</p>
|
<section class="w_col_24 image" v-if="detail.photoPathList">
|
<template v-if="(detail.photoPathList || '').indexOf('.mp4') !== -1">
|
<video
|
:controls="true"
|
style="width: 300px;height: 150px"
|
:autoplay="false"
|
:src="detail.photoPathList"
|
>
|
您的浏览器不支持 video 标签。
|
</video>
|
</template>
|
<template v-else>
|
<span
|
v-for="(i, j) in (detail.photoPathList || '')
|
.split(',')
|
.filter(k => {
|
return k !== '';
|
})"
|
:key="j + '-image'"
|
>
|
<img :src="i" alt="" @click="onScaleImage(j, 'photoPathList')" />
|
</span>
|
</template>
|
</section>
|
<p class="w_col_24">
|
事件发生地：{{ detail.happenAddr }}
|
{{ detail.addrRemark ? detail.addrRemark : "" }}
|
</p>
|
</div>
|
<div class="feedback-box" v-if="detail.status !== 1">
|
<div class="label">处理记录：</div>
|
<div class="feedback-r">
|
<!-- 评价内容 -->
|
<div class="feedback-list">
|
<div class="list" v-for="(text, i) in detail.evaluateList" :key="i">
|
<div class="title-custom">
|
{{ text.createAt.substring(0, 10) }} 用户评价：{{
|
text.score
|
}}星
|
</div>
|
<div class="title-custom">{{ text.content }}</div>
|
</div>
|
</div>
|
|
<div class="feedback-list" v-if="detail.status === 3">
|
<div class="list">
|
<div class="title-custom">
|
{{ detail.feedbackAt }} {{ detail.handlerName }}审核驳回
|
</div>
|
<div class="title-custom">{{ detail.rejectReason }}</div>
|
</div>
|
</div>
|
<div class="feedback-list" v-else>
|
<div
|
class="list"
|
v-for="(item, index) in detail.photoFeedbackList"
|
:key="item.id"
|
>
|
<div
|
v-if="index === 0 && detail.status === 4"
|
class="title-custom"
|
>
|
{{ item.createAt }} {{ item.createByName }} 治理完成
|
</div>
|
<div
|
v-if="detail.status !== 4 || detail.status !== 5"
|
class="title-custom"
|
>
|
{{ item.createAt }} {{ item.createByName }}反馈
|
</div>
|
<div class="title-custom">{{ item.feedbackContent }}</div>
|
<div class="image-list">
|
<img
|
@click="onScaleImage1(url, item.imgList)"
|
v-for="url in item.imgList"
|
:src="url"
|
alt=""
|
/>
|
</div>
|
<div
|
v-if="
|
detail.photoFeedbackList.length - 1 === index &&
|
(detail.status == 2 ||
|
detail.status == 4 ||
|
detail.status == 5)
|
"
|
class="title-custom"
|
>
|
{{ detail.examineAt }} {{ item.createByName }}审核通过
|
</div>
|
</div>
|
</div>
|
|
<!-- 审核通过 -->
|
<div class="feedback-list" v-if="!detail.photoFeedbackList">
|
<div class="list">
|
<div
|
v-if="
|
detail.status == 2 || detail.status == 4 || detail.status == 5
|
"
|
class="title"
|
>
|
{{ detail.examineAt }} {{ detail.handlerName }}审核通过
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="feedback-box" v-if="detail.status !== 1">
|
<div class="label">人大代表反馈记录：</div>
|
<div class="feedback-r">
|
<!-- 评价内容 -->
|
<div class="feedback-list">
|
<div
|
class="list"
|
v-for="(fk, index1) in detail.photoFeedbackListForDpc"
|
:key="index1"
|
>
|
<div class="title-custom">{{ fk.createAt }}</div>
|
<div class="title-custom">{{ fk.feedbackContent }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</v-tool-scroll>
|
<div class="foot">
|
<!-- <el-button-->
|
<!-- size="small"-->
|
<!-- @click="$router.go(-1)"-->
|
<!-- >返回</el-button>-->
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {},
|
components: {},
|
data() {
|
return {
|
id: "",
|
detail: {}
|
};
|
},
|
watch: {},
|
methods: {
|
onScaleImage1(j, v) {
|
this.$store.dispatch("setImage", {
|
time: Date.now(),
|
pic: j,
|
v,
|
tool: true
|
});
|
},
|
onScaleImage(j, v) {
|
let list = (this.detail[v] || "").split(",").filter(k => {
|
return k !== "";
|
});
|
this.$store.dispatch("setImage", {
|
time: Date.now(),
|
pic: list[j],
|
list,
|
tool: true
|
});
|
},
|
init() {
|
if (!this.id) {
|
demo.toast("无效随手拍");
|
return 0;
|
}
|
this.$api.get("communityactivity/easyphoto", { id: this.id }, e => {
|
this.detail = e;
|
if (this.detail.photoFeedbackList) {
|
this.detail.photoFeedbackList.map(item => {
|
item.imgList = item.feedbackImg ? item.feedbackImg.split(",") : [];
|
});
|
}
|
console.log(this.detail);
|
});
|
}
|
},
|
mounted() {
|
this.id = this.$route.params.id;
|
this.init();
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.clap_detail {
|
.head {
|
font-size: 18px;
|
height: 40px;
|
line-height: 40px;
|
font-weight: bold;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
.head > div:nth-child(1) {
|
display: flex;
|
align-items: center;
|
}
|
.tag {
|
width: 60px;
|
text-align: center;
|
background: rgb(236, 128, 141);
|
border-radius: 3px;
|
height: 24px;
|
line-height: 24px;
|
vertical-align: middle;
|
color: #fff;
|
font-size: 13px;
|
font-weight: 400;
|
margin-left: 15px;
|
}
|
.content {
|
height: calc(~"100% - 90px");
|
}
|
.foot {
|
margin-top: 5px;
|
}
|
.fm {
|
p {
|
font-size: 14px;
|
line-height: 22px;
|
color: #000;
|
padding: 8px 0;
|
min-height: 38px;
|
}
|
section {
|
padding: 8px 0;
|
display: flex;
|
flex-wrap: wrap;
|
img {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
margin: 5px;
|
background-color: #eee;
|
display: block;
|
border-radius: 3px;
|
}
|
}
|
section.image {
|
span {
|
width: 175px;
|
height: 155px;
|
overflow: hidden;
|
display: inline-block;
|
}
|
}
|
}
|
.feedback-box {
|
width: 100%;
|
display: flex;
|
margin-bottom: 20px;
|
.label {
|
width: 130px;
|
padding-top: 17px;
|
font-size: 14px;
|
}
|
.feedback-r {
|
flex: 1;
|
|
.feedback-list {
|
width: 500px;
|
.list {
|
margin-top: 10px;
|
}
|
.title-custom {
|
line-height: 20px;
|
font-size: 14px;
|
}
|
.image-list {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
img {
|
margin: 5px;
|
width: 50px;
|
height: 50px;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
