图形验证码

src/views/exchange/symbols.vue

@@ -51,7 +51,7 @@
                             <td class="w-33 text-right">
                                 {{ coin.coin_name == 'fav' ? item.close : item.price}}
                             </td>
-                            <td class="w-33 text-right" v-if="item.increaseStr" :class="item.increaseStr.startsWith('-') ? 'red' : 'green'">
+                            <td class="w-33 text-right" :class="item.increaseStr.startsWith('-') ? 'red' : 'green'">
                                 {{ item.increaseStr }}
                             </td>
                         </tr>

src/views/forgotPwd/index.vue

@@ -1,8 +1,8 @@
 <template>
-<div class="" style="background-color: #121318;">
+<div class="container">
-    <div class="d-flex justify-content-center" style="align-items: center;height: 80vh !important;">
+    <div class="vh-100 d-flex justify-content-center">
-        <div class="form-access my-auto">
+        <div class="form-access my-auto bg-panel">
-            <form class="chk-body bg-panel">
+            <form class="chk-body">
                 <template v-if="step == 1">
 
                     <div class="text-center h3 mb-4">
@@ -29,6 +29,11 @@
                         <el-input v-model="user.password_confirmation" type="password" data-type="repassword" show-password required :placeholder="$t('login.confirm-password')" ></el-input>
                     </div>
 
+                    <!-- 图形验证码 -->
+                    <div class="input-group mb-3">
+                        <input type="text" id="gccode" v-model="user.gc_code" required :placeholder="$t('common.GraphicValidation')" class="form-control col-6" />
+                        <img class="col-6" :src="Graph_che" @click="gett_gc_code" />
+                    </div>
                     <div class="input-group mb-3" v-if="user.google_status">
                         <input type="text" v-model="codes.google_code" class="form-control" required pattern="\d{6}" data-message="code needs 6 number" :placeholder="$t('login.google-code')" />
                     </div>
@@ -104,9 +109,30 @@ export default {
                             this.$router.push("/sign-in");
                         }
                     })
-                }).catch(err => {})
+                }).catch(err => {
+                    this.gett_gc_code();
+                })
             }
-        }
+        },
+         // get gc code from api
+        gett_gc_code(){
+            Member.sendGCode().then( (res) =>{
+                this.gc_key = res.key
+                this.Graph_che = res.img
+                // console.log("gc",res);
+                this.$message({
+                    message: `${type} ${this.$t("login.sendOK")}`,
+                    type: "success",
+                    duration : 2000,
+                });
+            }).catch( err =>{
+                console.log(err)
+            });
+        },
+    },
+    mounted(){
+        // bind get gc code
+        this.gett_gc_code();
     }
 }
 </script>

src/views/setting/index.vue

@@ -6,11 +6,11 @@
             </div>
             <div class="row">
                 <!-- 登录密码 -->
-                <div class="col-md-12 d-flex">
+                <div class="col-md-6 d-flex">
-                    <div class="panel-box bg-panel shadow-sm mb-4 w-100 d-flex flex-column py-4">
+                    <div class="panel-box bg-panel shadow-sm mb-4 w-100 d-flex flex-column">
-                        <!-- <div class="heading">{{$t('setting.loginPassword')}}</div> -->
+                        <div class="heading">{{$t('setting.loginPassword')}}</div>
-                        <div class="tab-content flex-fill d-flex flex-column justify-content-between align-items-center">
+                        <div class="tab-content flex-fill d-flex flex-column justify-content-between align-items-start">
-                            <div class="py-2">{{$t('setting.loginPassword')}}</div>
+                            <div>{{$t('setting.loginPassword')}}</div>
                             <button class="btn btn-primary btn-sm" @click="loginShow=true">{{$t('setting.resLoginPassword')}}</button>
                         </div>
                     </div>

src/views/setting/login-pwd.vue

@@ -20,6 +20,16 @@
         :placeholder="$t('setting.pleaseConfirmPassword')"
       />
     </div>
