fj-dc-ui/.svn/pristine/d4/d4d4c816603d004effcc8c640bda1db18cd7c0c7.svn-base

<!--  -->
<template>
    <div>
		
        <div class="commentAll">
            <div style="width: 100px;height: 30px;">
                <span class="date-dz-left pull-left comment-time">{{'共 ' + total + ' 条评论'}}</span>
            </div>
            <div class="comment-show" v-for="(item,index) in tableData" :key="index" >
                <div class="comment-show-con clearfix">
                    <div class="comment-show-con-img pull-left"><img src="../../assets/img/user_man.png" alt=""></div>
                    <div class="comment-show-con-list pull-left clearfix">
                        <div class="pl-text clearfix">
                            <a href="#" class="comment-size-name">{{item.persName == null ? '匿名：':item.persName + '：'}}</a>
                            <span class="my-pl-con">&nbsp;{{item.content}}</span>
                        </div>
                        <div class="date-dz">
                            <span class="date-dz-left pull-left comment-time">{{item.evalTm}}</span>
                            <div class="date-dz-right pull-right comment-pl-block">
                                <a  href="javascript:;" class="date-dz-z pull-left">
									<i class="date-dz-z-click-red"></i>{{mesType == '1' ? '同问' : mesType == '2' ?'点赞':'点赞'}} 
									(<i class="z-num">{{item.likeNum}}</i>)
								</a>
                                <span v-if="mesType == '2' ? true:false" class="pull-left date-dz-line">|</span>
                                <a v-if="mesType == '2' ? true:false" href="javascript:;" class="date-dz-z pull-left">
									<i class="date-dz-z-click-blue"></i>吐槽 
									(<i class="z-num">{{item.shitNum}}</i>)
								</a>
                                <a v-if="mesType == '' ? true:false" href="javascript:;" class="date-dz-z pull-left" style="margin-left:15px;">
									{{item.mesType == '1'? '提问' : item.mesType == '2' ? '留言':'会务组评价'}} 
								</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
			<div style="text-align:center;margin-top:15px;">
				<el-button type="text" @click="addLists">查看更多评论</el-button>
				<el-button type="text" @click="retractLists" v-if="retract">收起</el-button>
			</div>
        </div>
		<el-row>
			<div class="commentAll">
				<backFeedDetails
				:meetingInfoRow="meetingInfoRow"
				:scheId="scheId"
				:mesType="mesType"
				:orderBy="orderBy"
				></backFeedDetails>
			</div>
		</el-row>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import backFeedDetails from "./backFeedDetails.vue"
