aida_front/src/component/HomePage/bindEmail.vue

<template>
	<div ref="register" class="bindEmail"></div>
	<a-modal
		class="register generalModel"
		:get-container="() => $refs.register"
		v-model:visible="registerModel"
		:footer="null"
		:width="pageWidth"
		:height="bindType == 'Modify'?'60rem':'80rem'"
		:maskClosable="false"
		:centered="true"
		:closable="false"
		:mask="registerModelMask"
		:keyboard="false"
		:destroyOnClose="true"
	>
		<div class="generalModel_btn" v-if="bindType == 'Modify'">
			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
				<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="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="generalModel_btn back" v-if="bindType != 'Modify'">
			<div class="generalModel_closeIcon" @click.stop="setBack()">
				<span>←</span>
				<span class="back_text">{{ $t('account.logOut') }}</span>
			</div>
		</div>
		<div class="login_page">
			<div class="page_content">
				<!-- 账号密码和邮箱登录  start-->
				<div class="login_content" >
					<div class="login_content_left">
						<div class="login_type_list">
							<div
								:class="[
									'login_type_item','username_login_item',
									'login_active',
								]"
							>
								<span v-if="bindType == 'Modify'">{{ $t('account.ModifyEmail') }}</span>
								<span v-else>{{ $t('account.information') }}</span>
							</div>
						</div>
						<!-- 账号密码登录 start -->
						<!-- v-show="login$props.Type == 'username'" -->
						<div >
							<div class="login_form_content" :state="emailStap">
								<div class="login_form_title marign_top30">{{ $t('account.Email') }} <span class="must">*</span></div>
								<input
									class="login_form_input"
									:class="{active:(userDetail.email !== '-------------') && bindType != 'Modify'}"
									:placeholder="$t('account.plaseEmail')"
									v-model="email"
									:disabled="(userDetail.email !== '-------------') && bindType != 'Modify'"								
									@keydown.enter="submitPerLogin()"
								/>
								
								<div v-if="bindType != 'Modify'">
									<div class="login_form_title marign_top30">{{ $t('account.Name') }}<span class="must">*</span></div>
									<div style="display: flex;justify-content: space-between;">
										<a-select
											class="gallerySelect"
											v-model:value="selectSex"
											:disabled="!!userDetail.title"
											size="large"
											optionFilterProp="label"
											style="width: 30%;"
											:options="sexList"
											:placeholder="$t('account.plaseSelectSex')"
											allowClear
											show-search
										></a-select>
										<input class="login_form_input" style="width: 30%;" :class="{active:!!userDetail.surname}" :disabled="!!userDetail.surname" type="text" :placeholder="$t('account.plaseFirst')" v-model="surname">
										<input class="login_form_input" style="width: 30%;" :class="{active:!!userDetail.givenName}" :disabled="!!userDetail.givenName" type="text" :placeholder="$t('account.plaseLast')" v-model="givenName">
									</div>
									<div class="login_form_title marign_top30">{{$t('account.Country')}}:<span class="must">*</span></div>
									<div class="login_form_select">
										<a-select
											class="gallerySelect"
											v-model:value="Country"
											:disabled="!!userDetail.country"
											size="large"
											optionFilterProp="label"
											style="width: 100%;"
											:options="countryList"
											:field-names="{ label: locale == 'CHINESE_SIMPLIFIED'?'labelCn':'label' }"
											:placeholder="$t('account.plaseCountry')"
											allowClear
											show-search
										></a-select>
									</div>
									
									<div class="login_form_title marign_top30">{{$t('account.CompanyName')}}:<span class="must">*</span></div>
									<input class="login_form_input" :class="{active:!!userDetail.occupation}" :disabled="!!userDetail.occupation" type="text" :placeholder="$t('account.plaseCompanyName')" v-model="CompanyName">
								</div>
						
							<!-- 邮箱登录 start -->
								<div class="login_form_email" :class="{active:emailStap===2}">
									<div v-show="emailStap === 2"  class="email_last_step">
									
										<!-- <div class="email_last_step_block" >
											<span class="email_last_step_content"
												>Verify using a 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">
											If you haven't received the code, please check your junk or spam folder.
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
							<div
								class="login_submit_button marign_top40" 
								style="width: 100%;"
								:state="emailStap"
								@click="submitPerLogin()"
							>
							<span v-if="bindType == 'Modify'">Modify Email</span>
							<span v-else>Submit</span>
							</div>
						</div>
						<!-- 账号密码登录 end -->
						
					</div>
					
					<!-- 邮箱登录 end -->
				</div>
			</div>
		</div>
	</a-modal>

