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