添加设置功能

layouts/common.styl

@@ -562,3 +562,6 @@ blockquote
 .articelContent
   a
     color #de8787
+
+.toasted-container
+  z-index 9999999 !important

pages/post/_id.vue

@@ -160,22 +160,27 @@
       | 下一篇 {{ articels.next ? "(" + decodeTitle(articels.next.post_name) + ")" : "" }}  
       Icon(:icon='["fas", "chevron-right"]')
   modal.modal-setting(name='setting')
-    .vue-modal-content
+    .vue-modal-content(v-loading='form.loading')
+      p.vue-modal-title
+        | 评论回复提醒
       Form(ref='form', :model='form', label-width='130px')
         FormItem(label='手机号')
-          Input(v-model='form.phone')
+          Input(v-model='form.phone', size='small')
         FormItem(label='发送提醒到手机')
-          Switch(v-model='form.sendPhone')
+          VueSwitch(v-model='form.sendPhone')
         FormItem(label='邮箱')
-          Input(v-model='form.phone')
+          Input(v-model='form.email', size='small')
         FormItem(label='发送提醒到邮箱')
-          Switch(v-model='form.sendEmail')
+          VueSwitch(v-model='form.sendEmail')
     .vue-modal-buttons
+      button.vue-modal-button(type='button', @click.stop='hideSettings')
+        | 关闭
       button.vue-modal-button(
         type='button',
-        @click.stop='$modal.hide("setting")'
+        @click.stop='saveSettings',
+        style='background-color: #409eff;color: #fff;'
       )
-        | 关闭
+        | 保存
 </template>
 
 <script>
@@ -185,7 +190,7 @@ import { Form, FormItem, Input, Switch } from 'element-ui'
 
 export default {
   components: {
-    Form, FormItem, Input, Switch
+    Form, FormItem, Input, VueSwitch: Switch
   },
   async asyncData ({ route, app, $axios, redirect }) {
     let draftStr = ''
@@ -276,6 +281,7 @@ export default {
         }
       ],
       form: {
+        loading: true,
         phone: '',
         sendPhone: true,
         email: '',
@@ -291,6 +297,7 @@ export default {
         try {
           this.visitorInfo = JSON.parse(window.localStorage.visitorInfo)
           this.getCommentWithVisitorInfo(this.postID)
+          this.checkSettings()
         } catch (_) { }
       }
 
@@ -305,6 +312,8 @@ export default {
         this.editorReplyObj.vditor.options.upload.headers = {
           Authorization: 'Bearer ' + this.visitorToken
         }
+
+        this.checkSettings()
       }
 
       this.$nextTick(() => {
@@ -827,7 +836,87 @@ export default {
       }
     },
     commentSetting () {
+      this.form.loading = true
       this.$modal.show('setting')
+      this.getSettings()
+    },
+    hideSettings () {
+      this.$modal.hide('setting')
+      this.form.loading = true
+      if (!localStorage.checkSetting) {
+        localStorage.checkSetting = new Date().getTime().toString()
+      }
+    },
+    async checkSettings () {
+      if (!localStorage.checkSetting) {
+        // 获取设置信息
+        const tmp = await this.$axios({
+          method: 'get',
+          url: process.env.baseURL + '/user/settings',
+          headers: {
+            Authorization: 'Bearer ' + this.visitorToken
+          }
+        })
+
+        if (tmp.status === 200 && tmp.data.status === 1 && tmp.data.result && tmp.data.result.sendPhone && tmp.data.result.sendEmail && (!tmp.data.result.phone || !tmp.data.result.email)) {
+          this.commentSetting()
+          this.$toasted.show('温馨提示：设置手机号或邮箱，可及时收到回复提醒', {
+            position: 'top-center',
+            duration: 5000
+          })
+        }
+      }
+    },
+    async getSettings () {
+      // 获取设置信息
+      const tmp = await this.$axios({
+        method: 'get',
+        url: process.env.baseURL + '/user/settings',
+        headers: {
+          Authorization: 'Bearer ' + this.visitorToken
+        }
+      })
+
+      if (tmp.status === 200 && tmp.data.status === 1 && tmp.data.result) {
+        this.form.phone = tmp.data.result.phone
+        this.form.sendPhone = tmp.data.result.sendPhone
+        this.form.email = tmp.data.result.email
+        this.form.sendEmail = tmp.data.result.sendEmail
+        this.form.loading = false
+      } else {
+        this.$toasted.show('获取设置内容失败，请重试', {
+          position: 'top-center',
+          duration: 5000
+        })
+      }
+    },
+    async saveSettings () {
+      // 获取设置信息
+      const tmp = await this.$axios({
+        method: 'post',
+        url: process.env.baseURL + '/user/settings',
+        headers: {
+          Authorization: 'Bearer ' + this.visitorToken
+        },
+        data: this.form
+      })
+
+      if (tmp.status === 200 && tmp.data.status === 1) {
+        this.hideSettings()
+        this.$toasted.show('保存成功', {
+          position: 'top-center',
+          duration: 5000
+        })
+      } else {
+        this.$toasted.show('保存设置失败，请重试', {
+          position: 'top-center',
+          duration: 5000
+        })
+      }
+
+      if (!localStorage.checkSetting) {
+        localStorage.checkSetting = new Date().getTime().toString()
+      }
     }
   },
   head () {
@@ -1302,9 +1391,18 @@ $logo-width = 64px
     z-index 99999
 
   .vue-modal-content
-    padding 10px
+    padding 10px 20px 10px 10px
     box-sizing border-box
 
+    .vue-modal-title
+      text-align center
+      margin-top 5px
+      margin-bottom 10px
+      font-weight 500
+
+    .el-form-item
+      margin-bottom 10px
+
   .vue-modal-buttons
     display flex
     flex 0 1 auto

plugins/vue.js

@@ -30,6 +30,7 @@ import {
 } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import hljs from 'highlight.js'
+import { Loading } from 'element-ui'
 import Swiper from '../components/Swiper'
 import Slide from '../components/Slide'
 
@@ -61,6 +62,7 @@ library.add(
 Vue.component('Icon', FontAwesomeIcon)
 Vue.component('Swiper', Vue.extend(Swiper))
 Vue.component('Slide', Vue.extend(Slide))
+Vue.use(Loading.directive)
 
 export default function (ctx, inject) {
   inject('getHatValue', (count, hotConst = 1000) => {