重构验证码模块

src/api/index.js

@@ -1,6 +1,7 @@
 import axios from 'axios'
 // import qs from 'qs'
 import {MessageBox, Message} from 'element-ui'
+import Verification from '@/components/verifition/verification.js'
 import router from '@/router/index'
 import store from '@/store/index'
 import signMd5Utils from '@/utils/sign'
@@ -88,6 +89,12 @@ api.interceptors.response.use(
                 })
             }
             return Promise.reject(res)
+        } else if (res.code === 416) {
+            console.log('validate')
+            Verification().then(value => {
+                console.log(value)
+            })
+            return Promise.reject(res)
         }
         return Promise.resolve(res)
     },

src/components/verifition/Verify.vue

@@ -95,7 +95,7 @@ export default {
     data() {
         return {
             // showBox:true,
-            clickShow: false,
+            clickShow: true,
             // 内部类型
             verifyType: undefined,
             // 所用组件类型

src/components/verifition/verification.js

@@ -0,0 +1,28 @@
+// 参考文章
+//https://www.jianshu.com/p/514122716e38
+//https://www.cnblogs.com/shandou/p/13812538.html
+import Vue from 'vue' // 引入 Vue 是因为要用到 Vue.extend() 这个方法
+import verification from './verification.vue' // 引入刚才的 toast 组件
+
+let verificationConstructor = Vue.extend(verification)
+let instance
+
+const Verification = function(options = {}) {
+    return new Promise((reslove, reject) => {
+        instance = new verificationConstructor({
+            data: options // 这里的 data 会传到 message.vue 组件中的 data 中，当然也可以写在 props 里
+        }) // 渲染组件
+        instance.callback = (action, val) => {
+            if (action === 'verifySuccess') {
+                reslove(val)
+            } else if (action === 'cancel') {
+                reject()
+            }
+        }
+        document.body.appendChild(instance.$mount().$el) // 挂载到 body 下
+        Vue.nextTick(() => {
+            instance.visible = true
+        })
+    })
+}
+export default Verification

src/components/verifition/verification.vue

@@ -0,0 +1,42 @@
+<template>
+    <Verify
+        ref="verify"
+        :captcha-type="'blockPuzzle'"
+        :img-size="{ width: '330px', height: '155px' }"
+        :mode="'pop'"
+        @success="verifySuccessHandle"
+    />
+</template>
+
+<script>
+import Verify from './Verify'
+
+export default {
+    name: 'verification',
+    components: {
+        Verify
+    },
+    created() {
+    },
+    methods: {
+        /**
+         * @description: 移出
+         */
+        close() {
+            this.visible = false
+            setTimeout(() => {
+                this.$el.parentNode.removeChild(this.$el)
+            }, 300)
+        },
+        verifySuccessHandle(params) {
+            let slideCode = params.captchaVerification
+            this.close()
+            this.callback('verifySuccess',slideCode)
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/account/login.vue

@@ -132,7 +132,6 @@
                 </el-tabs>
                 <el-tabs
                     v-if="formType==='reg'" v-model="regType" class="register-form"
-                    @tab-click="registerHandleClick"
                 >
                     <el-tab-pane label="手机号注册" name="regPhone">
                         <el-form ref="phoneRegForm" :model="accountForm" :rules="phoneRegRules" label-width="0px">
@@ -206,27 +205,16 @@
                 </el-tabs>
             </el-col>
         </el-row>
-        <Verify
-            ref="verify"
-            :mode="'pop'"
-            :captcha-type="'blockPuzzle'"
-            :img-size="{ width: '330px', height: '155px' }"
-            @success="verifySuccessHandle"
-        />
     </div>
 </template>
 <script>
 
 import {getCurrentDomain} from '@/utils'
 // 引入组件
-import Verify from '@/components/verifition/Verify'
 import constants from '@/utils/constants'
 
 export default {
     name: 'Login',
-    components: {
-        Verify
-    },
     data() {
         const validateAccount = (rule, value, callback) => {
             const reg1 = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
@@ -320,21 +308,6 @@ export default {
         clearInterval(this.wxQrcodeResultTimer)
     },
     methods: {
-        loginTypeHandleClick() {
-        },
-        registerHandleClick() {
-        },
-        verifySuccessHandle(params) {
-            let slideCode = params.captchaVerification
-            this.$api.request({
-                url: '/login/account',
-                method: 'post',
-                params: {slideCode},
-                data: this.accountForm
-            }).then(res => {
-                this.loginSuccessHandle(res.data)
-            })
-        },
         // 获取微信登录二维码
         getLoginWxQrCode() {
             this.wxQrCodeLoading = true
@@ -457,12 +430,12 @@ export default {
             })
         },
         loginHandle() {
-            this.$refs['accountLoginForm'].validate(valid => {
+            this.$api.request({
-                if (valid) {
+                url: '/login/account',
-                    this.$refs.verify.show()
+                method: 'post',
-                } else {
+                data: this.accountForm
-                    return false
+            }).then(res => {
-                }
+                this.loginSuccessHandle(res.data)
             })
         }
     }