拖动验证码

src/store/modules/smt/index.js

 import Vue from 'vue'
 import {Toast} from 'vant';
 import {services as Services} from '../../../api/index'
-
+import TCaptcha from '../../../util/tcaptcha';
 var qs = require('qs');
-
 Vue.use(Toast);
 
 const state = {
-  loading: false
+  loading: false,
+  randstr:"",//验证码客户端验证回调的随机串,
+  ticket:"",//验证码客户端验证回调的票据,
+  imgShowIsSuccess:false,//是否拖动图片验证成功
+  tcstate:false//传票验证 是否 验证成功
 }
-
 const mutations = {
   index(state, payload) {
     state.index = payload.data;
@@ -40,21 +42,33 @@ const actions = {
   },
   customSmsVerify({commit}, payload) {
     state.loading = true;
+    state.tcstate=false;
+    state.imgShowIsSuccess=false;
     var params = {
       pf: 2,
-      verify: '',
-      mobile: payload.mobile
+      mobile: payload.mobile,
+      randstr:payload.randstr,//验证码客户端验证回调的随机串,
+      ticket:payload.ticket//验证码客户端验证回调的票据
     }
-    
     Services.customSmsVerify(qs.stringify(params)).then((res) => {
       let data = res.data;
       state.loading = false;
       if (data.err_code == 0) {
+        state.tcstate=true;
         Toast({
           message: data.err_msg,
           duration: 2000
         });
-      } else {
+      } else if(data.err_code==23019||data.err_code==11008||data.err_code==11011){
+        TCaptcha.imgShow(function(res){
+          state.randstr=res.randstr;
+          state.ticket=res.ticket;
+          state.imgShowIsSuccess=false;
+          if(res.ret==0){
+            state.imgShowIsSuccess=true;
+          }
+        })
+      }else {
         Toast({
           message: data.err_msg,
           duration: 3000

src/util/tcaptcha.js

+import  '../assets/js/TCaptcha';
+/**腾讯验证码**/
+export default {
+    imgShow:function(callback){
+        let randstr="";
+        let ticket="";
+        // 直接生成一个验证码对象
+        var captcha1 = new TencentCaptcha('2020469075', function(res) {
+            randstr=res.randstr;
+            ticket=res.ticket;
+            if(res.ret==0){
+                callback(res)
+            }
+        });
+        captcha1.show();
+    }
+}
\ No newline at end of file

src/views/smt/Index.vue

@@ -278,7 +278,11 @@
     },
     computed: {
       ...mapState({
-        loading: state => state.smt.loading
+          loading: state => state.smt.loading,
+          randstr: state => state.smt.randstr,
+          ticket: state => state.smt.ticket,
+          tcstate:state => state.smt.tcstate,
+          imgShowIsSuccess:state => state.smt.imgShowIsSuccess
       }),
       linkName(){
         return this.form.linkName;
@@ -307,6 +311,16 @@
             account: this.form.mobile
           })
         }
+      },
+      tcstate(val){
+            if(val){
+                this.timeNum();
+            }
+      },
+      imgShowIsSuccess(val){
+            if(val){
+                this.getCode();
+            }
       }
     },
     methods: {
@@ -332,7 +346,7 @@
         }
       },
       getCode() {
-        this.timeNum();
+
         this.$store.dispatch({
           type: 'customSmsVerify',
           mobile: this.form.mobile

src/views/supplier/Index.vue

@@ -246,6 +246,7 @@
   import {Swipe, SwipeItem, Loading} from 'vant';
   import Menu from '@/views/common/Menu.vue';
 
+
   Vue.use(Swipe).use(SwipeItem).use(Loading);
 
   export default {
@@ -280,7 +281,11 @@
     },
     computed: {
       ...mapState({
-        loading: state => state.smt.loading
+          loading: state => state.smt.loading,
+          randstr: state => state.smt.randstr,
+          ticket: state => state.smt.ticket,
+          tcstate:state => state.smt.tcstate,
+          imgShowIsSuccess:state => state.smt.imgShowIsSuccess
       }),
       comName() {
         return this.form.com_name;
@@ -340,6 +345,16 @@
             account: this.form.mobile
           })
         }
+      },
+      tcstate(val){
+          if(val){
+              this.timeNum();
+          }
+      },
+      imgShowIsSuccess(val){
+          if(val){
+              this.getCode();
+          }
       }
     },
     methods: {
@@ -407,10 +422,11 @@
 
       },
       getCode() {
-        this.timeNum();
         this.$store.dispatch({
           type: 'customSmsVerify',
-          mobile: this.form.mobile
+          mobile: this.form.mobile,
+          randstr:this.randstr,
+          ticket:this.ticket
         })
       },
       timeNum() {

view/index.html

@@ -27,7 +27,7 @@
     <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js" type="text/javascript" charset="utf-8"></script>
     <script src="//szh5static.ichunt.com/static/js/flexible.min.js" type="text/javascript" charset="utf-8"></script>
     <script src="//szh5static.ichunt.com/static/js/shence.min.js" type="text/javascript" charset="utf-8"></script>
-<link href="//szh5static.ichunt.com/0.js" rel="prefetch"><link href="//szh5static.ichunt.com/1.js" rel="prefetch"><link href="//szh5static.ichunt.com/2.js" rel="prefetch"><link href="//szh5static.ichunt.com/3.js" rel="prefetch"><link href="//szh5static.ichunt.com/4.js" rel="prefetch"><link href="//szh5static.ichunt.com/5.js" rel="prefetch"><link href="//szh5static.ichunt.com/6.js" rel="prefetch"><link href="//szh5static.ichunt.com/7.js" rel="prefetch"><link href="//szh5static.ichunt.com/app.js" rel="preload" as="script"></head>
+<link href="//szh5static.ichunt.com/0.js" rel="prefetch"><link href="//szh5static.ichunt.com/1.js" rel="prefetch"><link href="//szh5static.ichunt.com/2.js" rel="prefetch"><link href="//szh5static.ichunt.com/3.js" rel="prefetch"><link href="//szh5static.ichunt.com/4.js" rel="prefetch"><link href="//szh5static.ichunt.com/5.js" rel="prefetch"><link href="//szh5static.ichunt.com/6.js" rel="prefetch"><link href="//szh5static.ichunt.com/app.js" rel="preload" as="script"></head>
 <body class="boxsiz">
 <noscript>
     <strong>网站出现了一点小问题，正在紧急修复中.......</strong>