工作日志
点击输入框后弹出评论的输入框来
<script type="text/html" id="post_content_bottom">
<div class="like">
{{each likes_user}}
<div class="like_user" data-id="{{$value.user_id}}"><img src="{{$value.avatar}}" alt=""></div>
{{/each}}
</div>
<div class="new_comment">
最新评论
</div>
<!--评论-->
<div class="Latest_comments">
{{each topic_comments}}
<div class="new_user_comment">
{{if $value.is_mine_comment == 1}}
<div class="go_back"><span>撤回</span></div>
{{/if}}
<div class="user_info">
<div class="user_info1">
<div class="info_img"><img src="{{$value.content_user.avatar}}" alt=""></div>
<div class="content_user">
<div class="store_name">{{$value.content_user.username}}</div>
<div class="time">{{$value.content_time}}</div>
<div class="content_comment">{{$value.content}}</div>
</div>
</div>
{{if $value.is_like_comment == 0}}
<span class="like_comment" data-id="{{$value.content_id}}"> <i class="iconfont icon-dianzan2"></i><span> {{$value.comment_likes_count}}</span></span>
{{else if $value.is_like_comment == 1}}
<span class="like_comment" data-id="{{$value.content_id}}"> <i class="iconfont icon-like-b"></i><span> {{$value.comment_likes_count}}</span></span>
{{/if}}
</div>
</div>
{{/each}}
</div>
<div class="is_mine">
<div class="Input_comments">
<div class="commented">
<input class="content_title" type="text" placeholder="在此处输入评论内容...">
{{if topic.is_favorite == 0}}
<span class="Collection"><i class="iconfont icon-xin1"></i>收藏</span>
{{else if topic.is_favorite == 1}}
<span class="Collection"><i class="iconfont icon-guanzhu1"></i>收藏</span>
{{/if}}
</div>
</div>
<div class="commitment" style="display: none">
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__bd">
<textarea class="weui-textarea content " placeholder="请输入文本" rows="4"></textarea>
</div>
</div>
</div>
<div class="Publish">
<span class="comments">发表</span>
</div>
</div>
{{ if topic_user.is_im == 1}}
<div class="Private ">
私聊
</div>
{{/if}}
</div>
</script> // 发表评论输入框点击
$(document).on("click", ".content_title", function () {
$(".Input_comments").css("display", "none");
$(".commitment").css("display", "block");
})
// 点击发表评论按钮
$(document).on("click", ".comments", function () {
var content = $(".content").val();
$.Ajax({
url: "https://mplus.mbcore.com/AmoySource/client/user/comment",
is_login: true,
data: {
topic_id: topic_id,//帖子id
content: content //评论内容
},
success: function (res) {
console.log(res);
if (res.code == 1) {
$(".comment").find("span").html(res.result.comments_count);//评论数
$(".Input_comments").css("display", "block");
$(".commitment").css("display", "none");
$(".content").val(''); //清空评论内容
var html = '<div class="new_user_comment">\n' +
'<div class="go_back"><span>撤回</span></div>\n' +
'<div class="user_info">\n' +
'<div class="user_info1">\n' +
'<div class="info_img"><img src="'+res.result.comment_info.user_avatar+'" alt=""></div>\n' +
'<div class="content_user">\n' +
'<div class="store_name">'+res.result.comment_info.user_name+'</div>\n' +
'<div class="time">'+res.result.comment_info.comment_time+'</div>\n' +
'<div class="content_comment">'+res.result.comment_info.content+'</div>\n' +
'</div>\n' +
'</div>\n' +
'<span class="like_comment" data-id="'+ res.result.comment_info.topic_id+'"> <i class="iconfont icon-dianzan2"></i><span> '+res.result.comment_info.like_count +'</span></span>\n' +
'</div>\n' +
'</div>'
$(".Latest_comments").prepend(html)
} else {
$.toast(res.result, "text")
}
}
})
})body {
background-color: #f3f3f3;
}
.post_info {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
background-color: white;
margin-bottom: 10px;
}
.post_header {
display: flex;
align-items: center;
}
/*.header_img {*/
/*width: 40px;*/
/*height: 40px;*/
/*margin-right: 10px;*/
/*}*/
/*.header_img img {*/
/*width: 100%;*/
/*display: inline-block;*/
/*}*/
.post_content {
padding: 10px;
}
.post_content img {
width: 100%;
}
/*举报*/
.post_Report {
display: flex;
justify-content: flex-end;
}
.Report {
font-size: 12px;
padding: 1px 15px;
border-radius: 12px;
border: 1px solid #085556;
color: #085556 !important;
}
.xian {
width: 3px;
height: 12px;
background-color: #f3f3f3;
}
/*点赞的小图*/
.like {
padding: 10px;
background-color: white;
margin-top: 10px;
display: flex;
align-items: center;
}
.like_user {
width: 26px;
height: 26px;
margin-right: 10px;
}
.like_user img {
width: 100%;
border-radius: 50%;
}
/*评论*/
/*最新评论*/
.new_comment {
padding: 10px;
}
.user_content {
margin: 0;
padding: 10px;
background-color: white;
}
.go_back {
text-align: right;
}
.go_back span {
display: inline-block;
padding: 2px 15px;
background: #5d7f81;
color: white;
font-size: 12px;
border-radius: 15px;
margin-bottom: 8px;
}
.content_comment {
}
.time {
font-size: 12px;
}
.store_name {
color: #890101;
}
.user_info1 {
display: flex;
flex: 1;
}
.content_user {
flex: 1;
}
.new_user_comment {
margin-top: 10px;
}
.commented {
padding: 10px;
background-color: white;
left: 0;
width: 100%;
box-sizing: border-box;
display: flex;
}
.content_title {
height: 26px;
outline: none;
resize: none;
border-radius: 2px;
border: 1px solid #d0d0d0;
line-height:26px;
width: 76%;
padding:0 6px;
box-sizing: border-box;
margin-right: 10px;
}
.Collection {
color: gray;
}
.icon-xin1 {
margin-right: 5px;
}
.icon-guanzhu1 {
color: #890101;
margin-right: 5px;
}
.user_info {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: white;
}
.info_img {
width: 40px;
height: 40px;
margin-right: 10px;
}
.info_img img {
width: 100%;
display: block;
border-radius: 50%;
}
/*内容*/
.msg {
background-color: white;
border-top: 1px solid #e5e5e5;
margin-bottom: 10px;
}
.store_content {
padding: 10px ;
box-sizing: border-box;
border-bottom: 1px solid #e5e5e5;
}
.content_img {
display: flex;
}
.substance_img {
width: 30%;
margin-right: 10px;
}
.substance_img img {
width: 100%;
display: block;
}
.form {
padding-top: 5px;
display: flex;
justify-content: space-between;
padding-bottom: 5px;
}
.form_l {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
}
.come_on {
font-size: 12px;
}
.red_tree {
color: #555;
font-size: 12px;
}
.num {
color: #890101;
}
.Review {
display: flex;
align-items: center;
justify-content: space-around;
text-align: center;
border-top: 1px solid #f3f3f3;
}
.good {
padding: 3px;
width: 100%;
}
.line {
border-right: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
}
.icon-dianzan2 {
margin-right: 5px;
}
.icon-like-b {
margin-right: 5px;
color: #890101;
}
.icon-pinglun1 {
margin-right: 5px;
}
.icon-zhuanfa1 {
margin-right: 5px;
}
/*用户头像*/
.user_message {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin: 0 10px;
border-bottom: 1px solid #f3f3f3;
}
.header_img {
width: 50px;
height: 50px;
margin-right: 10px;
}
.header_img img {
width: 100%;
border-radius: 50%;
}
.header {
display: flex;
align-items: center;
}
.publish_name {
color: #565656;
margin-bottom: 5px;
margin-left: 10px;
}
.publish_time {
font-size: 12px;
color: #646464;
}
.icon-xuanzhong1 {
font-size: 12px;
margin-right: 1px;
}
.share1 {
color: #5c5c5c;
margin-bottom: 5px;
}
.follow {
color: #ed6341;
font-size: 12px;
padding: 0 10px;
border: 1px solid #ed6341;
}
.partake {
text-align: center;
}
.icon-fenxiang1 {
color: #979797;
margin-right: 2px;
}
/*私聊*/
.Private {
text-align: center;
width: 100%;
height: 50px;
line-height: 50px;
background-color: #960001;
color: white;
font-size: 18px;
letter-spacing: 10px;
}
.is_mine {
position: fixed;
bottom: 0;
width: 100%;
}
/*发表评论*/
.weui-cells {
margin-top: 0;
font-size: 12px;
}
.weui-cell {
padding: 10px;
}
.weui-textarea {
border:1px solid #d0d0d0;
padding: 5px;
box-sizing: border-box;
}
.Publish {
text-align: right;
background: white;
}
.comments {
padding: 3px 15px;
background: #890101;
color: white;
border-radius: 4px;
/* height: 20px; */
margin: 10px;
margin-top: 10px;
display: inline-block;
}