|
|
|
<template>
|
|
|
|
<div class="container">
|
|
|
|
<div class="tiezhlist tiezhlistbox">
|
|
|
|
<div class="tiezhlist tiezhlistbox" v-if="tiezishow">
|
|
|
|
<div class="tieziitem">
|
|
|
|
<div class="tiezitop flexone" >
|
|
|
|
<div class="tieziimg" @click="personclick">
|
|
...
|
...
|
@@ -22,7 +22,7 @@ |
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<img
|
|
|
|
:src="item"
|
|
|
|
:src="item.logo_image"
|
|
|
|
class="banggongimg"
|
|
|
|
alt=""
|
|
|
|
v-for="(item, index) in tiezidetail.user.label"
|
|
...
|
...
|
@@ -47,6 +47,7 @@ |
|
|
|
|
|
|
|
<div class="teizicontenttop flextwo">
|
|
|
|
<div class="tiezicontentname">{{ tiezidetail.title }}</div>
|
|
|
|
<img src="../../../assets/share.png" alt="" class='shareimg' @click="sharebtn">
|
|
|
|
<img
|
|
|
|
src="../../../assets/xingxing_icon@2x.png"
|
|
|
|
alt=""
|
|
...
|
...
|
@@ -140,12 +141,12 @@ |
|
|
|
:key="index"
|
|
|
|
>
|
|
|
|
<div class="tiezitop flexone">
|
|
|
|
<div class="tieziimg">
|
|
|
|
<div class="tieziimg" @click.stop="begincomment(item)">
|
|
|
|
<img :src="item.user.avatar" alt="" />
|
|
|
|
</div>
|
|
|
|
<div class="tieziright flextwo">
|
|
|
|
<div class="tiezirighttop flextwo">
|
|
|
|
<div class="flexone">
|
|
|
|
<div class="flexone" @click.stop="begincomment(item)">
|
|
|
|
<div>
|
|
|
|
<div class="tieziming">{{ item.user.nickname }}</div>
|
|
|
|
<div class="tiezifen">{{item.createtime}}</div>
|
|
...
|
...
|
@@ -222,7 +223,6 @@ |
|
|
|
</div>
|
|
|
|
</van-list>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="commentboxfix flexone">
|
|
|
|
<div class="writebox">
|
|
|
|
<input type="text" placeholder="写点什么..." v-model="comment" />
|
|
...
|
...
|
@@ -230,6 +230,56 @@ |
|
|
|
<div class="fasend" @click="sendcomment">发送</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 消息弹出层 -->
|
|
|
|
<div class="register" v-if="showcomment">
|
|
|
|
<div class="commentwrap">
|
|
|
|
<div class="commenttop flextwo">
|
|
|
|
<div class="commenttopleft"></div>
|
|
|
|
<div class="commenttopmiddle">全部{{child.length}}条评论</div>
|
|
|
|
<img src="../../../assets/close.png" alt class="closeimg" @click="hidecomment"/>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="commentbox">
|
|
|
|
<div class="nodata" v-if="child.length == 0">暂无评论</div>
|
|
|
|
<div>
|
|
|
|
<div class="commentboxitem" v-for="(item, index) in child"
|
|
|
|
:key="index">
|
|
|
|
<div class="commentimg">
|
|
|
|
<img :src="item.user.avatar" alt />
|
|
|
|
</div>
|
|
|
|
<div class="commentright">
|
|
|
|
<div class="commentnamek">{{item.user.nickname}}</div>
|
|
|
|
|
|
|
|
<div class="commenttext">
|
|
|
|
{{item.content}}
|
|
|
|
</div>
|
|
|
|
<!-- <div class="commenttext">
|
|
|
|
回复
|
|
|
|
<span class="repalayname">4tio4oi</span>
|
|
|
|
skfgsldf
|
|
|
|
</div> -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- <div class="kanmore flexthree"
|
|
|
|
>
|
|
|
|
查看更多
|
|
|
|
<img src="../../../assets/jianotu.png" alt class="jiantou" />
|
|
|
|
</div> -->
|
|
|
|
</div>
|
|
|
|
<div class="commentbot flextwo">
|
|
|
|
<img src="../../../assets/jianpan.png" alt class="jianpan" />
|
|
|
|
<div class="entercomment">
|
|
|
|
<input type="text" :placeholder="dateinit" v-model="textcomment" />
|
|
|
|
</div>
|
|
|
|
<div class="fasong" @click="sendtext">发送</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 分享弹层 -->
|
|
|
|
<div class="sharewrap" v-if="shareshow" @click="hidesharek">
|
|
|
|
<img src="../../../assets/sharewrapimg.png" alt />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
...
|
...
|
@@ -251,7 +301,15 @@ export default { |
|
|
|
// 发送评论
|
|
|
|
comment: "",
|
|
|
|
user: "",//用户信息
|
|
|
|
baseurl:''
|
|
|
|
baseurl:'',
|
|
|
|
showcomment:false,
|
|
|
|
textcomment:'',
|
|
|
|
dateinit: "请输入",
|
|
|
|
tiezishow:false,
|
|
|
|
comments_id:"",
|
|
|
|
child:[],
|
|
|
|
userinfo:'',//用户信息
|
|
|
|
shareshow:false
|
|
|
|
};
|
|
|
|
},
|
|
|
|
created() {
|
|
...
|
...
|
@@ -263,6 +321,8 @@ export default { |
|
|
|
this.getformdetail();
|
|
|
|
// 获取评论列表
|
|
|
|
this.getcommentlist();
|
|
|
|
// 获取用户信息
|
|
|
|
this.getuserinfo()
|
|
|
|
|
|
|
|
},
|
|
|
|
beforeRouteEnter(to, from, next) {
|
|
...
|
...
|
@@ -277,6 +337,77 @@ export default { |
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
// 弹出分享弹层
|
|
|
|
sharebtn(){
|
|
|
|
this.shareshow=true
|
|
|
|
},
|
|
|
|
// 隐藏分享弹层
|
|
|
|
hidesharek(){
|
|
|
|
this.shareshow=false
|
|
|
|
},
|
|
|
|
// 获取用户信息
|
|
|
|
getuserinfo() {
|
|
|
|
let that = this;
|
|
|
|
var url = "/api/member/index";
|
|
|
|
var params = {};
|
|
|
|
console.log("7766554", params);
|
|
|
|
that.$axios
|
|
|
|
.post(url, params)
|
|
|
|
.then(res => {
|
|
|
|
that.userinfo = res.data;
|
|
|
|
|
|
|
|
})
|
|
|
|
.catch(err => { });
|
|
|
|
},
|
|
|
|
// 开始评论
|
|
|
|
begincomment(item){
|
|
|
|
console.log(343843,item)
|
|
|
|
this.showcomment=true;
|
|
|
|
this.dateinit='@'+item.user.nickname;
|
|
|
|
this.comments_id=item.id;
|
|
|
|
this.child=item.child
|
|
|
|
},
|
|
|
|
// 发送消息
|
|
|
|
sendtext(){
|
|
|
|
let that = this;
|
|
|
|
if (that.textcomment == "") {
|
|
|
|
Toast("请输入评论内容");
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
var url = "/api/comments/publish_comments";
|
|
|
|
var params = {
|
|
|
|
forum_id: that.forum_id,
|
|
|
|
content: that.textcomment,
|
|
|
|
comments_id:that.comments_id
|
|
|
|
};
|
|
|
|
console.log("参数", params);
|
|
|
|
that.$axios
|
|
|
|
.post(url, params)
|
|
|
|
.then(res => {
|
|
|
|
console.log(res);
|
|
|
|
Toast("评论成功");
|
|
|
|
// 把发布的信息放到数组
|
|
|
|
let obj={
|
|
|
|
user:{}
|
|
|
|
};
|
|
|
|
obj.user.nickname=that.userinfo.nickname;
|
|
|
|
obj.user.avatar=that.userinfo.avatar;
|
|
|
|
obj.content=that.textcomment;
|
|
|
|
console.log(obj)
|
|
|
|
that.child.unshift(obj);
|
|
|
|
that.child=that.child;
|
|
|
|
that.textcomment='';
|
|
|
|
that.comment = "";
|
|
|
|
that.$forceUpdate()
|
|
|
|
})
|
|
|
|
.catch(err => {
|
|
|
|
console.log(err);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
// 隐藏评论弹层
|
|
|
|
hidecomment(){
|
|
|
|
this.showcomment=false
|
|
|
|
},
|
|
|
|
seltiekind(id) {
|
|
|
|
this.tiezisel = id;
|
|
|
|
},
|
|
...
|
...
|
@@ -417,9 +548,6 @@ export default { |
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 获取帖子详情
|
|
|
|
getformdetail() {
|
|
|
|
let that = this;
|
|
...
|
...
|
@@ -441,6 +569,7 @@ export default { |
|
|
|
that.$forceUpdate()
|
|
|
|
that.user = res.data.user;
|
|
|
|
that.getappid()
|
|
|
|
that.tiezishow=true
|
|
|
|
}, 200);
|
|
|
|
})
|
|
|
|
.catch(err => {
|
|
...
|
...
|
@@ -503,7 +632,7 @@ export default { |
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
// 获取评论列表
|
|
|
|
// 获取评全部论列表
|
|
|
|
getcommentlist() {
|
|
|
|
let that = this;
|
|
|
|
var url = "/api/comments/get_comments";
|
|
...
|
...
|
@@ -523,7 +652,7 @@ export default { |
|
|
|
that.showpull = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
console.log(this.commentlist);
|
|
|
|
|
|
|
|
})
|
|
|
|
.catch(err => {
|
|
|
|
console.log(err);
|
|
...
|
...
|
@@ -539,7 +668,8 @@ export default { |
|
|
|
var url = "/api/comments/publish_comments";
|
|
|
|
var params = {
|
|
|
|
forum_id: that.forum_id,
|
|
|
|
content: that.comment
|
|
|
|
content: that.comment,
|
|
|
|
comments_id:''
|
|
|
|
};
|
|
|
|
console.log("参数", params);
|
|
|
|
that.$axios
|
|
...
|
...
|
@@ -613,5 +743,158 @@ export default { |
|
|
|
.tieziright,.tiezirighttop {
|
|
|
|
flex:1
|
|
|
|
}
|
|
|
|
.tieziwordbox p img{
|
|
|
|
width:100%!important
|
|
|
|
}
|
|
|
|
|
|
|
|
.kanmore {
|
|
|
|
width: 100%;
|
|
|
|
color: #333;
|
|
|
|
font-size: 0.28rem;
|
|
|
|
margin: 0.32rem 0;
|
|
|
|
}
|
|
|
|
.jiantou {
|
|
|
|
width: 0.2rem;
|
|
|
|
height: 0.25rem;
|
|
|
|
margin-left: 0.16rem;
|
|
|
|
}
|
|
|
|
.xiajiantou {
|
|
|
|
width: 0.2rem;
|
|
|
|
height: 0.25rem;
|
|
|
|
transform: rotate(90deg);
|
|
|
|
margin-left: 0.16rem;
|
|
|
|
}
|
|
|
|
.shangjiantou {
|
|
|
|
width: 0.2rem;
|
|
|
|
height: 0.25rem;
|
|
|
|
transform: rotate(-90deg);
|
|
|
|
margin-left: 0.16rem;
|
|
|
|
}
|
|
|
|
.societybox {
|
|
|
|
margin-bottom: 1.2rem;
|
|
|
|
margin-top: 2rem;
|
|
|
|
}
|
|
|
|
.desyincang {
|
|
|
|
display: -webkit-box;
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
-webkit-line-clamp: 3;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.commentbot {
|
|
|
|
padding: 0.16rem 0.32rem;
|
|
|
|
box-sizing: border-box;
|
|
|
|
background: #f7f7f7;
|
|
|
|
}
|
|
|
|
.entercomment {
|
|
|
|
width: 4.9rem;
|
|
|
|
height: 0.76rem;
|
|
|
|
background: #fff;
|
|
|
|
color: #454e56;
|
|
|
|
font-size: 0.28rem;
|
|
|
|
}
|
|
|
|
.entercomment input {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
padding: 0.2rem;
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
.fasong {
|
|
|
|
width: 1.14rem;
|
|
|
|
height: 0.6rem;
|
|
|
|
background:#F19B18;
|
|
|
|
border-radius: 0.04rem;
|
|
|
|
color: #fff;
|
|
|
|
font-size: 0.28rem;
|
|
|
|
text-align: center;
|
|
|
|
line-height: 0.6rem;
|
|
|
|
}
|
|
|
|
.jianpan {
|
|
|
|
width: 0.5rem;
|
|
|
|
height: 0.5rem;
|
|
|
|
}
|
|
|
|
.repalayname {
|
|
|
|
color: #F19B18;
|
|
|
|
font-size: 0.28rem;
|
|
|
|
}
|
|
|
|
.commenttext {
|
|
|
|
color: #454e56;
|
|
|
|
font-size: 0.28rem;
|
|
|
|
margin-top: 0.1rem;
|
|
|
|
}
|
|
|
|
.commentname {
|
|
|
|
color: "#333333";
|
|
|
|
font-size: 0.28rem;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
.commentnamek{
|
|
|
|
color: "#333333";
|
|
|
|
font-size: 0.28rem;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
.commentimg {
|
|
|
|
width: 0.64rem;
|
|
|
|
height: 0.64rem;
|
|
|
|
border-radius: 50%;
|
|
|
|
margin-right: 0.08rem;
|
|
|
|
font-size: 0;
|
|
|
|
flex: 0 0 auto;
|
|
|
|
}
|
|
|
|
.commentimg img {
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
.commentboxitem {
|
|
|
|
margin-top: 0.24rem;
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
.commentwrap {
|
|
|
|
width: 100%;
|
|
|
|
height: 8.5rem;
|
|
|
|
background: #fff;
|
|
|
|
border-radius: 0.1rem 0.1rem 0 0;
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
}
|
|
|
|
.closeimg {
|
|
|
|
width: 0.38rem;
|
|
|
|
height: 0.38rem;
|
|
|
|
}
|
|
|
|
.commenttop {
|
|
|
|
padding: 0.32rem 0.32rem 0;
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
.commentbox {
|
|
|
|
padding: 0 0.32rem;
|
|
|
|
box-sizing: border-box;
|
|
|
|
overflow-y: scroll;
|
|
|
|
height: 6.62em;
|
|
|
|
padding-bottom: 0.32rem;
|
|
|
|
}
|
|
|
|
.commenttopleft {
|
|
|
|
width: 0.24rem;
|
|
|
|
height: 0.24rem;
|
|
|
|
}
|
|
|
|
.commenttopmiddle {
|
|
|
|
color: #041121;
|
|
|
|
font-size: 0.36rem;
|
|
|
|
}
|
|
|
|
.nodata{
|
|
|
|
color:#999;
|
|
|
|
font-size:0.32rem;
|
|
|
|
text-align: center;
|
|
|
|
margin-top:0.23rem;
|
|
|
|
}
|
|
|
|
.shareimg{
|
|
|
|
width:0.32rem;
|
|
|
|
height: 0.32rem;
|
|
|
|
margin-right:0.3rem;
|
|
|
|
}
|
|
|
|
.sharewrap {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
z-index: 9999;
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
