| | |
| | | <template> |
| | | <div> |
| | | <div class="visitInfo"> |
| | | <a-form-model ref="myForm" layout="inline" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol"> |
| | | <a-form-model-item label="昵称"> |
| | | <a-input v-model="form.secret" placeholder="需填.."> |
| | | <a-form-model ref="myForm" layout="inline" :rules="rules" :model="form" :label-col="labelCol" |
| | | :wrapper-col="wrapperCol"> |
| | | <a-form-model-item label="昵称" prop="nickName"> |
| | | <a-input v-model="form.nickName" placeholder="需填.."> |
| | | </a-input> |
| | | </a-form-model-item> |
| | | <a-form-model-item label="邮箱"> |
| | | <a-input v-model="form.secret" placeholder="..仅后台可见"> |
| | | <a-form-model-item label="邮箱" prop="eMail"> |
| | | <a-input v-model="form.eMail" placeholder="..仅后台可见"> |
| | | </a-input> |
| | | </a-form-model-item> |
| | | <a-form-model-item label="主页"> |
| | | <a-input v-model="form.secret" placeholder="http:// or https://"> |
| | | <a-form-model-item label="主页" prop="homePage"> |
| | | <a-input v-model="form.homePage" placeholder="https:// or http://"> |
| | | </a-input> |
| | | </a-form-model-item> |
| | | |
| | | </a-form-model> |
| | | |
| | | </div> |
| | | <div class="replyMsgInfo" v-if="showReplyMsgInfo"> |
| | | <div>{{msgInfo.useName}}</div> |
| | | <div>{{msgInfo.userComment}}</div> |
| | | <div>{{msgInfo.useName}} </div> |
| | | <div style="padding: 0px 3px;"> : </div> |
| | | <div> |
| | | <span v-html="msgInfo.userComment.replace(/\n/g, '<br>')"></span> |
| | | </div> |
| | | </div> |
| | | <a-comment> |
| | | <div slot="content"> |
| | | <a-form-item> |
| | | <a-textarea :rows="4" :value="value" /> |
| | | <a-textarea :rows="4" v-model="form.visitorContent" :placeholder="replyHolder" /> |
| | | </a-form-item> |
| | | <div> |
| | | <a-button html-type="submit" type="primary" v-if="!showReplyMsgInfo"> |
| | | <a-button html-type="submit" type="primary" v-if="!showReplyMsgInfo" @click="send()" |
| | | :disabled="isSending"> |
| | | 高低整两句 |
| | | </a-button> |
| | | <a-button html-type="submit" type="primary" v-else> |
| | | <a-button html-type="submit" type="primary" v-else @click="send()" :disabled="isSending"> |
| | | 回复Ta |
| | | </a-button> |
| | | </div> |
| | | |
| | | <div> |
| | | <a-checkbox style="margin-left: 8px;" v-if="!showReplyMsgInfo"> |
| | | 悄悄回复<span class="myTip">(仅登录后可查看)</span> |
| | | <a-checkbox style="margin-left: 8px;" v-if="!showReplyMsgInfo" v-model="form.isSecretMsg"> |
| | | 悄悄说..<span class="myTip">(仅登录后可查看)</span> |
| | | </a-checkbox> |
| | | <a-checkbox> |
| | | <!-- <a-checkbox v-model="form.isReceiveMail"> |
| | | 接收邮件回复通知 |
| | | </a-checkbox> |
| | | </a-checkbox> --> |
| | | </div> |
| | | </div> |
| | | </a-comment> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | blogCommentAdd |
| | | } from '../../api/blogArticleComment.js' |
| | | |
| | | export default { |
| | | props: ["articleId"], |
| | | methods: { |
| | | getMsgInfo(param) { |
| | | this.msgInfo = param; |
| | | this.showReplyMsgInfo = true; |
| | | this.replyHolder = "@" + this.msgInfo.useName; |
| | | }, |
| | | send() { |
| | | console.log(this.msgInfo); |
| | | if (this.form.nickName === "") { |
| | | this.$message.info("怎么称呼..") |
| | | return |
| | | } |
| | | |
| | | if (this.form.visitorContent === "") { |
| | | this.$message.info("你可能需要说点什么..") |
| | | return |
| | | } |
| | | |
| | | var res; |
| | | this.$refs.myForm.validate(valid => { |
| | | if (valid) { |
| | | //this.$message.info("校验通过") |
| | | res = true; |
| | | } else { |
| | | this.$message.info("校验失败") |
| | | res = false; |
| | | } |
| | | }); |
| | | var articleId=this.$attrs.acticleId; |
| | | console.log(articleId); |
| | | |
| | | let commentType = (articleId == null || articleId == undefined) ? 1 : 2; |
| | | this.isSending = true; |
| | | |
| | | blogCommentAdd({ |
| | | parentId: this.msgInfo.parentId, |
| | | replyId: this.msgInfo.replyId, |
| | | "visitorId": "1", |
| | | "isReceiveMail": 0, |
| | | "articleId": articleId, |
| | | "commentType": commentType, |
| | | "authStatus": this.form.isSecretMsg ? 2 : 1, |
| | | // "isReceiveMail": this.form.isReceiveMail ? 1 : 0, |
| | | "visitorEmail": this.form.eMail, |
| | | "visitorHomePage": this.form.homePage, |
| | | "visitorNickName": this.form.nickName, |
| | | "commentContent": this.form.visitorContent, |
| | | }).then((res) => { |
| | | this.isSending = false; |
| | | if (res.code == 200) { |
| | | this.$message.info("已送达,审核通过后显示..") |
| | | } else { |
| | | this.$notification.error({ |
| | | message: '好像哪里不对劲..', |
| | | description: res.message, |
| | | placement: 'bottomRight' |
| | | }); |
| | | } |
| | | }).catch((error) => { |
| | | this.$message.error("请求失败") |
| | | this.isSending = false; |
| | | }) |
| | | // setTimeout(() => { |
| | | // this.$message.info("发送成功") |
| | | // this.isSending = false; |
| | | // }, 3000); |
| | | |
| | | } |
| | | }, |
| | | |
| | | data() { |
| | | return { |
| | | isSending: false, |
| | | replyHolder: "", |
| | | msgInfo: { |
| | | useName: "", |
| | | userComment: "", |
| | | parentId: 0, |
| | | replyId: 0 |
| | | }, |
| | | showReplyMsgInfo: false, |
| | | labelCol: { |
| | |
| | | offset: 0 |
| | | }, |
| | | form: { |
| | | secret: "" |
| | | nickName: "", |
| | | eMail: "", |
| | | homePage: "", |
| | | isReceiveMail: false, |
| | | isSecretMsg: false, |
| | | visitorContent: "", |
| | | parentId: 0, |
| | | replyId: 0 |
| | | }, |
| | | value: "", |
| | | rules: { |
| | | "nickName": [{ |
| | | message: '怎么称呼?', |
| | | }, { |
| | | trigger: 'blur', |
| | | max: 20, |
| | | message: '你的名字也太长了..' |
| | | }], |
| | | "eMail": [{ |
| | | trigger: 'blur', |
| | | pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, |
| | | message: '邮箱格式不正确' |
| | | }, { |
| | | trigger: 'blur', |
| | | max: 50, |
| | | message: '邮箱不要超过50字符..' |
| | | }], |
| | | "homePage": [{ |
| | | trigger: 'blur', |
| | | pattern: /^((https|http)?:\/\/)[^\s]+/, |
| | | message: '仅支持 https | http' |
| | | }, { |
| | | trigger: 'blur', |
| | | max: 50, |
| | | message: '网址不要超过50字符..' |
| | | }] |
| | | }, |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | <style lang="less"> |
| | | .replyMsgInfo { |
| | | padding: 10px 20px 0px; |
| | | display: flex; |
| | | border-radius: 4px; |
| | | box-shadow: 0px 9px 10px 0 rgba(0, 0, 0, 0.24), 1px 3px 15px 0 rgba(0, 0, 0, 0.19); |
| | | padding: 20px 25px 20px; |
| | | margin-left: 15px; |
| | | margin-top: 10px; |
| | | } |
| | | </style> |