hhyykk/ipms-sjy
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy.git synced 2025-07-07 07:35:06 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add qrcode login

Browse Source
This commit is contained in:
xingyu
2022-07-20 10:00:29 +08:00
parent 9c43d9fa78
commit 90db83e12e
7 changed files with 49 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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 }