添加腾讯云验证码

index.html

@@ -15,5 +15,6 @@
     <!-- built files will be auto injected -->
     <script type="text/javascript" src="static/jquery-3.2.1.min.js"></script>
     <script src="static/jquery.cookie.js"></script>
+    <!-- <script src="https://captcha.guard.qcloud.com/template/TCapIframeApi.js?appid=1252020920&clientype=2&lang=2052&asig=GFgCKc0p2_4mdjtvxjSUf6DVk6jDgTQ5a1lC_YB11R3jDl2lbeS-Tdth751rIL9cgtGtukJAJLYx4_Z1g3eNqgLOY1QpT_5EBS6vqIS6ZeQ9VTJzWZepgIGjRIn4T_zTKTBoDVn2P-Who12Xdc0aog**"></script> -->
   </body>
 </html>

src/views/home/login.vue

@@ -211,13 +211,17 @@
         <el-button type="primary" @click="readSure()">我已阅读</el-button>
       </span>
     </el-dialog>
+    <!-- 验证码 -->
+    <div class="msgBox" v-if="fuckfuck">
+      <div id="TCaptcha" v-if="fuckfuck" style="width:300px;height:40px;"></div>
+    </div>
   </div>
 </template>
-
 <script>
 import {sublogion,sendEmail,sendCode,ajax,subloginup, getUserData,getcookie} from "../../assets/js/common.js"
 import bus from "../../assets/js/bus.js"
 import publicWord from "./public.vue"
+
 export default{
   data(){
     return{
@@ -257,6 +261,10 @@ export default{
       isRegisted:false,//邮箱是否已被注册
       isError:false,   //手机号对不对
       messageCodeisError:false, //找回密码短信验证码错误
+      ticketNum:'',
+      businessId:'',
+      dataSrc:'',
+      fuckfuck:false,
     }
   },
   components:{
@@ -331,6 +339,47 @@ export default{
     })   
   },
   methods:{
+    //添加script标签
+    addscript(){
+      let dom = document.createElement('script');
+      console.log(this.dataSrc)
+      dom.src = this.dataSrc;
+      document.getElementsByTagName('body')[0].appendChild(dom);
+      this.fuckfuck = true;
+      setTimeout(()=>{
+        let capOption={callback :this.cbfn};
+        capInit(document.getElementById("TCaptcha"), capOption);
+      },1000)
+    },
+    //删除script标签
+    // deletescript(){
+    //   let list = document.getElementsByTagName('script');
+    //   for(let i=0; i<list.length; i++){
+    //     if(list[i].src.indexOf(this.dataSrc)>-1){
+    //       document.getElementsByTagName('body')[0].removeChild(list[i]);
+    //     }
+    //   }
+    // },
+    //验证码
+    cbfn(retJson){
+      if(retJson.ret==0){
+        // 用户验证成功,需要校验签名
+        this.$notify({
+          title: '成功',
+          message: '验证通过',
+          type: 'success',
+          duration:'2000'
+        })
+        this.ticketNum = retJson.ticket;
+        this.pwdSend();
+        this.fuckfuck=false;
+        // 销毁上一个验证
+        capDestroy();
+      }else{       
+        //用户关闭验证码页面，没有验证
+        // alert(3)
+      }
+    },
     toForgetPassWord(){
       if(this.operateType=='mobile'){
         this.loginTab = 2;
@@ -339,7 +388,6 @@ export default{
         this.loginTab = 2;
         this.operateType='email'
       }
-      
     },
     //正则表达式验证手机号码是否正确
     checkPhoneNumber(){
@@ -431,6 +479,10 @@ export default{
       let param={
         os:'web',
         platCode:'04031632e48cd96e',
+        ticket:'',
+        businessId:'',
+        ticket:this.ticketNum,
+        businessId:this.businessId
       };
       if(this.operateType=='email'){
         param.email=this.setParam.username;
@@ -445,6 +497,23 @@ export default{
       ajax(this,this.extendApi.resetEmailPassword,param,(data)=>{
         this.codeLoad=false;
         if(data.code==200){
+          this.$notify({
+            title: '成功',
+            message: '短信发送成功',
+            type: 'success',
+            duration:'1500'
+          });
+          // 清空ticked
+          this.ticketNum='';
+          // 判断是否触发腾讯验证码
+          if(data.data.isShow ==1){
+            this.dataSrc = data.data.data.jsUrl;
+            //创建dom script标签
+            this.addscript();
+            this.businessId = data.data.data.businessId;
+          }else{
+          }
+          // 计时器
           this.codestate=1;
           this.secondNum=60;
           clearInterval(this.reltime);
@@ -456,7 +525,7 @@ export default{
               this.secondNum=60;
             }
           }, 1000);
-        }     
+        }
       },'post');
     },
     readSure(){
@@ -932,5 +1001,21 @@ export default{
       }
     }
   }
+  .msgBox{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background:rgba(0,0,0,0.2);
+    z-index: 100000;
+    text-align: center;
+    #TCaptcha{
+      position: absolute;
+      left: 50%;
+      margin : -20px 0 0 -150px;
+      top: 50%;
+    }
+  }
 }
 </style>