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