</template>

<script lang="ts">
import { defineComponent,watch,reactive,toRefs ,computed, 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 { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import { setLang } from "@/tool/guide";
import { country } from "@/tool/country";
import { useRouter } from "vue-router";
export default defineComponent({
    components: {
        VerificationCodeInput,
    },
    setup(prop, { emit }){
		const bindType = ''
		const router = useRouter()
        let timer:any =  0;
		const {locale,t} = useI18n()
		const store = useStore();
		let userDetail:any= computed(()=>{
			return store.state.UserHabit.userDetail
		})
		let userCountry = computed(()=>{
			return store.state.UserHabit.userDetail.country
		})
		let userCompanyName = computed(()=>{
			return store.state.UserHabit.userDetail.occupation
		})
		let userEmail = computed(()=>{
			return store.state.UserHabit.userDetail.email
		})
		let userSex = computed(()=>{
			return store.state.UserHabit.userDetail.title
		})
		let userSurname = computed(()=>{
			return store.state.UserHabit.userDetail.surname
		})
		let userGivenName = computed(()=>{
			return store.state.UserHabit.userDetail.givenName
		})
		let register = reactive({
			registerModel:computed(()=>{
				return store.state.UserHabit.bindEmail.isBindEmail
			}),
			// registerModel:true,
			bindType:computed(()=>{
				return store.state.UserHabit.bindEmail.type
			}),
			registerModelMask:true,
			pageWidth:'45%',
			Country:null,
			CompanyName:'',
			countryList:country,
			email:'',
			sexList:computed(()=> {
				return [
					{label:t('account.Mr'),value:'Mr'},
					{label:t('account.Ms'),value:'Ms'},
					{label:t('account.Miss'),value:'Miss'},
				]
			}),
			selectSex:null,
			surname:'',
			givenName:'',
		})
		watch(userCountry,(newValue,oldValue)=>{
			register.Country = newValue
		})
		watch(userCompanyName,(newValue,oldValue)=>{
			register.CompanyName = newValue
		})
		watch(userEmail,(newValue:any,oldValue)=>{
			register.email = newValue == '-------------'?'':newValue
		})
		watch(userSex,(newValue,oldValue)=>{
			register.selectSex = newValue
		})
		watch(userSurname,(newValue,oldValue)=>{
			register.surname = newValue
		})
		watch(userGivenName,(newValue,oldValue)=>{
			register.givenName = newValue
		})
        return{
			router,
			store,
            timer,
			userDetail,
			...toRefs(register),
			locale
        }
		
    },
    data() {
        return {
			checked:false,
            emailStap: 1, // 邮箱登录步骤
            emailCode: ["", "", "", "", "", ""], //邮箱验证码
            emailNextStep: true,
            frogetPasswordStep: 1, //忘记密码的步骤
            forgetPasswordEmail: "",
            forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
            forgetEmailValue: "", //忘记密码的邮箱验证码保存值
            newPassword: "", //新密码
            isCheckRobot: false,
            time: 60, //60秒倒计时
            passwordType:'password',
            userId:'',
			loginTime:true
        };
    },
    methods: {
		init(type:any){
			let data =  {
				type,
				isBindEmail:true
			}
			this.store.commit('setIsBindEmail', data)
			this.emailLastStepFun()
		},
       

        //邮箱登录的下一步
        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.email = "";
			this.checked=false,
            (this.emailCode = ["", "", "", "", "", ""]), this.clearTimer();
        },

        //改变勾选是否是机器人
        checkRobot() {
            this.isCheckRobot = !this.isCheckRobot;
        },

        //提交账号密码预先登录
        submitPerLogin() {
			
			//输入账号密码
			if(this.emailStap>=2){
				return;
			}else{
				//输入邮箱
				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.CompanyName && this.bindType != 'Modify') {
					message.info("Please enter occupation");
					return;
				}
				if (!this.Country && this.bindType != 'Modify') {
					message.info("Please select a country");
					return;
				}
				if (!this.selectSex && this.bindType != 'Modify') {
					message.info("Please select a title");
					return;
				}
				if (!this.surname && this.bindType != 'Modify') {
					message.info("Please select a surname");
					return;
				}
				if (!this.givenName && this.bindType != 'Modify') {
					message.info("Please select a givenName");
					return;
				}
				let type = 'BIND_MAILBOX'
				if(this.email == this.userDetail.email && this.bindType != 'Modify')type = 'UPDATE_USERINFO'
				let data = {
					"email": this.email,
					"ip": "",
					"operationType": type,
					occupation:this.CompanyName,
					country:this.Country,
					title:this.selectSex,
					surname:this.surname,
					givenName:this.givenName,
					userId:this.userDetail?.userId,
				};
				if(this.loginTime){
					this.loginTime = false
					Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
					(rv: any) => {
						if(type == 'UPDATE_USERINFO')this.setSuccessLogin(rv)
						this.emailStap = 2;
						if (rv) {
							this.userId = rv.userId
							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'
        },
		setSuccessLogin(rv:any){
			if (rv) {
				let value = {
					email:this.email,
					occupation:this.CompanyName,
					country:this.Country,
				}
				this.store.commit("upUserDetail", value)
				window.location.reload();
				this.cancelDsign()
			}
		},
        //邮箱登录提交
        submitEmailLogin(emailVerifyCode: any) {
            let data = {
                userEmail: this.email,
                emailVerifyCode: emailVerifyCode,
            };
            Https.axiosPost(Https.httpUrls.accountBindEmail, data).then(
                (rv: any) => {
					if(rv.token)setCookie("token", rv.token);
					this.setSuccessLogin(rv)
                }
			).catch(res=>{
			});
        },
        //创建定时器
        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);
            }
        },
		cancelDsign(){
			this.store.commit('setIsBindEmail', false)
			this.emailStap = 1
		},
		setBack(){
            this.router.push({path:'/login'})
		}
    },
});
</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>
.bindEmail{
	:deep(.ant-modal-mask){
		background: #666666db;
	}
}
.generalModel_btn{
	&.back{
		.generalModel_closeIcon{
			border-radius: 0;
			right: auto;
			left: 0;
			border: none;
			font-size: 2rem;
			font-weight: 600;
			transform: translate(100%, 100%);
			.back_text{
				text-decoration: underline;
				white-space: nowrap;
			}
			span{
				margin-right: .5rem;
			}
		}
	}
}
.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.8rem;
                    // color: #666666;
					font-weight: 500;
					color: #000;
                    display: flex;
                    justify-content: space-between;
                    box-sizing: border-box;
					> .must{
						color: red;
						margin-right: auto;
						margin-left: 2px;
						margin-top: -1%;
					}
					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"]{
					height: 30rem;
					>*{
						opacity: 0;
					}
					.login_form_email{
						opacity: 1;
					}
				}
                .password_input_block{
                    position: relative;

                    .password_show_icon{
                        position: absolute;
                        font-size: 2.4rem;
                        right: 2rem;
            			top: 3.3rem;
                        cursor: pointer;
                    }
                }
				.gallerySelect{
                    margin-top: 1rem;
					:deep(.ant-select-selector){
						height: 5rem;
						border: 0.1rem solid #dfdfdf;
						border-radius: 2.5rem;
						align-items: center;
					}
					:deep(.ant-select-selector):hover{
						border: 0.1rem solid #000;
					}
				}
                .login_form_input {
                    width: 100%;
          			// height: 6.75rem;
					height: 5rem;
        	 	 	margin-top: 1rem;
                    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;
					&.active{
						color: #b8b8b8;
						background: #F9FAFA;
					}
					&:hover{
						border: 0.1rem solid #000;
					}
                    &::placeholder {
                        color: #a5b0c2;
                    }
                }
            }

            .email_last_step {
                // margin-top: 4rem;
				
                .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;
                }
            }
        }
    }


    .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: #000;
        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>