新增绑定邮箱

src/components/emailDialog.vue

@@ -20,8 +20,8 @@
       </div>
       <div class="dialog-content">
         <div class="wallet-content">
-          <div class="dialog-header-title title-color">Sign in with Email</div>
+          <div class="dialog-header-title title-color">Link with Code</div>
-          <el-form :model="emailValidateForm" ref="emailValidateForm" :rules="rules">
+          <!-- <el-form :model="emailValidateForm" ref="emailValidateForm" :rules="rules">
             <el-form-item
               prop="email"
               :show-message="isShowMes"
@@ -52,27 +52,63 @@
                 </div>
             </el-form-item>
           </el-form>
-          <div class="check-validate" @click="resetForm('emailValidateForm')">Verify</div>
+          <div class="check-validate" @click="resetForm('emailValidateForm')">Verify</div> -->
+
+          <el-form :model="codeValidateForm" ref="codeValidateForm" :rules="codeRules">
+            <el-form-item prop="emailCode">
+                <div>
+                  <span class="table-title">Code</span>
+                  <el-input placeholder=""
+                    class="ipt_css"
+                    v-model="codeValidateForm.emailCode" />
+                </div>
+            </el-form-item>
+            <div class="code-btn" @click="checkEmailDialogVisible = true">How to Get Your Code</div>
+
+          </el-form>
+          <div class="check-validate" @click="codeResetForm('codeValidateForm')">Verify</div>
         </div>
       </div>
     </el-dialog>
-    <!-- <el-dialog class="dialog-wallet" :visible.sync="checkEmailDialogVisible" :modal="false" :before-close="checkHandleClose">
+    <el-dialog class="dialog-wallet dialog-code" :visible.sync="checkEmailDialogVisible" :modal="false" :before-close="checkHandleClose">
       <div class="dialog-header">
-        <div class="dialog-header-title"><i class="el-icon-arrow-left"></i> 邮箱登录</div>
+        <div class="dialog-header-title title-color"> How to Get Your Code</div>
         <div class="dialog-header-close" @click="checkHandleClose">
-          <img src="@/assets/common/CloseButton.png" alt />
+          <img src="@/assets/common/close.png" alt />
         </div>
       </div>
       <div class="dialog-content">
         <div class="wallet-content">
+          <div class="get-code">
+            <div class="get-code-left">
+              <div class="get-code-left-top">
+                Login to the game and find the 'Code' icon.
+              </div>
+              <div class="get-code-left-btm">
+                <div>
+                  <img src="@/assets/common/step one.png" alt="">
+                </div>
+              </div>
+            </div>
+            <div class="get-code-right">
+              <div class="get-code-left-top">
+                Copy your Code
+              </div>
+              <div class="get-code-left-btm">
+                <div>
+                  <img src="@/assets/common/step tow.png" alt="">
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
-    </el-dialog> -->
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { apiSendCode, apiVerifyEmail } from '@/utils/webapi.js'
+import { apiSendCode, apiVerifyEmail, apiVerifyClient } from '@/utils/webapi.js'
 
 export default {
   props: {
@@ -80,7 +116,23 @@ export default {
   },
 
   data() {
-    let codeVerifiers = /^\d{6}$/;
+    let emailCodeVerifiers = /^\d{6}$/;
+    let emailValidateCode = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("Please enter the verification code we sent to your email."));
+      } else {
+        if (emailCodeVerifiers.test(value)) {
+          callback();
+        } else {
+          callback(
+            new Error(
+              "Verification code is incorrect. Please verify and try again."
+            )
+          );
+        }
+      }
+    };
+    let codeVerifiers = /^[23456789abcdefghjkmnpqrstuvwxy]{8}$/;
     let validateCode = (rule, value, callback) => {
       if (value === "") {
         callback(new Error("Please enter the verification code we sent to your email."));
@@ -127,6 +179,17 @@ export default {
             trigger: ['blur', 'change'],
           },
         ],
+        emailCode: [
+          {
+            validator: emailValidateCode,
+            trigger: ['blur', 'change'],
+          },
+        ],
+      },
+      codeValidateForm: {
+        emailCode: ''
+      },
+      codeRules: {
         emailCode: [
           {
             validator: validateCode,
@@ -190,6 +253,30 @@ export default {
       })
     },
 
+    // 客户端验证
+    codeResetForm(codeValidateForm) {
+      this.$refs[codeValidateForm].validate(async (valid) => {
+        if(valid) {
+          let { errcode, errmsg, data } = await apiVerifyClient(this.codeValidateForm.emailCode)
+          if(!errcode) {
+            this.$emit('bindEmail')
+          } else if(errcode == 11) {
+            this.$showErr(errmsg)
+          } else if(errcode == 12) {
+            this.$showErr(errmsg)
+          } else if(errcode == 13) {
+            this.$showErr(errmsg)
+          } else if(errcode == 14) {
+            this.$showErr(errmsg)
+          } else if(errcode == 16) {
+            this.$showErr(errmsg)
+          }
+        } else {
+          return
+        }
+      })
+    },
+
     // 邮箱验证
     isValidateEmail(email) {
       const reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
@@ -262,9 +349,6 @@ div {
             color: #994FFD;
           }
           .dialog-header-close {
-            // position: absolute;
-            // top: -8%;
-            // right: -4%;
             width: 35px;
             height: 35px;
             cursor: pointer;
@@ -357,18 +441,8 @@ div {
                         color: #fff;
                       }
                     }
-                    .code-btn {
-                      position: absolute;
-                      bottom: 0;
-                      right: 0;
-                      min-width: 80px;
-                      background: #9950fd;
-                      padding: 0 10px;
-                      text-align: center;
-                      border-radius: 10px;
-                      cursor: pointer;
-                    }
                   }
+                  
                   .email-no {
                     position: absolute;
                     bottom: 0;
@@ -378,6 +452,38 @@ div {
                   }
                 }
               }
