add注册验证码

src/api/member.js

@@ -25,6 +25,13 @@ class Member {
     static sendEmailCode(data) {
         return server.post(`/register/sendEmailCode`, data);
     }
+    /**
+     * 注册gc验证码
+     * @param data {email,token}
+     */
+    static sendGCode() {
+        return server.get(`/register/Graph_che`);
+    }
 
     /**
      * 获取国家区号

src/views/signUp/index.vue

@@ -52,6 +52,11 @@
                             <input :type="repwdType" id="repassword" v-model="user.repassword" required :placeholder="$t('login.confirm-password')" class="form-control" />
                             <label @click="showType('repwdType')"></label>
                         </div>
+                        <!-- 图形验证 -->
+                        <div class="form-group row password">
+                            <input :type="txtType" id="gccode" v-model="user.gc_code" required placeholder="GraphicalVerification" class="form-control col-6" />
+                            <img class="col-6" :src="Graph_che" @click="gett_gc_code">
+                        </div>
 
                         <div class="form-group row">
                             <input type="text" class="form-control" :disabled="$route.query.invite_code?true:false" v-model="user.parentCode" :placeholder="`${$t('login.referrer')}`" />
@@ -164,6 +169,7 @@ export default {
             current: 0,
             pwdType: "password",
             repwdType: "password",
+            txtType:"text",
 
             step: 1,
             registerType:1,
@@ -200,6 +206,8 @@ export default {
                 smsCode: null,
                 emailCode: null
             },
+            Graph_che:'', // gc code image
+            gc_key:'', // tuxiangyanzheng key
 
             codes: new Array(6)
         };
@@ -255,6 +263,13 @@ export default {
                     );
                     return
                 }
+                // check gc code has fill
+                if(this.Graph_che==''){
+                    this.$message({
+                        type:"warning",
+                        message:"input gc code pls.",
+                    })
+                }
                 // 其他补充的验证
                 if (!this.isAgree) {
                     // 没有同意条款
@@ -356,6 +371,18 @@ export default {
             // id标记的iframe返回dom对象 需要在通过contentWindow读取
             window.frames["my-modal-body"].$captcha.sliderCaptcha("reset");
         },
+                
+        // get gc code from api
+        gett_gc_code(){
+            console.log("dddddd")
+            Member.sendGCode().then( (res) =>{
+                this.gc_key = res.key
+                this.Graph_che = res.img
+                console.log("gc",res)
+            }).catch( err =>{
+                console.log(err)
+            });
+        },
 
         autofill($event) {
             let data = $event.clipboardData.getData("text/plain"),
@@ -541,6 +568,8 @@ export default {
         window.md5 = md5;
         // 安全性验证成功时的回调函数
         window.step2Register = this.step2;
+        // bind get gc code
+        this.gett_gc_code();
     }
 };
 </script>