From 80476fae71f08bf4408c7509eff254031a4eeac6 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Wed, 24 Aug 2022 18:47:09 +0800 Subject: [PATCH] 路由修正,常量提取 --- src/components/mini/box12-comment.vue | 352 +++++++++++++++++++++++++++++++++------------------------ 1 files changed, 203 insertions(+), 149 deletions(-) diff --git a/src/components/mini/box12-comment.vue b/src/components/mini/box12-comment.vue index c025ffe..28c0ab0 100644 --- a/src/components/mini/box12-comment.vue +++ b/src/components/mini/box12-comment.vue @@ -1,59 +1,92 @@ <template> - <div class="myFriend" style="min-height: 950px;"> - <h1 style="text-align: center;">碎碎念</h1> - <replyBox ref="commentBoxId"></replyBox> - <a-modal v-model="visible" :title="replyTaget" :footer="null" - :bodyStyle="{'overflow':'overlay','maxHeight': '550px','scrollbarWidth': 'none'}"> - <replyBox ref="replyBoxId"></replyBox> - </a-modal> - - <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> - <span @click="replyCall(temp)"> - <a-icon type="edit" /> - 回复 - </span> - - <span @click="loadMore(temp)" v-if="temp.isHasNext==1"> - <a-icon type="down" />更多.. - </span> - </span> - - <div slot="avatar"> - <a :href="temp.userHomePage" target="_blank" class="no-underline"> - {{temp.visitorNickName}} : - </a> - </div> - - <p slot="content">{{temp.commentContent}}</p> - - <a-comment v-for="tempData in temp.replyList"> - <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.visitorNickName}} - </a> - @ - <a :href="tempData.replyUserHomePage" target="_blank" class="no-underline"> - {{tempData.replyUserName}} : - </a> - </div> - <p slot="content">{{tempData.commentContent}}</p> - </a-comment> - - <!-- <div class="loadMore" v-if="temp.isHasNext!=1"> - <a-icon type="smile" /><span>到底了..</span> - </div> --> - </a-comment> - </div> + <div> + <a-collapse v-if="foldReply"> + <a-collapse-panel key="replyPanel" header="回复"> + <replyBox ref="commentBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></replyBox> + </a-collapse-panel> + </a-collapse> + <div v-else> + <replyBox ref="commentBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></replyBox> </div> + <a-modal v-model="visible" :title="replyTaget" :footer="null" + :bodyStyle="{'overflow':'overlay','height': '700px','scrollbarWidth': 'none'}"> + <replyBox ref="replyBoxId" v-bind="$attrs" @sendMsg="sendMsg()" :parseContent="parseContent" + :visible="visible"></replyBox> + </a-modal> + + <div class="mySecret" style="max-height:250px ;" v-if="commentListData.length==0"> + <p>空空如也..</p> + </div> + <div v-for="temp in commentListData" class="commentList"> + <div class="commentGroup"> + <a-comment> + <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="message" /> + </span> + </div> + + <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 class="samllPadding">:</div> + </div> + + <p :id="temp.id" slot="content" v-html="parseContent(temp.commentContent)" class="myContent"></p> + + <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> + <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 class="samllPadding">:</div> + <div 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> + </div> + <p :id="tempData.id" slot="content" v-html="parseContent(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> <a-row type="flex" justify="center"> <div> <a-pagination @change="onChange" :showQuickJumper="true" :size="page.size" v-model="page.current" @@ -66,40 +99,72 @@ <script> import replyBox from "./box13-reply.vue" - import { queryBlogCommentList, queryBlogCommentSubList } from '../../api/blogArticleComment.js' + import OwOjsonConfig from '../../assets/OwO.json' export default { components: { - replyBox + 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 - }) + props: { + "foldReply": { + default: false, + }, + }, + mounted() { + let packages = Object.keys(OwOjsonConfig) + for (let i = 0; i < packages.length; i++) { + let opackage = OwOjsonConfig[packages[i]].container + let type = OwOjsonConfig[packages[i]].type + for (let j = 0; j < opackage.length; j++) { + if (type == 'image') { + this.myOwOConfig[opackage[j].data] = `<img loading="lazy" class="biaoqing ` + opackage[j].css + + `" src="` + opackage[j].icon + `">` + } + } + } }, methods: { - onChange(current) { - this.page.current = current; + parseContent(content) { + let tempStrArray = content.match(this.re); + + if (tempStrArray == null) { + return content; + } + + for (var i = 0; i < tempStrArray.length; i++) { + if (this.myOwOConfig[tempStrArray[i]] == undefined || this.myOwOConfig[tempStrArray[i]] == null) { + continue; + } + content = content.replace(tempStrArray[i], this.myOwOConfig[tempStrArray[i]]) + } + + return content; + }, + 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; }) + }, + 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; @@ -129,103 +194,80 @@ }, data() { return { - articleId: null, 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: [], + myOwOConfig: {}, + re: new RegExp(":&\\(\\S*?\\)", "g"), } } } </script> <style lang="less"> + img.biaoqing.quyin { + margin-bottom: 0.2rem; + min-height: 2.5rem; + height: 2em; + } + + .ant-comment img, + .myContent img { + margin-bottom: 0.2rem; + min-height: 2.5rem; + height: 2em; + } + + .myContent { + * { + max-width: 100% !important; + } + } + + .samllPadding { + padding: 0px 3px 5px; + } + .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 { @@ -237,13 +279,21 @@ user-select: none; } + .ant-comment-nested { + margin-left: 20px; + } + .ant-comment-avatar { cursor: default; } .ant-comment-actions { - display: flex; - justify-content: flex-end; + + li { + width: -webkit-fill-available; + } + + margin-bottom: 0px; } .ant-comment-content-author { @@ -252,15 +302,19 @@ .ant-comment-inner { padding: 10px 10px 0px; + flex-direction: column; } .commentGroup { border-top: 1px solid #e5e9ef; - margin-bottom: 10px; - padding-bottom: 15px; + margin-bottom: 5px; + padding-bottom: 0px; } .ant-comment-content-detail { + padding-left: 50px; + padding-top: 5px; + p { margin-bottom: 0px; } -- Gitblit v1.9.1