+    <!-- Captcha -->
+    <div class="form-group">
+      <label>{{$t('common.GraphicValidation')}}</label>
+      <div class="col-12 row">
+        <input type="text" id="gccode" v-model="form.gc_code" required 
+          :placeholder="$t('common.GraphicValidation')" class="form-control col-6" />
+        <img class="col-6" :src="Graph_che" @click="gett_gc_code">
+      </div>
+    </div>
+
     <div class="form-group" v-if="detail.phone_status==1">
       <label>{{$t('setting.smsVer')}}</label>
       <div class="input-group mb-3">
@@ -70,7 +80,9 @@
 </template>
 
 <script>
+import Member from "@/api/member";
 import Setting from "../../api/setting";
+
 export default {
   props: ["detail"],
   data() {
@@ -80,11 +92,32 @@ export default {
         password_confirmation: "",
         sms_code: "",
         email_code: "",
+        gc_code: "",
         google_code: ""
-      }
+      },
+      Graph_che:'', // gc code image
+      gc_key:'', // tuxiangyanzheng key
     };
   },
+  mounted(){
+      // bind get gc code
+      this.gett_gc_code();
+  },
   methods: {
+        // get gc code from api
+      gett_gc_code(){
+        Member.sendGCode().then( (res) =>{
+            this.gc_key = res.key
+            this.Graph_che = res.img
+            this.$message({
+                message: `${type} ${this.$t("login.sendOK")}`,
+                type: "success",
+                duration : 2000,
+            });
+        }).catch( err =>{
+            //console.log(err)
+        });
+    },
     setPassword() {
       let data = this.form;
       if (utils.validate(".edit-password")) {

src/views/signIn/index.vue

@@ -1,6 +1,6 @@
 <template>
-    <div style="background-color: #121318;">
+    <div>
-        <div class="vh-100 d-flex justify-content-center" style="align-items: center;height: 80vh !important;">
+        <div class="vh-100 d-flex justify-content-center">
             <div class="form-access my-auto ">
                 <form class="login-body bg-panel">
                     <div class="text-center h3">

src/views/signUp/index.vue

@@ -577,6 +577,7 @@ export default {
         window.md5 = md5;
         // 安全性验证成功时的回调函数
         window.step2Register = this.step2;
+        
         // bind get gc code
         this.gett_gc_code();
     }

src/views/wallet/exchange-assets.vue

@@ -366,7 +366,30 @@
 
 
                       </div>
+                      <div class="form-group mt-2">
+                        <!-- 增加图形验证码 -->
+                        <label class="d-flex justify-content-between" for="" style="align-items: center;">
+                            <span>{{$t('common.GraphicValidation')}}</span>
+                            <img :src="Graph_che" @click="gett_gc_code">
+                        </label>
+                        <div class="input-group input-group-sm">
+                            <input type="text" id="gccode" v-model="withdraw.gc_code" required :placeholder="$t('common.GraphicValidation')" class="form-control" />
+                        </div>
+                      </div>
 
+                      <!-- 提币验证码 -->
+                      <div class="form-group mt-2">
+                        <label class="d-flex justify-content-between" for="" style="align-items: center;">
+                            <span>{{$t('login.email-code')}}</span>
+                            <span class="getCodeAA" @click="getEmailCode">
+                              <span v-if="!getEmailCodeLock">{{$t('common.getCode')}}</span>
+                              <span v-else>{{ daojishi }}</span>
+                            </span>
+                        </label>
+                        <div class="input-group input-group-sm">
+                            <input type="text" id="EmailCode" v-model="withdraw.emailcode" :placeholder="$t('common.enterEmailCode')" class="form-control" />
+                        </div>
+                      </div>
                     </form>
                   </div>
                   <div class="col-md-6">
@@ -397,6 +420,7 @@
 import InnerTransfer from "../components/inner-transfer.vue";
 import Wallet from "@/api/wallet";
 import Profile from "@/api/profile";
+import Member from "@/api/member";
 import ClipboardJS from "clipboard";
 import getCode from "./getCode";
 import vueQr from "vue-qr";
@@ -444,7 +468,9 @@ export default {
             addressType: 2, // 默认提币类型 1 为 omni； 2 为 erc20,
             code_type: 1,
             code: '',
-            password:''
+            password:'',
+            emailcode: '',
+            gc_code: ''// 图形验证码
         },
 
         withdrawFee: {
@@ -463,7 +489,11 @@ export default {
             number:"",
             amount:"",
             images:""
-        }
+        },
+        getEmailCodeLock: false,
+        JStime: 0,
+        tiemr: null,
+        Graph_che: ''
     };
   },
 
@@ -484,6 +514,11 @@ export default {
       }
     }
   },
