inleft
2022-03-07 56fe690507efc7e47f3b83e4e2095afa1ccf1439
commit | author | age
2f9d3c 1 <template>
I 2     <div>
3         <div class="visitInfo">
ec97e0 4             <a-form-model ref="myForm" layout="inline" :rules="rules" :model="form" :label-col="labelCol"
I 5                 :wrapper-col="wrapperCol">
6                 <a-form-model-item label="昵称" prop="nickName">
7                     <a-input v-model="form.nickName" placeholder="需填..">
2f9d3c 8                     </a-input>
I 9                 </a-form-model-item>
ec97e0 10                 <a-form-model-item label="邮箱" prop="eMail">
I 11                     <a-input v-model="form.eMail" placeholder="..仅后台可见">
2f9d3c 12                     </a-input>
I 13                 </a-form-model-item>
ec97e0 14                 <a-form-model-item label="主页" prop="homePage">
I 15                     <a-input v-model="form.homePage" placeholder="https:// or http://">
2f9d3c 16                     </a-input>
I 17                 </a-form-model-item>
18
19             </a-form-model>
20         </div>
21         <div class="replyMsgInfo" v-if="showReplyMsgInfo">
ec97e0 22             <div>{{msgInfo.useName}} </div>
I 23             <div style="padding: 0px 3px;"> : </div>
24             <div>
25                 <span v-html="msgInfo.userComment.replace(/\n/g, '<br>')"></span>
26             </div>
2f9d3c 27         </div>
I 28         <a-comment>
29             <div slot="content">
30                 <a-form-item>
ec97e0 31                     <a-textarea :rows="4" v-model="form.visitorContent" :placeholder="replyHolder" />
2f9d3c 32                 </a-form-item>
I 33                 <div>
0b0125 34                         <a-button html-type="submit" type="primary" @click="send()" v-if="!showReplyMsgInfo"
I 35                             :disabled="isSending || $attrs.isAllowedComment==0">
36                             高低整两句
37                         </a-button>
38                         <a-button html-type="submit" type="primary" v-else @click="send()"
39                             :disabled="isSending || $attrs.isAllowedComment==0">
40                             回复Ta
41                         </a-button>
42                         <span class="myTip" v-if="$attrs.isAllowedComment==0">很遗憾,评论已关闭</span>
2f9d3c 43                 </div>
I 44
45                 <div>
0b0125 46                     <a-checkbox style=" margin-left: 8px;" v-if="!showReplyMsgInfo" v-model="form.isSecretMsg">
ec97e0 47                         悄悄说..<span class="myTip">(仅登录后可查看)</span>
2f9d3c 48                     </a-checkbox>
ec97e0 49                     <!-- <a-checkbox v-model="form.isReceiveMail">
2f9d3c 50                         接收邮件回复通知
ec97e0 51                     </a-checkbox> -->
2f9d3c 52                 </div>
I 53             </div>
54         </a-comment>
55     </div>
56 </template>
57
58 <script>
ec97e0 59     import {
I 60         blogCommentAdd
61     } from '../../api/blogArticleComment.js'
62
2f9d3c 63     export default {
I 64         methods: {
65             getMsgInfo(param) {
66                 this.msgInfo = param;
67                 this.showReplyMsgInfo = true;
ec97e0 68                 this.replyHolder = "@" + this.msgInfo.useName;
I 69             },
846bd0 70             send() {
ec97e0 71                 if (this.form.nickName === "") {
I 72                     this.$message.info("怎么称呼..")
73                     return
74                 }
75
76                 if (this.form.visitorContent === "") {
77                     this.$message.info("你可能需要说点什么..")
78                     return
79                 }
80
81                 var res;
82                 this.$refs.myForm.validate(valid => {
83                     if (valid) {
84                         //this.$message.info("校验通过")
85                         res = true;
86                     } else {
87                         this.$message.info("校验失败")
88                         res = false;
89                     }
90                 });
0b0125 91                 var articleId = this.$attrs.articleId;
ec97e0 92                 let commentType = (articleId == null || articleId == undefined) ? 1 : 2;
I 93                 this.isSending = true;
94
95                 blogCommentAdd({
96                     parentId: this.msgInfo.parentId,
97                     replyId: this.msgInfo.replyId,
98                     "visitorId": "1",
99                     "isReceiveMail": 0,
100                     "articleId": articleId,
101                     "commentType": commentType,
102                     "authStatus": this.form.isSecretMsg ? 2 : 1,
103                     // "isReceiveMail": this.form.isReceiveMail ? 1 : 0,
104                     "visitorEmail": this.form.eMail,
105                     "visitorHomePage": this.form.homePage,
106                     "visitorNickName": this.form.nickName,
107                     "commentContent": this.form.visitorContent,
108                 }).then((res) => {
109                     this.isSending = false;
110                     if (res.code == 200) {
5dfef8 111                         this.$emit("sendMsg");
I 112                         this.$message.info("信息已送达..")
ec97e0 113                     } else {
I 114                         this.$notification.error({
115                             message: '好像哪里不对劲..',
116                             description: res.message,
117                             placement: 'bottomRight'
118                         });
119                     }
120                 }).catch((error) => {
121                     this.$message.error("请求失败")
122                     this.isSending = false;
123                 })
124                 // setTimeout(() => {
125                 //     this.$message.info("发送成功")
126                 //     this.isSending = false;
127                 // }, 3000);
128
2f9d3c 129             }
I 130         },
ec97e0 131
2f9d3c 132         data() {
I 133             return {
ec97e0 134                 isSending: false,
I 135                 replyHolder: "",
2f9d3c 136                 msgInfo: {
I 137                     useName: "",
138                     userComment: "",
ec97e0 139                     parentId: 0,
I 140                     replyId: 0
2f9d3c 141                 },
I 142                 showReplyMsgInfo: false,
143                 labelCol: {
144                     span: 6,
145                     offset: 0,
146                 },
147                 wrapperCol: {
148                     span: 15,
149                     offset: 0
150                 },
151                 form: {
ec97e0 152                     nickName: "",
I 153                     eMail: "",
154                     homePage: "",
155                     isReceiveMail: false,
156                     isSecretMsg: false,
157                     visitorContent: "",
158                     parentId: 0,
159                     replyId: 0
2f9d3c 160                 },
ec97e0 161                 rules: {
I 162                     "nickName": [{
163                         message: '怎么称呼?',
164                     }, {
165                         trigger: 'blur',
166                         max: 20,
167                         message: '你的名字也太长了..'
168                     }],
169                     "eMail": [{
170                         trigger: 'blur',
171                         pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
172                         message: '邮箱格式不正确'
173                     }, {
174                         trigger: 'blur',
175                         max: 50,
176                         message: '邮箱不要超过50字符..'
177                     }],
178                     "homePage": [{
179                         trigger: 'blur',
180                         pattern: /^((https|http)?:\/\/)[^\s]+/,
181                         message: '仅支持 https | http'
182                     }, {
183                         trigger: 'blur',
184                         max: 50,
185                         message: '网址不要超过50字符..'
186                     }]
187                 },
2f9d3c 188             }
I 189         }
190     }
191 </script>
192
193 <style lang="less">
194     .replyMsgInfo {
ec97e0 195         display: flex;
e33959 196         border-radius: 4px;
ec97e0 197         box-shadow: 0px 9px 10px 0 rgba(0, 0, 0, 0.24), 1px 3px 15px 0 rgba(0, 0, 0, 0.19);
e33959 198         padding: 20px 25px 20px;
ec97e0 199         margin-left: 15px;
I 200         margin-top: 10px;
2f9d3c 201     }
I 202 </style>