忘记密码 发送短信增加滑块验证码

src/views/login/pwSec.vue

@@ -40,6 +40,13 @@
         <span class="dffgspan">{{validateBy === 'phone' ? userInfo.phone : userInfo.email}}</span>
       </div>
 
+      <Verify
+        @success="getVertifyCodeSuccess"
+        :captchaType="'blockPuzzle'"
+        :imgSize="{width:'400px',height:'200px'}"
+        ref="verify"
+      ></Verify>
+
       <div class="miloginbox_s01">
         <span class="dffgspan">验证码：</span>
         <div class="dofjojojijiiugfd">
@@ -62,6 +69,7 @@
   import {getFindPwAPI, msgCaptchaAPI, validateCaptchaAPI} from '@/API'
   import store from '@/store';
   import {Message} from 'element-ui'
+  import Verify from '@/components/verifition/Verify'
 
   export default {
     data() {
@@ -77,6 +85,9 @@
         blankNo:false,
       }
     },
+    components: {
+      Verify
+    },
     mounted() {
       this.getCaptcha()
       this.userInfo = store.getters.userInfo
@@ -126,43 +137,45 @@
           }
         })
       },
-      getVertifyCode() {
+      getVertifyCodeSuccess(params) {
+        this.blankNo=true;
+        const type = this.validateBy === 'phone' ? 1 : 2;
+
+        /*msgCaptchaAPI({account:this.userInfo.account,type:type}).then(res => {*/
+        msgCaptchaAPI({
+          type: type,
+          smsEnum: 1,
+          phone: this.userInfo.phone,
+          captchaVerification: params.captchaVerification,
+          email: this.userInfo.email
+        }).then(res => {
+          this.gettingCode = true;
+
+          this.countDown = 60
+          if (res.status) {
+            this.$successMsg('短信验证码发送成功');
+            //Message.success(`短信验证码发送成功`)
+            let timer = setInterval(() => {
+              if (this.countDown > 0) {
+                this.countDown--;
+                this.blankNo=true;
+              } else {
+                this.gettingCode = false;
+                this.blankNo=false;
+                clearInterval(timer)
+              }
 
+            }, 1000)
+          }else{
+            this.$errorMsg('短信验证码发送失败');
+            //Message.error(`短信验证码发送失败`)
+          }
+        })
+      },
+      getVertifyCode() {
         this.$validator.validate('ifGetVertify.*').then(res => {
-
           if (res) {
-            this.blankNo=true;
-            const type = this.validateBy === 'phone' ? 1 : 2;
-
-            /*msgCaptchaAPI({account:this.userInfo.account,type:type}).then(res => {*/
-            msgCaptchaAPI({
-              type: type,
-              smsEnum: 1,
-              phone: this.userInfo.phone,
-              email: this.userInfo.email
-            }).then(res => {
-              this.gettingCode = true;
-
-              this.countDown = 60
-              if (res.status) {
-                this.$successMsg('短信验证码发送成功');
-                //Message.success(`短信验证码发送成功`)
-                let timer = setInterval(() => {
-                  if (this.countDown > 0) {
-                    this.countDown--;
-                    this.blankNo=true;
-                  } else {
-                    this.gettingCode = false;
-                    this.blankNo=false;
-                    clearInterval(timer)
-                  }
-
-                }, 1000)
-              }else{
-                this.$errorMsg('短信验证码发送失败');
-                //Message.error(`短信验证码发送失败`)
-              }
-            })
+            this.$refs.verify.show();
           }
         })
       },