inleft
2022-08-22 6461f5659505768e7a90594c3aab47f90d9ee213
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>
I 34         <a-comment>
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                 }
121
122
0b0125 123                 var articleId = this.$attrs.articleId;
ec97e0 124                 let commentType = (articleId == null || articleId == undefined) ? 1 : 2;
I 125
cb7779 126                 //记录最新访客信息
I 127                 if (this.form.visitorId == 1) {
128                     var today = new Date();
129                     var year = today.getFullYear() + "";
130                     var month = today.getMonth() + 1 + "";
131                     var date = today.getDate() + "";
132                     var num = "";
133                     for (var i = 0; i < 4; i++) {
134                         num = num + Math.floor(Math.random() * 9) + "";
135                     }
136                     this.form.visitorId = year + (month > 10 ? month : '0' + month) + date + num
137                 }
138
c14e32 139                 localStorage.setItem(this.VisitorDataKey, JSON.stringify(this.form))
cb7779 140
I 141                 this.isSending = true;
ec97e0 142                 blogCommentAdd({
I 143                     parentId: this.msgInfo.parentId,
144                     replyId: this.msgInfo.replyId,
cb7779 145                     "visitorId": this.form.visitorId,
ec97e0 146                     "articleId": articleId,
I 147                     "commentType": commentType,
148                     "authStatus": this.form.isSecretMsg ? 2 : 1,
e45377 149                     "isReceiveMail": this.form.isReceiveMail ? 1 : 0,
ec97e0 150                     "visitorEmail": this.form.eMail,
I 151                     "visitorHomePage": this.form.homePage,
152                     "visitorNickName": this.form.nickName,
153                     "commentContent": this.form.visitorContent,
cb7779 154                     "authCode": this.form.authCode != null && this.form.authCode != "" ? md5(this.form.authCode) :
I 155                         ''
ec97e0 156                 }).then((res) => {
I 157                     this.isSending = false;
158                     if (res.code == 200) {
5dfef8 159                         this.$emit("sendMsg");
I 160                         this.$message.info("信息已送达..")
ec97e0 161                     } else {
I 162                         this.$notification.error({
163                             message: '好像哪里不对劲..',
164                             description: res.message,
165                             placement: 'bottomRight'
166                         });
167                     }
168                 }).catch((error) => {
169                     this.$message.error("请求失败")
170                     this.isSending = false;
171                 })
172                 // setTimeout(() => {
173                 //     this.$message.info("发送成功")
174                 //     this.isSending = false;
175                 // }, 3000);
176
2f9d3c 177             }
I 178         },
ec97e0 179
2f9d3c 180         data() {
c14e32 181             let tempVisitorData = localStorage.getItem(this.VisitorDataKey);
cb7779 182             let vistorData = {
I 183                 nickName: "",
184                 eMail: "",
185                 homePage: "",
af029b 186                 isReceiveMail: false,
cb7779 187                 isSecretMsg: false,
I 188                 visitorContent: "",
189                 parentId: 0,
190                 replyId: 0,
191                 visitorId: 1,
192                 authCode: ''
193             };
194
195             if (tempVisitorData != null && tempVisitorData != undefined) {
196                 tempVisitorData = JSON.parse(tempVisitorData);
197                 vistorData.nickName = tempVisitorData.nickName;
198                 vistorData.eMail = tempVisitorData.eMail;
199                 vistorData.homePage = tempVisitorData.homePage;
200                 vistorData.isReceiveMail = tempVisitorData.isReceiveMail;
201                 vistorData.isSecretMsg = tempVisitorData.isSecretMsg;
202                 vistorData.visitorId = tempVisitorData.visitorId;
203                 vistorData.authCode = tempVisitorData.authCode;
204             }
205
2f9d3c 206             return {
c14e32 207                 VisitorDataKey: myConstant.VisitorDataKey,
ec97e0 208                 isSending: false,
I 209                 replyHolder: "",
2f9d3c 210                 msgInfo: {
I 211                     useName: "",
212                     userComment: "",
ec97e0 213                     parentId: 0,
I 214                     replyId: 0
2f9d3c 215                 },
I 216                 showReplyMsgInfo: false,
217                 labelCol: {
218                     span: 6,
219                     offset: 0,
220                 },
221                 wrapperCol: {
222                     span: 15,
223                     offset: 0
224                 },
cb7779 225                 form: vistorData,
ec97e0 226                 rules: {
I 227                     "nickName": [{
228                         message: '怎么称呼?',
229                     }, {
230                         trigger: 'blur',
231                         max: 20,
232                         message: '你的名字也太长了..'
233                     }],
234                     "eMail": [{
235                         trigger: 'blur',
236                         pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
e45377 237                         message: '你这邮箱有问题??'
ec97e0 238                     }, {
I 239                         trigger: 'blur',
240                         max: 50,
241                         message: '邮箱不要超过50字符..'
242                     }],
243                     "homePage": [{
244                         trigger: 'blur',
1cf6d9 245                         pattern: /^((https|http)?:\/\/)+/,
I 246                         message: '仅支持 https:// | http://'
ec97e0 247                     }, {
I 248                         trigger: 'blur',
249                         max: 50,
250                         message: '网址不要超过50字符..'
251                     }]
252                 },
2f9d3c 253             }
I 254         }
255     }
256 </script>
257
258 <style lang="less">
c14e32 259     .replyMsgInfo img {
I 260         margin-bottom: -0.125rem;
261         img min-height: 3.5rem;
262         height: 2em;
263     }
264
2f9d3c 265     .replyMsgInfo {
ec97e0 266         display: flex;
1169d0 267         flex-direction: column;
e33959 268         border-radius: 4px;
ec97e0 269         box-shadow: 0px 9px 10px 0 rgba(0, 0, 0, 0.24), 1px 3px 15px 0 rgba(0, 0, 0, 0.19);
e33959 270         padding: 20px 25px 20px;
ec97e0 271         margin-left: 15px;
I 272         margin-top: 10px;
2f9d3c 273     }
1169d0 274
I 275     .OwO {
276         padding: 0px 0px 20px 0px;
277     }
278
279     .OwO .OwO-logo {
280         height: 30px;
281     }
282
283     .OwO .quyin,
284     .OwO img {
285         margin-bottom: -0.125rem;
286         min-height: 3.5rem;
287         height: 1em;
288     }
2f9d3c 289 </style>