评论页实现

 src/api/blogArticleComment.js

New file
@@ -0,0 +1,28 @@
/**
 * 系统应用
 *
 * @author yubaoshan
 * @date 2020年4月23日12:10:57
 */
import {
    axios
} from '../utils/request.js'



export function blogCommentAdd(parameter) {
    return axios({
        url: '/outside/blogComment/add',
        method: 'post',
        data: parameter
    })
}


export function queryBlogCommentList(parameter) {
    return axios({
        url: '/outside/blogComment/queryBlogCommentList',
        method: 'get',
        params: parameter
    })
}

 src/components/group/articleListScorll.vue

@@ -16,7 +16,7 @@
            </div>
        </div>
        <a-row type="flex" justify="center">
            <div style="position:fixed;bottom: 10px;" id="dddadf">
            <div style="position:fixed;bottom: 10px;" >
                <a-pagination @change="onChange" :showQuickJumper="true" :size="size" v-model="current"
                    :defaultPageSize="defaultPageSize" :pageSize="pageSize" :total="total" />
            </div>

 src/components/mini/Aplayer.vue

@@ -1,6 +1,8 @@
<template>
    <div class="fade">
        <aplayer :audio="audio" fixed style="z-index: 10;"  :volume="0.1" :preload="preload" />
        <!-- <a-col v-bind="colMain">
        </a-col> -->
            <aplayer :audio="audio" :autoplay="autoplay" fixed style="z-index: 10;" :volume="0.1" :preload="preload" />

        <!-- <a-modal ref="musicModal" title="" :dialog-style="{ top: '10px' }" :mask="false"
        :maskClosable="false"    :visible="modal1Visible" @ok="() => setModal1Visible(false)" @cancel="() => setModal1Visible(false)">
@@ -16,6 +18,15 @@

        data() {
            return {
                colMain: {
                    xs: 0,
                    sm: 0,
                    md: 1,
                    lg: 1,
                    xl: 1,
                    xxl: 1
                },
                autoplay:false,
                modal1Visible: true,
                secondsToGo: 5,
                preload: "none",

 src/components/mini/box-friend.vue

@@ -54,7 +54,7 @@

    .myFriend {
        box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        padding: 10px 30px 0px;
        padding: 10px 30px 20px;

        h1 {
            margin: .67em 0;

 src/components/mini/box12-comment.vue

@@ -1,19 +1,9 @@
<template>
    <div class="myFriend">
    <div class="myFriend" style="min-height: 950px;">
        <h1 style="text-align: center;">碎碎念</h1>
        <replyBox ref="commentBoxId"></replyBox>
        <a-modal v-model="visible" title="回复Ta @xx" on-ok="handleOk"
        <a-modal v-model="visible" :title="replyTaget" :footer="null"
            :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>

@@ -21,123 +11,195 @@

            <div class="commentGroup">
                <a-comment>
                    <span slot="actions" key="comment-nested-reply-to" @click="replyCall">
                        <a-icon type="edit" />回复
                    <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">
                        {{temp.userName}} :
                        <a :href="temp.userHomePage" target="_blank" class="no-underline">
                            {{temp.visitorNickName}} :
                        </a>
                    </div>

                    <p slot="content">{{temp.userComment}}</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">
                    <!-- <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">
                            {{tempData.userName}} @ {{tempData.replyUserName}} :
                            <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 class="loadMore" @click="loadMore()">
                        <a-icon type="down" /><span>更多...</span>
                    </div>
                </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: {
            handleOk(e) {},
            loadMore() {
                this.commentListData[0].replyList.listData = this.commentListData[0].replyList.listData.concat(this
                    .commentListData[0].replyList.listData)
            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
                })
            },
            replyCall() {
            loadMore() {
                this.$message.info("11")
            },
            replyCall(obj, replyId) {
                this.visible = true;
                this.replyTaget = "回复Ta @" + obj.userName;
                var msgInfo = {
                    useName: "22",
                    userComment: "11",
                    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 {
                articleId: null,
                page: {
                    size: "small",
                    total: 1,
                    pageSize: 2,
                    current: 1,
                    defaultPageSize: 10
                },
                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,
                    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",
                        }]
                    },
                }],
                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: "",
                    //         }]
                    //     },
                    // },
                ],

            }
        }
