aida_front/src/component/mainPage/signUp/registerModel.vue

<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" text="Register with Google"></googleLogin>
								<weiXinLogin text="Register with wechat"></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("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() {
            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: 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: 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>