| | |
| | | <template> |
| | | <div> |
| | | <replyBox ref="commentBoxId" v-bind="$attrs"></replyBox> |
| | | <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','maxHeight': '550px','scrollbarWidth': 'none'}"> |
| | | <replyBox ref="replyBoxId" v-bind="$attrs"></replyBox> |
| | | :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" v-if="commentListData.length==0"> |
| | | |
| | | <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"> |
| | |
| | | {{temp.visitorNickName}} |
| | | </a-tooltip> |
| | | </div> |
| | | <div>:</div> |
| | | <div class="samllPadding">:</div> |
| | | </div> |
| | | |
| | | <p slot="content">{{temp.commentContent}}</p> |
| | | <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"> |
| | |
| | | {{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"> |
| | | <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> |
| | | </a> |
| | | <a-tooltip placement="bottomLeft" :title="tempData.replyUserName" v-else> |
| | | {{tempData.replyUserName}} |
| | | </a-tooltip> |
| | | </div> |
| | | </div> |
| | | <p slot="content">{{tempData.commentContent}}</p> |
| | | <p :id="tempData.id" slot="content" v-html="parseContent(tempData.commentContent)"></p> |
| | | </a-comment> |
| | | </a-comment> |
| | | |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <a-row type="flex" justify="center"> |
| | | <div> |
| | | <a-pagination @change="onChange" :showQuickJumper="true" :size="page.size" v-model="page.current" |
| | |
| | | |
| | | <script> |
| | | import replyBox from "./box13-reply.vue" |
| | | |
| | | import { |
| | | queryBlogCommentList, |
| | | queryBlogCommentSubList |
| | | } from '../../api/blogArticleComment.js' |
| | | import OwOjsonConfig from '../../assets/OwO.json' |
| | | |
| | | export default { |
| | | props: ["articleId"], |
| | | components: { |
| | | replyBox |
| | | replyBox, |
| | | }, |
| | | beforeMount() { |
| | | queryBlogCommentList({ |
| | | pageNo: this.page.current, |
| | | pageSize: this.page.pageSize, |
| | | articleId: this.$attrs.acticleId |
| | | }).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.$attrs.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; |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | // articleId: null, |
| | | isAllowedComment: true, |
| | | page: { |
| | | size: "small", |
| | | total: 1, |
| | |
| | | replyTaget: "", |
| | | visible: false, |
| | | 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; |
| | | } |
| | |
| | | user-select: none; |
| | | } |
| | | |
| | | .ant-comment-nested { |
| | | margin-left: 20px; |
| | | } |
| | | |
| | | .ant-comment-avatar { |
| | | cursor: default; |
| | | } |
| | |
| | | |
| | | .ant-comment-inner { |
| | | padding: 10px 10px 0px; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | .commentGroup { |
| | |
| | | } |
| | | |
| | | .ant-comment-content-detail { |
| | | padding-left: 50px; |
| | | padding-top: 5px; |
| | | |
| | | p { |
| | | margin-bottom: 0px; |
| | | } |