Skip to content

Commit

Permalink
登录页增加扫码登录参考
Browse files Browse the repository at this point in the history
  • Loading branch information
@hooray
hooray committed Apr 26, 2024
1 parent c4ebcfc commit d38e405
Showing 1 changed file with 58 additions and 37 deletions.
95 changes: 58 additions & 37 deletions src/views/login.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ const banner = new URL('../assets/images/login-banner.png', import.meta.url).hre
const logo = new URL('../assets/images/logo.png', import.meta.url).href
const title = import.meta.env.VITE_APP_TITLE
// 登录方式，default 账号密码登录，qrcode 扫码登录
const loginType = ref('default')
// 表单类型，login 登录，register 注册，reset 重置密码
const formType = ref('login')
const loading = ref(false)
Expand Down Expand Up @@ -159,44 +162,62 @@ function testAccount(account: string) {
<img :src="banner" class="banner">
</div>
<ElForm v-show="formType === 'login'" ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form">
<div class="title-container">
<h3 class="title">
欢迎来到 {{ title }} ! 👋🏻
</h3>
</div>
<div>
<ElFormItem prop="account">
<ElInput v-model="loginForm.account" placeholder="用户名" type="text" tabindex="1">
<template #prefix>
<SvgIcon name="i-ri:user-3-fill" />
</template>
</ElInput>
</ElFormItem>
<ElFormItem prop="password">
<ElInput v-model="loginForm.password" type="password" placeholder="密码" tabindex="2" autocomplete="new-password" show-password @keyup.enter="handleLogin">
<template #prefix>
<SvgIcon name="i-ri:lock-2-fill" />
</template>
</ElInput>
</ElFormItem>
</div>
<div class="flex-bar">
<ElCheckbox v-model="loginForm.remember">
记住我
</ElCheckbox>
<ElLink type="primary" :underline="false" @click="formType = 'reset'">
忘记密码了?
</ElLink>
</div>
<ElButton :loading="loading" type="primary" size="large" style="width: 100%;" @click.prevent="handleLogin">
登录
</ElButton>
<div class="sub-link">
<span class="text">还没有帐号?</span>
<ElLink type="primary" :underline="false" @click="formType = 'register'">
创建新帐号
</ElLink>
<div class="mb-6">
<HTabList
v-model="loginType" :options="[
{ label: '账号密码登录', value: 'default' },
{ label: '扫码登录', value: 'qrcode' },
]"
/>
</div>
<template v-if="loginType === 'default'">
<div class="title-container">
<h3 class="title">
欢迎来到 {{ title }} ! 👋🏻
</h3>
</div>
<div>
<ElFormItem prop="account">
<ElInput v-model="loginForm.account" placeholder="用户名" type="text" tabindex="1">
<template #prefix>
<SvgIcon name="i-ri:user-3-fill" />
</template>
</ElInput>
</ElFormItem>
<ElFormItem prop="password">
<ElInput v-model="loginForm.password" type="password" placeholder="密码" tabindex="2" autocomplete="new-password" show-password @keyup.enter="handleLogin">
<template #prefix>
<SvgIcon name="i-ri:lock-2-fill" />
</template>
</ElInput>
</ElFormItem>
</div>
<div class="flex-bar">
<ElCheckbox v-model="loginForm.remember">
记住我
</ElCheckbox>
<ElLink type="primary" :underline="false" @click="formType = 'reset'">
忘记密码了?
</ElLink>
</div>
<ElButton :loading="loading" type="primary" size="large" style="width: 100%;" @click.prevent="handleLogin">
登录
</ElButton>
<div class="sub-link">
<span class="text">还没有帐号?</span>
<ElLink type="primary" :underline="false" @click="formType = 'register'">
创建新帐号
</ElLink>
</div>
</template>
<template v-else-if="loginType === 'qrcode'">
<div class="flex flex-col items-center">
<el-image src="https://s2.loli.net/2024/04/26/GsahtuIZ9XOg5jr.png" class="h-[250px] w-[250px]" />
<div class="mt-2 op-50">
请使用微信扫码登录
</div>
</div>
</template>
<div style="margin-top: 20px; margin-bottom: -20px; text-align: center;">
<ElDivider>演示账号一键登录</ElDivider>
<ElButton type="primary" size="small" plain @click="testAccount('admin')">
Expand Down

0 comments on commit d38e405

Please sign in to comment.