1279 lines
36 KiB
Vue
1279 lines
36 KiB
Vue
<template>
|
||
<div ref="register"></div>
|
||
<a-modal
|
||
class="register generalModel"
|
||
:get-container="() => $refs.register"
|
||
v-model:visible="registerModel"
|
||
:footer="null"
|
||
:width="pageWidth"
|
||
height="auto"
|
||
:maskClosable="false"
|
||
:centered="true"
|
||
:closable="false"
|
||
:mask="registerModelMask"
|
||
:keyboard="false"
|
||
:destroyOnClose="true"
|
||
:zIndex="1000"
|
||
>
|
||
<div class="generalModel_btn">
|
||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||
<!-- <i class="fi fi-rr-cross-small"></i> -->
|
||
<svg
|
||
width="100%" height="100%"
|
||
viewBox="0 0 46 46"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<circle cx="23" cy="23" r="23" fill="black" fill-opacity="0.3" />
|
||
<rect
|
||
x="32.5063"
|
||
y="12"
|
||
width="3"
|
||
height="29"
|
||
rx="1.5"
|
||
transform="rotate(45 32.5063 12)"
|
||
fill="white"
|
||
/>
|
||
<rect
|
||
x="34.6274"
|
||
y="32.5059"
|
||
width="3"
|
||
height="29"
|
||
rx="1.5"
|
||
transform="rotate(135 34.6274 32.5059)"
|
||
fill="white"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="login_page">
|
||
<div class="page_content">
|
||
<!-- 账号密码和邮箱登录 start-->
|
||
<div class="login_content" v-if="isLogin === 1">
|
||
<div class="login_content_left">
|
||
<div class="login_type_list">
|
||
<div
|
||
:class="[
|
||
'login_type_item',
|
||
'username_login_item',
|
||
'login_active',
|
||
]"
|
||
>
|
||
{{ userI18n[selectUserI18n].title }}
|
||
</div>
|
||
</div>
|
||
<!-- 账号密码登录 start -->
|
||
<!-- v-show="loginType == 'username'" -->
|
||
<div>
|
||
<div class="login_form_content" :state="emailStap">
|
||
<div class="login_form_title">{{ userI18n[selectUserI18n].Name }}</div>
|
||
<input
|
||
class="login_form_input"
|
||
:placeholder="userI18n[selectUserI18n].inputName"
|
||
v-model="username"
|
||
/>
|
||
|
||
<div class="login_form_title marign_top30">
|
||
<div>{{ userI18n[selectUserI18n].Password }}</div>
|
||
<!-- <div class="tip_content" @click="changeIsLogin(2)">
|
||
Forgot password？
|
||
</div> -->
|
||
</div>
|
||
<div class="password_input_block" v-show="emailStap !== 2">
|
||
<div v-show="passwordConditionShow" class="conditionShow">
|
||
<div class="item">
|
||
<div class="icon">
|
||
<i
|
||
v-show="!passwordCondition.length"
|
||
class="fi fi-br-cross-small"
|
||
></i>
|
||
<i
|
||
v-show="passwordCondition.length"
|
||
class="fi fi-br-check"
|
||
></i>
|
||
</div>
|
||
<div class="text">{{ userI18n[selectUserI18n].passwordLength }}</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="icon">
|
||
<i
|
||
v-show="!passwordCondition.special"
|
||
class="fi fi-br-cross-small"
|
||
></i>
|
||
<i
|
||
v-show="passwordCondition.special"
|
||
class="fi fi-br-check"
|
||
></i>
|
||
</div>
|
||
<div class="text">{{ userI18n[selectUserI18n].passwordSpecial }}</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="icon">
|
||
<i
|
||
v-show="!passwordCondition.group"
|
||
class="fi fi-br-cross-small"
|
||
></i>
|
||
<i
|
||
v-show="passwordCondition.group"
|
||
class="fi fi-br-check"
|
||
></i>
|
||
</div>
|
||
<div class="text">
|
||
{{ userI18n[selectUserI18n].passwordMaxLength }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<input
|
||
class="login_form_input"
|
||
:class="{
|
||
active:
|
||
Object.values(passwordCondition).filter(
|
||
(value) => value === true
|
||
).length < 3,
|
||
}"
|
||
:type="passwordType"
|
||
:placeholder="userI18n[selectUserI18n].inputPassword"
|
||
v-model="password"
|
||
@keydown.enter="submitPerLogin()"
|
||
@input="passwordInput"
|
||
@focus="() => (passwordConditionShow = true)"
|
||
@blur="() => (passwordConditionShow = false)"
|
||
/>
|
||
<div
|
||
class="icon iconfont icon-yanjing_yincang_o password_show_icon"
|
||
@click="changePasswordType()"
|
||
></div>
|
||
</div>
|
||
<span style="font-weight: 400; opacity: 0.7" v-show="emailStap !== 2"
|
||
>{{ userI18n[selectUserI18n].inputPasswordTip }}</span
|
||
>
|
||
<div class="login_form_title marign_top30" v-show="emailStap !== 2">{{ userI18n[selectUserI18n].Email }}</div>
|
||
<input
|
||
class="login_form_input"
|
||
v-show="emailStap !== 2"
|
||
:placeholder="userI18n[selectUserI18n].inputEmail"
|
||
v-model="email"
|
||
@keydown.enter="submitPerLogin()"
|
||
/>
|
||
|
||
<!-- 邮箱登录 start -->
|
||
<div
|
||
class="login_form_email"
|
||
:class="{ active: emailStap === 2 }"
|
||
>
|
||
<!-- <div v-show="loginType == 'email'" class="login_form_email"> -->
|
||
<!-- <div v-show="emailStap === 1" class="forget_password_content">
|
||
<div class="forget_password_content_block" @click="changeLoginType('username')">
|
||
<span class="icon iconfont fi-br-arrow-left"></span
|
||
><span class="forget_password_content_title"
|
||
>Log on to AiDA</span
|
||
>
|
||
</div>
|
||
<div class="login_form_content">
|
||
<div class="login_form_title">Email</div>
|
||
<input
|
||
class="login_form_input"
|
||
placeholder="Enter your email address"
|
||
v-model="email"
|
||
@keydown.enter="emailNextStepFun()"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="login_submit_button marign_top40"
|
||
@click="emailNextStepFun()"
|
||
>
|
||
Sign In
|
||
</div>
|
||
</div> -->
|
||
|
||
<div v-show="emailStap === 2" class="email_last_step">
|
||
<div class="email_last_step_block">
|
||
<span class="email_last_step_content"
|
||
>{{userI18n[selectUserI18n].code}}</span
|
||
>
|
||
<i
|
||
class="fi fi-br-cross email_last_step_block_icon"
|
||
@click="emailLastStepFun()"
|
||
></i>
|
||
</div>
|
||
<div class="email_last_step_bottom">
|
||
<div class="email_last_step_des">
|
||
<div class="sent_email_content">
|
||
{{userI18n[selectUserI18n].SentTo}} {{ email }}
|
||
</div>
|
||
<div class="tip_content">
|
||
<span v-show="time">{{ time }}s</span>
|
||
<span v-show="!time" @click="emailNextStepFun()"
|
||
>{{userI18n[selectUserI18n].Resend}}</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<VerificationCodeInput
|
||
:ct="emailCode"
|
||
@sendCaptcha="submitEmailLogin($event)"
|
||
></VerificationCodeInput>
|
||
|
||
<div class="email_last_step_des">
|
||
<div class="sent_email_content email_tip_content">
|
||
{{userI18n[selectUserI18n].PleaseCheck}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="login_form_title marign_top30">
|
||
<label :class="{ active: emailStap == 2 }">
|
||
<input :state="emailStap" type="checkbox" v-model="checked" />
|
||
<span>{{userI18n[selectUserI18n].articles}}</span>
|
||
</label>
|
||
</div>
|
||
<div class="thirdPartyLogin marign_top30">
|
||
<div class="label">
|
||
<div
|
||
class="mask"
|
||
v-show="!checked"
|
||
@click="isCheckAgreement"
|
||
></div>
|
||
<googleLogin
|
||
@googelLogin="googelLogin"
|
||
:text="userI18n[selectUserI18n].google"
|
||
></googleLogin>
|
||
</div>
|
||
<div class="label">
|
||
<div
|
||
class="mask"
|
||
v-show="!checked"
|
||
@click="isCheckAgreement"
|
||
></div>
|
||
<weiXinLogin :text="userI18n[selectUserI18n].wechat"></weiXinLogin>
|
||
</div>
|
||
<!-- <phoneLogin></phoneLogin> -->
|
||
</div>
|
||
<div
|
||
class="login_submit_button marign_top40"
|
||
style="width: 100%"
|
||
:state="emailStap"
|
||
@click="submitPerLogin()"
|
||
>
|
||
{{userI18n[selectUserI18n].Register}}
|
||
</div>
|
||
|
||
<!-- <div class="login_text" >
|
||
<div class="forget_password_text" @click="changeIsLogin(2)">Forgot your password</div>
|
||
</div> -->
|
||
</div>
|
||
<!-- 账号密码登录 end -->
|
||
</div>
|
||
|
||
<!-- 邮箱登录 end -->
|
||
</div>
|
||
|
||
<!-- 忘记密码 start -->
|
||
<div class="forget_password_content" v-else>
|
||
<div
|
||
class="forget_password_content_block"
|
||
@click="forgetPasswordLastStepFun()"
|
||
>
|
||
<!-- <span class="icon iconfont fi-br-arrow-left"></span
|
||
> -->
|
||
<!-- <i class="fi fi-br-arrow-left"></i> -->
|
||
<i class="fi fi-br-angle-left"></i>
|
||
<span class="forget_password_content_title">Retrieve password</span>
|
||
</div>
|
||
<div v-show="frogetPasswordStep === 1">
|
||
<div class="forget_passored_form_content">
|
||
<div class="forget_passored_form_title">Email</div>
|
||
<input
|
||
class="forget_passored_form_input"
|
||
placeholder="Enter your email"
|
||
v-model="forgetPasswordEmail"
|
||
@keydown.enter="forgetPasswordNextStepFun()"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="forget_submit_button marign_top40"
|
||
@click="forgetPasswordNextStepFun()"
|
||
>
|
||
Next step
|
||
</div>
|
||
</div>
|
||
|
||
<div v-show="frogetPasswordStep === 2">
|
||
<div class="forget_verif_code_des">Verification Code</div>
|
||
<div class="email_last_step_des">
|
||
<div class="sent_email_content">
|
||
Sent to {{ forgetPasswordEmail }}
|
||
</div>
|
||
<div class="tip_content">
|
||
<span v-show="time">{{ time }}s</span>
|
||
<span v-show="!time" @click="forgetPasswordNextStepFun()"
|
||
>Resend</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-show="frogetPasswordStep === 3">
|
||
<div class="forget_passored_form_content">
|
||
<div class="forget_passored_form_title">Password</div>
|
||
<input
|
||
class="forget_passored_form_input"
|
||
placeholder="Enter a new password"
|
||
v-model="newPassword"
|
||
@keydown.enter="submitResetPassword()"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="forget_submit_button marign_top40"
|
||
@click="submitResetPassword()"
|
||
>
|
||
Submit
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 忘记密码 end -->
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { defineComponent, ref, reactive, toRefs, onMounted } from "vue";
|
||
import { Https } from "@/tool/https";
|
||
import { isEmail } from "@/tool/util";
|
||
import { setCookie, WriteCookie } from "@/tool/cookie";
|
||
import { message } from "ant-design-vue";
|
||
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
|
||
import googleLogin from "@/component/LoginPage/googleLogin.vue";
|
||
import weiXinLogin from "@/component/LoginPage/weiXinLogin.vue";
|
||
import phoneLogin from "@/component/LoginPage/phoneLogin.vue";
|
||
import { useStore } from "vuex";
|
||
import { useI18n } from "vue-i18n";
|
||
import { setLang } from "@/tool/guide";
|
||
import md5 from "md5";
|
||
export default defineComponent({
|
||
components: {
|
||
VerificationCodeInput,
|
||
googleLogin,
|
||
weiXinLogin,
|
||
phoneLogin,
|
||
},
|
||
setup() {
|
||
let timer: any = 0;
|
||
const { locale } = useI18n();
|
||
const store = useStore();
|
||
let register = reactive({
|
||
registerModel: false,
|
||
registerModelMask: true,
|
||
pageWidth: "50%",
|
||
passwordConditionShow: false,
|
||
userI18n: {
|
||
en:{
|
||
title:'Register for AiDA',
|
||
Name:'Name',
|
||
inputName:'Enter your username',
|
||
Password:'Password',
|
||
passwordLength:'At least 8 characters long',
|
||
passwordSpecial:'Must contain special characters',
|
||
passwordMaxLength:'Mix of uppercase, lowercase and numbers',
|
||
inputPassword:'Enter your password',
|
||
inputPasswordTip:'You must satisfy ALL password conditions to register.',
|
||
Email:'Email',
|
||
inputEmail:'Enter your email address',
|
||
code:'Verify using a one-time verification code',
|
||
SentTo:'Sent to',
|
||
Resend:'Resend',
|
||
PleaseCheck:"Please check the junk box if you haven't received verification code",
|
||
articles:'I agree to the Terms, Privacy Policy, and Fees.',
|
||
Register:'Register',
|
||
google:'Register with Google',
|
||
wechat:'Register with wechat',
|
||
},
|
||
cn:{
|
||
title:'注册 AiDA',
|
||
Name:'用户名',
|
||
inputName:'请输入用户名',
|
||
Password:'密码',
|
||
passwordLength:'至少8个字符',
|
||
passwordSpecial:'必须包含特殊符号',
|
||
passwordMaxLength:'大小写字母与数字混合组合',
|
||
inputPassword:'请输入密码',
|
||
inputPasswordTip:'您必须满足所有密码设置条件才能完成注册',
|
||
Email:'邮箱',
|
||
inputEmail:'请输入邮箱',
|
||
code:'使用一次性验证码进行验证',
|
||
SentTo:'发送到',
|
||
Resend:'重新发送',
|
||
PleaseCheck:"如果没有收到验证码，请检查垃圾邮件",
|
||
articles:'我同意相关条款、隐私政策以及费用规定。',
|
||
Register:'注册',
|
||
google:'使用谷歌进行注册',
|
||
wechat:'使用微信进行注册',
|
||
}
|
||
},
|
||
selectUserI18n:'en',
|
||
passwordCondition: {
|
||
length: false,
|
||
special: false,
|
||
group: false,
|
||
},
|
||
});
|
||
return {
|
||
store,
|
||
timer,
|
||
...toRefs(register),
|
||
locale,
|
||
};
|
||
},
|
||
data() {
|
||
return {
|
||
checked: false,
|
||
isLogin: 1, //是否为登录 1-登录， 2-忘记密码
|
||
loginType: "username",
|
||
emailStap: 1, // 邮箱登录步骤
|
||
emailCode: ["", "", "", "", "", ""], //邮箱验证码
|
||
emailNextStep: true,
|
||
username: "",
|
||
password: "",
|
||
email: "", //邮箱登录邮箱
|
||
frogetPasswordStep: 1, //忘记密码的步骤
|
||
forgetPasswordEmail: "",
|
||
forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
|
||
forgetEmailValue: "", //忘记密码的邮箱验证码保存值
|
||
newPassword: "", //新密码
|
||
isCheckRobot: false,
|
||
time: 60, //60秒倒计时
|
||
passwordType: "password",
|
||
userId: "",
|
||
loginTime: true,
|
||
};
|
||
},
|
||
mounted() {
|
||
const data = this.$route.query;
|
||
if (data?.state == "weiXin") {
|
||
this.wechatLogin(data);
|
||
}
|
||
},
|
||
methods: {
|
||
init(boolean: boolean) {
|
||
if(boolean){
|
||
this.selectUserI18n = 'cn'
|
||
}else{
|
||
this.selectUserI18n = 'en'
|
||
}
|
||
this.registerModel = true;
|
||
this.emailLastStepFun();
|
||
},
|
||
changeLoginType(type: string) {
|
||
this.loginType = type;
|
||
},
|
||
|
||
//是否忘记密码页面
|
||
changeIsLogin(isLogin: number) {
|
||
if (isLogin === 1) {
|
||
//登录
|
||
this.forgetPasswordEmail = "";
|
||
this.frogetPasswordStep = 1;
|
||
this.forgetEmailCode = ["", "", "", "", "", ""];
|
||
this.emailStap = 1;
|
||
this.clearTimer();
|
||
} else {
|
||
this.username = "";
|
||
this.password = "";
|
||
}
|
||
this.isLogin = isLogin;
|
||
},
|
||
|
||
//邮箱登录的下一步
|
||
emailNextStepFun() {
|
||
if (!isEmail(this.email)) {
|
||
message.info("The email format is incorrect");
|
||
return;
|
||
}
|
||
let data = {
|
||
email: this.email,
|
||
operationType: "LOGIN",
|
||
};
|
||
|
||
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
|
||
if (rv) {
|
||
this.emailStap = 2;
|
||
this.time = 60;
|
||
this.emailCode = ["", "", "", "", "", ""];
|
||
this.createTimer();
|
||
}
|
||
});
|
||
},
|
||
|
||
//邮箱登录的上一步
|
||
emailLastStepFun() {
|
||
this.emailStap = 1;
|
||
(this.username = ""), (this.password = ""), (this.email = "");
|
||
(this.checked = false),
|
||
(this.loginType = "username"),
|
||
(this.emailCode = ["", "", "", "", "", ""]),
|
||
this.clearTimer();
|
||
},
|
||
|
||
//忘记密码的下一步
|
||
forgetPasswordNextStepFun() {
|
||
if (!isEmail(this.forgetPasswordEmail)) {
|
||
message.info("The email format is incorrect");
|
||
return;
|
||
}
|
||
let data = {
|
||
email: this.forgetPasswordEmail,
|
||
operationType: "FORGET_PWD",
|
||
};
|
||
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
|
||
if (rv) {
|
||
this.frogetPasswordStep = 2;
|
||
(this.forgetEmailCode = ["", "", "", "", "", ""]), this.createTimer();
|
||
}
|
||
});
|
||
},
|
||
//忘记密码的上一步
|
||
forgetPasswordLastStepFun() {
|
||
if (this.frogetPasswordStep === 1) {
|
||
this.changeIsLogin(1);
|
||
} else {
|
||
this.frogetPasswordStep = this.frogetPasswordStep - 1;
|
||
this.forgetPasswordEmail = "";
|
||
(this.forgetEmailCode = ["", "", "", "", "", ""]), this.clearTimer();
|
||
}
|
||
},
|
||
|
||
//改变勾选是否是机器人
|
||
checkRobot() {
|
||
this.isCheckRobot = !this.isCheckRobot;
|
||
},
|
||
passwordInput() {
|
||
this.isPassword(this.password);
|
||
},
|
||
isPassword(password: any) {
|
||
this.passwordCondition.length = /.{8,}/.test(password);
|
||
this.passwordCondition.special =
|
||
/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password);
|
||
this.passwordCondition.group =
|
||
/[a-z]/.test(password) && /[A-Z]/.test(password) && /\d/.test(password);
|
||
return Object.values(this.passwordCondition).filter(
|
||
(value) => value === true
|
||
).length;
|
||
},
|
||
//提交账号密码预先登录
|
||
submitPerLogin() {
|
||
//输入账号密码
|
||
if (this.emailStap >= 2) {
|
||
return;
|
||
} else {
|
||
if (/aida/i.test(this.username)) {
|
||
message.info(
|
||
'The name cannot contain "AiDA" or any combination of its uppercase and lowercase forms.'
|
||
);
|
||
return;
|
||
}
|
||
if (!this.username || !this.password) {
|
||
message.info("Please enter your account number or password");
|
||
return;
|
||
}
|
||
//输入邮箱
|
||
if (!this.email) {
|
||
message.info("Please enter your email address");
|
||
return;
|
||
}
|
||
//判断邮箱格式是否正确
|
||
if (!isEmail(this.email)) {
|
||
message.info("The email format is incorrect");
|
||
return;
|
||
}
|
||
//判断是否同意隐私政策
|
||
if (!this.checked) {
|
||
message.info("Agree to all terms, privacy fees and policies");
|
||
return;
|
||
}
|
||
if (this.isPassword(this.password) < 3) {
|
||
message.info("You must satisfy ALL password conditions to register.");
|
||
return;
|
||
}
|
||
|
||
let data = {
|
||
userPassword: md5(this.password + "abc"),
|
||
userName: this.username,
|
||
userEmail: this.email,
|
||
browserIdentifiers: "",
|
||
country: "",
|
||
createDate: "",
|
||
credits: 0,
|
||
id: 0,
|
||
isBeginner: 0,
|
||
isTrial: 0,
|
||
language: "",
|
||
systemUser: 0,
|
||
updateDate: "",
|
||
validEndTime: 0,
|
||
validStartTime: 0,
|
||
};
|
||
// this.loginType = 'email'
|
||
if (this.loginTime) {
|
||
this.loginTime = false;
|
||
Https.axiosPost(Https.httpUrls.designWorksRegister, data)
|
||
.then((rv: any) => {
|
||
// if (rv) {
|
||
// this.loginType = 'email'
|
||
// }
|
||
this.emailStap = 2;
|
||
if (rv) {
|
||
this.userId = rv.userId;
|
||
this.loginType = "email";
|
||
this.time = 60;
|
||
this.emailCode = ["", "", "", "", "", ""];
|
||
this.createTimer();
|
||
}
|
||
})
|
||
.catch((res) => {
|
||
this.emailStap = 1;
|
||
});
|
||
setTimeout(() => {
|
||
this.loginTime = true;
|
||
}, 2000);
|
||
}
|
||
}
|
||
},
|
||
isCheckAgreement() {
|
||
message.info("Agree to all terms, privacy fees and policies");
|
||
},
|
||
changePasswordType() {
|
||
this.passwordType =
|
||
this.passwordType === "password" ? "text" : "password";
|
||
},
|
||
//微信登录
|
||
wechatLogin(value: any) {
|
||
let data = {
|
||
code: value.code,
|
||
type: 1,
|
||
};
|
||
Https.axiosGet(Https.httpUrls.parseWeChatCode, { params: data })
|
||
.then((rv: any) => {
|
||
this.setSuccessLogin(rv);
|
||
})
|
||
.catch((res) => {});
|
||
},
|
||
//谷歌登录
|
||
googelLogin(value: any) {
|
||
let data = { credential: value, type: 1 };
|
||
Https.axiosGet(Https.httpUrls.parseGoogleCredential, { params: data })
|
||
.then((rv: any) => {
|
||
this.setSuccessLogin(rv);
|
||
})
|
||
.catch((res) => {});
|
||
},
|
||
setSuccessLogin(rv: any) {
|
||
if (rv) {
|
||
if (rv.systemUser == 4) {
|
||
rv.systemUser = 1;
|
||
}
|
||
this.createTimer();
|
||
let isTest = rv.systemUser == 3 ? true : false;
|
||
let isBeginner = rv?.isBeginner == 1 ? true : false;
|
||
let token = rv.token;
|
||
setCookie("token", token);
|
||
setCookie("isTest", isTest);
|
||
setCookie("isBeginner", isBeginner);
|
||
setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
|
||
setCookie("userInfo", JSON.stringify(rv));
|
||
let userid: any = {
|
||
ueserId: rv.userId,
|
||
systemUser: rv.systemUser,
|
||
};
|
||
if (rv.email) userid.email = rv.email;
|
||
this.store.commit("upUserDetail", userid);
|
||
|
||
if (window.innerWidth < 768) {
|
||
message.info(
|
||
"If you need to design, please log in using an iPad or computer."
|
||
);
|
||
this.turnToHomePage("/Square");
|
||
} else {
|
||
this.turnToHomePage("/home");
|
||
}
|
||
sessionStorage.setItem("isTimeOne", JSON.stringify(false)); //是否需要公告 提示 弹窗
|
||
let randomNum: any =
|
||
Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
|
||
sessionStorage.setItem("sessionId", randomNum);
|
||
sessionStorage.setItem("record", JSON.stringify([]));
|
||
}
|
||
},
|
||
//邮箱登录提交
|
||
submitEmailLogin(emailVerifyCode: any) {
|
||
let affiliateRef = sessionStorage.getItem("affiliateRef");
|
||
let data = {
|
||
email: this.email,
|
||
emailVerifyCode: emailVerifyCode,
|
||
loginType: "EMAIL",
|
||
userId: this.userId,
|
||
userEmail: this.email,
|
||
userName: this.username,
|
||
userPassword: md5(this.password + "abc"),
|
||
invitationCode: affiliateRef ? affiliateRef : "",
|
||
};
|
||
Https.axiosPost(Https.httpUrls.designWorksRegisterCode, data)
|
||
.then((rv: any) => {
|
||
this.setSuccessLogin(rv);
|
||
})
|
||
.catch((res) => {});
|
||
},
|
||
|
||
//修改密码提交
|
||
submitResetPassword() {
|
||
let data = {
|
||
email: this.forgetPasswordEmail,
|
||
emailVerifyCode: this.forgetEmailValue,
|
||
password: md5(this.newPassword + "abc"),
|
||
verifyEmail: false,
|
||
};
|
||
Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
|
||
if (rv) {
|
||
message.success("Changing the password successfully");
|
||
this.changeIsLogin(1);
|
||
}
|
||
});
|
||
},
|
||
|
||
//创建定时器
|
||
createTimer() {
|
||
clearInterval(this.timer);
|
||
this.time = 60;
|
||
this.timer = setInterval(() => {
|
||
this.time--;
|
||
if (!this.time) {
|
||
clearInterval(this.timer);
|
||
}
|
||
}, 1000);
|
||
},
|
||
|
||
//清除定时器
|
||
clearTimer() {
|
||
this.time = 60;
|
||
if (this.timer) {
|
||
clearInterval(this.timer);
|
||
}
|
||
},
|
||
|
||
//跳转到首页
|
||
turnToHomePage(str: any) {
|
||
this.getLang();
|
||
// this.$router.push("/home");
|
||
// console.log(window.location.search.substring(1));
|
||
this.store.commit("clearAllData");
|
||
this.store.commit("clearAllCollection");
|
||
this.store.commit("setAllBoardDataChoose", {});
|
||
this.store.commit("clearShowSketchboard", {});
|
||
this.$router.push(str);
|
||
},
|
||
//获取当前语言
|
||
getLang() {
|
||
let data = {};
|
||
Https.axiosPost(Https.httpUrls.getUserLanguage, data).then((rv: any) => {
|
||
if (rv) {
|
||
this.locale = rv;
|
||
setLang(rv);
|
||
}
|
||
});
|
||
},
|
||
turnToWindow(url: any) {
|
||
window.open(url);
|
||
},
|
||
cancelDsign() {
|
||
this.registerModel = false;
|
||
},
|
||
},
|
||
});
|
||
</script>
|
||
<style lang="less" scoped>
|
||
:deep(.register) {
|
||
@media (max-width: 768px) {
|
||
// box-shadow: none;
|
||
// height: 100%;
|
||
margin: 0;
|
||
max-width: 95%;
|
||
&.generalModel {
|
||
.ant-modal-content {
|
||
// height: 100%;
|
||
}
|
||
.ant-modal-body {
|
||
padding: 4.3rem 3rem;
|
||
// height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="less" scoped>
|
||
.login_page {
|
||
width: 100%;
|
||
height: 100%;
|
||
.page_content {
|
||
// position: relative;
|
||
.login_content {
|
||
// position: relative;
|
||
// top: 50%;
|
||
// left: 50%;
|
||
// transform: translate(-50%,-50%);
|
||
// width: 60rem;
|
||
// width: 80%;
|
||
background: #ffffff;
|
||
// box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
|
||
padding: 2rem 6rem 2rem;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
@media (max-width: 768px) {
|
||
padding: 0;
|
||
}
|
||
.login_content_left {
|
||
width: 100%;
|
||
.login_form_email {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
background: #fff;
|
||
transform: scale(0);
|
||
transition: 0.3s all;
|
||
border: 2px solid;
|
||
border-radius: 20px;
|
||
.email_last_step {
|
||
width: 100%;
|
||
height: 100%;
|
||
#app {
|
||
height: auto;
|
||
}
|
||
}
|
||
}
|
||
.active {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
.login_type_list {
|
||
width: 100%;
|
||
display: flex;
|
||
@media (max-width: 768px) {
|
||
justify-content: center;
|
||
}
|
||
.login_type_item {
|
||
text-align: center;
|
||
font-size: 3.6rem;
|
||
font-weight: bold;
|
||
color: #d7d7d7;
|
||
cursor: pointer;
|
||
line-height: 4rem;
|
||
height: 4rem;
|
||
@media (max-width: 768px) {
|
||
line-height: 2rem;
|
||
font-size: 2.5rem;
|
||
height: 2rem;
|
||
}
|
||
&.login_active {
|
||
color: #030303;
|
||
}
|
||
}
|
||
}
|
||
.login_form_title {
|
||
font-size: 1.8rem;
|
||
// color: #666666;
|
||
font-weight: 500;
|
||
color: #000;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
@media (max-width: 768px) {
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
label {
|
||
display: flex;
|
||
span {
|
||
font-size: 1.6rem;
|
||
margin-left: 10px;
|
||
font-weight: normal;
|
||
@media (max-width: 768px) {
|
||
font-size: 1.3rem;
|
||
}
|
||
}
|
||
&.active {
|
||
pointer-events: none;
|
||
input {
|
||
pointer-events: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.login_form_content {
|
||
margin-top: 4rem;
|
||
position: relative;
|
||
min-height: 34rem;
|
||
@media (max-width: 768px) {
|
||
margin-top: 2.4rem;
|
||
min-height: auto;
|
||
&[state="2"] {
|
||
height: 20rem;
|
||
}
|
||
}
|
||
&[state="2"] {
|
||
> * {
|
||
opacity: 0;
|
||
}
|
||
.login_form_email {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
> span{
|
||
@media (max-width: 768px) {
|
||
font-size: 1.2rem;
|
||
}
|
||
}
|
||
.password_input_block {
|
||
position: relative;
|
||
|
||
.password_show_icon {
|
||
position: absolute;
|
||
font-size: 2.4rem;
|
||
right: 2rem;
|
||
top: 3.3rem;
|
||
cursor: pointer;
|
||
@media (max-width: 768px) {
|
||
right: 2rem;
|
||
top: 1.4rem;
|
||
font-size: 1.8rem;
|
||
}
|
||
}
|
||
> .conditionShow {
|
||
bottom: 0;
|
||
position: absolute;
|
||
right: 0;
|
||
left: auto;
|
||
transform: translateY(-7rem);
|
||
background: #404040;
|
||
color: #fff;
|
||
font-size: 1.4rem;
|
||
padding: 2rem;
|
||
border-radius: 2rem;
|
||
z-index: 2;
|
||
> .item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 0.5rem;
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
> .icon {
|
||
margin-right: 1rem;
|
||
i {
|
||
display: flex;
|
||
// &.fi-br-cross-small{
|
||
// color: red;
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.login_form_input {
|
||
width: 100%;
|
||
height: 6.75rem;
|
||
margin-top: 2rem;
|
||
border: 0.1rem solid #dfdfdf;
|
||
border-radius: 4.2rem;
|
||
padding-left: 2.1rem;
|
||
line-height: 5rem;
|
||
font-size: 1.6rem;
|
||
box-sizing: border-box;
|
||
outline: none;
|
||
transition: all .3s;
|
||
@media (max-width: 768px) {
|
||
height: 3.8rem;
|
||
margin-top: .7rem;
|
||
border: 0.1rem solid #dfdfdf;
|
||
border-radius: 2rem;
|
||
padding-left: 1.6rem;
|
||
line-height: 3.8rem;
|
||
font-size: 1.2rem;
|
||
}
|
||
&:hover {
|
||
border: 0.1rem solid #000;
|
||
}
|
||
&::placeholder {
|
||
color: #a5b0c2;
|
||
}
|
||
&.active {
|
||
border: 0.1rem solid red;
|
||
}
|
||
}
|
||
}
|
||
|
||
.email_last_step {
|
||
// margin-top: 4rem;
|
||
.email_last_step_bottom {
|
||
padding: 0 40px;
|
||
@media (max-width: 767px) {
|
||
padding: 0 2rem;
|
||
}
|
||
}
|
||
.email_last_step_block {
|
||
padding: 10px;
|
||
border-bottom: 2px solid;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.email_last_step_content {
|
||
margin-left: 1rem;
|
||
font-size: 2.2rem;
|
||
font-weight: bold;
|
||
color: #030303;
|
||
@media (max-width: 767px) {
|
||
font-size: 1.2rem;
|
||
margin-left: .5rem;
|
||
}
|
||
}
|
||
.email_last_step_block_icon {
|
||
cursor: pointer;
|
||
margin-right: 1rem;
|
||
height: 20px;
|
||
}
|
||
}
|
||
|
||
.fi-br-arrow-left {
|
||
font-size: 2.5rem;
|
||
font-weight: bold;
|
||
color: #030303;
|
||
transform: translateY(1rem);
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
.login_submit_button {
|
||
height: 5rem;
|
||
background: #000;
|
||
border-radius: 2.5rem;
|
||
line-height: 5rem;
|
||
text-align: center;
|
||
font-size: 1.8rem;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
@media (max-width: 768px) {
|
||
height: 3.8rem;
|
||
font-size: 1.3rem;
|
||
line-height: 3.8rem;
|
||
}
|
||
&:hover {
|
||
background: #3c3c3c;
|
||
}
|
||
&[state="2"] {
|
||
cursor: not-allowed;
|
||
}
|
||
}
|
||
.login_text {
|
||
font-size: 1.6rem;
|
||
margin-top: 4rem;
|
||
color: #151515;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
.forget_password_text {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.forget_password_content {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 77rem;
|
||
background: #ffffff;
|
||
box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200, 200, 200, 0.3);
|
||
border-radius: 1rem;
|
||
padding: 3rem 6rem 6.5rem;
|
||
box-sizing: border-box;
|
||
|
||
.forget_password_content_block {
|
||
cursor: pointer;
|
||
font-size: 3.6rem;
|
||
font-weight: 500;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 1.2rem;
|
||
> i {
|
||
margin-right: 2.8rem;
|
||
font-size: 2rem;
|
||
display: flex;
|
||
cursor: pointer;
|
||
align-items: center;
|
||
width: 4.6rem;
|
||
height: 4.6rem;
|
||
border-radius: 1.2rem;
|
||
display: flex;
|
||
justify-content: center;
|
||
border: 1px solid #D8DADC;
|
||
}
|
||
}
|
||
|
||
.fi-br-arrow-left {
|
||
font-size: 3.8rem;
|
||
font-weight: bold;
|
||
color: #030303;
|
||
transform: translateY(1rem);
|
||
display: inline-block;
|
||
}
|
||
.forget_password_content_title {
|
||
font-size: 3.2rem;
|
||
font-weight: bold;
|
||
color: #030303;
|
||
margin-left: 2rem;
|
||
}
|
||
|
||
.forget_passored_form_content {
|
||
margin-top: 3.5rem;
|
||
|
||
.forget_passored_form_title {
|
||
font-size: 2.4rem;
|
||
font-weight: bold;
|
||
color: #030303;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.forget_passored_form_input {
|
||
width: 100%;
|
||
height: 5rem;
|
||
margin-top: 1rem;
|
||
border: 0.1rem solid #dfdfdf;
|
||
border-radius: 2.5rem;
|
||
padding-left: 2.1rem;
|
||
line-height: 5rem;
|
||
font-size: 1.4rem;
|
||
box-sizing: border-box;
|
||
outline: none;
|
||
|
||
&::placeholder {
|
||
color: #a5b0c2;
|
||
}
|
||
}
|
||
}
|
||
|
||
.forget_verif_code_des {
|
||
font-size: 2.4rem;
|
||
font-weight: bold;
|
||
color: #030303;
|
||
margin-top: 3.5rem;
|
||
}
|
||
|
||
.forget_submit_button {
|
||
height: 5rem;
|
||
background: #000;
|
||
border-radius: 2.5rem;
|
||
line-height: 5rem;
|
||
text-align: center;
|
||
font-size: 1.8rem;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.marign_top20 {
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.marign_top22 {
|
||
margin-top: 2.2rem;
|
||
}
|
||
|
||
.marign_top30 {
|
||
margin-top: 2.7rem;
|
||
@media (max-width: 768px) {
|
||
margin-top: 1.5rem;
|
||
}
|
||
}
|
||
.marign_top40 {
|
||
margin-top: 4rem;
|
||
@media (max-width: 768px) {
|
||
margin-top: 2rem;
|
||
}
|
||
}
|
||
.thirdPartyLogin {
|
||
display: flex;
|
||
@media (max-width: 768px) {
|
||
// flex-direction: column;
|
||
}
|
||
> div {
|
||
position: relative;
|
||
margin-right: 1rem;
|
||
@media (max-width: 768px) {
|
||
width: 100%;
|
||
margin: 0;
|
||
margin-bottom: 1rem;
|
||
}
|
||
> .mask {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 2;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
.tip_content {
|
||
font-size: 1.3rem;
|
||
font-weight: bold;
|
||
color: #000;
|
||
cursor: pointer;
|
||
@media (max-width: 767px) {
|
||
font-size: 1rem;
|
||
}
|
||
}
|
||
|
||
.email_last_step_des {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 4rem;
|
||
margin-bottom: 2rem;
|
||
@media (max-width: 767px) {
|
||
margin-top: 2rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
.sent_email_content {
|
||
font-size: 1.8rem;
|
||
font-weight: bold;
|
||
color: #a5b0c2;
|
||
@media (max-width: 767px) {
|
||
font-size: 1.2rem;
|
||
}
|
||
}
|
||
|
||
.email_tip_content {
|
||
font-size: 1.4rem;
|
||
color: #030303;
|
||
@media (max-width: 767px) {
|
||
font-size: 1.2rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|