<template>
|
<div class="page_talk_detail">
|
<div class="nav">
|
<span>查看统计</span>
|
<el-button type="primary" size="medium" @click="$router.go(-1)">返回</el-button>
|
</div>
|
<section class="sec">
|
<p class="label">类型:</p>
|
<article>{{ detail.type == 1 ? "议事" : "投票" }}</article>
|
</section>
|
<section class="sec">
|
<p class="label">{{ detail.type ? "议事主题" : "投票主题" }}：</p>
|
<article>{{ detail.discussSubject }}</article>
|
</section>
|
|
<!-- 议事 -->
|
<div
|
class="image"
|
v-if="detail.type == 1"
|
>
|
<section class="sec img-margin">
|
<!-- <p class="label">议事附件：</p> -->
|
<article>
|
<span class="cover-img" v-for="(i, j) in imageList" :key="j + '-image'">
|
<img
|
:src="i"
|
alt=""
|
@click="onScaleImage(i)"
|
/>
|
</span>
|
<!-- <span v-if="!imageList.length">无</span> -->
|
</article>
|
</section>
|
</div>
|
<!-- 投票 -->
|
<div
|
class="progress"
|
v-if="detail.type == 2"
|
>
|
<section class="sec">
|
<p class="label">投票标题：</p>
|
<article class="title-vote">{{ detail.voteTitle }}</article>
|
</section>
|
<ul>
|
<li
|
v-for="(i, j) in detail.comActDiscussOptionVOS"
|
:key="j + '-talk'"
|
class="lit"
|
:class="{'lft':i.optionUrl}"
|
>
|
<span class="img-lie">
|
<img
|
:src="i.optionUrl"
|
v-if="i.optionUrl"
|
alt=""
|
@click="onScaleImage(i.optionUrl)"
|
>
|
</span>
|
<div class="title-num">
|
<span class="left">{{ i.optionContent }}</span>
|
<span class="right">{{i.num||0}}票
|
<span v-if="i.num !== 0 || i.allNum !== 0">{{Math.round(i.num / i.allNum * 10000) / 100.00 + "%"}}</span>
|
<span v-else>0%</span>
|
第{{j+1}}名
|
</span>
|
<div style="clear:both"></div>
|
</div>
|
<el-progress
|
:text-inside="true"
|
:stroke-width="18"
|
:percentage="Math.floor(i.num / i.allNum * 10000) / 100.00 || 0"
|
></el-progress>
|
</li>
|
</ul>
|
<section class="sec">
|
<p class="label">投票开始时间：</p>
|
<article>{{ detail.startTime }}</article>
|
</section>
|
<section class="sec">
|
<p class="label">投票结束时间：</p>
|
<article>{{ detail.endTime }}</article>
|
</section>
|
<section class="sec">
|
<p class="label">每人票数：</p>
|
<article>{{detail.count}}</article>
|
</section>
|
<section class="sec no-bottom">
|
<p class="label">每天重复投：</p>
|
<article>{{detail.isRepeat == 1 ? '拒绝':'允许'}}</article><br>
|
</section>
|
<p class="alert">解释说明：如果允许每天重复投，在投票活动期间则用户每天都有设置的固定票数可进行投票。</p>
|
</div>
|
|
<section class="sec">
|
<p class="label">评论数：</p>
|
<article @click="onComment">{{detail.commentNum}}</article>
|
</section>
|
<section class="sec">
|
<p class="label">点赞数：</p>
|
<article>{{detail.signNum}}</article>
|
</section>
|
<div >
|
<section class="sec">
|
<p class="label">浏览量：</p>
|
<article>{{detail.viewsNum}}</article>
|
</section>
|
<section class="sec">
|
<p class="label">发布人：</p>
|
<article>{{detail.userName}}</article>
|
</section>
|
<section class="sec">
|
<p class="label">创建时间：</p>
|
<article>{{ detail.createAt }}</article>
|
</section>
|
<section class="sec">
|
<p class="label">全部评论：</p>
|
<article>
|
<div v-for="(text, commentIndex) in comment" :key="commentIndex" class="comment-lie">
|
<div class="title-user">
|
<span class="user-img"><img :src="text.imageUrl"></span>
|
<span class="name">{{text.userName}} </span>
|
<span class="zz" v-if="text.isAuthor == 1">作者</span>
|
</div>
|
<div class="content">{{text.comment}}</div>
|
<!-- 回复评论 -->
|
<div class="commentScoll">
|
<div class="text-d" v-for="(commentC, replyIndex) in text.comActDiscussCommentVOList" :key="replyIndex">
|
<div class="reply" ><span class="name">{{commentC.userName}}:</span>{{commentC.comment}}</div>
|
<span class="delete-lie" @click="deleteLie('reply', commentC.id, commentIndex, replyIndex)">删除</span>
|
</div>
|
</div>
|
<div class="operation">
|
<span class="time">{{time}}前</span>
|
<span class="hf" @click="tocomment(text)">回复</span>
|
<span class="deltel" @click="deleteLie('comment', text.id, commentIndex)">删除</span>
|
<span class="top" @click="top(text.id)"><img src="../../../assets/image/icon_top.png"></span>
|
<!-- <span class="like" @click="likeClick(text.id)">
|
<img v-if="isLikeclick == 0" src="../../../assets/image/icon_like.png">
|
<img v-if="isLikeclick == 1" src="../../../assets/image/icon_like_red.png">
|
{{text.signNum}}
|
</span> -->
|
</div>
|
<!-- 回复 -->
|
<div class="reply-content" v-if="text.isReplay">
|
<el-input
|
type="textarea"
|
class="replay-input"
|
placeholder="请输入内容"
|
v-model="text.commentUser"
|
maxlength="30"
|
show-word-limit
|
>
|
</el-input>
|
<el-button type="primary" size="small" @click="shureReplay(text)">确认</el-button>
|
<a>
|
<span v-if="text.isComment" @click="moreComment(text)" class="morec">更多回复</span>
|
<span class="morec" v-else>暂无更多</span>
|
</a>
|
</div>
|
</div>
|
</article>
|
</section>
|
<div class="more" @click="more">
|
<span v-if="isMore">查看更多</span>
|
<span v-else>没有更多了</span>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {},
|
components: {},
|
data() {
|
return {
|
detail: {},
|
talk: [],
|
// likenum:0,
|
// isLikeclick:'',
|
comment:[],
|
pageNum:1,
|
pageSize:10,
|
isMore:true,
|
// isComment:true,
|
pageSizeComment:10,
|
day:'',
|
hours:'',
|
minute:'',
|
time:'',
|
// commentdata:{}
|
};
|
},
|
|
mounted() {
|
this.init();
|
},
|
|
computed: {
|
imageList () {
|
return this.detail.photoPah ? this.detail.photoPah.split(',') : []
|
}
|
},
|
|
methods: {
|
|
onScaleImage(i) {
|
this.$store.dispatch("setImage", {
|
time: Date.now(),
|
title: "[大图]",
|
foot: 1,
|
tool: 1,
|
pic: i,
|
list: this.imageList,
|
});
|
},
|
|
onComment(v) {
|
this.$router.push(
|
this.$nav.url("/act_talk_comment/" + this.$route.params.id)
|
);
|
},
|
|
init(isMore) {
|
let prams = {
|
id: this.$route.params.id,
|
pageNum: this.pageNum,
|
pageSize: this.pageSize,
|
result: "",
|
type: this.$route.params.type,
|
}
|
this.$api.post("discussDetail", prams, (e) => {
|
e.discussCommentList.forEach(d => {
|
let m1 = this.$$moment().format('YYYY-MM-DD HH:mm:ss');
|
|
let m2 = this.$$moment(d.createAt).format("YYYY-MM-DD HH:MM:SS")
|
|
this.day = this.$$moment(m1).diff(this.$$moment(m2), 'day')
|
// 小于30天 取还剩多少天 大于30天 取年月日
|
if(this.day < 30) {
|
this.time = this.$$moment(m1).diff(this.$$moment(m2), 'day') +'天'
|
} else {
|
this.time = d.createAt
|
}
|
//小于1天 取小时
|
if(this.day < 1) {
|
let hours = this.$$moment(m1).diff(this.$$moment(m2), 'hours');
|
this.hours = hours - (this.day*24);
|
this.time = hours - (this.day*24)+ '小时';
|
}
|
|
//小于1小时 取分钟
|
if(this.hours && this.hours < 1) {
|
let minute = this.$$moment(m1).diff(this.$$moment(m2), 'minute')
|
this.time = minute + '分钟';
|
}
|
|
/** 回复输入框绑定的value值 */
|
d.commentUser = '';
|
/** 回复输入框是否显示 */
|
d.isReplay = false;
|
/** 更多回复的分页数 */
|
d.pageNumComment = 1;
|
/** 是否有更多回复 */
|
d.isComment = true;
|
});
|
|
const { discussCommentList = [], ...ohter } = e;
|
this.detail = {...ohter};
|
|
this.comment = (isMore ? [...this.comment] : []).concat(discussCommentList);
|
|
if(discussCommentList.length > 0) {
|
this.isMore = true;
|
} else {
|
this.isMore = false;
|
}
|
});
|
},
|
|
/** 回复 */
|
shureReplay(comment) {
|
let params = {
|
comment: comment.commentUser,
|
id: comment.id,
|
}
|
this.$api.post("discusscommentback", params, (e) => {
|
comment.pageNumComment = 1;
|
this.getReplyListByCommentId(comment);
|
});
|
},
|
|
/** 更多回复 */
|
moreComment(comment) {
|
comment.pageNumComment ++;
|
this.getReplyListByCommentId(comment)
|
},
|
|
/** 根据评论ID获取回复列表 */
|
getReplyListByCommentId (comment) {
|
let params = {
|
id: comment.id,
|
pageNum: comment.pageNumComment,
|
pageSize: this.pageSizeComment,
|
}
|
|
this.$api.post("discuss/commment/reply", params, (e) => {
|
|
if (comment.pageNumComment === 1) {
|
comment.comActDiscussCommentVOList = e.records;
|
} else {
|
comment.comActDiscussCommentVOList = comment.comActDiscussCommentVOList.concat(e.records);
|
}
|
|
comment.isComment = comment.pageNumComment < e.pages;
|
});
|
},
|
|
/**
|
* 删除评论 或者 删除回复
|
* @param type: comment, reply
|
* @param id 评论或者回复的ID
|
* @param commentIndex 评论的索引
|
* @param replyIndex 回复的索引
|
*/
|
deleteLie(type, id, commentIndex, replyIndex) {
|
this.$api.del(`discuss/comment/del?id=${id}`, {}, (e) => {
|
demo.toast('删除成功');
|
if (type === 'comment') {
|
this.comment.splice(commentIndex, 1);
|
this.init()
|
} else {
|
this.comment[commentIndex].comActDiscussCommentVOList.splice(replyIndex, 1);
|
|
}
|
});
|
},
|
|
// likeClick() {
|
// if(this.isLikeclick==0){
|
// this.isLikeclick=1
|
// this.likenum=this.likenum+1
|
// }else{
|
// this.isLikeclick=0
|
// this.likenum=this.likenum-1
|
// }
|
// },
|
|
more() {
|
if(this.isMore) {
|
this.pageNum+=1;
|
this.init(true);
|
}
|
},
|
|
top(id) {
|
this.$api.get("discusscommenttop", {id:id}, (e) => {
|
this.init();
|
});
|
},
|
|
tocomment(text) {
|
text.isReplay = !text.isReplay
|
}
|
},
|
|
};
|
</script>
|
<style lang='less' scoped>
|
.page_talk_detail {
|
overflow-y: auto;
|
.foot {
|
margin-bottom: 20px;
|
}
|
.nav {
|
padding: 20px 0;
|
span {
|
font-size: 18px;
|
height: 40px;
|
line-height: 40px;
|
font-weight: 700;
|
margin-right: 30px;
|
}
|
}
|
.comment-lie {
|
margin-bottom: 20px;
|
.title-user {
|
width: 915px;
|
height: 28px;
|
line-height: 28px;
|
display: flex;
|
.user-img {
|
width: 28px;
|
height: 28px;
|
display: inline-block;
|
border-radius:100% ;
|
overflow: hidden;
|
background: #F1F1F1;
|
img {
|
width: 100%;
|
}
|
}
|
.name {
|
font-size: 16px;
|
color: #333;
|
line-height: 28px;
|
padding-left: 9px;
|
padding-right: 9px;
|
}
|
.zz {
|
width: 30px;
|
height: 16px;
|
background: #E36969;
|
border-radius: 2px;
|
display: inline-block;
|
text-align: center;
|
line-height: 16px;
|
font-size: 12px;
|
position: relative;
|
top:8px;
|
color: #fff;
|
}
|
|
}
|
.content {
|
color: #181818;
|
padding: 8px 0;
|
width: 915px;
|
}
|
.reply {
|
width: 800px;
|
background: #F1F1F1;
|
margin-bottom: 5px;
|
.name {
|
font-size: 14px;
|
color: #3388FF;
|
padding:0 8px;
|
}
|
}
|
.operation {
|
span {
|
margin-right: 20px;
|
font-size: 14px;
|
}
|
.time {
|
color: #9DA3B1;
|
}
|
.hf {
|
color: #3388FF;
|
cursor: pointer;
|
}
|
.deltel {
|
color: #E75050;
|
cursor: pointer;
|
}
|
.top {
|
width: 40px;
|
height: 13px;
|
display: inline-block;
|
position: relative;
|
top: 2px;
|
cursor: pointer;
|
img {
|
width: 100%;
|
position: absolute;
|
}
|
}
|
.like {
|
color: #E75050;
|
cursor: pointer;
|
img {
|
width: 24px;
|
height: 24px;
|
margin-right: 5px;
|
position: relative;
|
top: 6px;
|
}
|
}
|
|
}
|
}
|
.commentScoll {
|
max-height: 300px;
|
overflow: auto;
|
width: 950px;
|
padding-top: 20px;
|
.text-d {
|
display: flex;
|
}
|
.delete-lie {
|
color: #E75050;
|
cursor: pointer;
|
padding-left: 10px;
|
font-size: 13px;
|
}
|
}
|
.p {
|
margin: 2px 0 8px;
|
padding-left: 50px;
|
box-sizing: border-box;
|
p {
|
font-size: 14px;
|
margin-bottom: 5px;
|
line-height: 1.2;
|
b {
|
padding-right: 10px;
|
cursor: pointer;
|
}
|
}
|
}
|
.sec article {
|
line-height: 32px;
|
color: #333;
|
}
|
.img-margin {
|
padding-left: 100px;
|
}
|
.no-bottom {
|
margin-bottom: 0;
|
}
|
.alert {
|
color: #3388FF;
|
font-size: 13px;
|
padding-bottom: 20px;
|
padding-left: 100px;
|
}
|
.cover-img {
|
width: 128px;
|
height: 72px;
|
display: inline-block;
|
margin: 0 5px 5px 0;
|
border-radius: 3px;
|
overflow: hidden;
|
}
|
.image {
|
img {
|
// width: 128px;
|
// height: 72px;
|
// display: inline-block;
|
// margin: 0 5px 5px 0;
|
width: 100%;
|
cursor: pointer;
|
}
|
}
|
.progress {
|
.sec {
|
margin-bottom: 22px;
|
.title-vote {
|
line-height: 32px;
|
}
|
}
|
.title-num {
|
padding-bottom: 10px;
|
padding-top: 6px;
|
.left {
|
float: left;
|
font-size: 16 px;
|
font-weight: 500;
|
color: #333333;
|
}
|
.right {
|
float: right;
|
font-size: 16px;
|
color: #3388FF;
|
}
|
|
}
|
|
ul {
|
padding: 10px 30px;
|
}
|
li {
|
width: 400px;
|
margin-bottom: 10px;
|
b {
|
display: block;
|
margin-bottom: 2px;
|
font-size: 13px;
|
line-height: 1.3;
|
font-weight: 700;
|
}
|
}
|
/deep/.el-progress-bar__outer {
|
border-radius: 0;
|
}
|
/deep/.el-progress-bar__inner {
|
border-radius: 0;
|
}
|
}
|
.lit {
|
position: relative;
|
box-sizing: border-box;
|
&.lft {
|
padding-left: 97px;
|
min-height: 67px;
|
}
|
.img-lie {
|
width: 80px;
|
height: 62px;
|
overflow: hidden;
|
margin-right: 5px;
|
position: absolute;
|
left: 5px;
|
top: 0;
|
img {
|
// width: 100%;
|
height: 100%;
|
cursor: pointer;
|
}
|
}
|
|
}
|
.replay-input {
|
width: 600px;
|
}
|
.more {
|
padding: 15px 0;
|
font-size: 14px;
|
color: #3388FF;
|
cursor: pointer;
|
width: 100%;
|
text-align: center;
|
}
|
.morec {
|
padding-left: 5px;
|
font-size: 14px;
|
color: #3388FF;
|
cursor: pointer;
|
}
|
}
|
</style>
|
