update email

src/router/modules/root.js

@@ -29,6 +29,11 @@ export default [
                 meta: {requireLogin: false},
                 component: () => import(/* webpackChunkName: 'root' */ '@/views/account/ForgetPwd')
             },
+            {
+                path: '/account/validate',
+                meta: {requireLogin: true},
+                component: () => import(/* webpackChunkName: 'root' */ '@/views/account/validate')
+            },
             {
                 path: '/enterprise',
                 meta: {requireLogin: false},

src/utils/plugins.js

@@ -4,7 +4,6 @@ import Vue from 'vue';
 const preventReClick= Vue.directive('preventReClick', {
     inserted (el, binding) {
         el.addEventListener('click', () => {
-            console.log('aaa')
             if (!el.disabled) {
                 el.disabled = true
                 setTimeout(() => {

src/views/account/member.vue

@@ -108,7 +108,18 @@
                             <span v-if="userInfo.wxName">
                                 {{ userInfo.wxName }}(已绑定)
                             </span>
-                            <el-link v-else type="primary" @click="redirectUrl(qqLoginAuthorizeUrl)">绑定</el-link>
+                            <el-link v-else type="primary" @click="bindWxHandle">绑定</el-link>
+                            <el-dialog title="微信扫描二维码绑定"
+                                       width="400px"
+                                       center
+                                       :visible.sync="bindWxDialogVisible"
+                            >
+                                <el-image
+                                    style="width: 150px; height: 150px; display: block; margin: 0 auto;"
+                                    :src="bindWxQrcode"
+                                    fit="fill"
+                                />
+                            </el-dialog>
                         </div>
                         <div class="account-icon-view">
                             <font-icon class="fa fa-qq icon" :style="{color:userInfo.qqName?'#078DF0':''}" />
@@ -216,7 +227,7 @@
                 width="450px"
                 center
             >
-                <el-form ref="form"
+                <el-form ref="updateEmailForm"
                          style="width: 80%;"
                          :model="userInfoForm" :rules="userInfoRules" label-width="80px"
                 >
@@ -225,7 +236,8 @@
                     </el-form-item>
                 </el-form>
                 <span slot="footer" class="dialog-footer">
-                    <el-button type="primary"
+                    <el-button v-prevent-re-click
+                               type="primary"
                                @click="()=>{this.pwdDialogVisible = false;this.sendUpdateEmail()}"
                     >发送验证邮件</el-button>
                 </span>
@@ -329,6 +341,8 @@ export default {
                     {required: true, trigger: 'blur', validator: validateRePass}
                 ]
             },
+            bindWxDialogVisible: false,
+            bindWxQrcode: false,
             editNameDialogVisible: false,
             pwdDialogVisible: false,
             phoneDialogVisible: false,
@@ -341,12 +355,17 @@ export default {
                 password: '',
                 repeatPassword: ''
             },
-            showUploadAvatar: false
+            showUploadAvatar: false,
+            bindWxTimer: null
         }
     },
     created() {
         this.queryUserInfo()
         this.getQQLoginAuthorizeUrl()
+        this.getBindWxQrCode()
+    },
+    destroyed() {
+        clearInterval(this.bindWxTimer)
     },
     methods: {
         queryUserInfo() {
@@ -364,6 +383,11 @@ export default {
         getUploadUrl() {
             return `${process.env.VUE_APP_API_ROOT}/user/file/upload`
         },
+        getBindWxQrCode() {
+            this.$api.get('/user/bind/wx/qrcode').then(res => {
+                this.bindWxQrcode = res.data
+            })
+        },
         updateUserPwdHandle() {
             this.$refs['updatePassWordForm'].validate(valid => {
                 if (valid) {
@@ -380,10 +404,13 @@ export default {
 
         },
         sendUpdateEmail() {
-            this.$api.get('/user/update-email/msg', {params: {email: this.userInfoForm.email}}).then(res => {
-                if (res.data) {
-                    this.msgSuccess('发送成功')
-
+            this.$refs['updateEmailForm'].validateField('email', err => {
+                if (!err) {
+                    this.$api.get('/user/update-email/msg', {params: {email: this.userInfoForm.email}}).then(res => {
+                        if (res.data) {
+                            this.msgSuccess('发送成功,请去您的邮箱查看')
+                        }
+                    })
                 }
             })
         },
@@ -433,6 +460,21 @@ export default {
                 }
             })
         },
+        bindWxHandle() {
+            this.bindWxDialogVisible = true
+            this.bindWxTimer = setInterval(() => {
+                this.$api.get('/user/current/detail').then(res => {
+                    if (res.data) {
+                        let {wxName} = res.data
+                        if (wxName) {
+                            this.msgSuccess('绑定成功')
+                            this.userInfo.wxName = wxName
+                            this.bindWxDialogVisible = false
+                        }
+                    }
+                })
+            }, 5 * 1000)
+        },
         cropUploadSuccess(res) {
             console.log(res)
             this.userInfoForm.avatar = res.data
@@ -526,7 +568,11 @@ export default {
     ul li:last-child {
         border-bottom: none;
     }
+    ul li:hover {
+        background-color: transparent;
+    }
     .is-active {
+        background-color: transparent;
         font-weight: bold;
     }
 }

src/views/account/validate.vue

@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <p v-if="bindEmailErr">
+            绑定邮箱失败，可能是超出绑定时间或者是该邮箱已被绑定等，请稍后重试！
+        </p>
+    </div>
+</template>
+
+<script>
+
+import {getQueryString} from '@/utils'
+
+export default {
+    name: 'Redirect',
+    data() {
+        return {
+            bindEmailErr: ''
+        }
+    },
+    created() {
+        // 绑定邮件验证
+        let type = getQueryString('type')
+        if (type == 'updateEmail') {
+            let code = this.$route.query.code
+            let email = this.$route.query.email
+            this.$api.post('/update/email', {email: email, key: code}).then(res => {
+                if (res.data) {
+                    this.bindEmailErr = true
+                }
+            })
+        }
+    },
+    methods: {}
+
+}
+</script>