|
- <template>
- <div class="login-container">
- <div class="Version">Version 1.0.8 test</div>
- <div class="videoBox">
- <video
- src="https://video.metavatar.cc/sv/4aaaaa5e-18832dbb5e6/4aaaaa5e-18832dbb5e6.mp4"
- muted
- autoplay
- loop
- ></video>
- </div>
- <!-- 正常登录 isLogin == 1-->
- <el-form
- v-if="isLogin == 1"
- ref="loginFormRef"
- :model="loginData"
- :rules="loginRules"
- class="login-form"
- >
- <div class="flex text-white items-center">
- <span class="flex-1 text-center">{{
- $t("login.title") + " " + $t("login.login")
- }}</span>
- <el-tooltip
- class="box-item"
- effect="dark"
- :content="$t('navbar.LanguageChange')"
- placement="top-start"
- >
- <lang-select class="navItem" style="color: #ffffff" />
- </el-tooltip>
- </div>
-
- <el-form-item prop="username">
- <div class="text-white">
- <svg-icon icon-class="user" />
- </div>
- <el-input
- class="flex-1"
- ref="email"
- size="large"
- v-model="loginData.username"
- :placeholder="$t('login.username')"
- name="email"
- />
- </el-form-item>
-
- <el-form-item prop="password">
- <span class="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>
- </el-form-item>
-
- <!-- 验证码 -->
- <el-form-item prop="captcha">
- <span class="text-white">
- <svg-icon icon-class="verify_code" />
- </span>
- <el-input
- v-model="loginData.captcha"
- auto-complete="off"
- :placeholder="$t('login.captcha')"
- class="flex-1"
- @keyup.enter="handleLogin"
- />
-
- <span class="captcha">
- <img v-if="showCodeImg" :src="verifyCodeUrl" @click="getCode" />
- </span>
- </el-form-item>
-
- <el-button
- size="default"
- :loading="loading"
- type="primary"
- class="loginBtn"
- @click.prevent="handleLogin"
- >
- <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">
- <span class="join" @click="loginFlag(7)">{{
- $t("login.SMSLogin")
- }}</span>
- </div>
- <div>
- <span class="join" @click="loginFlag(3)">{{
- $t("login.forgetPwd")
- }}</span>
- </div>
- </div>
- </el-form>
- <!-- 注册账户之后输入短信验证码 isLogin == 6-->
-
- <!-- 忘记密码 isLogin == 3-->
- <el-form
- v-if="isLogin == 3"
- ref="loginFormRef"
- :model="loginData3"
- :rules="loginRules"
- class="login-form"
- >
- <div class="flex text-white items-center">
- <span class="flex-1 text-center">{{
- $t("login.title") + " " + $t("login.forgetPwdTitle")
- }}</span>
- <el-tooltip
- class="box-item"
- effect="dark"
- :content="$t('navbar.LanguageChange')"
- placement="top-start"
- >
- <lang-select class="navItem" style="color: #ffffff" />
- </el-tooltip>
- </div>
-
- <el-form-item prop="email">
- <div class="text-white">
- <svg-icon icon-class="user" />
- </div>
- <el-input
- class="flex-1"
- ref="email"
- size="large"
- v-model="loginData3.email"
- :placeholder="$t('login.email')"
- name="email"
- />
- </el-form-item>
- <!-- 验证码 -->
- <el-form-item prop="code">
- <span class="text-white">
- <svg-icon icon-class="verify_code" />
- </span>
- <el-input
- v-model="loginData3.code"
- auto-complete="off"
- :placeholder="$t('login.verifyCode')"
- class="flex-1"
- @keyup.enter="handleLogin"
- />
-
- <span class="captcha">
- <img v-if="showCodeImg" :src="verifyCodeUrl" @click="getCode" />
- </span>
- </el-form-item>
-
- <el-button
- size="default"
- :loading="loading"
- type="primary"
- class="loginBtn"
- @click.prevent="sendEmailforgetPwd"
- >
- <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.SendEmail") }}
- </el-button>
-
- <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
- <div style="margin-bottom: 5px" @click="loginFlag(1)">
- <span class="join">{{ $t("login.signIn") }}</span>
- </div>
- </div>
- </el-form>
- <!-- 重置密码 isLogin == 4-->
- <el-form
- v-if="isLogin == 4"
- ref="loginFormRef"
- :model="loginData4"
- :rules="loginRules"
- class="login-form"
- >
- <div class="flex text-white items-center">
- <span class="flex-1 text-center">{{
- $t("login.title") + " " + $t("login.resetPassword")
- }}</span>
- <el-tooltip
- class="box-item"
- effect="dark"
- :content="$t('navbar.LanguageChange')"
- placement="top-start"
- >
- <lang-select class="navItem" style="color: #ffffff" />
- </el-tooltip>
- </div>
-
- <el-form-item prop="verifyCode">
- <span class="text-white">
- <svg-icon icon-class="password" />
- </span>
- <el-input
- class="flex-1"
- v-model="loginData4.verifyCode"
- :placeholder="$t('login.SMSCode')"
- :type="'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>
- </el-form-item>
-
- <el-form-item prop="password">
- <span class="text-white">
- <svg-icon icon-class="password" />
- </span>
- <el-input
- class="flex-1"
- v-model="loginData4.password"
- :placeholder="$t('login.newPwd')"
- :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>
- </el-form-item>
-
- <el-form-item prop="confirmPassword4">
- <span class="text-white">
- <svg-icon icon-class="password" />
- </span>
- <el-input
- class="flex-1"
- v-model="loginData4.confirmPassword4"
- :placeholder="$t('login.confirmNewPwd')"
- :type="passwordVisible === false ? 'password' : 'input'"
- size="large"
- name="confirmPassword4"
- />
- <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
- size="default"
- :loading="loading"
- type="primary"
- class="loginBtn"
- @click.prevent="resetPwdForm"
- >
- <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.confirm") }}
- </el-button>
-
- <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
- <div style="margin-bottom: 5px" @click="loginFlag(1)">
- <span class="join">{{ $t("login.signIn") }}</span>
- </div>
- <!-- <div>
- <span
- class="join"
- @click="router.push({ path: 'createVideo', params: {} })"
- >{{ $t("login.gohome") }}</span
- >
- </div> -->
- </div>
- </el-form>
- <!-- 忘记密码邮件返回 isLogin == 5-->
- <el-form
- v-if="isLogin == 5"
- ref="loginFormRef"
- :model="loginData5"
- :rules="loginRules"
- class="login-form"
- >
- <div class="flex text-white items-center">
- <span class="flex-1 text-center">{{
- $t("login.title") + " " + $t("login.setNewPwd")
- }}</span>
- <el-tooltip
- class="box-item"
- effect="dark"
- :content="$t('navbar.LanguageChange')"
- placement="top-start"
- >
- <lang-select class="navItem" style="color: #ffffff" />
- </el-tooltip>
- </div>
-
- <el-form-item prop="newPwd">
- <div class="text-white">
- <svg-icon icon-class="password" />
- </div>
- <el-input
- class="flex-1"
- ref="email"
- size="large"
- v-model="loginData5.newPwd"
- :placeholder="$t('login.newPwd')"
- :type="passwordVisible === false ? 'password' : 'input'"
- name="password"
- />
- <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-form-item prop="confirmNewPwd">
- <div class="text-white">
- <svg-icon icon-class="password" />
- </div>
- <el-input
- class="flex-1"
- ref="email"
- size="large"
- v-model="loginData5.confirmNewPwd"
- :placeholder="$t('login.confirmNewPwd')"
- name="password"
- :type="passwordVisible === false ? 'password' : 'input'"
- />
- <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
- size="default"
- :loading="loading"
- type="primary"
- class="loginBtn"
- @click.prevent="resetPwdEmail"
- >
- <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.confirm") }}
- </el-button>
-
- <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
- <div style="margin-bottom: 5px" @click="loginFlag(1)">
- <span class="join">{{ $t("login.signIn") }}</span>
- </div>
- </div>
- </el-form>
- <!-- 短信登录 isLogin == 7-->
- <el-form
- v-if="isLogin == 7"
- ref="loginFormRef"
- :model="loginData7"
- :rules="loginRules"
- class="login-form"
- >
- <div class="flex text-white items-center">
- <span class="flex-1 text-center">{{
- $t("login.title") + " " + $t("login.login")
- }}</span>
- <el-tooltip
- class="box-item"
- effect="dark"
- :content="$t('navbar.LanguageChange')"
- placement="top-start"
- >
- <lang-select class="navItem" style="color: #ffffff" />
- </el-tooltip>
- </div>
-
- <el-form-item prop="email">
- <div class="text-white">
- <svg-icon icon-class="user" />
- </div>
- <el-input
- class="flex-1"
- ref="email"
- size="large"
- v-model="loginData7.email"
- :placeholder="$t('login.email')"
- name="email"
- />
- </el-form-item>
-
- <!-- 验证码 -->
- <el-form-item prop="verifyCode">
- <span class="text-white">
- <svg-icon icon-class="verify_code" />
- </span>
- <el-input
- v-model="loginData7.verifyCode"
- auto-complete="off"
- :placeholder="$t('login.SMSLogin')"
- class="flex-1"
- />
- <span class="captcha">
- <div v-if="SMSTimeOut == 0" @click="getSMSToLogin" class="sendSMSBtn">
- {{ $t("login.sendSMS") }}
- </div>
- <div v-if="SMSTimeOut != 0" class="sendSMSBtn">{{ SMSTimeOut }}s</div>
- </span>
- </el-form-item>
-
- <el-button
- size="default"
- :loading="loading"
- type="primary"
- class="loginBtn"
- @click.prevent="handleLoginBySMS"
- >
- <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">
- <span class="join" @click="loginFlag(1)">{{
- $t("login.pwsLogin")
- }}</span>
- </div>
- <div>
- <span class="join" @click="loginFlag(3)">{{
- $t("login.forgetPwd")
- }}</span>
- </div>
- </div>
- </el-form>
- <!-- 邀请码填写 isLogin == 8-->
- <el-form
- v-if="isLogin == 8"
- ref="loginFormRef"
- :model="loginData7"
- :rules="loginRules"
- class="login-form"
- >
- <div class="flex text-white items-center">
- <span class="flex-1 text-center">{{
- $t("login.title") + " " + $t("login.setInvitatioCode")
- }}</span>
- <el-tooltip
- class="box-item"
- effect="dark"
- :content="$t('navbar.LanguageChange')"
- placement="top-start"
- >
- <lang-select class="navItem" style="color: #ffffff" />
- </el-tooltip>
- </div>
-
- <el-form-item prop="verifyCode">
- <div class="text-white">
- <svg-icon icon-class="user" />
- </div>
- <el-input
- class="flex-1"
- ref="invitatioCode"
- size="large"
- v-model="loginData8.invitatioCode"
- :placeholder="$t('login.invitatioCode')"
- name="invitatioCode"
- />
- </el-form-item>
-
- <el-button
- size="default"
- :loading="loading"
- type="primary"
- class="loginBtn"
- @click.prevent="handleInvitatioCode"
- >
- <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.confirm") }}
- </el-button>
-
- <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
- <div style="margin-bottom: 5px" @click="loginFlag(1)">
- <span class="join">{{ $t("login.signIn") }}</span>
- </div>
- <div style="margin-bottom: 5px">
- <span class="join" @click="router.push('/createVideo')">{{
- $t("login.gohome")
- }}</span>
- </div>
- </div>
- </el-form>
- </div>
- </template>
-
- <script setup lang="ts">
- import LangSelect from "@/components/LangSelect/index.vue";
- import SvgIcon from "@/components/SvgIcon/index.vue";
- import {
- loginApi,
- sendRegisterEmail,
- getCodeImgUrl,
- sendUpdPwdEmailApi,
- doUpdPassApi,
- resetPwdEmailApi,
- resetPwdFormApi,
- getSMSToLoginApi,
- loginByMSMApi,
- doFindInviteCode,
- doUpdateInviteCode,
- } from "@/apis/login";
- import { getMenuNavApi } from "@/apis/Permission.js";
- import axios from "axios";
- // 状态管理依赖
-
- import { userInfoModules } from "@/store/modules/userInfo";
-
- // API依赖
- import {
- LocationQuery,
- LocationQueryValue,
- useRoute,
- useRouter,
- } from "vue-router";
- import { useI18n } from "vue-i18n";
-
- const { locale } = useI18n();
- const currentLan = ref(locale);
- const userInfoPinia = userInfoModules();
- const route = useRoute();
- const router = useRouter();
- /**
- * 按钮loading
- */
- const loading = ref(false);
-
- /**
- * 密码是否可见
- */
- const passwordVisible = ref(false);
-
- /**
- * 验证码图片Base64字符串
- */
- const verifyCodeUrl = ref();
-
- /**
- * 登录/注册 显示哪个表单
- */
- const isLogin = ref(1);
-
- const showCodeImg = ref(true);
- /**
- * 登录表单引用
- */
- const loginFormRef = ref(ElForm);
-
- const isLogining = ref(false);
- const isRegistering = ref(false);
-
- const loginData = ref({
- username: "",
- password: "",
- captcha: "",
- });
-
- const loginData2 = ref({
- email: "",
- password: "",
- confirmPassword: "",
- });
- const loginData3 = ref({
- email: "",
- code: "",
- });
- const loginData4 = ref({
- verifyCode: "",
- password: "",
- confirmPassword4: "",
- });
- const loginData5 = ref({
- newPwd: "",
- confirmNewPwd: "",
- });
- const loginData6 = ref({
- SMSCode: "",
- });
- const loginData7 = ref({
- email: "",
- verifyCode: "",
- });
- const loginData8 = ref({
- invitatioCode: "",
- });
- const loginRules = ref({
- username: [
- {
- required: true,
- trigger: "blur",
- validator: passwordValidator,
- },
- ],
- email: [
- {
- required: true,
- trigger: "blur",
- validator: emailValidator,
- },
- ],
- password: [{ required: true, trigger: "blur", validator: passwordValidator }],
-
- confirmPassword: [
- { required: true, trigger: "blur", validator: confirmPasswordValidator },
- ],
- captcha: [
- {
- required: true,
- trigger: "blur",
- message:
- currentLan.value == "zh-cn"
- ? "请输入验证码2"
- : "Please input verifyCode",
- },
- ],
- invitatioCode: [
- {
- required: true,
- trigger: "blur",
- message:
- currentLan.value == "zh-cn"
- ? "请输入邀请码"
- : "Please input invitation code",
- },
- ],
- oldPassword: [
- { required: true, trigger: "blur", validator: passwordValidator },
- ],
- confirmPassword4: [
- { required: true, trigger: "blur", validator: confirmPasswordValidator4 },
- ],
- newPwd: [{ required: true, trigger: "blur", validator: passwordValidator }],
- confirmNewPwd: [
- { required: true, trigger: "blur", validator: confirmPasswordValidator5 },
- ],
- });
-
- watch(currentLan, (newValue, oldValue) => {
- const loginRule = loginRules.value;
- loginRule.captcha[0].message =
- newValue == "zh-cn" ? "请输入验证码1" : "Please input verifyCode";
- setTimeout(() => {
- loginFormRef.value.resetFields();
- getInfo();
- }, 100);
- // 切换语言刷新验证码
- getCode();
- });
-
- /**
- * @description: 切换登录/注册状态
- */
- function loginFlag(type: number) {
- isLogin.value = type;
- // 切换登录/注册状态刷新验证码
- getCode();
- setTimeout(() => {
- loginFormRef.value.resetFields();
- }, 100);
- }
-
- /**
- * @description: 将账户/密码存储在本地
- * @param:email,password
- */
- function saveInfo(data: any) {
- const userInfo = JSON.stringify({
- email: data.phone,
- 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.username = userInfo.email ? userInfo.email : "";
- loginData.value.password = userInfo.password ? userInfo.password : "";
- }
- }
- //#region 密码校验部分
-
- /**
- * 邮箱校验器
- */
- 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 phoneReg = /^[1][3-9]\d{9}$/;
- 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 (!phoneReg.test(value)) {
- callback(new Error(msg2));
- } else {
- callback();
- }
- }
-
- /**
- * 密码校验器
- */
- 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 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 confirmPasswordValidator4(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 !== loginData4.value.password) {
- callback(new Error(msg2));
- } else {
- callback();
- }
- }
- function confirmPasswordValidator5(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 !== loginData5.value.newPwd) {
- callback(new Error(msg2));
- } else {
- callback();
- }
- }
- //#endregion ----------------------------
-
- // 注册行为
-
- //#region 忘记密码 表单3
- function sendEmailforgetPwd() {
- const msg =
- currentLan.value == "zh-cn"
- ? "短信验证码已发送至您的手机,请注意查收"
- : "The SMS verification code has been sent to your mobile phone, please check it";
- loginFormRef.value.validate(async (val: any) => {
- if (val) {
- const data = {
- phone: loginData3.value.email,
- code: loginData3.value.code,
- };
- await sendUpdPwdEmailApi(data)
- .then((res) => {
- console.log(res, "res");
- ElMessage.success(msg);
- isLogin.value = 4;
- })
- .catch((err) => {
- console.log(err, "err");
- ElMessage.error(err.message);
- });
- } else {
- const msg =
- currentLan.value == "zh-cn"
- ? "请检查信息格式!"
- : "Please check the format !";
- ElMessage.error(msg);
- return;
- }
- });
- }
- //#endregion --------------------------
-
- //#region 忘记密码 表单5
- function resetPwdEmail() {
- loginFormRef.value.validate(async (val: any) => {
- if (val) {
- try {
- const res = await resetPwdEmailApi({
- pwd: loginData5.value.newPwd,
- ticket: route.query.ticket,
- });
- localStorage.removeItem("AccessToken");
- // loginData.value.email = route.query.email + "";
- loginData.value.password = "";
- isLogin.value = 1;
- router.push({ path: "login", query: {} });
- } catch (error: any) {
- ElMessage.error(error);
- console.log(error);
- }
- } else {
- const msg =
- currentLan.value == "zh-cn"
- ? "请检查信息格式!"
- : "Please check the format !";
- ElMessage.error(msg);
- return;
- }
- });
- }
- //#endregion --------------------------
-
- //#region 重置密码 表单4
- function resetPwdForm() {
- loginFormRef.value.validate(async (val: any) => {
- if (val) {
- try {
- const res = await doUpdPassApi({
- phone: loginData3.value.email,
- code: loginData4.value.verifyCode,
- pwd: loginData4.value.password,
- });
- localStorage.removeItem("AccessToken");
- loginData.value.password = "";
- isLogin.value = 1;
- ElMessage.success(
- currentLan.value == "zh-cn"
- ? "重置密码成功!"
- : "Reset password successfully"
- );
- // router.push({ path: "login", query: {} });
- } catch (error: any) {
- ElMessage.error(error.message);
- console.log(error);
- }
- } else {
- const msg =
- currentLan.value == "zh-cn"
- ? "请检查信息格式!"
- : "Please check the format !";
- ElMessage.error(msg);
- return;
- }
- });
- }
- //#endregion --------------------------
-
- //#region 短信登录 表单7
- // 获取验证码
- const SMSTimeOut = ref(0);
- async function getSMSToLogin() {
- let phoneReg = /^[1][3-9]\d{9}$/;
- let phoneValide = phoneReg.test(loginData7.value.email);
- if (!phoneValide) {
- ElMessage.error(
- currentLan.value == "zh-cn"
- ? "请输入正确的手机号!"
- : "Please enter the correct phone number!"
- );
- return;
- }
- try {
- await getSMSToLoginApi(Number(loginData7.value.email)).then((res) => {
- ElMessage.success(
- currentLan.value == "zh-cn"
- ? "短信验证码发送成功!"
- : "SMS verification code sent successfully!"
- );
- SMSTimeOut.value = 60;
- const timer = setInterval(() => {
- if (SMSTimeOut.value != 0) {
- SMSTimeOut.value--;
- } else {
- clearInterval(timer);
- }
- }, 1000);
- });
- } catch (error: any) {
- ElMessage.error(error.message);
- }
- }
- // 登录行为
- function handleLoginBySMS() {
- loginFormRef.value.validate((val: any) => {
- if (val) {
- const data = {
- phone: loginData7.value.email,
- code: loginData7.value.verifyCode,
- };
- isLogining.value = true;
- doLoginByMSM(data);
- } else {
- const msg =
- currentLan.value == "zh-cn"
- ? "请检查信息格式!"
- : "Please check the format !";
- ElMessage.error(msg);
- return;
- }
- });
- }
- async function doLoginByMSM(data: any) {
- const msg =
- currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!";
- await loginByMSMApi(data)
- .then(async (res: any) => {
- console.log(res, "res");
- localStorage.setItem("AccessToken", res.data.token);
- saveInfo(data);
- isLogining.value = false;
- // await checkInviteCode();
-
- ElMessage.success(msg);
- router.push("/createVideo");
- // 注册成功将账号密码保存到本地
- })
- .catch((err) => {
- console.log(err, "err");
- // 登录失败刷新验证码
- getCode();
- ElMessage.error(err.message);
- isLogining.value = false;
- if (err.code == 2112) {
- reSendEmail(data.email);
- }
- });
- }
- //#endregion --------------------------
-
- //#region 查询邀请码 表单8
- /**
- * @description:查询用户邀请码状态
- */
- async function checkInviteCode() {
- try {
- const res = await doFindInviteCode();
- // console.log(res, '查询用户邀请码数据')
- const status = res.data.status;
- // 当没有邀请码时,切换输入验证码页面
- if (status == 0) {
- isLogin.value = 8;
- // 有邀请码直接前往我的页面
- } else if (status == 1) {
- // userInfoPinia.getUserInfo(); //保存邮箱到pinia
- ElMessage.success(
- 'currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"'
- );
- router.push({
- path: "/createVideo",
- });
- } else {
- router.push("/createVideo");
- }
- } catch (error: any) {
- console.log(error, "error");
- ElMessage.error(error.message);
- }
- }
- // 填写邀请码
- async function handleInvitatioCode() {
- const data = {
- inviteCode: loginData8.value.invitatioCode,
- };
- try {
- const res = await doUpdateInviteCode(data);
- // userInfoPinia.getUserInfo(); //保存邮箱到pinia
- ElMessage.success(
- 'currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"'
- );
- router.push({
- path: "/createVideo",
- });
- } catch (error: any) {
- console.log(error, "error");
- ElMessage.error(error.message);
- }
- }
- //#endregion -----------------------
-
- function getCode() {
- showCodeImg.value = false;
- axios({
- url: getCodeImgUrl,
- method: "get",
- }).then((res) => {
- verifyCodeUrl.value = getCodeImgUrl;
- showCodeImg.value = true;
- });
- }
-
- /**
- * @description:登录
- * @param {Object} data
- * @return: data
- */
-
- /**
- * @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);
- });
- }
- //#region 新登录
- // 登录行为
- function handleLogin() {
- loginFormRef.value.validate((val: any) => {
- if (val) {
- const data = {
- username: loginData.value.username,
- password: loginData.value.password,
- captcha: loginData.value.captcha,
- };
- isLogining.value = true;
- doLogin(data);
- } else {
- const msg =
- currentLan.value == "zh-cn"
- ? "请检查信息格式!"
- : "Please check the format !";
- ElMessage.error(msg);
- return;
- }
- });
- }
- async function doLogin(data: any) {
- const msg =
- currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!";
- await loginApi(data)
- .then(async (res) => {
- console.log(res, "res");
- // localStorage.setItem("AccessToken", res.data.token);
- // 注册成功将账号密码保存到本地
- saveInfo(data);
- await getMenuNavFunc();
- isLogining.value = false;
- // await checkInviteCode();
- // userInfoPinia.getUserInfo(); //保存邮箱到pinia
- ElMessage.success(msg);
- router.push("/home");
- })
- .catch((err) => {
- console.log(err, "err");
- // 登录失败刷新验证码
- getCode();
- ElMessage.error(err);
- isLogining.value = false;
- if (err.code == 2112) {
- reSendEmail(data.email);
- }
- });
- }
- //#endregion
-
- //#region 获取菜单导航路由
- async function getMenuNavFunc() {
- try {
- const res = await getMenuNavApi();
- } catch (error) {
- console.log(error);
- }
- }
- //#endregion --------------------------------
- onMounted(() => {
- getCode();
- getInfo();
- // 重置密码
- // if (router.currentRoute.value.params.type) {
- // // isLogin.value = Number(router.currentRoute.value.params.type);
- // isLogin.value = 4;
- // }
- // if (router.currentRoute.value.params.type) {
- // // isLogin.value = Number(router.currentRoute.value.params.type);
- // isLogin.value = 4;
- // }
- if (route.query.type) {
- isLogin.value = 4;
- }
- //有resetPwd则说明是重置密码邮件来的
- if (route.query.resetPwd) {
- isLogin.value = 5;
- // route.query.ticket
- }
- });
- </script>
-
- <style lang="scss" scoped>
- .login-container {
- position: relative;
- width: 100%;
- // width: 1920px;
- // height: 1080px;
- min-height: 100%;
- overflow: hidden;
- // background-color: #2d3a4b;
-
- .Version {
- position: absolute;
- bottom: 20px;
- right: 20px;
- color: #ffffff;
- }
-
- .login-form {
- position: absolute;
- top: 46%;
- left: 10%;
- width: 520px;
- max-width: 100%;
- padding: 20px;
- overflow: hidden;
- backdrop-filter: blur(3px);
- background: linear-gradient(
- 123.64deg,
- rgba(188, 193, 196, 0.1) -22.71%,
- rgba(255, 255, 255, 0.039) 70.04%
- );
- border-radius: 20px;
- transform: translateY(-50%);
- border: 1px solid #cacaca;
- transition: all 0.15s;
-
- .captcha {
- position: absolute;
- top: 0;
- right: 0;
-
- img {
- width: 120px;
- height: 48px;
- cursor: pointer;
- }
- .sendSMSBtn {
- width: 120px;
- height: 48px;
- line-height: 48px;
- color: #fff;
- text-align: center;
- background: linear-gradient(270deg, #4b61dc, #15d1b8);
- }
- }
- &:hover {
- backdrop-filter: blur(7px);
- }
- .items-center {
- padding: 20px;
- font-size: 30px;
- }
- .el-form-item {
- .text-white {
- padding: 8px;
- }
- }
- }
- }
-
- .loginBtn {
- width: 100%;
- height: 40px;
- background: linear-gradient(270deg, #4b61dc, #15d1b8);
- transition: all 0.3s;
- &:hover {
- transform: scale(1.02);
- }
- cursor: pointer;
- }
-
- .bottomBtnCN {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 10px;
- color: #fff;
- text-align: center;
- margin-top: 20px;
-
- .join {
- cursor: pointer;
- border-bottom: 2px solid #ffffff00;
- padding: 0 3px;
- padding-bottom: 2px;
- transition: all 0.3s;
- &:hover {
- border-bottom: 2px solid #ffffff;
- }
- }
- }
-
- .bottomBtnEN {
- padding: 0 10px;
- color: #fff;
- text-align: center;
- margin-top: 20px;
-
- .join {
- cursor: pointer;
- border-bottom: 2px solid #ffffff00;
- padding: 0 3px;
- padding-bottom: 2px;
- transition: all 0.3s;
- &:hover {
- border-bottom: 2px solid #ffffff;
- }
- }
- }
- .videoBox {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: -1;
- video {
- width: 100%;
- height: 100%;
- object-fit: fill;
- }
- }
-
- .el-form-item {
- background: rgb(0 0 0 / 10%);
- border: 1px solid #ffffff2d;
- border-radius: 5px;
- }
-
- .el-input {
- background: transparent;
- // 子组件 scoped 无效,使用 :deep
- :deep(.el-input__wrapper) {
- padding: 0;
- background: transparent;
- box-shadow: none;
-
- .el-input__inner {
- color: #fff;
- background: transparent;
- border: 0;
- border-radius: 0;
- caret-color: #fff;
-
- &:-webkit-autofill {
- box-shadow: 0 0 0 1000px transparent inset !important;
- -webkit-text-fill-color: #fff !important;
- }
-
- // 设置输入框自动填充的延迟属性
- &:-webkit-autofill,
- &:-webkit-autofill:hover,
- &:-webkit-autofill:focus,
- &:-webkit-autofill:active {
- transition: color 99999s ease-out, background-color 99999s ease-out;
- transition-delay: 99999s;
- }
- }
- }
- }
-
- @keyframes rotate {
- from {
- transform: rotate(0deg);
- }
-
- to {
- transform: rotate(360deg);
- }
- }
- </style>
|