inleft
2022-08-25 a23166e4fac771238a90ae5ddc5b1e53a1c7afb8
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">
cb7779 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>
3a5d66 18                 <a-form-model-item label="认证"
cb7779 19                     v-show="form.nickName=='inleft'||form.nickName=='笔墨'||form.nickName=='阿墨'">
0dd41b 20                     <a-input v-model="form.authCode" autocomplete='new-password' type="password" placeholder="我的授权码">
I 21                     </a-input>
cb7779 22                 </a-form-model-item>
2f9d3c 23             </a-form-model>
I 24         </div>
1169d0 25
2f9d3c 26         <div class="replyMsgInfo" v-if="showReplyMsgInfo">
1169d0 27             <div>
I 28                 {{msgInfo.useName}}<span style="padding: 0px 3px;"> : </span>
29             </div>
ec97e0 30             <div>
c14e32 31                 <span v-html="parseContent(msgInfo.userComment).replace(/\n/g, '<br>')"></span>
ec97e0 32             </div>
2f9d3c 33         </div>
c6793e 34         <a-comment  style="min-height: 320px;">
2f9d3c 35             <div slot="content">
c14e32 36                 <MyOwO :content.sync="form.visitorContent" :replyHolder="replyHolder"></MyOwO>
2f9d3c 37                 <div>
cb7779 38                     <a-button html-type="submit" type="primary" @click="send()" v-if="!showReplyMsgInfo"
I 39                         :disabled="isSending || $attrs.isAllowedComment==0">
40                         高低整两句
41                     </a-button>
42                     <a-button html-type="submit" type="primary" v-else @click="send()"
43                         :disabled="isSending || $attrs.isAllowedComment==0">
44                         回复Ta
45                     </a-button>
46                     <span class="myTip" v-if="$attrs.isAllowedComment==0">很遗憾,评论已关闭</span>
2f9d3c 47                 </div>
I 48
49                 <div>
e45377 50                     <a-checkbox v-model="form.isReceiveMail">
2f9d3c 51                         接收邮件回复通知
cb7779 52                     </a-checkbox>
1169d0 53                     <a-checkbox v-if="!showReplyMsgInfo" v-model="form.isSecretMsg">
cb7779 54                         悄悄说..<span class="myTip">(仅登录后可查看)</span>
e45377 55                     </a-checkbox>
2f9d3c 56                 </div>
I 57             </div>
58         </a-comment>
59     </div>
859ec7 60
2f9d3c 61 </template>
I 62
63 <script>
ec97e0 64     import {
I 65         blogCommentAdd
66     } from '../../api/blogArticleComment.js'
cb7779 67     import md5 from 'js-md5';
I 68
c14e32 69     import MyOwO from '../common/OwO.vue'
I 70     import myConstant from "../../config/myConstant.js"
ec97e0 71
2f9d3c 72     export default {
c14e32 73         components: {
I 74             MyOwO
75         },
76         props: {
77             parseContent: {
78                 type: Function,
79                 default: null
80             }
1169d0 81         },
2f9d3c 82         methods: {
I 83             getMsgInfo(param) {
84                 this.msgInfo = param;
85                 this.showReplyMsgInfo = true;
ec97e0 86                 this.replyHolder = "@" + this.msgInfo.useName;
I 87             },
846bd0 88             send() {
ec97e0 89                 if (this.form.nickName === "") {
I 90                     this.$message.info("怎么称呼..")
91                     return
92                 }
93
94                 if (this.form.visitorContent === "") {
95                     this.$message.info("你可能需要说点什么..")
96                     return
97                 }
98
cb7779 99                 if (this.form.isReceiveMail && this.form.eMail == "") {
I 100                     this.$message.info("如果是想接收通知的话,你可能需要填上一个邮箱..")
101                     return
102                 }
103
ec97e0 104                 var res;
I 105                 this.$refs.myForm.validate(valid => {
106                     if (valid) {
107                         //this.$message.info("校验通过")
108                         res = true;
109                     } else {
110                         this.$message.info("校验失败")
111                         res = false;
112                     }
113                 });
cb7779 114
I 115                 if (this.form.nickName == 'inleft' || this.form.nickName == '笔墨' || this.form.nickName == '阿墨') {
116                     if (this.form.authCode == null || this.form.authCode == "") {
c14e32 117                         this.$message.info("此名称在这里使用需要正确的授权码..")
cb7779 118                         return
I 119                     }
120                 }
eeef9f 121                 
I 122                 if (this.form.eMail == 'inleft@qq.com') {
123                     if (this.form.authCode == null || this.form.authCode == "") {
124                         this.$message.info("此邮箱在这里使用需要正确的授权码..")
125                         return
126                     }
127                 }
cb7779 128
I 129
0b0125 130                 var articleId = this.$attrs.articleId;
ec97e0 131                 let commentType = (articleId == null || articleId == undefined) ? 1 : 2;
I 132
cb7779 133                 //记录最新访客信息
I 134                 if (this.form.visitorId == 1) {
135                     var today = new Date();
136                     var year = today.getFullYear() + "";
137                     var month = today.getMonth() + 1 + "";
138                     var date = today.getDate() + "";
139                     var num = "";
140                     for (var i = 0; i < 4; i++) {
141                         num = num + Math.floor(Math.random() * 9) + "";
142                     }
143                     this.form.visitorId = year + (month > 10 ? month : '0' + month) + date + num
144                 }
145
c14e32 146                 localStorage.setItem(this.VisitorDataKey, JSON.stringify(this.form))
cb7779 147
I 148                 this.isSending = true;
ec97e0 149                 blogCommentAdd({
I 150                     parentId: this.msgInfo.parentId,
151                     replyId: this.msgInfo.replyId,
cb7779 152                     "visitorId": this.form.visitorId,
ec97e0 153                     "articleId": articleId,
I 154                     "commentType": commentType,
155                     "authStatus": this.form.isSecretMsg ? 2 : 1,
e45377 156                     "isReceiveMail": this.form.isReceiveMail ? 1 : 0,
ec97e0 157                     "visitorEmail": this.form.eMail,
I 158                     "visitorHomePage": this.form.homePage,
159                     "visitorNickName": this.form.nickName,
160                     "commentContent": this.form.visitorContent,
cb7779 161                     "authCode": this.form.authCode != null && this.form.authCode != "" ? md5(this.form.authCode) :
I 162                         ''
ec97e0 163                 }).then((res) => {
I 164                     this.isSending = false;
165                     if (res.code == 200) {
5dfef8 166                         this.$emit("sendMsg");
I 167                         this.$message.info("信息已送达..")
ec97e0 168                     } else {
I 169                         this.$notification.error({
170                             message: '好像哪里不对劲..',
171                             description: res.message,
172                             placement: 'bottomRight'
173                         });
174                     }
175                 }).catch((error) => {
176                     this.$message.error("请求失败")
177                     this.isSending = false;
178                 })
179                 // setTimeout(() => {
180                 //     this.$message.info("发送成功")
181                 //     this.isSending = false;
182                 // }, 3000);
183
2f9d3c 184             }
I 185         },
ec97e0 186
2f9d3c 187         data() {
c14e32 188             let tempVisitorData = localStorage.getItem(this.VisitorDataKey);
cb7779 189             let vistorData = {
I 190                 nickName: "",
191                 eMail: "",
192                 homePage: "",
af029b 193                 isReceiveMail: false,
cb7779 194                 isSecretMsg: false,
I 195                 visitorContent: "",
196                 parentId: 0,
197                 replyId: 0,
198                 visitorId: 1,
199                 authCode: ''
200             };
201
202             if (tempVisitorData != null && tempVisitorData != undefined) {
203                 tempVisitorData = JSON.parse(tempVisitorData);
204                 vistorData.nickName = tempVisitorData.nickName;
205                 vistorData.eMail = tempVisitorData.eMail;
206                 vistorData.homePage = tempVisitorData.homePage;
207                 vistorData.isReceiveMail = tempVisitorData.isReceiveMail;
208                 vistorData.isSecretMsg = tempVisitorData.isSecretMsg;
209                 vistorData.visitorId = tempVisitorData.visitorId;
210                 vistorData.authCode = tempVisitorData.authCode;
211             }
212
2f9d3c 213             return {
c14e32 214                 VisitorDataKey: myConstant.VisitorDataKey,
ec97e0 215                 isSending: false,
I 216                 replyHolder: "",
2f9d3c 217                 msgInfo: {
I 218                     useName: "",
219                     userComment: "",
ec97e0 220                     parentId: 0,
I 221                     replyId: 0
2f9d3c 222                 },
I 223                 showReplyMsgInfo: false,
224                 labelCol: {
225                     span: 6,
226                     offset: 0,
227                 },
228                 wrapperCol: {
229                     span: 15,
230                     offset: 0
231                 },
cb7779 232                 form: vistorData,
ec97e0 233                 rules: {
I 234                     "nickName": [{
235                         message: '怎么称呼?',
236                     }, {
237                         trigger: 'blur',
238                         max: 20,
239                         message: '你的名字也太长了..'
240                     }],
241                     "eMail": [{
242                         trigger: 'blur',
243                         pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
eeef9f 244                         message: '这邮箱格式?没见过呀..'
ec97e0 245                     }, {
I 246                         trigger: 'blur',
247                         max: 50,
248                         message: '邮箱不要超过50字符..'
249                     }],
250                     "homePage": [{
251                         trigger: 'blur',
1cf6d9 252                         pattern: /^((https|http)?:\/\/)+/,
I 253                         message: '仅支持 https:// | http://'
ec97e0 254                     }, {
I 255                         trigger: 'blur',
256                         max: 50,
257                         message: '网址不要超过50字符..'
258                     }]
259                 },
2f9d3c 260             }
I 261         }
262     }
263 </script>
264
265 <style lang="less">
c14e32 266     .replyMsgInfo img {
I 267         margin-bottom: -0.125rem;
268         img min-height: 3.5rem;
269         height: 2em;
270     }
271
2f9d3c 272     .replyMsgInfo {
ec97e0 273         display: flex;
1169d0 274         flex-direction: column;
e33959 275         border-radius: 4px;
ec97e0 276         box-shadow: 0px 9px 10px 0 rgba(0, 0, 0, 0.24), 1px 3px 15px 0 rgba(0, 0, 0, 0.19);
e33959 277         padding: 20px 25px 20px;
ec97e0 278         margin-left: 15px;
I 279         margin-top: 10px;
2f9d3c 280     }
1169d0 281
I 282     .OwO {
283         padding: 0px 0px 20px 0px;
284     }
285
286     .OwO .OwO-logo {
287         height: 30px;
288     }
289
290     .OwO .quyin,
291     .OwO img {
292         margin-bottom: -0.125rem;
293         min-height: 3.5rem;
294         height: 1em;
295     }
2f9d3c 296 </style>