帖子发表评论

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Acitylion/article/details/84884527

工作日志 

点击输入框后弹出评论的输入框来

<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;
}

 

展开阅读全文

没有更多推荐了,返回首页