+  computed : {
+    daojishi(){
+			return '('+this.JStime + 's' + ')';
+		}
+  },
   methods: {
     //确认提交贝宝支付
     paypalSbumit(){
@@ -609,6 +644,7 @@ export default {
         coin_name: item.coin_name
       })
         .then(data => {
+            this.gett_gc_code();
             this.withdrawFee = data;
         })
         .catch(err => { });
@@ -657,9 +693,71 @@ export default {
             this.userInfo = res
         });
     },
-    // 滚动到页面指定位置
+    // 獲取邮箱验证码
-    PageScrollTo(num){
+    getEmailCode(){
-      document.documentElement.scrollTop = num;
+      if(!this.withdraw.address){
+        this.$message({
+            message: this.$t('wallet.enterDrawAddress'),
+            // message: 'mlkdfdks',
+            // type: "warn",
+            duration : 2000,
+        });
+        return;
+      }
+      if(!this.withdraw.amount){
+        this.$message({
+            message: this.$t('wallet.enterDrawNum'),
+            // type: "warn",
+            duration : 2000,
+        });
+        return;
+      }
+      if(!this.withdraw.password){
+        this.$message({
+            message: this.$t('common.enterPwd'),
+            // type: "warn",
+            duration : 2000,
+        });
+        return;
+      }
+      if(this.getEmailCodeLock){return};
+			this.JStime = 300;
+			this.tiemr = setInterval(()=>{
+				if(this.JStime===0){
+					this.getEmailCodeLock = false;
+					clearInterval(this.tiemr);
+					return;
+				}
+				this.JStime--;
+			}, 1000)
+			this.getEmailCodeLock = true;
+      // let gdata = {bt:this.withdraw.addressType,baddr:this.withdraw.address,bnum:this.withdraw.amount}
+      let gdata = {bt:this.withdrawCoin,baddr:this.withdraw.address,bnum:this.withdraw.amount}
+      Member.getWdcode(gdata).then(res => {
+            console.log(res, 546576798)
+            this.$message({
+                message: `${this.$t("login.sendOK")}`,
+                type: "success",
+                duration : 2000,
+            });
+        }).catch(err=>{
+            this.gett_gc_code();
+        });
+    },
+    // 图形验证码
+    gett_gc_code(){
+      Member.sendGCode().then( (res) =>{
+          this.gc_key = res.key
+          this.Graph_che = res.img
+          console.log("gc",res);
+          this.$message({
+              message: `${type} ${this.$t("login.sendOK")}`,
+              type: "success",
+              duration : 2000,
+          });
+      }).catch( err =>{
+          console.log(err)
+      });
     }
 },
 
@@ -702,15 +800,6 @@ created() {
       // console.error('Action:', e.action);
       // console.error('Trigger:', e.trigger);
     });
-
-    // 首页直接进入充值
-    let isNeedScroll = this.$route.fullPath.split('?buy=')[1];
-    // console.log(this.$route.fullPath,121212121, isNeedScroll);
-    if(isNeedScroll){
-      setTimeout(() => {
-        this.PageScrollTo(580);
-      }, 2500);
-    }
   }
 };
 </script>
@@ -780,4 +869,9 @@ created() {
  .label{
      font-size: 16px;
  }
+ .getCodeAA{
+    border: 1px solid #444;
+    padding: 5px 10px;
+    border-radius: 30px;
+ }
 </style>