mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-06 00:18:51 +08:00
feat: login page add i18n
This commit is contained in:
xiaoxian521
parent
26b85b5c92
commit
5f1466b574
@ -87,3 +87,43 @@ menus:
|
||||
hsExecl: Export Excel
|
||||
status:
|
||||
hsLoad: Loading...
|
||||
login:
|
||||
username: Username
|
||||
password: Password
|
||||
verifyCode: VerifyCode
|
||||
remember: Remember Password
|
||||
sure: Sure Password
|
||||
forget: Forget Password?
|
||||
login: Login
|
||||
thirdLogin: Third Login
|
||||
phoneLogin: Phone Login
|
||||
qRCodeLogin: QRCode Login
|
||||
register: Register
|
||||
weChatLogin: WeChat Login
|
||||
alipayLogin: Alipay Login
|
||||
qqLogin: QQ Login
|
||||
weiboLogin: Weibo Login
|
||||
phone: Phone
|
||||
smsVerifyCode: SMS VerifyCode
|
||||
back: Back
|
||||
test: Mock Test
|
||||
tip: After scanning the code, click "Confirm" to complete the login
|
||||
definite: Definite
|
||||
loginSuccess: Login Success
|
||||
registerSuccess: Regist Success
|
||||
tickPrivacy: Please tick Privacy Policy
|
||||
readAccept: I have read it carefully and accept
|
||||
privacyPolicy: Privacy Policy
|
||||
getVerifyCode: Get VerifyCode
|
||||
info: Seconds
|
||||
usernameReg: Please enter username
|
||||
passwordReg: Please enter password
|
||||
verifyCodeReg: Please enter verify code
|
||||
verifyCodeCorrectReg: Please enter correct verify code
|
||||
verifyCodeSixReg: Please enter a 6-digit verify code
|
||||
phoneReg: Please enter the phone
|
||||
phoneCorrectReg: Please enter the correct phone number format
|
||||
passwordRuleReg: The password format should be any combination of 8-18 digits
|
||||
passwordSureReg: Please enter confirm password
|
||||
passwordDifferentReg: The two passwords do not match!
|
||||
passwordUpdateReg: Password has been updated
|
||||
|
||||
@ -87,3 +87,43 @@ menus:
|
||||
hsExecl: 导出Excel
|
||||
status:
|
||||
hsLoad: 加载中...
|
||||
login:
|
||||
username: 账号
|
||||
password: 密码
|
||||
verifyCode: 验证码
|
||||
remember: 记住密码
|
||||
sure: 确认密码
|
||||
forget: 忘记密码?
|
||||
login: 登录
|
||||
thirdLogin: 第三方登录
|
||||
phoneLogin: 手机登录
|
||||
qRCodeLogin: 二维码登录
|
||||
register: 注册
|
||||
weChatLogin: 微信登录
|
||||
alipayLogin: 支付宝登录
|
||||
qqLogin: QQ登录
|
||||
weiboLogin: 微博登录
|
||||
phone: 手机号码
|
||||
smsVerifyCode: 短信验证码
|
||||
back: 返回
|
||||
test: 模拟测试
|
||||
tip: 扫码后点击"确认"，即可完成登录
|
||||
definite: 确定
|
||||
loginSuccess: 登录成功
|
||||
registerSuccess: 注册成功
|
||||
tickPrivacy: 请勾选隐私政策
|
||||
readAccept: 我已仔细阅读并接受
|
||||
privacyPolicy: 《隐私政策》
|
||||
getVerifyCode: 获取验证码
|
||||
info: 秒后重新获取
|
||||
usernameReg: 请输入账号
|
||||
passwordReg: 请输入密码
|
||||
verifyCodeReg: 请输入验证码
|
||||
verifyCodeCorrectReg: 请输入正确的验证码
|
||||
verifyCodeSixReg: 请输入6位数字验证码
|
||||
phoneReg: 请输入手机号码
|
||||
phoneCorrectReg: 请输入正确的手机号码格式
|
||||
passwordRuleReg: 密码格式应为8-18位数字、字母、符号的任意两种组合
|
||||
passwordSureReg: 请输入确认密码
|
||||
passwordDifferentReg: 两次密码不一致!
|
||||
passwordUpdateReg: 修改密码成功
|
||||
|
||||
@ -70,7 +70,7 @@
|
||||
"v-contextmenu": "3.0.0",
|
||||
"vue": "^3.2.37",
|
||||
"vue-form-create2": "^1.2.8",
|
||||
"vue-i18n": "^9.2.0-beta.39",
|
||||
"vue-i18n": "^9.2.2",
|
||||
"vue-json-pretty": "^2.0.2",
|
||||
"vue-pdf-embed": "^1.1.4",
|
||||
"vue-router": "^4.1.2",
|
||||
@ -95,7 +95,7 @@
|
||||
"@iconify-icons/ri": "^1.2.1",
|
||||
"@iconify-icons/uil": "^1.2.1",
|
||||
"@iconify/vue": "^3.2.1",
|
||||
"@intlify/vite-plugin-vue-i18n": "^5.0.0",
|
||||
"@intlify/vite-plugin-vue-i18n": "^6.0.0",
|
||||
"@pureadmin/theme": "^2.4.0",
|
||||
"@types/element-resize-detector": "1.1.3",
|
||||
"@types/js-cookie": "^3.0.1",
|
||||
@ -141,9 +141,9 @@
|
||||
"stylelint-config-standard": "^24.0.0",
|
||||
"stylelint-order": "^5.0.0",
|
||||
"typescript": "^4.6.3",
|
||||
"unocss": "^0.44.7",
|
||||
"unocss": "^0.45.5",
|
||||
"unplugin-vue-define-options": "^0.6.1",
|
||||
"vite": "^3.0.3",
|
||||
"vite": "^3.0.5",
|
||||
"vite-plugin-mock": "^2.9.6",
|
||||
"vite-plugin-remove-console": "^1.1.0",
|
||||
"vite-svg-loader": "^3.4.0",
|
||||
|
||||
472
pnpm-lock.yaml
generated
472
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -1,13 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref, reactive } from "vue";
|
||||
import Motion from "../utils/motion";
|
||||
import { phoneRules } from "../utils/rule";
|
||||
import { message } from "@pureadmin/components";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { $t, transformI18n } from "/@/plugins/i18n";
|
||||
import { useVerifyCode } from "../utils/verifyCode";
|
||||
import { useUserStoreHook } from "/@/store/modules/user";
|
||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||
|
||||
const { t } = useI18n();
|
||||
const loading = ref(false);
|
||||
const ruleForm = reactive({
|
||||
phone: "",
|
||||
@ -23,7 +26,7 @@ const onLogin = async (formEl: FormInstance | undefined) => {
|
||||
if (valid) {
|
||||
// 模拟登录请求，需根据实际开发进行修改
|
||||
setTimeout(() => {
|
||||
message.success("登录成功");
|
||||
message.success(transformI18n($t("login.loginSuccess")));
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
} else {
|
||||
@ -46,7 +49,7 @@ function onBack() {
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.phone"
|
||||
placeholder="手机号码"
|
||||
:placeholder="t('login.phone')"
|
||||
:prefix-icon="useRenderIcon('iphone')"
|
||||
/>
|
||||
</el-form-item>
|
||||
@ -58,7 +61,7 @@ function onBack() {
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.verifyCode"
|
||||
placeholder="短信验证码"
|
||||
:placeholder="t('login.smsVerifyCode')"
|
||||
:prefix-icon="
|
||||
useRenderIcon('ri:shield-keyhole-line', { online: true })
|
||||
"
|
||||
@ -68,7 +71,11 @@ function onBack() {
|
||||
class="ml-2"
|
||||
@click="useVerifyCode().start(ruleFormRef, 'phone')"
|
||||
>
|
||||
{{ text }}
|
||||
{{
|
||||
text.length > 0
|
||||
? text + t("login.info")
|
||||
: t("login.getVerifyCode")
|
||||
}}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
@ -83,7 +90,7 @@ function onBack() {
|
||||
:loading="loading"
|
||||
@click="onLogin(ruleFormRef)"
|
||||
>
|
||||
登录
|
||||
{{ t("login.login") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
@ -91,7 +98,7 @@ function onBack() {
|
||||
<Motion :delay="200">
|
||||
<el-form-item>
|
||||
<el-button class="w-full" size="default" @click="onBack">
|
||||
返回
|
||||
{{ t("login.back") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
@ -1,14 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import Motion from "../utils/motion";
|
||||
import ReQrcode from "/@/components/ReQrcode";
|
||||
import { useUserStoreHook } from "/@/store/modules/user";
|
||||
|
||||
const { t } = useI18n();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Motion class="-mt-2 -mb-2"> <ReQrcode text="模拟测试" /> </Motion>
|
||||
<Motion class="-mt-2 -mb-2"> <ReQrcode :text="t('login.test')" /> </Motion>
|
||||
<Motion :delay="100">
|
||||
<el-divider>
|
||||
<p class="text-gray-500 text-xs">扫码后点击"确认"，即可完成登录</p>
|
||||
<p class="text-gray-500 text-xs">{{ t("login.tip") }}</p>
|
||||
</el-divider>
|
||||
</Motion>
|
||||
<Motion :delay="150">
|
||||
@ -16,7 +19,7 @@ import { useUserStoreHook } from "/@/store/modules/user";
|
||||
class="w-full mt-4"
|
||||
@click="useUserStoreHook().SET_CURRENTPAGE(0)"
|
||||
>
|
||||
返回
|
||||
{{ t("login.back") }}
|
||||
</el-button>
|
||||
</Motion>
|
||||
</template>
|
||||
|
||||
@ -1,13 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref, reactive } from "vue";
|
||||
import Motion from "../utils/motion";
|
||||
import { updateRules } from "../utils/rule";
|
||||
import { message } from "@pureadmin/components";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { useVerifyCode } from "../utils/verifyCode";
|
||||
import { $t, transformI18n } from "/@/plugins/i18n";
|
||||
import { useUserStoreHook } from "/@/store/modules/user";
|
||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||
|
||||
const { t } = useI18n();
|
||||
const checked = ref(false);
|
||||
const loading = ref(false);
|
||||
const ruleForm = reactive({
|
||||
@ -23,9 +26,9 @@ const repeatPasswordRule = [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入确认密码"));
|
||||
callback(new Error(transformI18n($t("login.passwordSureReg"))));
|
||||
} else if (ruleForm.password !== value) {
|
||||
callback(new Error("两次密码不一致!"));
|
||||
callback(new Error(transformI18n($t("login.passwordDifferentReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@ -42,12 +45,12 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
|
||||
if (checked.value) {
|
||||
// 模拟请求，需根据实际开发进行修改
|
||||
setTimeout(() => {
|
||||
message.success("注册成功");
|
||||
message.success(transformI18n($t("login.registerSuccess")));
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
} else {
|
||||
loading.value = false;
|
||||
message.warning("请勾选隐私政策");
|
||||
message.warning(transformI18n($t("login.tickPrivacy")));
|
||||
}
|
||||
} else {
|
||||
loading.value = false;
|
||||
@ -71,13 +74,19 @@ function onBack() {
|
||||
>
|
||||
<Motion>
|
||||
<el-form-item
|
||||
:rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: transformI18n($t('login.usernameReg')),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]"
|
||||
prop="username"
|
||||
>
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.username"
|
||||
placeholder="账号"
|
||||
:placeholder="t('login.username')"
|
||||
:prefix-icon="useRenderIcon('user')"
|
||||
/>
|
||||
</el-form-item>
|
||||
@ -88,7 +97,7 @@ function onBack() {
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.phone"
|
||||
placeholder="手机号码"
|
||||
:placeholder="t('login.phone')"
|
||||
:prefix-icon="useRenderIcon('iphone')"
|
||||
/>
|
||||
</el-form-item>
|
||||
@ -100,7 +109,7 @@ function onBack() {
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.verifyCode"
|
||||
placeholder="短信验证码"
|
||||
:placeholder="t('login.smsVerifyCode')"
|
||||
:prefix-icon="
|
||||
useRenderIcon('ri:shield-keyhole-line', { online: true })
|
||||
"
|
||||
@ -110,7 +119,11 @@ function onBack() {
|
||||
class="ml-2"
|
||||
@click="useVerifyCode().start(ruleFormRef, 'phone')"
|
||||
>
|
||||
{{ text }}
|
||||
{{
|
||||
text.length > 0
|
||||
? text + t("login.info")
|
||||
: t("login.getVerifyCode")
|
||||
}}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
@ -122,7 +135,7 @@ function onBack() {
|
||||
clearable
|
||||
show-password
|
||||
v-model="ruleForm.password"
|
||||
placeholder="密码"
|
||||
:placeholder="t('login.password')"
|
||||
:prefix-icon="useRenderIcon('lock')"
|
||||
/>
|
||||
</el-form-item>
|
||||
@ -134,7 +147,7 @@ function onBack() {
|
||||
clearable
|
||||
show-password
|
||||
v-model="ruleForm.repeatPassword"
|
||||
placeholder="确认密码"
|
||||
:placeholder="t('login.sure')"
|
||||
:prefix-icon="useRenderIcon('lock')"
|
||||
/>
|
||||
</el-form-item>
|
||||
@ -142,8 +155,12 @@ function onBack() {
|
||||
|
||||
<Motion :delay="300">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked"> 我已仔细阅读并接受 </el-checkbox>
|
||||
<el-button link type="primary"> 《隐私政策》 </el-button>
|
||||
<el-checkbox v-model="checked">
|
||||
{{ t("login.readAccept") }}
|
||||
</el-checkbox>
|
||||
<el-button link type="primary">
|
||||
{{ t("login.privacyPolicy") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
@ -156,7 +173,7 @@ function onBack() {
|
||||
:loading="loading"
|
||||
@click="onUpdate(ruleFormRef)"
|
||||
>
|
||||
确定
|
||||
{{ t("login.definite") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
@ -164,7 +181,7 @@ function onBack() {
|
||||
<Motion :delay="400">
|
||||
<el-form-item>
|
||||
<el-button class="w-full" size="default" @click="onBack">
|
||||
返回
|
||||
{{ t("login.back") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
@ -1,13 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref, reactive } from "vue";
|
||||
import Motion from "../utils/motion";
|
||||
import { updateRules } from "../utils/rule";
|
||||
import { message } from "@pureadmin/components";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { useVerifyCode } from "../utils/verifyCode";
|
||||
import { $t, transformI18n } from "/@/plugins/i18n";
|
||||
import { useUserStoreHook } from "/@/store/modules/user";
|
||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||
|
||||
const { t } = useI18n();
|
||||
const loading = ref(false);
|
||||
const ruleForm = reactive({
|
||||
phone: "",
|
||||
@ -21,9 +24,9 @@ const repeatPasswordRule = [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入确认密码"));
|
||||
callback(new Error(transformI18n($t("login.passwordSureReg"))));
|
||||
} else if (ruleForm.password !== value) {
|
||||
callback(new Error("两次密码不一致!"));
|
||||
callback(new Error(transformI18n($t("login.passwordDifferentReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@ -39,7 +42,7 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
|
||||
if (valid) {
|
||||
// 模拟请求，需根据实际开发进行修改
|
||||
setTimeout(() => {
|
||||
message.success("修改密码成功");
|
||||
message.success(transformI18n($t("login.passwordUpdateReg")));
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
} else {
|
||||
@ -67,7 +70,7 @@ function onBack() {
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.phone"
|
||||
placeholder="手机号码"
|
||||
:placeholder="t('login.phone')"
|
||||
:prefix-icon="useRenderIcon('iphone')"
|
||||
/>
|
||||
</el-form-item>
|
||||
@ -79,7 +82,7 @@ function onBack() {
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.verifyCode"
|
||||
placeholder="短信验证码"
|
||||
:placeholder="t('login.smsVerifyCode')"
|
||||
:prefix-icon="
|
||||
useRenderIcon('ri:shield-keyhole-line', { online: true })
|
||||
"
|
||||
@ -89,7 +92,11 @@ function onBack() {
|
||||
class="ml-2"
|
||||
@click="useVerifyCode().start(ruleFormRef, 'phone')"
|
||||
>
|
||||
{{ text }}
|
||||
{{
|
||||
text.length > 0
|
||||
? text + t("login.info")
|
||||
: t("login.getVerifyCode")
|
||||
}}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
@ -101,7 +108,7 @@ function onBack() {
|
||||
clearable
|
||||
show-password
|
||||
v-model="ruleForm.password"
|
||||
placeholder="密码"
|
||||
:placeholder="t('login.password')"
|
||||
:prefix-icon="useRenderIcon('lock')"
|
||||
/>
|
||||
</el-form-item>
|
||||
@ -113,7 +120,7 @@ function onBack() {
|
||||
clearable
|
||||
show-password
|
||||
v-model="ruleForm.repeatPassword"
|
||||
placeholder="确认密码"
|
||||
:placeholder="t('login.sure')"
|
||||
:prefix-icon="useRenderIcon('lock')"
|
||||
/>
|
||||
</el-form-item>
|
||||
@ -128,7 +135,7 @@ function onBack() {
|
||||
:loading="loading"
|
||||
@click="onUpdate(ruleFormRef)"
|
||||
>
|
||||
确定
|
||||
{{ t("login.definite") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
@ -136,7 +143,7 @@ function onBack() {
|
||||
<Motion :delay="300">
|
||||
<el-form-item>
|
||||
<el-button class="w-full" size="default" @click="onBack">
|
||||
返回
|
||||
{{ t("login.back") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import Motion from "./utils/motion";
|
||||
import { useRouter } from "vue-router";
|
||||
import { loginRules } from "./utils/rule";
|
||||
@ -11,6 +12,7 @@ import { useNav } from "/@/layout/hooks/nav";
|
||||
import { message } from "@pureadmin/components";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { storageSession } from "@pureadmin/utils";
|
||||
import { $t, transformI18n } from "/@/plugins/i18n";
|
||||
import { operates, thirdParty } from "./utils/enums";
|
||||
import { useLayout } from "/@/layout/hooks/useLayout";
|
||||
import { useUserStoreHook } from "/@/store/modules/user";
|
||||
@ -42,6 +44,7 @@ const currentPage = computed(() => {
|
||||
const { initStorage } = useLayout();
|
||||
initStorage();
|
||||
|
||||
const { t } = useI18n();
|
||||
const { dataTheme, dataThemeChange } = useDataThemeChange();
|
||||
const { getDropdownItemStyle, getDropdownItemClass } = useNav();
|
||||
const { locale, translationCh, translationEn } = useTranslationLang();
|
||||
@ -151,11 +154,20 @@ dataThemeChange();
|
||||
@keyup.enter="onLogin(ruleFormRef)"
|
||||
>
|
||||
<Motion :delay="100">
|
||||
<el-form-item prop="username">
|
||||
<el-form-item
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: transformI18n($t('login.usernameReg')),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]"
|
||||
prop="username"
|
||||
>
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.username"
|
||||
placeholder="账号"
|
||||
:placeholder="t('login.username')"
|
||||
:prefix-icon="useRenderIcon('user')"
|
||||
/>
|
||||
</el-form-item>
|
||||
@ -167,7 +179,7 @@ dataThemeChange();
|
||||
clearable
|
||||
show-password
|
||||
v-model="ruleForm.password"
|
||||
placeholder="密码"
|
||||
:placeholder="t('login.password')"
|
||||
:prefix-icon="useRenderIcon('lock')"
|
||||
/>
|
||||
</el-form-item>
|
||||
@ -178,7 +190,7 @@ dataThemeChange();
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.verifyCode"
|
||||
placeholder="验证码"
|
||||
:placeholder="t('login.verifyCode')"
|
||||
:prefix-icon="
|
||||
useRenderIcon('ri:shield-keyhole-line', { online: true })
|
||||
"
|
||||
@ -193,13 +205,15 @@ dataThemeChange();
|
||||
<Motion :delay="250">
|
||||
<el-form-item>
|
||||
<div class="w-full h-20px flex justify-between items-center">
|
||||
<el-checkbox v-model="checked">记住密码</el-checkbox>
|
||||
<el-checkbox v-model="checked">
|
||||
{{ t("login.remember") }}
|
||||
</el-checkbox>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="useUserStoreHook().SET_CURRENTPAGE(4)"
|
||||
>
|
||||
忘记密码?
|
||||
{{ t("login.forget") }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
@ -209,7 +223,7 @@ dataThemeChange();
|
||||
:loading="loading"
|
||||
@click="onLogin(ruleFormRef)"
|
||||
>
|
||||
登录
|
||||
{{ t("login.login") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
@ -224,7 +238,7 @@ dataThemeChange();
|
||||
size="default"
|
||||
@click="onHandle(index + 1)"
|
||||
>
|
||||
{{ item.title }}
|
||||
{{ t(item.title) }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
@ -234,13 +248,13 @@ dataThemeChange();
|
||||
<Motion v-if="currentPage === 0" :delay="350">
|
||||
<el-form-item>
|
||||
<el-divider>
|
||||
<p class="text-gray-500 text-xs">第三方登录</p>
|
||||
<p class="text-gray-500 text-xs">{{ t("login.thirdLogin") }}</p>
|
||||
</el-divider>
|
||||
<div class="w-full flex justify-evenly">
|
||||
<span
|
||||
v-for="(item, index) in thirdParty"
|
||||
:key="index"
|
||||
:title="`${item.title}登录`"
|
||||
:title="t(item.title)"
|
||||
>
|
||||
<IconifyIconOnline
|
||||
:icon="`ri:${item.icon}-fill`"
|
||||
|
||||
@ -1,30 +1,32 @@
|
||||
import { $t } from "/@/plugins/i18n";
|
||||
|
||||
const operates = [
|
||||
{
|
||||
title: "手机登录"
|
||||
title: $t("login.phoneLogin")
|
||||
},
|
||||
{
|
||||
title: "二维码登录"
|
||||
title: $t("login.qRCodeLogin")
|
||||
},
|
||||
{
|
||||
title: "注册"
|
||||
title: $t("login.register")
|
||||
}
|
||||
];
|
||||
|
||||
const thirdParty = [
|
||||
{
|
||||
title: "微信",
|
||||
title: $t("login.weChatLogin"),
|
||||
icon: "wechat"
|
||||
},
|
||||
{
|
||||
title: "支付宝",
|
||||
title: $t("login.alipayLogin"),
|
||||
icon: "alipay"
|
||||
},
|
||||
{
|
||||
title: "QQ",
|
||||
title: $t("login.qqLogin"),
|
||||
icon: "qq"
|
||||
},
|
||||
{
|
||||
title: "微博",
|
||||
title: $t("login.weiboLogin"),
|
||||
icon: "weibo"
|
||||
}
|
||||
];
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { h, defineComponent, withDirectives, resolveDirective } from "vue";
|
||||
|
||||
// 封装@vueuse/motion动画库中的自定义指令v-motion
|
||||
/** 封装@vueuse/motion动画库中的自定义指令v-motion */
|
||||
export default defineComponent({
|
||||
name: "Motion",
|
||||
props: {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { reactive } from "vue";
|
||||
import { isPhone } from "@pureadmin/utils";
|
||||
import type { FormRules } from "element-plus";
|
||||
import { $t, transformI18n } from "/@/plugins/i18n";
|
||||
import { useUserStoreHook } from "/@/store/modules/user";
|
||||
|
||||
/** 6位数字验证码正则 */
|
||||
@ -12,16 +13,13 @@ export const REGEXP_PWD =
|
||||
|
||||
/** 登录校验 */
|
||||
const loginRules = reactive(<FormRules>{
|
||||
username: [{ required: true, message: "请输入账号", trigger: "blur" }],
|
||||
password: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入密码"));
|
||||
callback(new Error(transformI18n($t("login.passwordReg"))));
|
||||
} else if (!REGEXP_PWD.test(value)) {
|
||||
callback(
|
||||
new Error("密码格式应为8-18位数字、字母、符号的任意两种组合")
|
||||
);
|
||||
callback(new Error(transformI18n($t("login.passwordRuleReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@ -33,9 +31,9 @@ const loginRules = reactive(<FormRules>{
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入验证码"));
|
||||
callback(new Error(transformI18n($t("login.verifyCodeReg"))));
|
||||
} else if (useUserStoreHook().verifyCode !== value) {
|
||||
callback(new Error("请输入正确的验证码"));
|
||||
callback(new Error(transformI18n($t("login.verifyCodeCorrectReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@ -51,9 +49,9 @@ const phoneRules = reactive(<FormRules>{
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入手机号码"));
|
||||
callback(new Error(transformI18n($t("login.phoneReg"))));
|
||||
} else if (!isPhone(value)) {
|
||||
callback(new Error("请输入正确的手机号码格式"));
|
||||
callback(new Error(transformI18n($t("login.phoneCorrectReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@ -65,9 +63,9 @@ const phoneRules = reactive(<FormRules>{
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入验证码"));
|
||||
callback(new Error(transformI18n($t("login.verifyCodeReg"))));
|
||||
} else if (!REGEXP_SIX.test(value)) {
|
||||
callback(new Error("请输入6位数字验证码"));
|
||||
callback(new Error(transformI18n($t("login.verifyCodeSixReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@ -83,9 +81,9 @@ const updateRules = reactive(<FormRules>{
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入手机号码"));
|
||||
callback(new Error(transformI18n($t("login.phoneReg"))));
|
||||
} else if (!isPhone(value)) {
|
||||
callback(new Error("请输入正确的手机号码格式"));
|
||||
callback(new Error(transformI18n($t("login.phoneCorrectReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@ -97,9 +95,9 @@ const updateRules = reactive(<FormRules>{
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入验证码"));
|
||||
callback(new Error(transformI18n($t("login.verifyCodeReg"))));
|
||||
} else if (!REGEXP_SIX.test(value)) {
|
||||
callback(new Error("请输入6位数字验证码"));
|
||||
callback(new Error(transformI18n($t("login.verifyCodeSixReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@ -111,11 +109,9 @@ const updateRules = reactive(<FormRules>{
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入密码"));
|
||||
callback(new Error(transformI18n($t("login.passwordReg"))));
|
||||
} else if (!REGEXP_PWD.test(value)) {
|
||||
callback(
|
||||
new Error("密码格式应为8-18位数字、字母、符号的任意两种组合")
|
||||
);
|
||||
callback(new Error(transformI18n($t("login.passwordRuleReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@ import illustration4 from "/@/assets/login/illustration4.svg?component";
|
||||
import illustration5 from "/@/assets/login/illustration5.svg?component";
|
||||
import illustration6 from "/@/assets/login/illustration6.svg?component";
|
||||
|
||||
/* Show a different background every day */
|
||||
/** Show a different background every day */
|
||||
const currentWeek = computed(() => {
|
||||
switch (String(new Date().getDay())) {
|
||||
case "0":
|
||||
|
||||
@ -3,9 +3,8 @@ import { cloneDeep } from "lodash-unified";
|
||||
import { ref } from "vue";
|
||||
|
||||
const isDisabled = ref(false);
|
||||
const TEXT = "获取验证码";
|
||||
const timer = ref(null);
|
||||
const text = ref(TEXT);
|
||||
const text = ref("");
|
||||
|
||||
export const useVerifyCode = () => {
|
||||
const start = async (
|
||||
@ -20,11 +19,11 @@ export const useVerifyCode = () => {
|
||||
clearInterval(timer.value);
|
||||
timer.value = setInterval(() => {
|
||||
if (time > 0) {
|
||||
text.value = `${time}秒后重新获取`;
|
||||
text.value = `${time}`;
|
||||
isDisabled.value = true;
|
||||
time -= 1;
|
||||
} else {
|
||||
text.value = TEXT;
|
||||
text.value = "";
|
||||
isDisabled.value = false;
|
||||
clearInterval(timer.value);
|
||||
time = initTime;
|
||||
@ -35,7 +34,7 @@ export const useVerifyCode = () => {
|
||||
};
|
||||
|
||||
const end = () => {
|
||||
text.value = TEXT;
|
||||
text.value = "";
|
||||
isDisabled.value = false;
|
||||
clearInterval(timer.value);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user