@@ -150,9 +212,16 @@
    }

    .commentList {
        a {
            color: black;
        }

        img {
            user-select: none;
        }

        .ant-comment-avatar {
            cursor: default;
        }

        .ant-comment-actions {
@@ -172,11 +241,6 @@
            border-top: 1px solid #e5e9ef;
            margin-bottom: 10px;
            padding-bottom: 15px;


            .loadMore:hover {
                color: skyblue;
            }
        }

        .ant-comment-content-detail {

 src/components/mini/box13-reply.vue

@@ -1,48 +1,52 @@
<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-form-model ref="myForm" layout="inline" :rules="rules" :model="form" :label-col="labelCol"
                :wrapper-col="wrapperCol">
                <a-form-model-item label="昵称" prop="nickName">
                    <a-input v-model="form.nickName" placeholder="需填..">
                    </a-input>
                </a-form-model-item>
                <a-form-model-item label="邮箱">
                    <a-input v-model="form.secret" placeholder="..仅后台可见">
                <a-form-model-item label="邮箱" prop="eMail">
                    <a-input v-model="form.eMail" placeholder="..仅后台可见">
                    </a-input>
                </a-form-model-item>
                <a-form-model-item label="主页">
                    <a-input v-model="form.secret" placeholder="http:// or https://">
                <a-form-model-item label="主页" prop="homePage">
                    <a-input v-model="form.homePage" placeholder="https:// or http://">
                    </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>{{msgInfo.useName}} </div>
            <div style="padding: 0px 3px;"> : </div>
            <div>
                <span v-html="msgInfo.userComment.replace(/\n/g, '<br>')"></span>
            </div>
        </div>
        <a-comment>
            <div slot="content">
                <a-form-item>
                    <a-textarea :rows="4" :value="value" />
                    <a-textarea :rows="4" v-model="form.visitorContent" :placeholder="replyHolder" />
                </a-form-item>
                <div>
                    <a-button html-type="submit" type="primary" v-if="!showReplyMsgInfo">
                    <a-button html-type="submit" type="primary" v-if="!showReplyMsgInfo" @click="send()"
                        :disabled="isSending">
                        高低整两句
                    </a-button>
                    <a-button html-type="submit" type="primary" v-else>
                    <a-button html-type="submit" type="primary" v-else @click="send()" :disabled="isSending">
                        回复Ta
                    </a-button>
                </div>

                <div>
                    <a-checkbox style="margin-left: 8px;" v-if="!showReplyMsgInfo">
                        悄悄回复<span class="myTip">(仅登录后可查看)</span>
                    <a-checkbox style="margin-left: 8px;" v-if="!showReplyMsgInfo" v-model="form.isSecretMsg">
                        悄悄说..<span class="myTip">(仅登录后可查看)</span>
                    </a-checkbox>
                    <a-checkbox>
                    <!-- <a-checkbox v-model="form.isReceiveMail">
                        接收邮件回复通知
                    </a-checkbox>
                    </a-checkbox> -->
                </div>
            </div>
        </a-comment>
@@ -50,18 +54,90 @@
</template>

<script>
    import {
        blogCommentAdd
    } from '../../api/blogArticleComment.js'

    export default {
        methods: {
            getMsgInfo(param) {
                this.msgInfo = param;
                this.showReplyMsgInfo = true;
                this.replyHolder = "@" + this.msgInfo.useName;
            },
            send(articleId) {
                console.log(this.msgInfo);
                if (this.form.nickName === "") {
                    this.$message.info("怎么称呼..")
                    return
                }

                if (this.form.visitorContent === "") {
                    this.$message.info("你可能需要说点什么..")
                    return
                }

                var res;
                this.$refs.myForm.validate(valid => {
                    if (valid) {
                        //this.$message.info("校验通过")
                        res = true;
                    } else {
                        this.$message.info("校验失败")
                        res = false;
                    }
                });

                let commentType = (articleId == null || articleId == undefined) ? 1 : 2;
                this.isSending = true;

                blogCommentAdd({
                    parentId: this.msgInfo.parentId,
                    replyId: this.msgInfo.replyId,
                    "visitorId": "1",
                    "isReceiveMail": 0,
                    "articleId": articleId,
                    "commentType": commentType,
                    "authStatus": this.form.isSecretMsg ? 2 : 1,
                    // "isReceiveMail": this.form.isReceiveMail ? 1 : 0,
                    "visitorEmail": this.form.eMail,
                    "visitorHomePage": this.form.homePage,
                    "visitorNickName": this.form.nickName,
                    "commentContent": this.form.visitorContent,
                }).then((res) => {
                    this.isSending = false;
                    console.log(111);
                    if (res.code == 200) {
                        console.log(111);
                        this.$message.info("已送达,审核通过后显示..")
                    } else {
                        this.$notification.error({
                            message: '好像哪里不对劲..',
                            description: res.message,
                            placement: 'bottomRight'
                        });
                    }
                }).catch((error) => {
                    this.$message.error("请求失败")
                    this.isSending = false;
                })
                // setTimeout(() => {
                //     this.$message.info("发送成功")
                //     this.isSending = false;
                // }, 3000);

            }
        },

        data() {
            return {
                isSending: false,
                replyHolder: "",
                msgInfo: {
                    useName: "",
                    userComment: "",
                    parentId: 0,
                    replyId: 0
                },
                showReplyMsgInfo: false,
                labelCol: {
@@ -73,9 +149,42 @@
                    offset: 0
                },
                form: {
                    secret: ""
                    nickName: "",
                    eMail: "",
                    homePage: "",
                    isReceiveMail: false,
                    isSecretMsg: false,
                    visitorContent: "",
                    parentId: 0,
                    replyId: 0
                },
                value: "",
                rules: {
                    "nickName": [{
                        message: '怎么称呼?',
                    }, {
                        trigger: 'blur',
                        max: 20,
                        message: '你的名字也太长了..'
                    }],
                    "eMail": [{
                        trigger: 'blur',
                        pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
                        message: '邮箱格式不正确'
                    }, {
                        trigger: 'blur',
                        max: 50,
                        message: '邮箱不要超过50字符..'
                    }],
                    "homePage": [{
                        trigger: 'blur',
                        pattern: /^((https|http)?:\/\/)[^\s]+/,
                        message: '仅支持 https | http'
                    }, {
                        trigger: 'blur',
                        max: 50,
                        message: '网址不要超过50字符..'
                    }]
                },
            }
        }
    }
@@ -83,6 +192,10 @@

<style lang="less">
    .replyMsgInfo {
        padding: 10px 20px 0px;
        display: flex;
        box-shadow: 0px 9px 10px 0 rgba(0, 0, 0, 0.24), 1px 3px 15px 0 rgba(0, 0, 0, 0.19);
        padding: 20px 20px;
        margin-left: 15px;
        margin-top: 10px;
    }
</style>

 src/components/mini/box8-panal.vue

@@ -22,7 +22,7 @@

        </a-row>
        <a-row type="flex" justify="center">
            <div style="position:fixed;bottom: 10px;" id="dddadf">
            <div style="position:fixed;bottom: 10px;">
                <a-pagination @change="onChange" :showQuickJumper="true" :size="size" v-model="current"
                    :defaultPageSize="10" :pageSize="pageSize" :total="total" />
            </div>

 src/components/swichLabel/main1-show.vue

@@ -24,10 +24,10 @@
                </keep-alive>

                <a-col v-bind="colApiMain ">
                    <a-col v-bind="colMini" :style="{'position':'absolute','right':'30px'}">
                        <a-affix :offset-top="550">
                            <a-button @click="showDrawer1">
                                more
                    <a-col v-bind="colMini" :style="{'position':'absolute','right':'5px'}">
                        <a-affix :offset-top="600">
                            <a-button @click="showDrawer1" style="padding:0px 10px">
                                <a-icon type="left-circle" />
                            </a-button>
                        </a-affix>
                    </a-col>
@@ -108,7 +108,7 @@
                colMini: {
                    xs: 1,
                    sm: 1,
                    md: 1,
                    md: 0,
                    lg: 0,
                    xl: 0,
                    xxl: 0