pg-front-end
/
details.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情</title>
    <link rel="icon" href="static/images/detail.png" type="image/png">
    <link rel="stylesheet" href="./semantic/dist/semantic.min.css">
    <link rel="stylesheet" href="./static/css/typo.css">
    <link rel="stylesheet" href="./static/css/animate.css">
    <link rel="stylesheet" href="./static/css/custom.css">
    <link rel="stylesheet" href="./static/lib/prism/prism.css">
    <script src="jquery-3.2.1/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
    <script src="util/request.js"></script>
    <script src="./util/common.js"></script>

</head>
<body>

<!--导航-->
<script src="static/js/header.js"></script>

<!--中间内容-->
<div class=" m-padded-tb-middle">
    <div class="ui container m-container-small">
        <div class="ui segment top attached">
            <div class="ui horizontal link list ">
                <div class="item">
                    <span class="m-text-size-middle" style="color: #000;font-weight: bold;line-height: 34px;" id="post-title"></span>
                </div>
                <a class="item avatar ui dropdown">
                    <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=249589786,2941481629&fm=26&gp=0.jpg" alt=""
                         class="ui avatar image" id="post-author-avatar">
                    <div class="menu" id="chat-area">
                        <div class="item m-text" data-value="female" onclick="window.open('./communicate.html', '_blank')">发起私聊</div>
                    </div>
                </a>
                <div class="item">
                    <div class="content">
                        <div class="header m-opacity-mini" id="post-author-nickname"></div>
                    </div>
                </div>
                <div class="item">
                    <i class="calendar icon"></i>
                    <spa id="post-create-time">2020-10-28</spa>
                </div>
                <div class="item">
                    <i class="eye icon" id="post-view-count">1024</i>
                </div>
            </div>
        </div>
        <div class="ui segment attached">
            <div class="ui segment" id="post-content">

            </div>
        </div>

        <div id="comment-container" class="ui bottom attached segment">
            <!-- 1级评论区 -->
            <div class="ui menu segment fluid">
                <a class="avatar ui ">
                    <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2561659095,299912888&fm=26&gp=0.jpg" id="comment-user-avatar"
                         class="m-aaa">
                </a>
                <div class="ui form">
                    <div class="field">
                        <textarea rows="3" cols="140" style="resize: none;" sname="content" placeholder="请输入评论信息..."
                                  id="level-1-content"></textarea>
                    </div>
                </div>
                <button class="ui  teal button m-margin-lr-middle m-text-lined" style="width: 80px;" onclick="reply(1)">发表评论</button>
            </div>

            <!--留言区域列表-->
            <div class="ui teal segment">
                <div class="ui comments" id="comment-body">
                    <h3 class="ui dividing header">评论</h3>
                    <div style="height: 0;" id="index-0-level-1-comment"></div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="level" value="1">
    <input type="hidden" id="postId">
    <input type="hidden" id="toUserId">
    <input type="hidden" id="post_user_id">
    <input type="hidden" id="parentId">
    <input type="hidden" id="toUserNickname">
</div>


<!--底部footer-->
<script src="static/js/footer.js"></script>
<script src="semantic/dist/semantic.min.js"></script>
<script src="./static/lib/prism/prism.js"></script>
<script src="./static/lib/qrcode/qrcode.min.js"></script>