import { getFeedBackTableDataLists,deleteFeedBackData} from "../../api/meetingAPI.js";
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
		backFeedDetails
	},
    props:['meetingInfoRow','mesType','scheId'],
    data() {
    //这里存放数据
        return {
			retract:false,
            tableData:[],
            pageNum:1,
            pageSize:5,
			total:10,
			pageNumTotal:0,
			orderBy:'LIKE_NUM desc',
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
		mesType(n,o){
			if(n == '2'){
				this.orderBy = 'LIKE_NUM+SHIT_NUM desc';
			}else{
				this.orderBy = 'LIKE_NUM desc';
			}
			this.mesType = n;
			this.tableData = [];
			this.retractLists();
			this.getFeedBackTableData();
		},
		scheId(n,o){
			if(this.mesType == '2'){
				this.orderBy = 'LIKE_NUM+SHIT_NUM desc';
			}else{
				this.orderBy = 'LIKE_NUM desc';
			}
			this.scheId = n;
			this.tableData = [];
			this.retractLists();
			this.getFeedBackTableData();
		}
	},
    //方法集合
    methods: {
        getFeedBackTableData(item){
            var _self = this;
            let obj = {
                "meetId":_self.meetingInfoRow.id,
                "pageNum":_self.pageNum,
                "pageSize":_self.pageSize,
                "mesType":_self.mesType,
                "orderBy":_self.orderBy,
                "scheId":_self.scheId,
                // "isAnimity":_self.formInline.isAnimity,
            }
            getFeedBackTableDataLists(obj).then(response => {
                // _self.tableData = response.data.list;
				_self.total = response.data.total;
				
				let y;
				_self.tableData.push(...response.data.list);
				y = _self.total%_self.pageSize;
				if(y = 0){
					_self.pageNumTotal = parseInt(_self.total/_self.pageSize);
				}else{
					_self.pageNumTotal = Math.ceil(_self.total/_self.pageSize);
				}
            });
		},
		addLists(){
			this.pageNum ++;
			this.retract = true;
			if(this.pageNum > this.pageNumTotal){
				this.$message.info('无更多数据！');
				this.pageNum --;
			}else{
				this.getFeedBackTableData();
			}
		},
		retractLists(){
			this.pageNum = 1;
			this.retract = false;
			this.tableData = this.tableData.slice(0,5);
		}
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
		this.getFeedBackTableData();
		this.mesType = '1';
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss">
a{text-decoration: none;}
/*清除浮动*/
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	zoom: 1;
}
/*浮动*/
.pull-right {
	float: right !important;
}

.pull-left {
	float: left !important;
}
/*----------------------------------------------------------------------------------------------------------*/
.content {
	float: left;
}

.flex-text-wrap,pre {
	margin: 0 !important;
}

.commentAll {
	padding: 20px;
	border: 1px solid #ededed;
	margin: 20px auto;
}

.plBtn {
	width: 75px;
	height: 36px;
	line-height: 36px;
	background-color: #339b53;
	text-align: center;
	display: block;
	float: right;
	color: #FFFFFF;
	font-size: 12px;
	border-radius: 6px;
	margin-right: 2px;
	margin-top: 20px;
}

.plBtn:hover {
	background-color: #2f904d;
}

/*----------评论区域 begin----------*/
.comment-show {
    &:first-child{
        margin-top: 20px;
        border-top: 1px solid #EDEDED;
    }
}

.comment-show-con {
	width: 100%;
	border-bottom: 1px solid #EDEDED;
	padding: 10px 0;
}

.comment-show-con-img {
	width: 48px;
	height: 48px;
	overflow: hidden;
	margin-top: 5px;
}

.comment-show-con-list {
	width: 93%;
	margin-left: 3%;
}

.pl-text {
	width: 100%;
	margin-top: 7px;
	word-wrap: break-word;
	overflow: hidden;
}

.date-dz {
	width: 100%;
	float: left;
}

.hf-list-con {
	float: left;
	width: 100%;
	background-color: #eaeaec;
	margin-top: 7px;
}

.comment-size-name {
	font-size: 12px;
	color: #339b53;
}

.my-pl-con {
	font-size: 12px;
	color: #8b8b8b;
	width: 100%;
}

.date-dz-left {
	font-size: 12px;
	color: #8b8b8b;
	display: block;
	padding-top: 18px;
}

.comment-time, .comment-pl-block {
	padding-top: 7px;
}

.comment-pl-block {
	margin-top: 0;
}

.date-dz-right {
	display: block;
	padding-top: 6px;
	padding-right: 18px;
	position: relative;
	overflow: hidden;
}

.removeBlock {
	float: left;
	font-size: 12px;
	color: #8b8b8b;
	margin-right: 24px;
	display: block;
	opacity: 0;
}

.hf-con-block {
	display: block;
}

.date-dz-pl, .date-dz-line, .date-dz-z {
	font-size: 12px;
	color: #8b8b8b;
}

.date-dz-line {
	display: block;
	padding: 0 20px;
}

.date-dz-z-click-red {
	width: 16px;
	height: 16px;
	display: block;
	float: left;
	background-image: url(../../assets/img/good.png);
	background-repeat: no-repeat;
	margin-right: 5px;
}
.date-dz-z-click-blue {
	width: 16px;
	height: 16px;
	display: block;
	float: left;
	background-image: url(../../assets/img/shit.png);
	background-repeat: no-repeat;
	margin-right: 5px;
}

.z-num {
	font-style: normal;
}

.date-dz-z-click {
	color: #b83b44;
}

.red {
	background-position: -6px -119px !important;
}

.hf-pl {
	width: 70px;
	height: 30px;
	line-height: 30px;
	background-color: #339b53;
	text-align: center;
	display: block;
	float: right;
	color: #FFFFFF;
	font-size: 12px;
	border-radius: 6px;
	margin-right: 2px;
	margin-top: 20px;
}

.hf-con {
	width: 100%;
	margin-top: 24px;
}

.hf-input {
	font-size: 12px;
}

.all-pl-con {
	width: 96%;
	padding: 2% 0;
	float: left;
	margin: 0 2%;
}

.atName {
	font-size: 12px;
	color: #339b53;
}

.hfpl-text {
	margin-top: 0;
}

.date-dz:hover .removeBlock {
	opacity: 1;
}

.hf-list-con .all-pl-con {
	border-top: 1px solid #d9d9d9;
	padding-bottom: 12px;
}

.hf-list-con .all-pl-con:first-child {
	border-top: 0;
}



</style>