+              .code-btn {
+                width: 140px;
+                color: #9950fd;
+                text-align: left;
+                text-decoration: underline;
+                cursor: pointer;
+              }
+            }
+            .get-code {
+              display: flex;
+              justify-content: space-between;
+              margin-top: 30px;
+              .get-code-left,
+              .get-code-right {
+                width: 48%;
+                .get-code-left-top {
+                  font-size: 18px;
+                  padding-bottom: 10px;
+                  border-bottom: 2px solid #413c4c;
+                }
+                .get-code-left-btm {
+                  width: 100%;
+                  margin: 30px 0;
+                  div {
+                    width: 100%;
+                    img {
+                      width: 100%;
+                      height: 100%;
+                    }
+                  }
+                }
+              }
             }
             .check-validate {
               width: 120px;
@@ -386,6 +492,7 @@ div {
               background: #ffc35b;
               color: #000;
               margin: 20px auto;
+              margin-top: 50px;
               border-radius: 20px;
               cursor: pointer;
             }
@@ -400,5 +507,8 @@ div {
       }
     }
   }
+  .dialog-code {
+    width: 100% !important;
+  }
 }
 </style>

src/components/errorDialog/index.js

@@ -82,6 +82,10 @@ let errmsg = err
     errmsg = `You don't have enough Spins.`
   } else if(errmsg.indexOf('Email address is required. Please enter your email to proceed.') > -1) {
     errmsg = `Email address is required. Please enter your email to proceed.`
+  } else if(errmsg.indexOf('already bind game account') > -1) {
+    errmsg = `This Account is Already Connected to Another User. Try Using a Different Account.`
+  } else if(errmsg.indexOf('Email already binded to another account') > -1) {
+    errmsg = `This Account is Already Connected to Another User. Try Using a Different Account.`
   } else if(errmsg.indexOf('code expired') > -1) {
     errmsg = `Your verification code has expired. Please request a new code.`
   } else if(errmsg.indexOf('code error') > -1) {

src/main.js

@@ -18,6 +18,7 @@ Vue.use(iErrorMsg)
 
 import {Message} from 'element-ui'
 Vue.prototype.$message = Message
+Vue.prototype.$moment = moment
 
 Vue.filter('formatDate', function (value) {
   return moment(value).format('YYYY-MM-DD HH:mm:ss')

src/utils/webapi.js

@@ -334,3 +334,9 @@ export const apiVerifyEmail = async (email, code) => {
   const url = `${API_BASE}/api/user/verify_email`;
   return httpPost(url, {email, code})
 }
+
+// 发送客户端验证码
+export const apiVerifyClient = async (code) => {
+  const url = `${API_BASE}/api/user/verify_client`;
+  return httpPost(url, {code})
+}

src/views/home/gameCheckBtn.vue

@@ -52,10 +52,8 @@ bonusCount: 2, // 已助力次数
   methods: {
     async checkBtn(){
       this.isShow = false
-      let googleId = this.$store.state.user.userData?.googleId || undefined
+      let usesEmailId = this.$store.state.user.userData?.gameId || undefined
-      let usesEmailId = this.$store.state.user.userData?.emailId || undefined
+      if(usesEmailId) {
-      console.log(googleId, usesEmailId)
-      if(usesEmailId ||  googleId) {
         try {
           let { errcode, errmsg, data } = await apiGameClaim(this.itemData.id);
           if (!errcode) {

src/views/home/gameQuest.vue

@@ -53,7 +53,7 @@
                 </div>
                 <div v-if="token != null" class="btn">
                   <div class="is-btn">
-                    <div v-if="!usesGoogleId && !usesEmailId" @click="toBindGoogle" class="check-no">
+                    <div v-if="!usesEmailId" @click="toBindGoogle" class="check-no">
                       <span>Verify</span>
                     </div>
                     <div v-else-if="item.ticket == 0 && item.task == 'NftHolderCheck'" class="Time-no">
@@ -127,7 +127,7 @@
                     <div v-if="getTime" class="Time-no">
                       <span>Verify</span>
                     </div>
-                    <div v-else-if="getTime && !usesGoogleId && !usesEmailId" @click="toBindGoogle" class="check-no">
+                    <div v-else-if="getTime && !usesEmailId" @click="toBindGoogle" class="check-no">
                       <span>Verify</span>
                     </div>
                     <div v-else>
@@ -175,11 +175,8 @@ export default {
     }
   },
   computed: {
-    usesGoogleId() {
-      return this.$store.state.user.userData?.googleId || undefined;
-    },
     usesEmailId() {
-      return this.$store.state.user.userData?.emailId || undefined;
+      return this.$store.state.user.userData?.gameId || undefined;
     },
     getTime() {
       var now = new Date().getTime();

src/views/home/index.vue

@@ -127,14 +127,11 @@
               Connect Game Account
             </div>
             <!-- @click="isLogin('bind')" -->
-            <div v-if="usesGoogleMail || usesEmail" class="google-mail">
+            <div v-if="usesEmail" class="google-mail">
               <!-- <el-tooltip placement="top" :content="usesGoogleMail"> -->
                 <div v-if="usesEmail">
                   {{ usesEmail.slice(0,6) }}***{{usesEmail.substr(-6)}}
                 </div>
-                <div v-if="usesGoogleMail">
-                  {{ usesGoogleMail.slice(0,6) }}***{{usesGoogleMail.substr(-6)}}
-                </div>
               <!-- </el-tooltip> -->
             </div>
             <div v-else class="bind-btn" @click="isLogin('bind')">Connect</div>
@@ -1178,14 +1175,11 @@ export default {
     usesTwitterId() {
       return this.$store.state.user.userData?.twitterId || undefined;
     },
-    usesGoogleMail() {
-      return this.$store.state.user.userData?.googleMail || undefined;
-    },
     usesEmailId() {
-      return this.$store.state.user.userData?.emailId || undefined;
+      return this.$store.state.user.userData?.gameId || undefined;
     },
     usesEmail() {
-      return this.$store.state.user.userData?.email || undefined;
+      return this.$store.state.user.userData?.gameMail || undefined;
     }
   },
   created() {
@@ -1688,7 +1682,8 @@ export default {
       this.isLoading = true;
       let storeageKey;
       try {
-        let today = formatDate(new Date());
+        // const moment = this.$moment().format()
+        let today = formatDate(moment);
         storeageKey = await sendToChain("check", address, today);
       } catch (err) {
         this.isLoading = false;