<template>
|
<div class="details-container">
|
<el-descriptions title="用户信息" size="medium">
|
<el-descriptions-item label="投票主题">{{
|
detailInfo.voteTitle
|
}}</el-descriptions-item>
|
<el-descriptions-item label="发布人">{{
|
detailInfo.userName
|
}}</el-descriptions-item>
|
<el-descriptions-item label="创建时间">{{
|
detailInfo.createAt
|
}}</el-descriptions-item>
|
<el-descriptions-item label="议事内容">
|
<span v-if="detailInfo.contentType == 1">社区议事</span>
|
<span v-if="detailInfo.contentType == 2">院落议事</span>
|
<span v-if="detailInfo.contentType == 3">党群议事</span>
|
<span v-if="detailInfo.contentType == 4">居民议事</span>
|
<span v-if="detailInfo.contentType == 5">其他</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="投票开始时间">{{
|
detailInfo.startTime
|
}}</el-descriptions-item>
|
<el-descriptions-item label="投票结束时间">{{
|
detailInfo.endTime
|
}}</el-descriptions-item>
|
<el-descriptions-item label="每人票数">{{
|
detailInfo.count
|
}}</el-descriptions-item>
|
<el-descriptions-item label="签字">{{
|
detailInfo.needSign ? "需要" : "不需要"
|
}}</el-descriptions-item>
|
<el-descriptions-item label="投票范围">
|
<span v-if="detailInfo.voteScope == 1">全部居民</span>
|
<span v-if="detailInfo.voteScope == 2">志愿者</span>
|
<span v-if="detailInfo.voteScope == 3">党员</span>
|
</el-descriptions-item>
|
</el-descriptions>
|
<el-tabs v-model="activeName" @tab-click="labelHandleClick">
|
<el-tab-pane label="投票数据" name="1">
|
<div class="fl-f">
|
<div class="left-sta-ccontent">
|
<h5>各项投票统计</h5>
|
<div class="fl-co">
|
<div
|
class="mr-t-20"
|
v-for="(it, ix) in comActDiscussOptionVOS"
|
:key="ix"
|
>
|
<div class="fl-al">
|
<div class="fl-cen v-h" style="width: 15%">占位</div>
|
<div class="tl-1" style="width: 85%">
|
{{ it.optionContent }}
|
</div>
|
</div>
|
<div class="fl-al">
|
<div class="fl-cen" style="width: 15%">{{ ix + 1 }}</div>
|
<div style="width: 85%" class="mr-t-10 mr-b-10">
|
<el-progress
|
:text-inside="true"
|
:stroke-width="26"
|
:percentage="it.percent || 0"
|
></el-progress>
|
</div>
|
</div>
|
<div class="fl-al">
|
<div class="fl-cen v-h" style="width: 15%">占位</div>
|
<div class="fc-170" style="width: 85%">
|
{{ it.num }}票 占比{{ it.percent || 0 }}%
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="right-sta-ccontent">
|
<h5>投票详情</h5>
|
<!-- 列表 -->
|
<TablePro :tableLsit="pageList" :columnList="columnList">
|
<template v-slot:btn="scope">
|
<el-button @click="lookDetails(scope.row)">查看</el-button>
|
</template>
|
</TablePro>
|
<!-- 分页 -->
|
<div class="bottom-page">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="pageNum"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="pageSize"
|
background
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
></el-pagination>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="互动数据" name="2">
|
<div class="fl-al">
|
<span class="mr-r-50">点赞数：{{ detailInfo.signNum }}</span>
|
<span class="mr-r-50">评论数：{{ detailInfo.commentNum }}</span>
|
<span>浏览量：{{ detailInfo.viewsNum }}</span>
|
</div>
|
<div class="fl-co mr-t-20" style="width: 600px">
|
<div class="mr-b-20">全部评论:</div>
|
<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>
|
</div>
|
<!-- 回复 -->
|
<div class="reply-content" v-if="text.isReplay">
|
<el-input
|
type="textarea"
|
class="replay-input mr-b-10 mr-t-10"
|
placeholder="请输入内容"
|
v-model="text.commentUser"
|
maxlength="30"
|
show-word-limit
|
>
|
</el-input>
|
<el-button
|
type="primary"
|
size="mini"
|
@click="shureReplay(text, commentIndex)"
|
>确认</el-button
|
>
|
<a>
|
<span
|
v-if="text.isComment"
|
@click="moreComment(text)"
|
class="morec"
|
>更多回复</span
|
>
|
<span class="morec" v-else>暂无更多</span>
|
</a>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
<el-button class="mr-t-20" size="mini" @click="$router.back()"
|
>返回</el-button
|
>
|
<!-- 弹框 -->
|
<el-dialog
|
width="50%"
|
title="查看投票"
|
:visible.sync="dialogTableVisible"
|
:before-close="closeLook"
|
append-to-body
|
>
|
<div class="fl-f mr-b-20">
|
<div>用户昵称：{{ detailsInfo.userNickName }}</div>
|
<div class="mr-l-50">投票时间：{{ detailsInfo.createAt }}</div>
|
</div>
|
<div class="mr-b-20">
|
<div>已投选项：</div>
|
<div>{{ detailsInfo.optionContent }}</div>
|
<div v-if="detailsInfo.reason">原因：{{ detailsInfo.reason }}</div>
|
<el-image
|
v-if="detailsInfo.optionUrl"
|
class="mr-t-10"
|
style="width: 150px; height: 150px"
|
:preview-src-list="[detailsInfo.optionUrl]"
|
:src="detailsInfo.optionUrl"
|
>
|
</el-image>
|
</div>
|
<div class="mr-b-20" v-if="detailsInfo.signUrl">
|
<div class="mr-b-10">签字：</div>
|
<el-image
|
style="width: 150px; height: 150px"
|
:preview-src-list="[detailsInfo.signUrl]"
|
:src="detailsInfo.signUrl"
|
>
|
</el-image>
|
</div>
|
<el-button class="mr-t-20" size="mini" @click="closeLook"
|
>关 闭</el-button
|
>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
total: 0,
|
pageNum: 1,
|
pageSize: 10,
|
activeName: "1",
|
pageList: [], // 列表
|
columnList: [
|
{ type: "index" },
|
{ label: "用户昵称", key: "userNickName" },
|
// { label: "票数", key: "phone" },
|
{ label: "投票时间", key: "createAt" },
|
{
|
type: "custom",
|
slot: "btn",
|
label: "操作",
|
width: "250",
|
fixed: "right"
|
}
|
], // 列表属性
|
dialogTableVisible: false,
|
|
detailInfo: {},
|
comment: [],
|
pageNum: 1,
|
pageSize: 10,
|
isMore: true,
|
// isComment:true,
|
pageSizeComment: 10,
|
day: "",
|
hours: "",
|
minute: "",
|
time: "",
|
comActDiscussOptionVOS: [],
|
detailsInfo: {}
|
};
|
},
|
mounted() {
|
this.getDetailsInfo();
|
this.getTable();
|
},
|
|
computed: {
|
imageList() {
|
return this.detailInfo.photoPah
|
? this.detailInfo.photoPah.split(",")
|
: [];
|
}
|
},
|
methods: {
|
labelHandleClick(e) {
|
console.log(e.name, this.activeName);
|
},
|
closeLook() {
|
this.dialogTableVisible = false;
|
},
|
lookDetails(row) {
|
this.dialogTableVisible = true;
|
this.$api.get(
|
"detailVoteSituation",
|
{
|
optionUserId: row.id
|
},
|
res => {
|
this.detailsInfo = res || {};
|
}
|
);
|
},
|
getTable() {
|
const requestData = {
|
pageNum: this.pageNum,
|
pageSize: this.pageSize,
|
discussId: this.$route.query.id
|
};
|
this.$api.post("pageVoteSituation", requestData, res => {
|
this.pageList = res.records;
|
this.total = res.total;
|
});
|
},
|
// 切换条数
|
handleSizeChange(val) {
|
this.pageSize = val;
|
this.getTable();
|
},
|
// 切换页
|
handleCurrentChange(val) {
|
this.pageNum = val;
|
this.getTable();
|
},
|
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)
|
);
|
},
|
|
getDetailsInfo(isMore) {
|
let prams = {
|
id: this.$route.query.id,
|
pageNum: this.pageNum,
|
pageSize: this.pageSize,
|
type: 2
|
};
|
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.detailInfo = { ...ohter };
|
|
this.comment = (isMore ? [...this.comment] : []).concat(
|
discussCommentList
|
);
|
if (discussCommentList.length > 0) {
|
this.isMore = true;
|
} else {
|
this.isMore = false;
|
}
|
this.comActDiscussOptionVOS = e.comActDiscussOptionVOS || [];
|
// this.tableLsit = e.comActDiscussOptionUserVOList || [];
|
});
|
},
|
|
/** 回复 */
|
shureReplay(comment, index) {
|
let params = {
|
comment: comment.commentUser,
|
id: comment.id
|
};
|
this.$api.post("discusscommentback", params, e => {
|
comment.pageNumComment = 1;
|
this.comment[index].commentUser = "";
|
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.getDetailsInfo();
|
} else {
|
this.comment[commentIndex].comActDiscussCommentVOList.splice(
|
replyIndex,
|
1
|
);
|
}
|
});
|
},
|
more() {
|
if (this.isMore) {
|
this.pageNum += 1;
|
this.getDetailsInfo(true);
|
}
|
},
|
|
top(id) {
|
this.$api.get("discusscommenttop", { id: id }, e => {
|
this.getDetailsInfo();
|
});
|
},
|
|
tocomment(text) {
|
text.isReplay = !text.isReplay;
|
}
|
}
|
};
|
</script>
|
<style scoped lang="less">
|
.details-container {
|
padding-top: 20px;
|
overflow: auto;
|
}
|
.left-sta-ccontent {
|
width: 30%;
|
}
|
.right-sta-ccontent {
|
width: 70%;
|
}
|
.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: 300px;
|
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: 10px;
|
.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>
|
<style>
|
.el-progress-bar__outer {
|
height: 20px !important;
|
}
|
</style>
|
