|  |  | @@ -1,8 +1,9 @@ | 
		
	
		
			
			|  |  |  | <template> | 
		
	
		
			
			|  |  |  | <div class="login-container"> | 
		
	
		
			
			|  |  |  | <div class="Version">Version 1.0.4 test</div> | 
		
	
		
			
			|  |  |  | <div class="videoBox"> | 
		
	
		
			
			|  |  |  | <video | 
		
	
		
			
			|  |  |  | src="../../assets/video/loginVideo.mp4" | 
		
	
		
			
			|  |  |  | src="https://video.metavatar.cc/sv/4aaaaa5e-18832dbb5e6/4aaaaa5e-18832dbb5e6.mp4" | 
		
	
		
			
			|  |  |  | muted | 
		
	
		
			
			|  |  |  | autoplay | 
		
	
		
			
			|  |  |  | loop | 
		
	
	
		
			
				|  |  | @@ -12,54 +13,50 @@ | 
		
	
		
			
			|  |  |  | v-if="isLogin" | 
		
	
		
			
			|  |  |  | ref="loginFormRef" | 
		
	
		
			
			|  |  |  | :model="loginData" | 
		
	
		
			
			|  |  |  | :rules="loginRules" | 
		
	
		
			
			|  |  |  | class="login-form" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <div class="flex text-white items-center py-4"> | 
		
	
		
			
			|  |  |  | <span class="text-2xl flex-1 text-center">{{ $t("login.title") }}</span> | 
		
	
		
			
			|  |  |  | <span class="text-2xl flex-1 text-center">{{ | 
		
	
		
			
			|  |  |  | $t("login.title") + " " + $t("login.login") | 
		
	
		
			
			|  |  |  | }}</span> | 
		
	
		
			
			|  |  |  | <lang-select style="color: #fff" /> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | <el-form-item prop="username"> | 
		
	
		
			
			|  |  |  | <el-form-item prop="email"> | 
		
	
		
			
			|  |  |  | <div class="p-2 text-white"> | 
		
	
		
			
			|  |  |  | <svg-icon icon-class="user" /> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <el-input | 
		
	
		
			
			|  |  |  | class="flex-1" | 
		
	
		
			
			|  |  |  | ref="username" | 
		
	
		
			
			|  |  |  | ref="email" | 
		
	
		
			
			|  |  |  | size="large" | 
		
	
		
			
			|  |  |  | v-model="loginData.username" | 
		
	
		
			
			|  |  |  | :placeholder="$t('login.username')" | 
		
	
		
			
			|  |  |  | name="username" | 
		
	
		
			
			|  |  |  | v-model="loginData.email" | 
		
	
		
			
			|  |  |  | :placeholder="$t('login.email')" | 
		
	
		
			
			|  |  |  | name="email" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | </el-form-item> | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | <el-tooltip | 
		
	
		
			
			|  |  |  | :disabled="isCapslock === false" | 
		
	
		
			
			|  |  |  | content="Caps lock is On" | 
		
	
		
			
			|  |  |  | placement="right" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <el-form-item prop="password"> | 
		
	
		
			
			|  |  |  | <span class="p-2 text-white"> | 
		
	
		
			
			|  |  |  | <svg-icon icon-class="password" /> | 
		
	
		
			
			|  |  |  | </span> | 
		
	
		
			
			|  |  |  | <el-input | 
		
	
		
			
			|  |  |  | class="flex-1" | 
		
	
		
			
			|  |  |  | v-model="loginData.password" | 
		
	
		
			
			|  |  |  | placeholder="密码" | 
		
	
		
			
			|  |  |  | :type="passwordVisible === false ? 'password' : 'input'" | 
		
	
		
			
			|  |  |  | size="large" | 
		
	
		
			
			|  |  |  | name="password" | 
		
	
		
			
			|  |  |  | @keyup="checkCapslock" | 
		
	
		
			
			|  |  |  | @keyup.enter="handleLogin" | 
		
	
		
			
			|  |  |  | <el-form-item prop="password"> | 
		
	
		
			
			|  |  |  | <span class="p-2 text-white"> | 
		
	
		
			
			|  |  |  | <svg-icon icon-class="password" /> | 
		
	
		
			
			|  |  |  | </span> | 
		
	
		
			
			|  |  |  | <el-input | 
		
	
		
			
			|  |  |  | class="flex-1" | 
		
	
		
			
			|  |  |  | v-model="loginData.password" | 
		
	
		
			
			|  |  |  | :placeholder="$t('login.password')" | 
		
	
		
			
			|  |  |  | :type="passwordVisible === false ? 'password' : 'input'" | 
		
	
		
			
			|  |  |  | size="large" | 
		
	
		
			
			|  |  |  | name="password" | 
		
	
		
			
			|  |  |  | @keyup.enter="handleLogin" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | <span class="mr-2" @click="passwordVisible = !passwordVisible"> | 
		
	
		
			
			|  |  |  | <svg-icon | 
		
	
		
			
			|  |  |  | :icon-class="passwordVisible === false ? 'eye' : 'eye-open'" | 
		
	
		
			
			|  |  |  | class="text-white cursor-pointer" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | <span class="mr-2" @click="passwordVisible = !passwordVisible"> | 
		
	
		
			
			|  |  |  | <svg-icon | 
		
	
		
			
			|  |  |  | :icon-class="passwordVisible === false ? 'eye' : 'eye-open'" | 
		
	
		
			
			|  |  |  | class="text-white cursor-pointer" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | </span> | 
		
	
		
			
			|  |  |  | </el-form-item> | 
		
	
		
			
			|  |  |  | </el-tooltip> | 
		
	
		
			
			|  |  |  | </span> | 
		
	
		
			
			|  |  |  | </el-form-item> | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | <!-- 验证码 --> | 
		
	
		
			
			|  |  |  | <el-form-item prop="verifyCode"> | 
		
	
	
		
			
				|  |  | @@ -70,13 +67,13 @@ | 
		
	
		
			
			|  |  |  | v-model="loginData.verifyCode" | 
		
	
		
			
			|  |  |  | auto-complete="off" | 
		
	
		
			
			|  |  |  | :placeholder="$t('login.verifyCode')" | 
		
	
		
			
			|  |  |  | class="w-[60%]" | 
		
	
		
			
			|  |  |  | class="flex-1" | 
		
	
		
			
			|  |  |  | @keyup.enter="handleLogin" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | <div class="captcha"> | 
		
	
		
			
			|  |  |  | <img :src="captchaBase64" @click="getCaptcha" /> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <span class="captcha"> | 
		
	
		
			
			|  |  |  | <img v-if="showCodeImg" :src="verifyCodeUrl" @click="getCode" /> | 
		
	
		
			
			|  |  |  | </span> | 
		
	
		
			
			|  |  |  | </el-form-item> | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | <el-button | 
		
	
	
		
			
				|  |  | @@ -85,11 +82,28 @@ | 
		
	
		
			
			|  |  |  | type="primary" | 
		
	
		
			
			|  |  |  | class="loginBtn" | 
		
	
		
			
			|  |  |  | @click.prevent="handleLogin" | 
		
	
		
			
			|  |  |  | >{{ $t("login.login") }} | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <el-icon | 
		
	
		
			
			|  |  |  | v-if="isLogining" | 
		
	
		
			
			|  |  |  | style="margin-right: 10px" | 
		
	
		
			
			|  |  |  | class="is-loading" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <svg | 
		
	
		
			
			|  |  |  | viewBox="0 0 1024 1024" | 
		
	
		
			
			|  |  |  | xmlns="http://www.w3.org/2000/svg" | 
		
	
		
			
			|  |  |  | data-v-ea893728="" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <path | 
		
	
		
			
			|  |  |  | fill="currentColor" | 
		
	
		
			
			|  |  |  | d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z" | 
		
	
		
			
			|  |  |  | ></path> | 
		
	
		
			
			|  |  |  | </svg> | 
		
	
		
			
			|  |  |  | </el-icon> | 
		
	
		
			
			|  |  |  | {{ $t("login.loginBtn") }} | 
		
	
		
			
			|  |  |  | </el-button> | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'"> | 
		
	
		
			
			|  |  |  | <div style="margin-bottom: 5px"> | 
		
	
		
			
			|  |  |  | <div style="margin-bottom: 5px" @click="loginFlag"> | 
		
	
		
			
			|  |  |  | <span class="join">{{ $t("login.signUp") }}</span> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div> | 
		
	
	
		
			
				|  |  | @@ -101,72 +115,70 @@ | 
		
	
		
			
			|  |  |  | <el-form | 
		
	
		
			
			|  |  |  | v-if="!isLogin" | 
		
	
		
			
			|  |  |  | ref="loginFormRef" | 
		
	
		
			
			|  |  |  | :model="loginData" | 
		
	
		
			
			|  |  |  | :model="loginData2" | 
		
	
		
			
			|  |  |  | :rules="loginRules" | 
		
	
		
			
			|  |  |  | class="login-form" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <div class="flex text-white items-center py-4"> | 
		
	
		
			
			|  |  |  | <span class="text-2xl flex-1 text-center">{{ $t("login.title") }}</span> | 
		
	
		
			
			|  |  |  | <span class="text-2xl flex-1 text-center">{{ | 
		
	
		
			
			|  |  |  | $t("login.title") + " " + $t("login.register") | 
		
	
		
			
			|  |  |  | }}</span> | 
		
	
		
			
			|  |  |  | <lang-select style="color: #fff" /> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | <el-form-item prop="username"> | 
		
	
		
			
			|  |  |  | <el-form-item prop="email"> | 
		
	
		
			
			|  |  |  | <div class="p-2 text-white"> | 
		
	
		
			
			|  |  |  | <svg-icon icon-class="user" /> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <el-input | 
		
	
		
			
			|  |  |  | class="flex-1" | 
		
	
		
			
			|  |  |  | ref="username" | 
		
	
		
			
			|  |  |  | ref="email" | 
		
	
		
			
			|  |  |  | size="large" | 
		
	
		
			
			|  |  |  | v-model="loginData.username" | 
		
	
		
			
			|  |  |  | :placeholder="$t('login.username')" | 
		
	
		
			
			|  |  |  | name="username" | 
		
	
		
			
			|  |  |  | v-model="loginData2.email" | 
		
	
		
			
			|  |  |  | :placeholder="$t('login.email')" | 
		
	
		
			
			|  |  |  | name="email" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | </el-form-item> | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | <el-tooltip | 
		
	
		
			
			|  |  |  | :disabled="isCapslock === false" | 
		
	
		
			
			|  |  |  | content="Caps lock is On" | 
		
	
		
			
			|  |  |  | placement="right" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <el-form-item prop="password"> | 
		
	
		
			
			|  |  |  | <span class="p-2 text-white"> | 
		
	
		
			
			|  |  |  | <svg-icon icon-class="password" /> | 
		
	
		
			
			|  |  |  | </span> | 
		
	
		
			
			|  |  |  | <el-input | 
		
	
		
			
			|  |  |  | class="flex-1" | 
		
	
		
			
			|  |  |  | v-model="loginData.password" | 
		
	
		
			
			|  |  |  | placeholder="密码" | 
		
	
		
			
			|  |  |  | :type="passwordVisible === false ? 'password' : 'input'" | 
		
	
		
			
			|  |  |  | size="large" | 
		
	
		
			
			|  |  |  | name="password" | 
		
	
		
			
			|  |  |  | @keyup="checkCapslock" | 
		
	
		
			
			|  |  |  | @keyup.enter="handleLogin" | 
		
	
		
			
			|  |  |  | <el-form-item prop="password"> | 
		
	
		
			
			|  |  |  | <span class="p-2 text-white"> | 
		
	
		
			
			|  |  |  | <svg-icon icon-class="password" /> | 
		
	
		
			
			|  |  |  | </span> | 
		
	
		
			
			|  |  |  | <el-input | 
		
	
		
			
			|  |  |  | class="flex-1" | 
		
	
		
			
			|  |  |  | v-model="loginData2.password" | 
		
	
		
			
			|  |  |  | :placeholder="$t('login.password')" | 
		
	
		
			
			|  |  |  | :type="passwordVisible === false ? 'password' : 'input'" | 
		
	
		
			
			|  |  |  | size="large" | 
		
	
		
			
			|  |  |  | name="password" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | <span class="mr-2" @click="passwordVisible = !passwordVisible"> | 
		
	
		
			
			|  |  |  | <svg-icon | 
		
	
		
			
			|  |  |  | :icon-class="passwordVisible === false ? 'eye' : 'eye-open'" | 
		
	
		
			
			|  |  |  | class="text-white cursor-pointer" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | <span class="mr-2" @click="passwordVisible = !passwordVisible"> | 
		
	
		
			
			|  |  |  | <svg-icon | 
		
	
		
			
			|  |  |  | :icon-class="passwordVisible === false ? 'eye' : 'eye-open'" | 
		
	
		
			
			|  |  |  | class="text-white cursor-pointer" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | </span> | 
		
	
		
			
			|  |  |  | </el-form-item> | 
		
	
		
			
			|  |  |  | </el-tooltip> | 
		
	
		
			
			|  |  |  | </span> | 
		
	
		
			
			|  |  |  | </el-form-item> | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | <!-- 验证码 --> | 
		
	
		
			
			|  |  |  | <el-form-item prop="verifyCode"> | 
		
	
		
			
			|  |  |  | <el-form-item prop="confirmPassword"> | 
		
	
		
			
			|  |  |  | <span class="p-2 text-white"> | 
		
	
		
			
			|  |  |  | <svg-icon icon-class="verify_code" /> | 
		
	
		
			
			|  |  |  | <svg-icon icon-class="password" /> | 
		
	
		
			
			|  |  |  | </span> | 
		
	
		
			
			|  |  |  | <el-input | 
		
	
		
			
			|  |  |  | v-model="loginData.verifyCode" | 
		
	
		
			
			|  |  |  | auto-complete="off" | 
		
	
		
			
			|  |  |  | :placeholder="$t('login.verifyCode')" | 
		
	
		
			
			|  |  |  | class="w-[60%]" | 
		
	
		
			
			|  |  |  | @keyup.enter="handleLogin" | 
		
	
		
			
			|  |  |  | class="flex-1" | 
		
	
		
			
			|  |  |  | v-model="loginData2.confirmPassword" | 
		
	
		
			
			|  |  |  | :placeholder="$t('login.confirmPassword')" | 
		
	
		
			
			|  |  |  | :type="passwordVisible === false ? 'password' : 'input'" | 
		
	
		
			
			|  |  |  | size="large" | 
		
	
		
			
			|  |  |  | name="confirmPassword" | 
		
	
		
			
			|  |  |  | @keyup.enter="handleRegister" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | <div class="captcha"> | 
		
	
		
			
			|  |  |  | <img :src="captchaBase64" @click="getCaptcha" /> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <span class="mr-2" @click="passwordVisible = !passwordVisible"> | 
		
	
		
			
			|  |  |  | <svg-icon | 
		
	
		
			
			|  |  |  | :icon-class="passwordVisible === false ? 'eye' : 'eye-open'" | 
		
	
		
			
			|  |  |  | class="text-white cursor-pointer" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | </span> | 
		
	
		
			
			|  |  |  | </el-form-item> | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | <el-button | 
		
	
	
		
			
				|  |  | @@ -174,13 +186,30 @@ | 
		
	
		
			
			|  |  |  | :loading="loading" | 
		
	
		
			
			|  |  |  | type="primary" | 
		
	
		
			
			|  |  |  | class="loginBtn" | 
		
	
		
			
			|  |  |  | @click.prevent="handleLogin" | 
		
	
		
			
			|  |  |  | >{{ $t("login.login") }} | 
		
	
		
			
			|  |  |  | @click.prevent="handleRegister" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <el-icon | 
		
	
		
			
			|  |  |  | v-if="isRegistering" | 
		
	
		
			
			|  |  |  | style="margin-right: 10px" | 
		
	
		
			
			|  |  |  | class="is-loading" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <svg | 
		
	
		
			
			|  |  |  | viewBox="0 0 1024 1024" | 
		
	
		
			
			|  |  |  | xmlns="http://www.w3.org/2000/svg" | 
		
	
		
			
			|  |  |  | data-v-ea893728="" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <path | 
		
	
		
			
			|  |  |  | fill="currentColor" | 
		
	
		
			
			|  |  |  | d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z" | 
		
	
		
			
			|  |  |  | ></path> | 
		
	
		
			
			|  |  |  | </svg> | 
		
	
		
			
			|  |  |  | </el-icon> | 
		
	
		
			
			|  |  |  | {{ $t("login.registerBtn") }} | 
		
	
		
			
			|  |  |  | </el-button> | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'"> | 
		
	
		
			
			|  |  |  | <div style="margin-bottom: 5px" @click="loginFlag"> | 
		
	
		
			
			|  |  |  | <span class="join">{{ $t("login.signUp") }}</span> | 
		
	
		
			
			|  |  |  | <span class="join">{{ $t("login.signIn") }}</span> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div> | 
		
	
		
			
			|  |  |  | <span class="join">{{ $t("login.forgetPwd") }}</span> | 
		
	
	
		
			
				|  |  | @@ -191,36 +220,36 @@ | 
		
	
		
			
			|  |  |  | </template> | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | <script setup lang="ts"> | 
		
	
		
			
			|  |  |  | import router from "@/router"; | 
		
	
		
			
			|  |  |  | import LangSelect from "@/components/LangSelect/index.vue"; | 
		
	
		
			
			|  |  |  | import SvgIcon from "@/components/SvgIcon/index.vue"; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | import { | 
		
	
		
			
			|  |  |  | register, | 
		
	
		
			
			|  |  |  | login, | 
		
	
		
			
			|  |  |  | sendRegisterEmail, | 
		
	
		
			
			|  |  |  | getCodeImgUrl, | 
		
	
		
			
			|  |  |  | } from "@/apis/login"; | 
		
	
		
			
			|  |  |  | import axios from "axios"; | 
		
	
		
			
			|  |  |  | // 状态管理依赖 | 
		
	
		
			
			|  |  |  | import { useUserStore } from "@/store/modules/user"; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | // API依赖 | 
		
	
		
			
			|  |  |  | import { LocationQuery, LocationQueryValue, useRoute } from "vue-router"; | 
		
	
		
			
			|  |  |  | import { getCaptchaApi } from "@/api/auth"; | 
		
	
		
			
			|  |  |  | import { LoginData } from "@/api/auth/types"; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | import { | 
		
	
		
			
			|  |  |  | LocationQuery, | 
		
	
		
			
			|  |  |  | LocationQueryValue, | 
		
	
		
			
			|  |  |  | useRoute, | 
		
	
		
			
			|  |  |  | useRouter, | 
		
	
		
			
			|  |  |  | } from "vue-router"; | 
		
	
		
			
			|  |  |  | import { useI18n } from "vue-i18n"; | 
		
	
		
			
			|  |  |  | const { locale } = useI18n(); | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | const { locale } = useI18n(); | 
		
	
		
			
			|  |  |  | const currentLan = ref(locale); | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | const userStore = useUserStore(); | 
		
	
		
			
			|  |  |  | const route = useRoute(); | 
		
	
		
			
			|  |  |  |  | 
		
	
		
			
			|  |  |  | const router = useRouter(); | 
		
	
		
			
			|  |  |  | /** | 
		
	
		
			
			|  |  |  | * 按钮loading | 
		
	
		
			
			|  |  |  | */ | 
		
	
		
			
			|  |  |  | const loading = ref(false); | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | /** | 
		
	
		
			
			|  |  |  | * 是否大写锁定 | 
		
	
		
			
			|  |  |  | */ | 
		
	
		
			
			|  |  |  | const isCapslock = ref(false); | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | /** | 
		
	
		
			
			|  |  |  | * 密码是否可见 | 
		
	
		
			
			|  |  |  | */ | 
		
	
	
		
			
				|  |  | @@ -229,106 +258,313 @@ const passwordVisible = ref(false); | 
		
	
		
			
			|  |  |  | /** | 
		
	
		
			
			|  |  |  | * 验证码图片Base64字符串 | 
		
	
		
			
			|  |  |  | */ | 
		
	
		
			
			|  |  |  | const captchaBase64 = ref(); | 
		
	
		
			
			|  |  |  | const verifyCodeUrl = ref(); | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | /** | 
		
	
		
			
			|  |  |  | * 登录/注册 | 
		
	
		
			
			|  |  |  | */ | 
		
	
		
			
			|  |  |  | const isLogin = ref(true); | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | const showCodeImg = ref(true); | 
		
	
		
			
			|  |  |  | /** | 
		
	
		
			
			|  |  |  | * 登录表单引用 | 
		
	
		
			
			|  |  |  | */ | 
		
	
		
			
			|  |  |  | const loginFormRef = ref(ElForm); | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | const loginData = ref<LoginData>({ | 
		
	
		
			
			|  |  |  | username: "admin", | 
		
	
		
			
			|  |  |  | password: "123456", | 
		
	
		
			
			|  |  |  | const isLogining = ref(false); | 
		
	
		
			
			|  |  |  | const isRegistering = ref(false); | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | const loginData = ref({ | 
		
	
		
			
			|  |  |  | email: "", | 
		
	
		
			
			|  |  |  | password: "", | 
		
	
		
			
			|  |  |  | verifyCode: "", | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | const loginData2 = ref({ | 
		
	
		
			
			|  |  |  | email: "", | 
		
	
		
			
			|  |  |  | password: "", | 
		
	
		
			
			|  |  |  | confirmPassword: "", | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | const loginRules = { | 
		
	
		
			
			|  |  |  | username: [{ required: true, trigger: "blur" }], | 
		
	
		
			
			|  |  |  | const loginRules = ref({ | 
		
	
		
			
			|  |  |  | email: [ | 
		
	
		
			
			|  |  |  | { | 
		
	
		
			
			|  |  |  | required: true, | 
		
	
		
			
			|  |  |  | trigger: "blur", | 
		
	
		
			
			|  |  |  | validator: emailValidator, | 
		
	
		
			
			|  |  |  | }, | 
		
	
		
			
			|  |  |  | ], | 
		
	
		
			
			|  |  |  | password: [{ required: true, trigger: "blur", validator: passwordValidator }], | 
		
	
		
			
			|  |  |  | verifyCode: [{ required: true, trigger: "blur" }], | 
		
	
		
			
			|  |  |  | }; | 
		
	
		
			
			|  |  |  | confirmPassword: [ | 
		
	
		
			
			|  |  |  | { required: true, trigger: "blur", validator: confirmPasswordValidator }, | 
		
	
		
			
			|  |  |  | ], | 
		
	
		
			
			|  |  |  | verifyCode: [ | 
		
	
		
			
			|  |  |  | { | 
		
	
		
			
			|  |  |  | required: true, | 
		
	
		
			
			|  |  |  | trigger: "blur", | 
		
	
		
			
			|  |  |  | message: | 
		
	
		
			
			|  |  |  | currentLan.value == "zh-cn" | 
		
	
		
			
			|  |  |  | ? "请输入验证码" | 
		
	
		
			
			|  |  |  | : "Please input verifyCode", | 
		
	
		
			
			|  |  |  | }, | 
		
	
		
			
			|  |  |  | ], | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | watch(currentLan, (newValue, oldValue) => { | 
		
	
		
			
			|  |  |  | const loginRule = loginRules.value; | 
		
	
		
			
			|  |  |  | loginRule.verifyCode[0].message = | 
		
	
		
			
			|  |  |  | newValue == "zh-cn" ? "请输入验证码" : "Please input verifyCode"; | 
		
	
		
			
			|  |  |  | setTimeout(() => { | 
		
	
		
			
			|  |  |  | loginFormRef.value.resetFields(); | 
		
	
		
			
			|  |  |  | getInfo(); | 
		
	
		
			
			|  |  |  | }, 100); | 
		
	
		
			
			|  |  |  | // 切换语言刷新验证码 | 
		
	
		
			
			|  |  |  | getCode(); | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | /** | 
		
	
		
			
			|  |  |  | * @description: 切换登录/注册状态 | 
		
	
		
			
			|  |  |  | */ | 
		
	
		
			
			|  |  |  | function loginFlag() { | 
		
	
		
			
			|  |  |  | isLogin.value = !isLogin; | 
		
	
		
			
			|  |  |  | console.log(isLogin.value, "isLogin.value"); | 
		
	
		
			
			|  |  |  | isLogin.value = !isLogin.value; | 
		
	
		
			
			|  |  |  | // 切换登录/注册状态刷新验证码 | 
		
	
		
			
			|  |  |  | getCode(); | 
		
	
		
			
			|  |  |  | setTimeout(() => { | 
		
	
		
			
			|  |  |  | loginFormRef.value.resetFields(); | 
		
	
		
			
			|  |  |  | }, 100); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | /** | 
		
	
		
			
			|  |  |  | * 密码校验器 | 
		
	
		
			
			|  |  |  | * @description: 将账户/密码存储在本地 | 
		
	
		
			
			|  |  |  | * @param:email,password | 
		
	
		
			
			|  |  |  | */ | 
		
	
		
			
			|  |  |  | function passwordValidator(rule: any, value: any, callback: any) { | 
		
	
		
			
			|  |  |  | if (value.length < 6) { | 
		
	
		
			
			|  |  |  | callback(new Error("The password can not be less than 6 digits")); | 
		
	
		
			
			|  |  |  | function saveInfo(data: any) { | 
		
	
		
			
			|  |  |  | const userInfo = JSON.stringify({ | 
		
	
		
			
			|  |  |  | email: data.email, | 
		
	
		
			
			|  |  |  | password: data.password, | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | // 将用户信息加密 | 
		
	
		
			
			|  |  |  | const enCodeUserInfo = encodeURI(userInfo); | 
		
	
		
			
			|  |  |  | localStorage.setItem("userInfo", enCodeUserInfo); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | /** | 
		
	
		
			
			|  |  |  | * @description: 将存储在本地的账户/密码恢复至登录表单 | 
		
	
		
			
			|  |  |  | */ | 
		
	
		
			
			|  |  |  | function getInfo() { | 
		
	
		
			
			|  |  |  | const data = localStorage.getItem("userInfo"); | 
		
	
		
			
			|  |  |  | // 将用户信息解密 | 
		
	
		
			
			|  |  |  | const deCodeUserInfo = decodeURI(data as any); | 
		
	
		
			
			|  |  |  | const userInfo = JSON.parse(deCodeUserInfo); | 
		
	
		
			
			|  |  |  | if (userInfo) { | 
		
	
		
			
			|  |  |  | loginData.value.email = userInfo.email ? userInfo.email : ""; | 
		
	
		
			
			|  |  |  | loginData.value.password = userInfo.password ? userInfo.password : ""; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | /** | 
		
	
		
			
			|  |  |  | * 邮箱校验器 | 
		
	
		
			
			|  |  |  | */ | 
		
	
		
			
			|  |  |  | function emailValidator(rule: any, value: any, callback: any) { | 
		
	
		
			
			|  |  |  | const msg = | 
		
	
		
			
			|  |  |  | currentLan.value == "zh-cn" | 
		
	
		
			
			|  |  |  | ? "邮箱不能为空!" | 
		
	
		
			
			|  |  |  | : "The E-amil can not be empty"; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | const msg2 = | 
		
	
		
			
			|  |  |  | currentLan.value == "zh-cn" ? "邮箱格式不正确!" : "Incorrect email format"; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | const emailReg = | 
		
	
		
			
			|  |  |  | /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | if (!value) { | 
		
	
		
			
			|  |  |  | callback(new Error(msg)); | 
		
	
		
			
			|  |  |  | } else if (!emailReg.test(value)) { | 
		
	
		
			
			|  |  |  | callback(new Error(msg2)); | 
		
	
		
			
			|  |  |  | } else { | 
		
	
		
			
			|  |  |  | callback(); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | /** | 
		
	
		
			
			|  |  |  | * 检查输入大小写状态 | 
		
	
		
			
			|  |  |  | * 密码校验器 | 
		
	
		
			
			|  |  |  | */ | 
		
	
		
			
			|  |  |  | function checkCapslock(e: any) { | 
		
	
		
			
			|  |  |  | const { key } = e; | 
		
	
		
			
			|  |  |  | isCapslock.value = key && key.length === 1 && key >= "A" && key <= "Z"; | 
		
	
		
			
			|  |  |  | function passwordValidator(rule: any, value: any, callback: any) { | 
		
	
		
			
			|  |  |  | const msg = | 
		
	
		
			
			|  |  |  | currentLan.value == "zh-cn" | 
		
	
		
			
			|  |  |  | ? "密码不能为空!" | 
		
	
		
			
			|  |  |  | : "The password can not be empty"; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | const msg2 = | 
		
	
		
			
			|  |  |  | currentLan.value == "zh-cn" | 
		
	
		
			
			|  |  |  | ? "密码至少为6位!" | 
		
	
		
			
			|  |  |  | : "The password can not be less than 6 digits"; | 
		
	
		
			
			|  |  |  | if (!value) { | 
		
	
		
			
			|  |  |  | callback(new Error(msg)); | 
		
	
		
			
			|  |  |  | } else if (value.length < 6) { | 
		
	
		
			
			|  |  |  | callback(new Error(msg2)); | 
		
	
		
			
			|  |  |  | } else { | 
		
	
		
			
			|  |  |  | callback(); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | /** | 
		
	
		
			
			|  |  |  | * 获取验证码 | 
		
	
		
			
			|  |  |  | * 确认密码校验器 | 
		
	
		
			
			|  |  |  | */ | 
		
	
		
			
			|  |  |  | function getCaptcha() { | 
		
	
		
			
			|  |  |  | getCaptchaApi().then(({ data }) => { | 
		
	
		
			
			|  |  |  | const { verifyCodeBase64, verifyCodeKey } = data; | 
		
	
		
			
			|  |  |  | loginData.value.verifyCodeKey = verifyCodeKey; | 
		
	
		
			
			|  |  |  | captchaBase64.value = verifyCodeBase64; | 
		
	
		
			
			|  |  |  | function confirmPasswordValidator(rule: any, value: any, callback: any) { | 
		
	
		
			
			|  |  |  | const msg = | 
		
	
		
			
			|  |  |  | currentLan.value == "zh-cn" | 
		
	
		
			
			|  |  |  | ? "确认密码不能为空!" | 
		
	
		
			
			|  |  |  | : "The Confirm password can not be empty"; | 
		
	
		
			
			|  |  |  | const msg2 = | 
		
	
		
			
			|  |  |  | currentLan.value == "zh-cn" | 
		
	
		
			
			|  |  |  | ? "两次输入密码不一致!" | 
		
	
		
			
			|  |  |  | : "Confirm Passward entered should match"; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | if (!value) { | 
		
	
		
			
			|  |  |  | callback(new Error(msg)); | 
		
	
		
			
			|  |  |  | } else if (value !== loginData2.value.password) { | 
		
	
		
			
			|  |  |  | callback(new Error(msg2)); | 
		
	
		
			
			|  |  |  | } else { | 
		
	
		
			
			|  |  |  | callback(); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | // 注册行为 | 
		
	
		
			
			|  |  |  | function handleRegister() { | 
		
	
		
			
			|  |  |  | loginFormRef.value.validate((val: any) => { | 
		
	
		
			
			|  |  |  | if (val) { | 
		
	
		
			
			|  |  |  | const data = { | 
		
	
		
			
			|  |  |  | email: loginData2.value.email, | 
		
	
		
			
			|  |  |  | password: loginData2.value.password, | 
		
	
		
			
			|  |  |  | }; | 
		
	
		
			
			|  |  |  | isRegistering.value = true; | 
		
	
		
			
			|  |  |  | doRegister(data); | 
		
	
		
			
			|  |  |  | } else { | 
		
	
		
			
			|  |  |  | const msg = | 
		
	
		
			
			|  |  |  | currentLan.value == "zh-cn" | 
		
	
		
			
			|  |  |  | ? "请检查信息格式!" | 
		
	
		
			
			|  |  |  | : "Please check the format !"; | 
		
	
		
			
			|  |  |  | ElMessage.error(msg); | 
		
	
		
			
			|  |  |  | return; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | /** | 
		
	
		
			
			|  |  |  | * 登录 | 
		
	
		
			
			|  |  |  | */ | 
		
	
		
			
			|  |  |  | // 登录行为 | 
		
	
		
			
			|  |  |  | function handleLogin() { | 
		
	
		
			
			|  |  |  | loginFormRef.value.validate((valid: boolean) => { | 
		
	
		
			
			|  |  |  | if (valid) { | 
		
	
		
			
			|  |  |  | loading.value = true; | 
		
	
		
			
			|  |  |  | userStore | 
		
	
		
			
			|  |  |  | .login(loginData.value) | 
		
	
		
			
			|  |  |  | .then(() => { | 
		
	
		
			
			|  |  |  | const query: LocationQuery = route.query; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | const redirect = (query.redirect as LocationQueryValue) ?? "/"; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | const otherQueryParams = Object.keys(query).reduce( | 
		
	
		
			
			|  |  |  | (acc: any, cur: string) => { | 
		
	
		
			
			|  |  |  | if (cur !== "redirect") { | 
		
	
		
			
			|  |  |  | acc[cur] = query[cur]; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | return acc; | 
		
	
		
			
			|  |  |  | }, | 
		
	
		
			
			|  |  |  | {} | 
		
	
		
			
			|  |  |  | ); | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | router.push({ path: redirect, query: otherQueryParams }); | 
		
	
		
			
			|  |  |  | }) | 
		
	
		
			
			|  |  |  | .catch(() => { | 
		
	
		
			
			|  |  |  | // 验证失败,重新生成验证码 | 
		
	
		
			
			|  |  |  | getCaptcha(); | 
		
	
		
			
			|  |  |  | }) | 
		
	
		
			
			|  |  |  | .finally(() => { | 
		
	
		
			
			|  |  |  | loading.value = false; | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | loginFormRef.value.validate((val: any) => { | 
		
	
		
			
			|  |  |  | if (val) { | 
		
	
		
			
			|  |  |  | const data = { | 
		
	
		
			
			|  |  |  | email: loginData.value.email, | 
		
	
		
			
			|  |  |  | password: loginData.value.password, | 
		
	
		
			
			|  |  |  | code: loginData.value.verifyCode, | 
		
	
		
			
			|  |  |  | }; | 
		
	
		
			
			|  |  |  | isLogining.value = true; | 
		
	
		
			
			|  |  |  | doLogin(data); | 
		
	
		
			
			|  |  |  | } else { | 
		
	
		
			
			|  |  |  | const msg = | 
		
	
		
			
			|  |  |  | currentLan.value == "zh-cn" | 
		
	
		
			
			|  |  |  | ? "请检查信息格式!" | 
		
	
		
			
			|  |  |  | : "Please check the format !"; | 
		
	
		
			
			|  |  |  | ElMessage.error(msg); | 
		
	
		
			
			|  |  |  | return; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | function getCode() { | 
		
	
		
			
			|  |  |  | showCodeImg.value = false; | 
		
	
		
			
			|  |  |  | axios({ | 
		
	
		
			
			|  |  |  | url: getCodeImgUrl, | 
		
	
		
			
			|  |  |  | method: "get", | 
		
	
		
			
			|  |  |  | }).then(() => { | 
		
	
		
			
			|  |  |  | verifyCodeUrl.value = getCodeImgUrl; | 
		
	
		
			
			|  |  |  | showCodeImg.value = true; | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | /** | 
		
	
		
			
			|  |  |  | * @description:注册 | 
		
	
		
			
			|  |  |  | * @param {Object} data | 
		
	
		
			
			|  |  |  | * @return: data | 
		
	
		
			
			|  |  |  | */ | 
		
	
		
			
			|  |  |  | async function doRegister(data: object) { | 
		
	
		
			
			|  |  |  | const msg = | 
		
	
		
			
			|  |  |  | currentLan.value == "zh-cn" | 
		
	
		
			
			|  |  |  | ? "确认信息已发送至您的邮箱,请注意查收" | 
		
	
		
			
			|  |  |  | : "An email has been send to you, Please pay attention to confirm"; | 
		
	
		
			
			|  |  |  | await register(data) | 
		
	
		
			
			|  |  |  | .then((res) => { | 
		
	
		
			
			|  |  |  | console.log(res, "res"); | 
		
	
		
			
			|  |  |  | isRegistering.value = false; | 
		
	
		
			
			|  |  |  | ElMessage.success(msg); | 
		
	
		
			
			|  |  |  | // 注册成功将账号密码保存到本地 | 
		
	
		
			
			|  |  |  | saveInfo(data); | 
		
	
		
			
			|  |  |  | }) | 
		
	
		
			
			|  |  |  | .catch((err) => { | 
		
	
		
			
			|  |  |  | // 注册失败刷新验证码 | 
		
	
		
			
			|  |  |  | getCode(); | 
		
	
		
			
			|  |  |  | isRegistering.value = false; | 
		
	
		
			
			|  |  |  | console.log(err, "err"); | 
		
	
		
			
			|  |  |  | ElMessage.error(err.message); | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | /** | 
		
	
		
			
			|  |  |  | * @description:登录 | 
		
	
		
			
			|  |  |  | * @param {Object} data | 
		
	
		
			
			|  |  |  | * @return: data | 
		
	
		
			
			|  |  |  | */ | 
		
	
		
			
			|  |  |  | async function doLogin(data: any) { | 
		
	
		
			
			|  |  |  | const msg = | 
		
	
		
			
			|  |  |  | currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"; | 
		
	
		
			
			|  |  |  | await login(data) | 
		
	
		
			
			|  |  |  | .then((res) => { | 
		
	
		
			
			|  |  |  | console.log(res, "res"); | 
		
	
		
			
			|  |  |  | localStorage.setItem("AccessToken", res.data.token); | 
		
	
		
			
			|  |  |  | ElMessage.success(msg); | 
		
	
		
			
			|  |  |  | router.push("/createVideo"); | 
		
	
		
			
			|  |  |  | // 注册成功将账号密码保存到本地 | 
		
	
		
			
			|  |  |  | saveInfo(data); | 
		
	
		
			
			|  |  |  | isLogining.value = false; | 
		
	
		
			
			|  |  |  | }) | 
		
	
		
			
			|  |  |  | .catch((err) => { | 
		
	
		
			
			|  |  |  | console.log(err, "err"); | 
		
	
		
			
			|  |  |  | // 登录失败刷新验证码 | 
		
	
		
			
			|  |  |  | getCode(); | 
		
	
		
			
			|  |  |  | ElMessage.error(err.message); | 
		
	
		
			
			|  |  |  | isLogining.value = false; | 
		
	
		
			
			|  |  |  | if (err.code == 2112) { | 
		
	
		
			
			|  |  |  | reSendEmail(data.email); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | /** | 
		
	
		
			
			|  |  |  | * @description:重新发送邮件 | 
		
	
		
			
			|  |  |  | * @param {string} email | 
		
	
		
			
			|  |  |  | * @return: data | 
		
	
		
			
			|  |  |  | */ | 
		
	
		
			
			|  |  |  | async function reSendEmail(email: string) { | 
		
	
		
			
			|  |  |  | const msg = | 
		
	
		
			
			|  |  |  | currentLan.value == "zh-cn" | 
		
	
		
			
			|  |  |  | ? "确认信息已发送至您的邮箱,请注意查收!" | 
		
	
		
			
			|  |  |  | : "An email has been send to you, Please pay attention to confirm !"; | 
		
	
		
			
			|  |  |  | await sendRegisterEmail(email) | 
		
	
		
			
			|  |  |  | .then((res) => { | 
		
	
		
			
			|  |  |  | console.log(res, "res"); | 
		
	
		
			
			|  |  |  | ElMessage.success(msg); | 
		
	
		
			
			|  |  |  | }) | 
		
	
		
			
			|  |  |  | .catch((err) => { | 
		
	
		
			
			|  |  |  | console.log(err, "err"); | 
		
	
		
			
			|  |  |  | ElMessage.error(err.message); | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | onMounted(() => { | 
		
	
		
			
			|  |  |  | getCaptcha(); | 
		
	
		
			
			|  |  |  | getCode(); | 
		
	
		
			
			|  |  |  | getInfo(); | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | </script> | 
		
	
		
			
			|  |  |  | 
 | 
		
	
	
		
			
				|  |  | @@ -340,6 +576,13 @@ onMounted(() => { | 
		
	
		
			
			|  |  |  | overflow: hidden; | 
		
	
		
			
			|  |  |  | // background-color: #2d3a4b; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | .Version { | 
		
	
		
			
			|  |  |  | position: absolute; | 
		
	
		
			
			|  |  |  | bottom: 20px; | 
		
	
		
			
			|  |  |  | right: 20px; | 
		
	
		
			
			|  |  |  | color: #ffffff; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | .login-form { | 
		
	
		
			
			|  |  |  | position: absolute; | 
		
	
		
			
			|  |  |  | top: 46%; | 
		
	
	
		
			
				|  |  | @@ -348,7 +591,7 @@ onMounted(() => { | 
		
	
		
			
			|  |  |  | max-width: 100%; | 
		
	
		
			
			|  |  |  | padding: 20px; | 
		
	
		
			
			|  |  |  | overflow: hidden; | 
		
	
		
			
			|  |  |  | backdrop-filter: blur(5px); | 
		
	
		
			
			|  |  |  | backdrop-filter: blur(3px); | 
		
	
		
			
			|  |  |  | background: linear-gradient( | 
		
	
		
			
			|  |  |  | 123.64deg, | 
		
	
		
			
			|  |  |  | rgba(188, 193, 196, 0.1) -22.71%, | 
		
	
	
		
			
				|  |  | @@ -357,6 +600,7 @@ onMounted(() => { | 
		
	
		
			
			|  |  |  | border-radius: 20px; | 
		
	
		
			
			|  |  |  | transform: translateY(-50%); | 
		
	
		
			
			|  |  |  | border: 1px solid #cacaca; | 
		
	
		
			
			|  |  |  | transition: all 0.15s; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | .captcha { | 
		
	
		
			
			|  |  |  | position: absolute; | 
		
	
	
		
			
				|  |  | @@ -369,6 +613,9 @@ onMounted(() => { | 
		
	
		
			
			|  |  |  | cursor: pointer; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | &:hover { | 
		
	
		
			
			|  |  |  | backdrop-filter: blur(7px); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
	
		
			
				|  |  | @@ -423,10 +670,15 @@ onMounted(() => { | 
		
	
		
			
			|  |  |  | .videoBox { | 
		
	
		
			
			|  |  |  | position: absolute; | 
		
	
		
			
			|  |  |  | top: 0; | 
		
	
		
			
			|  |  |  | z-index: -1; | 
		
	
		
			
			|  |  |  | left: 0; | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | height: 100%; | 
		
	
		
			
			|  |  |  | opacity: 0.8; | 
		
	
		
			
			|  |  |  | z-index: -1; | 
		
	
		
			
			|  |  |  | video { | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | height: 100%; | 
		
	
		
			
			|  |  |  | object-fit: fill; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | .el-form-item { | 
		
	
	
		
			
				|  |  | 
 |