From ec97e05d923dc7a343b16ddd5134f1dff8071051 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Tue, 01 Mar 2022 18:53:37 +0800 Subject: [PATCH] 评论页实现 --- src/components/mini/box12-comment.vue | 308 ++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 231 insertions(+), 77 deletions(-) diff --git a/src/components/mini/box12-comment.vue b/src/components/mini/box12-comment.vue index ce7c80a..23d1b54 100644 --- a/src/components/mini/box12-comment.vue +++ b/src/components/mini/box12-comment.vue @@ -1,98 +1,252 @@ <template> - <div class="myFriend"> - <a-form-model ref="myForm" layout="inline" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol"> - <a-form-model-item label="昵称"> - <a-input v-model="form.secret" placeholder=".."> - </a-input> - </a-form-model-item> - <a-form-model-item label="邮箱"> - <a-input v-model="form.secret" placeholder="..仅后台可见"> - </a-input> - </a-form-model-item> - <a-form-model-item label="主页"> - <a-input v-model="form.secret" placeholder="http:// or https://"> - </a-input> - </a-form-model-item> + <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'}"> + <replyBox ref="replyBoxId"></replyBox> + </a-modal> - </a-form-model> + <div v-for="temp in commentListData" class="commentList"> - <a-comment> - <div slot="content"> - <a-form-item> - <a-textarea :rows="4" :value="value" /> - </a-form-item> - <a-form-item> - <a-button html-type="submit" type="primary"> - 高低整两句 - </a-button> - <div> - <a-checkbox style="margin-left: 8px;"> - 悄悄回复<span class="myTip">(仅登录后可查看)</span> - </a-checkbox> - <a-checkbox> - 接收邮件回复通知 - </a-checkbox> + <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()"> + <a-icon type="down" />更多.. + </span> + </span> + + <div slot="avatar"> + <a :href="temp.userHomePage" target="_blank" class="no-underline"> + {{temp.visitorNickName}} : + </a> </div> - </a-form-item> - </div> - </a-comment> - <a-comment> - <span slot="actions" key="comment-nested-reply-to"><a-icon type="edit" />回复</span> - <a slot="author">Han Solo</a> - <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" - alt="Han Solo" /> - <p slot="content">1+1=?</p> - - <a-comment> - <span slot="actions" key="comment-nested-reply-to"><a-icon type="edit" />回复</span> - <a slot="author">yi @ Han Solo</a> - <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" - alt="Han Solo" /> - <p slot="content">2! - </p> - <a-comment> - <span slot="actions" key="comment-nested-reply-to"><a-icon type="edit" />回复</span> - <a slot="author">bimo @ yi</a> - <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" - alt="Han Solo" /> - <p slot="content">不对3! - </p> + <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> + </div> + <p slot="content">{{tempData.userComment}}</p> + </a-comment> --> + </a-comment> - <a-comment> - <span slot="actions" key="comment-nested-reply-to"><a-icon type="edit" />回复</span> - <a slot="author">er @ yi</a> - <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" - alt="Han Solo" /> - <p slot="content">+∞ - </p> - </a-comment> - </a-comment> - </a-comment> + </div> + </div> + + <a-row type="flex" justify="center"> + <div> + <a-pagination @change="onChange" :showQuickJumper="true" :size="page.size" v-model="page.current" + :defaultPageSize="page.defaultPageSize" :pageSize="page.pageSize" :total="page.total" /> + </div> + </a-row> </div> </template> <script> + import replyBox from "./box13-reply.vue" + + import { + queryBlogCommentList + } 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; + 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 + }) + }, + loadMore() { + this.$message.info("11") + }, + replyCall(obj, replyId) { + this.visible = true; + this.replyTaget = "回复Ta @" + obj.userName; + var msgInfo = { + useName: obj.visitorNickName, + userComment: obj.commentContent, + parentId: obj.parentId == 0 ? obj.id : obj.parentId, + replyId: obj.id + }; + this.$nextTick(() => { + this.$refs.replyBoxId.getMsgInfo(msgInfo); + }); + } + }, data() { return { - value: "", - labelCol: { - span: 6, - offset: 0, + articleId: null, + page: { + size: "small", + total: 1, + pageSize: 2, + current: 1, + defaultPageSize: 10 }, - wrapperCol: { - span: 18, - offset: 0 - }, - form: { - secret: "" - } + 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: "", + // }] + // }, + // }, + ], + } } } </script> -<style> +<style lang="less"> + .visitInfo { + user-select: none; + } + + .commentList { + a { + color: black; + } + + img { + user-select: none; + } + + .ant-comment-avatar { + cursor: default; + } + + .ant-comment-actions { + display: flex; + justify-content: flex-end; + } + + .ant-comment-content-author { + margin-bottom: 0px; + } + + .ant-comment-inner { + padding: 10px 10px 0px; + } + + .commentGroup { + border-top: 1px solid #e5e9ef; + margin-bottom: 10px; + padding-bottom: 15px; + } + + .ant-comment-content-detail { + p { + margin-bottom: 0px; + } + } + } </style> -- Gitblit v1.9.1