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 | 330 ++++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 233 insertions(+), 97 deletions(-) diff --git a/src/components/mini/box12-comment.vue b/src/components/mini/box12-comment.vue index fc1468c..23d1b54 100644 --- a/src/components/mini/box12-comment.vue +++ b/src/components/mini/box12-comment.vue @@ -1,116 +1,252 @@ <template> - <div class="myFriend"> - <a-form-model ref="myForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol"> - <div style="display: flex;justify-content: center; "> - <a-form-model-item label="昵称"> - <a-input v-model="form.secret" autocomplete='new-password' type="password" placeholder="昵称"> - </a-input> - </a-form-model-item> - <a-form-model-item label="邮箱"> - <a-input v-model="form.secret" autocomplete='new-password' type="password" placeholder="邮箱"> - </a-input> - </a-form-model-item> - <a-form-model-item label="主页"> - <a-input v-model="form.secret" autocomplete='new-password' type="password" placeholder="主页"> - </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> + + <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()"> + <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.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> </div> - </a-form-model> + </div> - - <a-comment> - <!-- <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" - alt="Han Solo" /> --> - <div slot="content"> - <a-form-item> - <a-textarea :rows="4" :value="value" @change="handleChange" /> - </a-form-item> - <a-form-item> - <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit"> - 高低整两句 - </a-button> - </a-form-item> + <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-comment> - - <a-comment> - <span slot="actions" key="comment-nested-reply-to">Reply to</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"> - We supply a series of design principles, practical patterns and high quality design resources - (Sketch and Axure). - </p> - <a-collapse v-model="activeKey"> - <a-collapse-panel key="1" header="展开"> - <a-comment> - <span slot="actions">Reply to</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"> - We supply a series of design principles, practical patterns and high quality design - resources (Sketch and Axure). - </p> - <a-comment> - <span slot="actions">Reply to</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"> - We supply a series of design principles, practical patterns and high quality design - resources (Sketch and Axure). - </p> - </a-comment> - <a-comment> - <span slot="actions">Reply to</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"> - We supply a series of design principles, practical patterns and high quality design - resources (Sketch and Axure). - </p> - </a-comment> - </a-comment> - </a-collapse-panel> - </a-collapse> - </a-comment> - <a-comment> - <span slot="actions">Reply to</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"> - We supply a series of design principles, practical patterns and high quality design - resources (Sketch and Axure). - </p> - </a-comment> - </a-comment> + </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 { - labelCol: { - span: 5, - offset: 0, + articleId: null, + page: { + size: "small", + total: 1, + pageSize: 2, + current: 1, + defaultPageSize: 10 }, - wrapperCol: { - span: 15, - 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