From 5dfef883049e7f0670f6c6b1b225b233aee41eea Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Thu, 03 Mar 2022 01:30:11 +0800 Subject: [PATCH] 评论页刷新策略调整 --- src/components/mini/box12-comment.vue | 263 ++++++++++++++++++++++++++-------------------------- 1 files changed, 131 insertions(+), 132 deletions(-) diff --git a/src/components/mini/box12-comment.vue b/src/components/mini/box12-comment.vue index 23d1b54..e2c09c7 100644 --- a/src/components/mini/box12-comment.vue +++ b/src/components/mini/box12-comment.vue @@ -1,53 +1,82 @@ <template> - <div class="myFriend" style="min-height: 950px;"> - <h1 style="text-align: center;">碎碎念</h1> - <replyBox ref="commentBoxId"></replyBox> + <div> + <replyBox ref="commentBoxId" v-bind="$attrs"></replyBox> <a-modal v-model="visible" :title="replyTaget" :footer="null" - :bodyStyle="{'overflow':'overlay','maxHeight': '550px'}"> - <replyBox ref="replyBoxId"></replyBox> + :bodyStyle="{'overflow':'overlay','maxHeight': '550px','scrollbarWidth': 'none'}"> + <replyBox ref="replyBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></replyBox> </a-modal> - + <div class="mySecret" style="max-height:350px ;" v-if="commentListData.length==0"> + <p>空空如也..</p> + </div> <div v-for="temp in commentListData" class="commentList"> <div class="commentGroup"> <a-comment> - <span slot="actions" key="comment-nested-reply-to"> - <span style="cursor: default;">{{temp.createDate}} </span> + <div slot="actions" key="comment-nested-reply-to" class="actionList"> + <span style="cursor: default;padding-right: 6px;" class="myTip">{{temp.createDate}} </span> <span @click="replyCall(temp)"> - <a-icon type="edit" /> - 回复 + <a-icon type="message" /> </span> + </div> - <span @click="loadMore()"> - <a-icon type="down" />更多.. - </span> - </span> - - <div slot="avatar"> - <a :href="temp.userHomePage" target="_blank" class="no-underline"> - {{temp.visitorNickName}} : - </a> + <div slot="avatar" style="display: flex;"> + <div class="myTextDeal"> + <a :href="temp.visitorHomePage" target="_blank" v-if="temp.visitorHomePage!=''"> + <a-tooltip placement="bottomLeft" :title="temp.visitorNickName"> + {{temp.visitorNickName}} + </a-tooltip> + </a> + <a-tooltip placement="bottomLeft" :title="temp.visitorNickName" v-else> + {{temp.visitorNickName}} + </a-tooltip> + </div> + <div>:</div> </div> <p slot="content">{{temp.commentContent}}</p> - <!-- <a-comment v-for="tempData in temp.replyList.listData"> - <span slot="actions" key="comment-nested-reply-to" @click="replyCall(tempData)"> - <a-icon type="edit" />回复 - </span> - <div slot="avatar"> - <a :href="tempData.userHomePage" target="_blank" class="no-underline"> - {{tempData.userName}} - </a> - @<p style="display: inline;">{{tempData.replyUserName}} </p>: - <a :href="tempData.replyUserHomePage" target="_blank" class="no-underline"> - {{tempData.replyUserName}} : - </a> + <a-comment v-for="tempData in temp.replyList"> + <div slot="actions" key="comment-nested-reply-to" class="actionList"> + <span style="cursor: default;padding-right: 6px;" class="myTip">{{tempData.createDate}} + </span> + <span @click="replyCall(tempData)"> + <a-icon type="message" /> + </span> </div> - <p slot="content">{{tempData.userComment}}</p> - </a-comment> --> + <div slot="avatar" style="display: flex;"> + <div class="myTextDeal"> + <a :href="tempData.visitorHomePage" target="_blank" v-if="tempData.visitorHomePage!=''"> + <a-tooltip placement="bottomLeft" :title="tempData.visitorNickName"> + {{tempData.visitorNickName}} + </a-tooltip> + </a> + <a-tooltip placement="bottomLeft" :title="tempData.visitorNickName" v-else> + {{tempData.visitorNickName}} + </a-tooltip> + </div> + <div>:</div> + </div> + <div slot="content" class="myTip myTextDeal" style="padding-bottom: 5px; max-width: 150px;"> + @<a :href="tempData.replyUserHomePage" target="_blank" + v-if="tempData.replyUserHomePage!=''"> + <a-tooltip placement="bottomLeft" :title="tempData.replyUserName"> + {{tempData.replyUserName}} + </a-tooltip> + </a> + <a-tooltip placement="bottomLeft" :title="tempData.replyUserName" v-else> + {{tempData.replyUserName}} + </a-tooltip> + </div> + <p slot="content">{{tempData.commentContent}}</p> + </a-comment> </a-comment> + + <div class="loadMore" @click="loadMore(temp)" v-if="temp.isHasNext==1"> + <span> + <a-icon type="down" />展开 + </span> + </div> </div> </div> @@ -65,45 +94,52 @@ import replyBox from "./box13-reply.vue" import { - queryBlogCommentList + queryBlogCommentList, + queryBlogCommentSubList } from '../../api/blogArticleComment.js' export default { components: { replyBox }, - beforeMount() { - queryBlogCommentList({ - pageNo: this.page.current, - pageSize: this.page.pageSize, - articleId: this.articleId - }).then((res) => { - this.page.total = Number(res.data.total) - this.page.pageSize = Number(res.data.size); - this.commentListData = res.data.records; - return res - }) - }, methods: { - onChange(current) { - this.page.current = current; + updateCommentList(articleId) { queryBlogCommentList({ pageNo: this.page.current, pageSize: this.page.pageSize, - articleId: this.articleId + articleId: articleId }).then((res) => { this.page.total = Number(res.data.total) this.page.pageSize = Number(res.data.size); this.commentListData = res.data.records; - return res }) }, - loadMore() { - this.$message.info("11") + sendMsg() { + this.visible = false; + this.$message.info("列表刷新中..") + setTimeout(() => { + this.updateCommentList(this.$attrs.articleId); + }, 1000); + }, + onChange(current) { + this.page.current = current; + this.updateCommentList(); + }, + loadMore(temp) { + temp.isHasNext = 0; + + queryBlogCommentSubList({ + commentId: temp.id + }).then((res) => { + if (res.data.length == temp.replyList.length) { + this.$message.info("没有更多了..") + } + temp.replyList = res.data; + }) }, replyCall(obj, replyId) { this.visible = true; - this.replyTaget = "回复Ta @" + obj.userName; + this.replyTaget = "回复Ta @" + obj.visitorNickName; var msgInfo = { useName: obj.visitorNickName, userComment: obj.commentContent, @@ -117,89 +153,17 @@ }, data() { return { - articleId: null, + isAllowedComment: true, page: { size: "small", total: 1, - pageSize: 2, + pageSize: 5, current: 1, defaultPageSize: 10 }, replyTaget: "", visible: false, - commentListData: [ - // { - // userName: "bimo", - // userComment: "1+1=2?", - // commentTime: "2022-02-22 22:22:22", - // id: "1", - // parentId: null, - // replyId: null, - // replyUserName: null, - // userHomePage: "", - // replyUserHomePage: "", - // replyList: { - // total: "3", - // current: "1", - // listData: [{ - // userName: "inleft", - // userComment: "2", - // commentTime: "2022-02-22 23:22:22", - // id: "2", - // parentId: "1", - // replyId: "1", - // replyUserName: "bimo", - // userHomePage: "", - // replyUserHomePage: "", - // }, { - // userName: "air", - // userComment: "不对是3", - // commentTime: "2022-02-23 13:13:13", - // id: "3", - // parentId: "1", - // replyId: "2", - // replyUserName: "inleft", - // userHomePage: "", - // replyUserHomePage: "", - // }] - // }, - // }, { - // userName: "bimo", - // userComment: "1+1=2?", - // commentTime: "2022-02-22 22:22:22", - // id: "1", - // parentId: null, - // replyId: null, - // replyUserName: null, - // userHomePage: "", - // replyUserHomePage: "", - // replyList: { - // total: "3", - // current: "1", - // listData: [{ - // userName: "inleft", - // userComment: "2", - // commentTime: "2022-02-22 23:22:22", - // id: "2", - // parentId: "1", - // replyId: "1", - // replyUserName: "bimo", - // userHomePage: "", - // replyUserHomePage: "", - // }, { - // userName: "air", - // userComment: "不对是3", - // commentTime: "2022-02-23 13:13:13", - // id: "3", - // parentId: "1", - // replyId: "2", - // replyUserName: "inleft", - // userHomePage: "", - // replyUserHomePage: "", - // }] - // }, - // }, - ], + commentListData: [], } } @@ -209,6 +173,37 @@ <style lang="less"> .visitInfo { user-select: none; + } + + .myTextDeal { + // display: -webkit-container; + max-width: 80px; + -webkit-line-clamp: 1; + text-overflow: ellipsis; + overflow: hidden; + word-wrap: break-word; + white-space: nowrap; + word-break: break-all; + } + + .loadMore { + margin: 10px; + display: flex; + justify-content: center; + } + + .loadMore:hover { + background-color: #00000021 + } + + .ant-drawer-wrapper-body::-webkit-scrollbar, + .ant-modal-body::-webkit-scrollbar { + display: none; + } + + .actionList { + display: flex; + justify-content: flex-end; } .commentList { @@ -225,8 +220,12 @@ } .ant-comment-actions { - display: flex; - justify-content: flex-end; + + li { + width: -webkit-fill-available; + } + + margin-bottom: 0px; } .ant-comment-content-author { @@ -239,8 +238,8 @@ .commentGroup { border-top: 1px solid #e5e9ef; - margin-bottom: 10px; - padding-bottom: 15px; + margin-bottom: 5px; + padding-bottom: 0px; } .ant-comment-content-detail { -- Gitblit v1.9.1