新增绑定邮箱

src/components/emailDialog.vue

@@ -0,0 +1,404 @@
+<template>
+  <div class>
+    <el-dialog class="dialog-wallet" :visible.sync="emailDialogVisible" :modal="false" :before-close="handleClose">
+      <div class="dialog-header">
+        <div class="dialog-header-title">Connect Game Account</div>
+        <div class="dialog-header-close" @click="handleClose">
+          <img src="@/assets/common/close.png" alt />
+        </div>
+      </div>
+      <div class="dialog-content">
+        <div class="wallet-content">
+          <li @click="getLinkGoogle()">
+            <div>
+              <img src="@/assets/common/Google-icon.png" alt />
+              <span>Sign in with Google</span>
+            </div>
+          </li>
+        </div>
+        <div class="line"></div>
+      </div>
+      <div class="dialog-content">
+        <div class="wallet-content">
+          <div class="dialog-header-title title-color">Sign in with Email</div>
+          <el-form :model="emailValidateForm" ref="emailValidateForm" :rules="rules">
+            <el-form-item
+              prop="email"
+              :show-message="isShowMes"
+            >
+              <div>
+                <span class="table-title">Email address</span>
+                <el-input
+                  @focus="checkInput"
+                  @blur="blurInput"
+                  @input="checkInput"
+                  type="text"
+                  placeholder="Email address"
+                  class="ipt_css"
+                  v-model="emailValidateForm.email"
+                />
+              </div>
+              <div v-if="isEmail == '1'" class="email-no">Email address is required. Please enter your email to proceed.</div>
+              <div v-if="isEmail == '2'" class="email-no">Please check the email format and try again.</div>
+            </el-form-item>
+            <el-form-item prop="emailCode">
+                <div>
+                  <span class="table-title">Verification code</span>
+                  <el-input placeholder=""
+                    class="ipt_css"
+                    v-model="emailValidateForm.emailCode" />
+                    <div v-if="timeLeft <= 0" class="code-btn" @click="checkCode(emailValidateForm.email)">Send Code</div>
+                    <div v-else class="code-btn">{{ timeLeft }}</div>
+                </div>
+            </el-form-item>
+          </el-form>
+          <div class="check-validate" @click="resetForm('emailValidateForm')">Verify</div>
+        </div>
+      </div>
+    </el-dialog>
+    <!-- <el-dialog class="dialog-wallet" :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-close" @click="checkHandleClose">
+          <img src="@/assets/common/CloseButton.png" alt />
+        </div>
+      </div>
+      <div class="dialog-content">
+        <div class="wallet-content">
+        </div>
+      </div>
+    </el-dialog> -->
+  </div>
+</template>
+
+<script>
+import { apiSendCode, apiVerifyEmail } from '@/utils/webapi.js'
+
+export default {
+  props: {
+    emailDialogVisible: Boolean,
+  },
+
+  data() {
+    let codeVerifiers = /^\d{6}$/;
+    let validateCode = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("Please enter the verification code we sent to your email."));
+      } else {
+        if (codeVerifiers.test(value)) {
+          callback();
+        } else {
+          callback(
+            new Error(
+              "Verification code is incorrect. Please verify and try again."
+            )
+          );
+        }
+      }
+    };
+    return {
+      isWalletList: [
+        {
+          name: "MetaMask",
+          value: "google",
+          imgUrl: require("@/assets/common/Google-icon.png")
+        },
+        {
+          name: "OKXwallet",
+          value: "email",
+          imgUrl: require("@/assets/home/icon_OKXwallet.png")
+        }
+      ],
+      checkEmailDialogVisible: false,
+      emailValidateForm: {
+        email: '',
+        emailCode: ''
+      },
+      rules: {
+        email: [
+          {
+            required: true,
+            message: 'Email address is required. Please enter your email to proceed.',
+            trigger: 'blur',
+          },
+          {
+            type: 'email',
+            message: 'Please check the email format and try again.',
+            trigger: ['blur', 'change'],
+          },
+        ],
+        emailCode: [
+          {
+            validator: validateCode,
+            trigger: ['blur', 'change'],
+          },
+        ],
+      },
+      isEmail: '0',
+      timeLeft: 0,
+      time: 60,
+      isShowMes: true,
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    // 绑定游戏账号
+    async getLinkGoogle() {    
+      this.$emit('googleLogin')
+    },
+
+    // 获取验证码
+    async checkCode(email) {
+      if(email) {
+        if(this.isValidateEmail(email)) {
+          let { errcode, errmsg, data } = await apiSendCode(email)
+          if(!errcode) {
+            this.beginCountdown()
+          }
+        }
+      } else {
+        this.isEmail = '1'
+        this.isShowMes = false
+      }
+      
+    },
+
+    checkInput() {
+      this.isEmail = '0'
+      this.isShowMes = true
+    },
+    blurInput() {
+      this.isEmail = '0'
+    },
+
+    // 验证邮箱
+    resetForm(emailValidateForm) {
+      this.$refs[emailValidateForm].validate(async (valid) => {
+        if(valid) {
+          let { errcode, errmsg, data } = await apiVerifyEmail(this.emailValidateForm.email, this.emailValidateForm.emailCode)
+          if(!errcode) {
+            this.$emit('bindEmail')
+          } else if(errcode == 14) {
+            this.$showErr(errmsg)
+          } else if(errcode == 16) {
+            this.$showErr(errmsg)
+          }
+        } else {
+          return
+        }
+      })
+    },
+
+    // 邮箱验证
+    isValidateEmail(email) {
+      const reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
+      return reg.test(email)
+    },
+
+    // 验证码验证
+    isValiedCode(code){
+      return /^\d{6}$/.test(code)
+    },
+
+    // 倒计时
+    beginCountdown() {
+      this.timeLeft = parseInt(this.time);
+      let timer = setInterval(() => {
+        this.timeLeft--;
+        if (this.timeLeft <= 0) {
+          // this.$showErr("Please try again");
+          this.time = 60
+          clearInterval(timer);
+        }
+      }, 1000);
+    },
+
+    // 关闭弹窗
+    handleClose() {
+      this.$emit("closeDialog");
+    },
+
+    checkHandleClose() {
+      this.checkEmailDialogVisible = false
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+div {
+  .dialog-wallet {
+    width: 50% !important;
+    margin: auto;
+    ::v-deep .el-dialog {
+      // border: 1px solid #924df2;
+      background: #2d2738;
+      border-radius: 30px;
+      .el-dialog__header {
+        // display: none;
+        padding: 0;
+        padding-top: 20px;
+        button {
+          display: none;
+        }
+      }
+      .el-dialog__body {
+        position: relative;
+        padding: 0 30px;
+        color: #fff;
+        .dialog-header {
+          margin-top: 20px;
+          display: flex;
+          justify-content: space-between;
+          .dialog-header-title {
+            text-align: left;
+            font-weight: 700;
+            font-size: 26px;
+            color: #F1B85A;
+            font-family: "Anton-Regular";
+          }
+          .title-color {
+            color: #994FFD;
+          }
+          .dialog-header-close {
+            // position: absolute;
+            // top: -8%;
+            // right: -4%;
+            width: 35px;
+            height: 35px;
+            cursor: pointer;
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+        .dialog-content {
+          padding-bottom: 20px;
+          p {
+            text-align: left;
+            padding: 20px 0;
+            font-size: 16px;
+          }
+          .wallet-content {
+            width: 95%;
+            margin: 0 auto;
+            text-align: left;
+            li {
+              height: 60px;
+              display: flex;
+              align-items: center;
+              margin: 20px 0;
+              padding-left: 50px;
+              cursor: pointer;
+              border-radius: 40px;
+              text-align: left;
+              box-sizing: border-box;
+              border: 2px solid #a57a4a;
+              div {
+                display: flex;
+                align-items: center;
+                img {
+                  width: 40px;
+                  height: 40px;
+                }
+                span {
+                  color: #FEC25D;
+                  margin-left: 20px;
+                  font-size: 24px;
+                }
+              }
+            }
+            li:nth-child(3) {
+              padding-left: 0;
+              background: url('@/assets/common/disconnect.png') no-repeat;
+              background-size: 100% 100%;
+              .disconnect {
+                text-align: center;
+                margin: 0 auto;
+                // color: #000;
+              }
+              &:hover {
+                background: url('@/assets/common/Please.png') no-repeat;
+                background-size: 100% 100%;
+              }
+            }
+            .dialog-header-title {
+              text-align: left;
+              font-weight: 700;
+              font-size: 26px;
+              color: #F1B85A;
+              font-family: "Anton-Regular";
+            }
+            .title-color {
+              color: #994FFD;
+            }
+            .el-form {
+              .el-form-item {
+                .el-form-item__content {
+                  div {
+                    text-align: left;
+                    .table-title {
+                      display: inline-block;
+                      font-size: 24px;
+                    }
+                    .el-input {
+                      // background: #fff;
+                      .el-input-group__append {
+                        cursor: pointer;
+                        color: #000;
+                        background: #ffc35b;
+                        border-radius: 20px;
+                      }
+                      input {
+                        background: #1e1b26;
+                        border-color: #1e1b26;
+                        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;
+                    height: 10px;
+                    color: #F56C6C;
+                    font-size: 12px;
+                  }
+                }
+              }
+            }
+            .check-validate {
+              width: 120px;
+              height: 35px;
+              line-height: 35px;
+              background: #ffc35b;
+              color: #000;
+              margin: 20px auto;
+              border-radius: 20px;
+              cursor: pointer;
+            }
+          }
+          .line {
+            width: 100%;
+            height: 0px;
+            // background: #79787b,
+            border: 1px dashed #79787b;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/errorDialog/index.js

@@ -80,6 +80,12 @@ let errmsg = err
     errmsg = `You don't have enough Spins.`
   } else if(errmsg.indexOf('no ticket') > -1) {
     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('code expired') > -1) {
+    errmsg = `Your verification code has expired. Please request a new code.`
+  } else if(errmsg.indexOf('code error') > -1) {
+    errmsg = `Verification code is incorrect. Please verify and try again.`
   } else if(errmsg.indexOf('You have already boosted the chest') > -1 
     || errmsg.indexOf('The chest’s boost count has reached the upper limit') > -1
     || errmsg.indexOf('Today’s boost count has been exhausted') > -1) {

src/utils/webapi.js

@@ -322,3 +322,15 @@ export const apiDrawHistory = async () => {
   const url = `${API_BASE}/api/ingame/draw_history`;
   return httpGet(url, {})
 }
+
+// 发送邮件验证码
+export const apiSendCode = async (email) => {
+  const url = `${API_BASE}/api/email/send_code`;
+  return httpPost(url, {email})
+}
+
+// 发送邮件验证码
+export const apiVerifyEmail = async (email, code) => {
+  const url = `${API_BASE}/api/user/verify_email`;
+  return httpPost(url, {email, code})
+}

src/views/home/gameCheckBtn.vue

@@ -53,7 +53,9 @@ bonusCount: 2, // 已助力次数
     async checkBtn(){
       this.isShow = false
       let googleId = this.$store.state.user.userData?.googleId || undefined
-      if(googleId) {
+      let usesEmailId = this.$store.state.user.userData?.emailId || undefined
+      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 == undefined" @click="toBindGoogle" class="check-no">
+                    <div v-if="!usesGoogleId && !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 == undefined" @click="toBindGoogle" class="check-no">
+                    <div v-else-if="getTime && !usesGoogleId && !usesEmailId" @click="toBindGoogle" class="check-no">
                       <span>Verify</span>
                     </div>
                     <div v-else>
@@ -178,6 +178,9 @@ export default {
     usesGoogleId() {
       return this.$store.state.user.userData?.googleId || undefined;
     },
+    usesEmailId() {
+      return this.$store.state.user.userData?.emailId || undefined;
+    },
     getTime() {
       var now = new Date().getTime();
       if(this.activityData.drawTime < now) {

src/views/home/index.vue

@@ -126,14 +126,18 @@
             <div class="bind-title">
               Connect Game Account
             </div>
-            <div v-if="!usesGoogleMail" class="bind-btn" @click="isLogin('bind')">Connect</div>
-            <div v-else class="google-mail">
+            <!-- @click="isLogin('bind')" -->
+            <div v-if="usesGoogleMail || usesEmail" class="google-mail">
               <!-- <el-tooltip placement="top" :content="usesGoogleMail"> -->
-                <div>
+                <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>
             <div class="text">
               <!-- <p></p> -->
               <p>
@@ -884,6 +888,8 @@
       @closeDialog="closeDialog"
     />
 
+    <EMailDialog :emailDialogVisible="emailDialogVisible" @closeDialog="mailCloseDialog" @googleLogin="googleLogin" @bindEmail="bindEmail" />
+
     <!-- 宝箱助力弹窗 -->
     <HelpDialog
       class="help-dialog"
@@ -941,6 +947,7 @@ import gameView from "./gameView.vue";
 import TurntableView from "./turntableView.vue";
 import CheckBtn from "@/components/checkBtn.vue";
 import WalletDialog from "@/components/walletDialog/index.vue";
+import EMailDialog from "@/components/emailDialog.vue";
 import AwardDialog from "./awardDialog.vue";
 import TurnAwardDialog from "./turnAwardDialog.vue";
 import HelpDialog from "./helpDialog.vue";
@@ -1009,6 +1016,7 @@ export default {
     NftPartner,
     GameQuest,
     PointsDialog,
+    EMailDialog,
   },
   data() {
     return {
@@ -1134,6 +1142,7 @@ export default {
       pointsLogDialogVisible: false,
       myLogList: [],
       myNftList: {},
+      emailDialogVisible: false,
     };
   },
   watch: {},
@@ -1171,6 +1180,12 @@ export default {
     },
     usesGoogleMail() {
       return this.$store.state.user.userData?.googleMail || undefined;
+    },
+    usesEmailId() {
+      return this.$store.state.user.userData?.emailId || undefined;
+    },
+    usesEmail() {
+      return this.$store.state.user.userData?.email || undefined;
     }
   },
   created() {
@@ -1835,7 +1850,7 @@ export default {
     isLogin(type) {
       if (this.token) {
         if(type == 'bind') {
-          this.loginWithGoogle()
+          this.emailDialogVisible = true
         } else if(type == 'log') {
           this.logDialogVisible = true;
           this.getUserState();
@@ -1845,6 +1860,17 @@ export default {
       }
     },
 
+
+    // google 登录
+    googleLogin() {
+      this.loginWithGoogle()
+    },
+    // 其他邮箱登录
+    bindEmail() {
+      this.getUserState();
+      this.mailCloseDialog()
+    },
+
     // 获取用户状态
     async getUserState() {
       await this.$store.dispatch("user/fetchUserState");
@@ -1876,6 +1902,9 @@ export default {
     closeDialog() {
       this.walletDialogVisible = false;
     },
+    mailCloseDialog() {
+      this.emailDialogVisible = false;
+    },
     // 减探索次数
     decrease() {
       if (this.stepTicket == 0) return;
@@ -2003,6 +2032,7 @@ export default {
         let access_token = gapi.client.getToken().access_token;
         let res = await apiVerifyGoogle(access_token)
         this.getUserState();
+        this.mailCloseDialog()
         if(res.errmsg == 'google account already bind') {
           this.$showErr("google account already binded");
         }