From b40eddf251b5fec8b27bd441582f7e12e6b8b4b7 Mon Sep 17 00:00:00 2001
From: yuyongdong <yuyongdong@kingsome.cn>
Date: Tue, 14 May 2024 20:35:40 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=BB=91=E5=AE=9A=E9=82=AE?=
 =?UTF-8?q?=E7=AE=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/common/Google-icon.png   | Bin 0 -> 2764 bytes
 src/assets/common/close.png         | Bin 0 -> 2242 bytes
 src/components/emailDialog.vue      | 404 ++++++++++++++++++++++++++++
 src/components/errorDialog/index.js |   6 +
 src/utils/webapi.js                 |  12 +
 src/views/home/gameCheckBtn.vue     |   4 +-
 src/views/home/gameQuest.vue        |   7 +-
 src/views/home/index.vue            |  38 ++-
 8 files changed, 464 insertions(+), 7 deletions(-)
 create mode 100644 src/assets/common/Google-icon.png
 create mode 100644 src/assets/common/close.png
 create mode 100644 src/components/emailDialog.vue

diff --git a/src/assets/common/Google-icon.png b/src/assets/common/Google-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..2c2ecf841ed467f860217c99d65c30f068c8deae
GIT binary patch
literal 2764
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
SnVt>+0000<MNUMnLSTaR1vn7^

literal 0
HcmV?d00001

diff --git a/src/assets/common/close.png b/src/assets/common/close.png
new file mode 100644
index 0000000000000000000000000000000000000000..e687e321888a309d6ad9490504272b81591090c1
GIT binary patch
literal 2242
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
Q3jhEB07*qoM6N<$f{da%;{X5v

literal 0
HcmV?d00001

diff --git a/src/components/emailDialog.vue b/src/components/emailDialog.vue
new file mode 100644
index 0000000..29024aa
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/errorDialog/index.js b/src/components/errorDialog/index.js
index d0438a2..8fd38fe 100644
--- a/src/components/errorDialog/index.js
+++ b/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) {
diff --git a/src/utils/webapi.js b/src/utils/webapi.js
index e986431..bc02e3c 100644
--- a/src/utils/webapi.js
+++ b/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})
+}
diff --git a/src/views/home/gameCheckBtn.vue b/src/views/home/gameCheckBtn.vue
index 0ccc56f..d542b7c 100644
--- a/src/views/home/gameCheckBtn.vue
+++ b/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) {
diff --git a/src/views/home/gameQuest.vue b/src/views/home/gameQuest.vue
index f97e504..d3e30fe 100644
--- a/src/views/home/gameQuest.vue
+++ b/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) {
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 96a72f1..1d3c231 100644
--- a/src/views/home/index.vue
+++ b/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");
         }