mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-03 13:44:47 +08:00
fix: update
This commit is contained in:
xiaoxian521
@@ -10,15 +10,15 @@ import { initRouter } from "/@/router/utils";
|
||||
import { useNav } from "/@/layout/hooks/nav";
|
||||
import { message } from "@pureadmin/components";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import useLayout from "/@/layout/hooks/useLayout";
|
||||
import { storageSession } from "@pureadmin/utils";
|
||||
import { operates, thirdParty } from "./utils/enums";
|
||||
import { useLayout } from "/@/layout/hooks/useLayout";
|
||||
import { useUserStoreHook } from "/@/store/modules/user";
|
||||
import { bg, avatar, currentWeek } from "./utils/static";
|
||||
import { ReImageVerify } from "/@/components/ReImageVerify";
|
||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||
import useDataThemeChange from "/@/layout/hooks/useDataThemeChange";
|
||||
import useTranslationLang from "/@/layout/hooks/useTranslationLang";
|
||||
import { useTranslationLang } from "/@/layout/hooks/useTranslationLang";
|
||||
import { useDataThemeChange } from "/@/layout/hooks/useDataThemeChange";
|
||||
import { ref, reactive, watch, computed, getCurrentInstance } from "vue";
|
||||
|
||||
import dayIcon from "/@/assets/svg/day.svg?component";
|
||||
@@ -82,178 +82,184 @@ function onHandle(value) {
|
||||
watch(imgCode, value => {
|
||||
useUserStoreHook().SET_VERIFYCODE(value);
|
||||
});
|
||||
|
||||
dataThemeChange();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-c absolute right-5">
|
||||
<!-- 主题 -->
|
||||
<el-switch
|
||||
v-model="dataTheme"
|
||||
inline-prompt
|
||||
:active-icon="dayIcon"
|
||||
:inactive-icon="darkIcon"
|
||||
@change="dataThemeChange"
|
||||
/>
|
||||
<!-- 国际化 -->
|
||||
<el-dropdown trigger="click">
|
||||
<globalization class="w-40px h-48px p-11px cursor-pointer outline-none" />
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="translation">
|
||||
<el-dropdown-item
|
||||
:style="getDropdownItemStyle(locale, 'zh')"
|
||||
:class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
|
||||
@click="translationCh"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
class="check-zh"
|
||||
v-show="locale === 'zh'"
|
||||
icon="check"
|
||||
/>
|
||||
简体中文
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
:style="getDropdownItemStyle(locale, 'en')"
|
||||
:class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
|
||||
@click="translationEn"
|
||||
>
|
||||
<span class="check-en" v-show="locale === 'en'">
|
||||
<IconifyIconOffline icon="check" />
|
||||
</span>
|
||||
English
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<img :src="bg" class="wave" />
|
||||
<div class="login-container">
|
||||
<div class="img">
|
||||
<component :is="currentWeek" />
|
||||
<div class="wh-full select-none">
|
||||
<img :src="bg" class="wave" />
|
||||
<div class="flex-c absolute right-5 top-3">
|
||||
<!-- 主题 -->
|
||||
<el-switch
|
||||
v-model="dataTheme"
|
||||
inline-prompt
|
||||
:active-icon="dayIcon"
|
||||
:inactive-icon="darkIcon"
|
||||
@change="dataThemeChange"
|
||||
/>
|
||||
<!-- 国际化 -->
|
||||
<el-dropdown trigger="click">
|
||||
<globalization
|
||||
class="hover:color-primary !hover:bg-transparent w-20px h-20px ml-1.5 cursor-pointer outline-none duration-300"
|
||||
/>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="translation">
|
||||
<el-dropdown-item
|
||||
:style="getDropdownItemStyle(locale, 'zh')"
|
||||
:class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
|
||||
@click="translationCh"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
class="check-zh"
|
||||
v-show="locale === 'zh'"
|
||||
icon="check"
|
||||
/>
|
||||
简体中文
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
:style="getDropdownItemStyle(locale, 'en')"
|
||||
:class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
|
||||
@click="translationEn"
|
||||
>
|
||||
<span class="check-en" v-show="locale === 'en'">
|
||||
<IconifyIconOffline icon="check" />
|
||||
</span>
|
||||
English
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="login-box">
|
||||
<div class="login-form">
|
||||
<avatar class="avatar" />
|
||||
<Motion>
|
||||
<h2>{{ title }}</h2>
|
||||
</Motion>
|
||||
|
||||
<el-form
|
||||
v-if="currentPage === 0"
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="loginRules"
|
||||
size="large"
|
||||
@keyup.enter="onLogin(ruleFormRef)"
|
||||
>
|
||||
<Motion :delay="100">
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.username"
|
||||
placeholder="账号"
|
||||
:prefix-icon="useRenderIcon('user')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div class="login-container">
|
||||
<div class="img">
|
||||
<component :is="currentWeek" />
|
||||
</div>
|
||||
<div class="login-box">
|
||||
<div class="login-form">
|
||||
<avatar class="avatar" />
|
||||
<Motion>
|
||||
<h2 class="outline-none">{{ title }}</h2>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="150">
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
clearable
|
||||
show-password
|
||||
v-model="ruleForm.password"
|
||||
placeholder="密码"
|
||||
:prefix-icon="useRenderIcon('lock')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
<el-form
|
||||
v-if="currentPage === 0"
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="loginRules"
|
||||
size="large"
|
||||
@keyup.enter="onLogin(ruleFormRef)"
|
||||
>
|
||||
<Motion :delay="100">
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.username"
|
||||
placeholder="账号"
|
||||
:prefix-icon="useRenderIcon('user')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="200">
|
||||
<el-form-item prop="verifyCode">
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.verifyCode"
|
||||
placeholder="验证码"
|
||||
:prefix-icon="
|
||||
useRenderIcon('ri:shield-keyhole-line', { online: true })
|
||||
"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<ReImageVerify v-model:code="imgCode" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
<Motion :delay="150">
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
clearable
|
||||
show-password
|
||||
v-model="ruleForm.password"
|
||||
placeholder="密码"
|
||||
:prefix-icon="useRenderIcon('lock')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<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-button
|
||||
link
|
||||
type="primary"
|
||||
@click="useUserStoreHook().SET_CURRENTPAGE(4)"
|
||||
<Motion :delay="200">
|
||||
<el-form-item prop="verifyCode">
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.verifyCode"
|
||||
placeholder="验证码"
|
||||
:prefix-icon="
|
||||
useRenderIcon('ri:shield-keyhole-line', { online: true })
|
||||
"
|
||||
>
|
||||
忘记密码?
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
class="w-full mt-4"
|
||||
size="default"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="onLogin(ruleFormRef)"
|
||||
>
|
||||
登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
<template v-slot:append>
|
||||
<ReImageVerify v-model:code="imgCode" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="300">
|
||||
<el-form-item>
|
||||
<div class="w-full h-20px flex justify-between items-center">
|
||||
<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-button
|
||||
link
|
||||
type="primary"
|
||||
@click="useUserStoreHook().SET_CURRENTPAGE(4)"
|
||||
>
|
||||
忘记密码?
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
v-for="(item, index) in operates"
|
||||
:key="index"
|
||||
class="w-full mt-4"
|
||||
size="default"
|
||||
@click="onHandle(index + 1)"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="onLogin(ruleFormRef)"
|
||||
>
|
||||
{{ item.title }}
|
||||
登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="300">
|
||||
<el-form-item>
|
||||
<div class="w-full h-20px flex justify-between items-center">
|
||||
<el-button
|
||||
v-for="(item, index) in operates"
|
||||
:key="index"
|
||||
class="w-full mt-4"
|
||||
size="default"
|
||||
@click="onHandle(index + 1)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
</el-form>
|
||||
|
||||
<Motion v-if="currentPage === 0" :delay="350">
|
||||
<el-form-item>
|
||||
<el-divider>
|
||||
<p class="text-gray-500 text-xs">第三方登录</p>
|
||||
</el-divider>
|
||||
<div class="w-full flex justify-evenly">
|
||||
<span
|
||||
v-for="(item, index) in thirdParty"
|
||||
:key="index"
|
||||
:title="`${item.title}登录`"
|
||||
>
|
||||
<IconifyIconOnline
|
||||
:icon="`ri:${item.icon}-fill`"
|
||||
width="20"
|
||||
class="cursor-pointer text-gray-500 hover:text-blue-400"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
</el-form>
|
||||
|
||||
<Motion v-if="currentPage === 0" :delay="350">
|
||||
<el-form-item>
|
||||
<el-divider>
|
||||
<p class="text-gray-500 text-xs">第三方登录</p>
|
||||
</el-divider>
|
||||
<div class="w-full flex justify-evenly">
|
||||
<span
|
||||
v-for="(item, index) in thirdParty"
|
||||
:key="index"
|
||||
:title="`${item.title}登录`"
|
||||
>
|
||||
<IconifyIconOnline
|
||||
:icon="`ri:${item.icon}-fill`"
|
||||
width="20"
|
||||
class="cursor-pointer text-gray-500 hover:text-blue-400"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
<!-- 手机号登录 -->
|
||||
<phone v-if="currentPage === 1" />
|
||||
<!-- 二维码登录 -->
|
||||
<qrCode v-if="currentPage === 2" />
|
||||
<!-- 注册 -->
|
||||
<regist v-if="currentPage === 3" />
|
||||
<!-- 忘记密码 -->
|
||||
<update v-if="currentPage === 4" />
|
||||
<!-- 手机号登录 -->
|
||||
<phone v-if="currentPage === 1" />
|
||||
<!-- 二维码登录 -->
|
||||
<qrCode v-if="currentPage === 2" />
|
||||
<!-- 注册 -->
|
||||
<regist v-if="currentPage === 3" />
|
||||
<!-- 忘记密码 -->
|
||||
<update v-if="currentPage === 4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user