From 2f9d3c2392db9094af5ac6ea50b017140421f059 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Fri, 25 Feb 2022 18:35:59 +0800
Subject: [PATCH] 评论页页面拟定
---
src/components/mini/box-friend.vue | 5
src/components/mini/box12-comment.vue | 240 +++++++++++++++++++++++++++------------
src/components/mini/box13-reply.vue | 88 ++++++++++++++
src/components/swichLabel/main1-show.vue | 4
4 files changed, 258 insertions(+), 79 deletions(-)
diff --git a/src/components/mini/box-friend.vue b/src/components/mini/box-friend.vue
index 30984ed..99e267e 100644
--- a/src/components/mini/box-friend.vue
+++ b/src/components/mini/box-friend.vue
@@ -219,5 +219,10 @@
width: -webkit-calc(50% - 1.5rem);
width: calc(50% - 1.5rem);
}
+
+ .blog-main {
+ padding-left: 3%;
+ padding-right: 3%;
+ }
}
</style>
diff --git a/src/components/mini/box12-comment.vue b/src/components/mini/box12-comment.vue
index ce7c80a..c02960c 100644
--- a/src/components/mini/box12-comment.vue
+++ b/src/components/mini/box12-comment.vue
@@ -1,98 +1,184 @@
<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>
+ <replyBox></replyBox>
+ <a-modal v-model="visible" title="回复Ta @xx" on-ok="handleOk"
+ :bodyStyle="{'overflow':'overlay','maxHeight': '550px'}">
+ <template slot="footer">
+ <!-- <a-button key="reset" @click="reset" type="danger">
+ 擦掉重来
+ </a-button>
+ <a-button key="back" @click="handleCancel">
+ 歇会
+ </a-button>
+ <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
+ 完事<span style="font-size: 10px;">儿</span>..
+ </a-button> -->
+ </template>
+ <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" @click="replyCall">
+ <a-icon type="edit" />回复
+ </span>
+
+ <div slot="avatar">
+ {{temp.userName}} :
</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.userComment}}</p>
+
+ <a-comment v-for="tempData in temp.replyList.listData">
+ <span slot="actions" key="comment-nested-reply-to" @click="replyCall">
+ <a-icon type="edit" />回复
+ </span>
+ <div slot="avatar">
+ {{tempData.userName}} @ {{tempData.replyUserName}} :
+ </div>
+ <p slot="content">{{tempData.userComment}}</p>
+ </a-comment>
+
+
+ <div class="loadMore" @click="loadMore()">
+ <a-icon type="down" /><span>更多...</span>
+ </div>
</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>
</div>
</template>
<script>
+ import replyBox from "./box13-reply.vue"
export default {
+ components: {
+ replyBox
+ },
+ methods: {
+ loadMore() {
+ this.commentListData[0].replyList.listData = this.commentListData[0].replyList.listData.concat(this
+ .commentListData[0].replyList.listData)
+ },
+ replyCall() {
+ this.visible = true;
+ var msgInfo = {
+ useName: "22",
+ userComment: "11",
+ };
+ this.$refs.replyBoxId.getMsgInfo(msgInfo);
+ }
+ },
data() {
return {
- value: "",
- labelCol: {
- span: 6,
- offset: 0,
- },
- wrapperCol: {
- span: 18,
- offset: 0
- },
- form: {
- secret: ""
- }
+ visible: false,
+ commentListData: [{
+ userName: "bimo",
+ userComment: "1+1=2?",
+ commentTime: "2022-02-22 22:22:22",
+ id: "1",
+ parentId: null,
+ replyId: null,
+ replyUserName: null,
+ 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",
+ }, {
+ userName: "air",
+ userComment: "不对是3",
+ commentTime: "2022-02-23 13:13:13",
+ id: "3",
+ parentId: "1",
+ replyId: "2",
+ replyUserName: "inleft",
+ }]
+ },
+ },{
+ userName: "bimo",
+ userComment: "1+1=2?",
+ commentTime: "2022-02-22 22:22:22",
+ id: "1",
+ parentId: null,
+ replyId: null,
+ replyUserName: null,
+ 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",
+ }, {
+ userName: "air",
+ userComment: "不对是3",
+ commentTime: "2022-02-23 13:13:13",
+ id: "3",
+ parentId: "1",
+ replyId: "2",
+ replyUserName: "inleft",
+ }]
+ },
+ }],
+
}
}
}
</script>
-<style>
+<style lang="less">
+ .visitInfo {
+ user-select: none;
+ }
+
+ .commentList {
+
+ img {
+ user-select: none;
+ }
+
+ .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;
+
+
+ .loadMore:hover {
+ color: skyblue;
+ }
+ }
+
+ .ant-comment-content-detail {
+ p {
+ margin-bottom: 0px;
+ }
+ }
+ }
</style>
diff --git a/src/components/mini/box13-reply.vue b/src/components/mini/box13-reply.vue
new file mode 100644
index 0000000..5bbfe84
--- /dev/null
+++ b/src/components/mini/box13-reply.vue
@@ -0,0 +1,88 @@
+<template>
+ <div>
+ <div class="visitInfo">
+ <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>
+
+ </a-form-model>
+
+ </div>
+ <div class="replyMsgInfo" v-if="showReplyMsgInfo">
+ <div>{{msgInfo.useName}}</div>
+ <div>{{msgInfo.userComment}}</div>
+ </div>
+ <a-comment>
+ <div slot="content">
+ <a-form-item>
+ <a-textarea :rows="4" :value="value" />
+ </a-form-item>
+ <div>
+ <a-button html-type="submit" type="primary" v-if="!showReplyMsgInfo">
+ 高低整两句
+ </a-button>
+ <a-button html-type="submit" type="primary" v-else>
+ 回复Ta
+ </a-button>
+ </div>
+
+ <div>
+ <a-checkbox style="margin-left: 8px;" v-if="!showReplyMsgInfo">
+ 悄悄回复<span class="myTip">(仅登录后可查看)</span>
+ </a-checkbox>
+ <a-checkbox>
+ 接收邮件回复通知
+ </a-checkbox>
+ </div>
+ </div>
+ </a-comment>
+ </div>
+</template>
+
+<script>
+ export default {
+ methods: {
+ getMsgInfo(param) {
+ this.msgInfo = param;
+ this.showReplyMsgInfo = true;
+ }
+ },
+ data() {
+ return {
+ msgInfo: {
+ useName: "",
+ userComment: "",
+ },
+ showReplyMsgInfo: false,
+ labelCol: {
+ span: 6,
+ offset: 0,
+ },
+ wrapperCol: {
+ span: 15,
+ offset: 0
+ },
+ form: {
+ secret: ""
+ },
+ value: "",
+ }
+ }
+ }
+</script>
+
+<style lang="less">
+ .replyMsgInfo {
+ padding: 10px 20px 0px;
+ }
+</style>
diff --git a/src/components/swichLabel/main1-show.vue b/src/components/swichLabel/main1-show.vue
index c0ff852..361d166 100644
--- a/src/components/swichLabel/main1-show.vue
+++ b/src/components/swichLabel/main1-show.vue
@@ -197,8 +197,8 @@
.blog-main {
margin-top: 80px;
- padding-left: 5%;
- padding-right: 5%;
+ padding-left: 3%;
+ padding-right: 3%;
}
/*左右两边的盒子容器*/
--
Gitblit v1.9.1