404 lines
11 KiB
Vue
404 lines
11 KiB
Vue
<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> |