| | |
| | | <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> |