<script>
    $('.dropdown').dropdown({
        on: 'hover'
    });
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    })
    $('#payButton').popup({
        popup: $('.payMoney.popup'),
        on: 'click',
        position: 'bottom center'
    });

    $('.toc.button').popup({
        popup: $('.toc-container.popup'),
        on: 'click',
        position: 'right center'
    });

    // 加载帖子内容
    $(function () {
        $http({
            url: 'forum/post/' + GetQueryParam("postId"),
            method: 'GET'
        }).then(response => {
            const code = response.code
            if (code === 400) {
                alert(response.message)
                location.href = './index.html'
            } else if (code === 200) {
                const data = response.data
                $('#post-author-nickname').text(data.nickname)
                $('#post-author-avatar').attr("src", data.avatar)
                $('#post-create-time').text(data.createTime)
                $('#post-view-count').text(data.viewCount)
                $('#post-content').html(data.content)
                $('#post_user_id').val(data.userId)
                $('#post-title').text(data.title)

                const userId = localStorage.getItem("userId")
                if (userId && userId === data.userId) {
                    $('#chat-area').hide()
                }
            } else {
                alert(response.message)
            }

        }).catch(error => {
            console.log(error)
        })
    })

    // 加载评论
    $(function () {
        $http({
            url: 'forum/comment/' + GetQueryParam("postId"),
            method: 'GET'
        }).then(response => {
            const code = response.code
            if (code === 200) {
                renderComment(response.data)
            } else {
                alert(response.message)
            }
        }).catch(error => {
            console.log(error)
        })
    })

    $(function () {
        $('#postId').val(GetQueryParam("postId"))
        const loginUserAvatar = localStorage.getItem('avatar')
        $('#comment-user-avatar').attr('src', loginUserAvatar === null ? 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=249589786,2941481629&fm=26&gp=0.jpg': loginUserAvatar)
    })

    /**
     * 回复
     */
    function reply(level) {
        isLogin(function (response) {
            const code = response.code
            if (code !== 200) {
                return alert('评论前请先登录哦')
            } else {
                let content
                if (level === 1) {
                    content = $('#level-1-content').val()
                } else {
                    content = $('#not-level-1-content').val()

                }

                const postId = $('#postId').val()
                let toUserId
                if (level === 1) {
                    toUserId = $('#post_user_id').val()
                } else {
                    toUserId = $('#toUserId').val()
                }
                const parentId = $('#parentId').val()

                $http({
                    url: 'forum/comment',
                    method: 'POST',
                    data: {
                        level: level,
                        postId: postId,
                        toUserId: toUserId,
                        parentId: parentId,
                        content: content
                    }
                }).then(response => {
                    const code = response.code
                    if (code !== 200) {
                        alert('服务器开小差了哦，评论失败')
                    } else {
                        alert('评论成功')
                        if (level === 1) {
                            $('#level-1-content').val('')
                        }
                        if (level === 1) {
                            $('#index-0-level-1-comment').after(`
                <div class="comment">
                        <a class="avatar ui dropdown">
                            <img src="${$('#nav-avatar').attr('src')}">
                            <div class="menu">
                                <div class="item m-text" data-value="male">查看资料</div>
                                <div class="item m-text" data-value="female">添加好友</div>
                            </div>
                        </a>
                        <div class="content">
                            <a class="author">${$('#nav-nickname').text()}</a>
                            <div class="metadata">
                                <span class="date">${dateFormat('yyyy年MM月dd日 HH时mm分ss秒', new Date())}</span>
                            </div>
                            <div class="text">
                                <p>${content}</p>
                            </div>
                        </div>
                        <div class="comments"></div>
                </div>
                `)
                        } else if (level === 2) {
                            $(`#${parentId}-children`).prepend(`
                        <div class="comment">
                                <a class="avatar ui dropdown">
                                    <img src="${$('#nav-avatar').attr('src')}">
                                    <div class="menu">
                                        <div class="item m-text" data-value="male">查看资料</div>
                                        <div class="item m-text" data-value="female">添加好友</div>
                                    </div>
                                </a>
                                <div class="content">
                                    <a class="author">${$('#nav-nickname').text()}</a>
                                    <div class="metadata">
                                        <span class="date">${dateFormat('yyyy年MM月dd日 HH时mm分ss秒', new Date())}</span>
                                    </div>
                                    <div class="text">
                                        ${content}
                                    </div>
                                    <div class="actions">
                                    </div>
                                </div>
                            </div>
                        `)
                            $('#not-level-1-area').remove()
                        } else if (level === 3) {
                            $(`#${parentId}-children`).prepend(`
                        <div class="comment">
                                <a class="avatar ui dropdown">
                                    <img src="${$('#nav-avatar').attr('src')}">
                                    <div class="menu">
                                        <div class="item m-text" data-value="male">查看资料</div>
                                        <div class="item m-text" data-value="female">添加好友</div>
                                    </div>
                                </a>
                                <div class="content">
                                    <a class="author">${$('#nav-nickname').text()}</a>
                                    <div class="metadata">
                                        <span class="date">${dateFormat('yyyy年MM月dd日 HH时mm分ss秒', new Date())}</span>
                                    </div>
                                    <div class="text">
                                    回复 <a><span>@</span><a href="javascript:void(0)">${$('#toUserNickname').val()}：</a></a>${content}

                                    </div>
                                    <div class="actions">
                                    </div>
                                </div>
                            </div>
                        `)
                            $('#not-level-1-area').remove()
                        }
                    }
                }).catch(error => {
                    console.log(error)
                    alert('服务器开小差了哦，评论失败')
                })
            }
        }, function (error) {
            return console.log('服务器出了点小差')
        })
    }

    // 回复前的准备工作
    function beforeReply(level, toUserNickname, toUserId, parentId) {
        // 判断用户是否登录
        isLogin(function (response) {
            // 拿到状态码，判断请求状态。
            const code = response.code
            // 这里如果code为200，证明用户已经登录并且成功
            if (code !== 200) {
                alert('回复前请先登录')
            } else {
                // const postId = $('#postId').val()
                // const content = $('#content').val()
                $('#not-level-1-area').remove()
                $(`#${parentId}`).append(`
                <!-- 2级评论和3级评论点击回复弹出的回复框-->
                    <div class="ui menu segment fluid" style="margin-left: 20px;" id="not-level-1-area">
                        <div class="ui form">
                            <div class="field">
                                <textarea rows="3" cols="80" style="resize: none;" name="content" id="not-level-1-content"></textarea>
                            </div>
                        </div>
                        <button class="ui  teal button m-margin-lr-middle m-text-lined" style="width: 80px;" onclick="reply(${level})">
                            发表评论
                        </button>
                    </div>
                `)

                $('#not-level-1-content').attr("placeholder", `回复 @${toUserNickname} :`)
                $('#level').val(level)
                $('#toUserId').val(toUserId)
                $('#parentId').val(parentId)
                $('#toUserNickname').val(toUserNickname)

            }}, function (error) {
            console.log(error)
        })

        $('#toUserId').val(toUserId)
        $('#parentId').val(parentId)

    }

        function renderComment(firstLevelComments) {
            if (firstLevelComments !== null && firstLevelComments.length > 0) {
                let commentBody = ''
                for (let i = 0; i < firstLevelComments.length; i++) {
                    const currentFirstLevelComment = firstLevelComments[i]

                    commentBody += `
                <div class="comment" id="${currentFirstLevelComment.id}">
                        <a class="avatar ui dropdown">
                            <img src="${currentFirstLevelComment.avatar}">
                            <div class="menu">
                                <div class="item m-text" data-value="male">查看资料</div>
                                <div class="item m-text" data-value="female">添加好友</div>
                            </div>
                        </a>
                        <div class="content">
                            <a class="author">${currentFirstLevelComment.nickname}</a>
                            <div class="metadata">
                                <span class="date">${currentFirstLevelComment.replyTime}</span>
                            </div>
                            <div class="text">
                                <p>${currentFirstLevelComment.content}</p>
                            </div>
                            <div class="actions">`
                    if (currentFirstLevelComment.userId !== parseInt(localStorage.getItem("userId"))) {
                        commentBody += `<a class="reply" href="javascript:void(0)" onclick="beforeReply(2, '${currentFirstLevelComment.nickname}',${currentFirstLevelComment.userId},${currentFirstLevelComment.id})">
                                回复
                               </a>`
                    }
                    commentBody += `
                            </div>
                        </div>
                        <div class="comments" id="${currentFirstLevelComment.id}-children">`
                const children = currentFirstLevelComment.children
                if (children !== null && children.length > 0) {
                    for (let j = 0; j < children.length; j++) {
                        const currentSecondOrThirdLevelComment = children[j]
                        if (currentSecondOrThirdLevelComment.level === 3) {
                            commentBody += `
                        <div class="comment">
                                <a class="avatar ui dropdown">
                                    <img src="${currentSecondOrThirdLevelComment.avatar}">
                                    <div class="menu">
                                        <div class="item m-text" data-value="male">查看资料</div>
                                        <div class="item m-text" data-value="female">添加好友</div>
                                    </div>
                                </a>
                                <div class="content">
                                    <a class="author">${currentSecondOrThirdLevelComment.nickname}</a>
                                    <div class="metadata">
                                        <span class="date">${currentSecondOrThirdLevelComment.replyTime}</span>
                                    </div>
                                    <div class="text">
                                        回复 <a><span>@</span><a href="javascript:void(0)">${currentSecondOrThirdLevelComment.toUserNickname}：</a></a>${currentSecondOrThirdLevelComment.content}
                                    </div>
                                    <div class="actions">`
                            if (currentSecondOrThirdLevelComment.userId !== parseInt(localStorage.getItem("userId"))) {
                                commentBody += `<a class="reply" href="javascript:void(0)"
                                        onclick="beforeReply(3,'${currentSecondOrThirdLevelComment.nickname}',${currentSecondOrThirdLevelComment.userId},${currentSecondOrThirdLevelComment.parentId})">回复</a>`
                            }
                            commentBody += `
                                    </div>
                                </div>
                            </div>
                        `
                        } else {
                            commentBody += `
                        <div class="comment">
                                <a class="avatar ui dropdown">
                                    <img src="${currentSecondOrThirdLevelComment.avatar}">
                                    <div class="menu">
                                        <div class="item m-text" data-value="male">查看资料</div>
                                        <div class="item m-text" data-value="female">添加好友</div>
                                    </div>
                                </a>
                                <div class="content">
                                    <a class="author">${currentSecondOrThirdLevelComment.nickname}</a>
                                    <div class="metadata">
                                        <span class="date">${currentSecondOrThirdLevelComment.replyTime}</span>
                                    </div>
                                    <div class="text">
                                        ${currentSecondOrThirdLevelComment.content}
                                    </div>
                                    <div class="actions">`
                            if (currentSecondOrThirdLevelComment.userId !== parseInt(localStorage.getItem("userId"))) {
                                commentBody += `<a class="reply" href="javascript:void(0)"
                                    onclick="beforeReply(3,'${currentSecondOrThirdLevelComment.nickname}',${currentSecondOrThirdLevelComment.userId}, ${currentSecondOrThirdLevelComment.parentId})">回复</a>`
                            }
                            commentBody += `
                                    </div>
                                </div>
                            </div>
                        `
                        }
                    }
                }
                commentBody += `
                        </div>
                    </div>
                `
            }
            $('#comment-body').append(commentBody)
        }
    }

</script>
</body>
</html>