zenghuapei
/
cyywl_server
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add qrcode login

pull/2/head
xingyu 2022-07-20 10:00:29 +08:00
parent 9c43d9fa78
commit 90db83e12e
7 changed files with 49 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
yudao-ui-admin-vue3/src/locales/en.ts
View File

@ -124,6 +124,7 @@ export default {
getSmsCode: 'Get SMS Code',
btnMobile: 'Mobile sign in',
btnQRCode: 'QR code sign in',
qrcode: 'Scan the QR code to log in',
btnRegister: 'Sign up',
SmsSendMsg: 'code has been sent'
},

1
yudao-ui-admin-vue3/src/locales/zh-CN.ts
View File

@ -124,6 +124,7 @@ export default {
getSmsCode: '获取验证码',
btnMobile: '手机登录',
btnQRCode: '二维码登录',
qrcode: '扫描二维码登录',
btnRegister: '注册',
SmsSendMsg: '验证码已发送'
},

4
yudao-ui-admin-vue3/src/views/Login/Login.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { LoginForm, MobileForm, RegisterForm } from './components'
import { LoginForm, MobileForm, RegisterForm, QrCodeForm } from './components'
import { ThemeSwitch } from '@/components/ThemeSwitch'
import { LocaleDropdown } from '@/components/LocaleDropdown'
import { useI18n } from '@/hooks/web/useI18n'
@ -66,6 +66,8 @@ const appStore = useAppStore()
<LoginForm class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)" />
<!-- 手机登录 -->
<MobileForm class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)" />
<!-- 二维码登录 -->
<QrCodeForm class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)" />
<!-- 注册 -->
<RegisterForm class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)" />
</div>

4
yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue
View File

@ -246,7 +246,9 @@ onMounted(async () => {
</el-button>
</el-col>
<el-col :span="8">
<el-button class="w-[100%]">{{ t('login.btnQRCode') }}</el-button>
<el-button class="w-[100%]" @click="setLoginState(LoginStateEnum.QR_CODE)">
{{ t('login.btnQRCode') }}
</el-button>
</el-col>
<el-col :span="8">
<el-button class="w-[100%]" @click="setLoginState(LoginStateEnum.REGISTER)">

34
yudao-ui-admin-vue3/src/views/Login/components/QrCodeForm.vue Normal file
View File

@ -0,0 +1,34 @@
<script setup lang="ts">
import { computed, unref } from 'vue'
import { ElRow, ElCol, ElCard, ElDivider } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'
import { useLoginState, LoginStateEnum } from './useLogin'
import LoginFormTitle from './LoginFormTitle.vue'
import { Qrcode } from '@/components/Qrcode'
import logoImg from '@/assets/imgs/logo.png'
const { t } = useI18n()
const { handleBackLogin, getLoginState } = useLoginState()
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE)
</script>
<template>
<el-row v-show="getShow" style="maring-left: -10px; maring-right: -10px">
<el-col :span="24" style="padding-left: 10px; padding-right: 10px">
<LoginFormTitle style="width: 100%" />
</el-col>
<el-col :span="24" style="padding-left: 10px; padding-right: 10px">
<el-card shadow="hover" class="mb-10px text-center">
<Qrcode :logo="logoImg" />
</el-card>
</el-col>
<el-divider class="enter-x">{{ t('login.qrcode') }}</el-divider>
<el-col :span="24" style="padding-left: 10px; padding-right: 10px">
<div class="w-[100%] mt-15px">
<el-button class="w-[100%]" @click="handleBackLogin">
{{ t('sys.login.backSignIn') }}
</el-button>
</div>
</el-col>
</el-row>
</template>

10
yudao-ui-admin-vue3/src/views/Login/components/RegisterForm.vue
View File

@ -121,20 +121,20 @@ const loginRegister = async () => {
<template #code="form">
<div class="w-[100%] flex">
<ElInput v-model="form['code']" :placeholder="t('login.codePlaceholder')" />
<el-input v-model="form['code']" :placeholder="t('login.codePlaceholder')" />
</div>
</template>
<template #register>
<div class="w-[100%]">
<ElButton type="primary" class="w-[100%]" :loading="loading" @click="loginRegister">
<el-button type="primary" class="w-[100%]" :loading="loading" @click="loginRegister">
{{ t('login.register') }}
</ElButton>
</el-button>
</div>
<div class="w-[100%] mt-15px">
<ElButton class="w-[100%]" @click="handleBackLogin">
<el-button class="w-[100%]" @click="handleBackLogin">
{{ t('login.hasUser') }}
</ElButton>
</el-button>
</div>
</template>
</Form>

3
yudao-ui-admin-vue3/src/views/Login/components/index.ts
View File

@ -2,5 +2,6 @@ import LoginForm from './LoginForm.vue'
import MobileForm from './MobileForm.vue'
import LoginFormTitle from './LoginFormTitle.vue'
import RegisterForm from './RegisterForm.vue'
import QrCodeForm from './QrCodeForm.vue'
export { LoginForm, MobileForm, LoginFormTitle, RegisterForm }
export { LoginForm, MobileForm, LoginFormTitle, RegisterForm, QrCodeForm }