aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
X1627315083
2024-12-11 16:26:36 +08:00
parent 5d9dc7b77d
commit a6ae63e7cd
96 changed files with 6163 additions and 9414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

977
src/component/mainPage/signUp/registerModel.vue Normal file
View File

@@ -0,0 +1,977 @@
<template>
<div ref="register"></div>
<a-modal
class="register generalModel"
:get-container="() => $refs.register"
v-model:visible="registerModel"
:footer="null"
:width="pageWidth"
: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="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" 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',
]"
>
Register for AiDA 3.0
</div>
</div>
<!-- 账号密码登录 start -->
<!-- v-show="loginType == 'username'" -->
<div >
<div class="login_form_content" :state="emailStap">
<div class="login_form_title">Name</div>
<input
class="login_form_input"
placeholder="Enter your username"
v-model="username"
/>
<div class="login_form_title marign_top30">
<div>Password</div>
<!-- <div class="tip_content" @click="changeIsLogin(2)">
Forgot password？
</div> -->
</div>
<div class="password_input_block">
<input
class="login_form_input"
:type="passwordType"
placeholder="Enter your password"
v-model="password"
@keydown.enter="submitPerLogin()"
/>
<div class="icon iconfont icon-yanjing_yincang_o password_show_icon" @click="changePasswordType()"></div>
</div>
<div class="login_form_title marign_top30">Email</div>
<input
class="login_form_input"
placeholder="Enter your email address"
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"
>Verify with one-time verification 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">
Sent to {{ email }}
</div>
<div class="tip_content">
<span v-show="time">{{ time }}s</span>
<span v-show="!time" @click="emailNextStepFun()"
>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">
Please check the junk box if you haven't received verification code
</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>I agree to all Term, Privacy Policy and Fees</span>
</label>
</div>
<div class="thirdPartyLogin marign_top30">
<googleLogin @googelLogin="googelLogin"></googleLogin>
<weiXinLogin></weiXinLogin>
<phoneLogin></phoneLogin>
</div>
<div
class="login_submit_button marign_top40"
style="width: 100%;"
:state="emailStap"
@click="submitPerLogin()"
>
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>
<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";
const md5 = require("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%'
})
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
};
},
methods: {
init(){
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;
},
//提交账号密码预先登录
submitPerLogin() {
//输入账号密码
if(this.emailStap>=2){
return;
}else{
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;
}
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);
}
}
},
changePasswordType(){
this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
},
//微信登录
wechatLogin(value:any) {
let data = {
code : value.code
}
Https.axiosGet(Https.httpUrls.parseWeChatCode, {params:data})
.then((rv: any) => {
this.setSuccessLogin(rv)
})
.catch((res) => {});
},
//谷歌登录
googelLogin(value:any) {
let data = {credential : value}
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("isMurmur", false);
setCookie("token", token);
setCookie("isTest", isTest);
setCookie("isBeginner", isBeginner);
setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
setCookie("userInfo", JSON.stringify(rv));
this.store.commit("setSystemUser", rv.systemUser);
let obj: any = {
avatar: rv.avatar,
followeeCount: rv.followeeCount,
followerCount: rv.followerCount,
};
this.store.commit("setUserInfo", obj);
if (rv.systemUser == 0) {
this.turnToHomePage("/Square");
} else {
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 data = {
email: this.email,
emailVerifyCode: emailVerifyCode,
loginType: "EMAIL",
userId:this.userId,
"userEmail": this.email,
"userName": this.username,
"userPassword": md5(this.password + "abc"),
};
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() {
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: 6rem 4rem;
// height: 100%;
}
}
}
}
</style>
<style lang="less" scoped>
.login_page {
width: 100%;
height: 100%;
.page_content {
// position: relative;
.login_content {
position: absolute;
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);
border-radius: 1rem;
padding: 3rem 6rem 6.5rem;
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: .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;
.login_type_item {
text-align: center;
font-size: 3.6rem;
font-weight: bold;
color: #D7D7D7;
cursor: pointer;
height: 4rem;
line-height: 4rem;
&.login_active {
color: #030303;
}
}
}
.login_form_title {
font-size: 1.6rem;
// color: #666666;
font-weight: 900;
color: #000;
display: flex;
justify-content: space-between;
box-sizing: border-box;
label{
display: flex;
span{
font-size: 1.6rem;
margin-left: 10px;
font-weight: normal;
}
&.active{
pointer-events:none;
input{
pointer-events:none;
}
}
}
}
.login_form_content {
margin-top: 4rem;
position: relative;
&[state="2"]{
>*{
opacity: 0;
}
.login_form_email{
opacity: 1;
}
}
.password_input_block{
position: relative;
.password_show_icon{
position: absolute;
font-size: 2.4rem;
right: 2rem;
top:1.7rem;
cursor: pointer;
}
}
.login_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;
transition: all .3s;
&:hover{
border: 0.1rem solid #000;
}
&::placeholder {
color: #a5b0c2;
}
}
}
.email_last_step {
// margin-top: 4rem;
.email_last_step_bottom{
padding: 0 40px;
}
.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;
}
.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 .3s;
&: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: 60rem;
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;
}
.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: 3rem;
}
.marign_top40 {
margin-top: 4rem;
}
.thirdPartyLogin{
display: flex;
justify-content: flex-start;
>div{
margin-right: 1rem;
}
}
.tip_content {
font-size: 1.3rem;
font-weight: bold;
color: #343579;
cursor: pointer;
}
.email_last_step_des {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 4rem;
margin-bottom: 2rem;
.sent_email_content {
font-size: 1.8rem;
font-weight: bold;
color: #a5b0c2;
}
.email_tip_content{
font-size: 1.4rem;
color: #030303;
}
}
}
</style>