feat: add qrcode login

xingyu
1 parent 9c43d9fa
Showing 7 changed files with 49 additions and 8 deletions
yudao-ui-admin-vue3/src/locales/en.ts
yudao-ui-admin-vue3/src/locales/zh-CN.ts
yudao-ui-admin-vue3/src/views/Login/Login.vue
yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue
yudao-ui-admin-vue3/src/views/Login/components/QrCodeForm.vue
yudao-ui-admin-vue3/src/views/Login/components/RegisterForm.vue
yudao-ui-admin-vue3/src/views/Login/components/index.ts
@@ -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'
   },
@@ -124,6 +124,7 @@ export default {
     getSmsCode: '获取验证码',
     btnMobile: '手机登录',
     btnQRCode: '二维码登录',
+    qrcode: '扫描二维码登录',
     btnRegister: '注册',
     SmsSendMsg: '验证码已发送'
   },
 <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>
@@ -246,7 +246,9 @@ onMounted(async () =&gt; {
               </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)">
+<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>
@@ -121,20 +121,20 @@ const loginRegister = async () =&gt; {
  
     <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>
@@ -2,5 +2,6 @@ import LoginForm from &#39;./LoginForm.vue&#39;
 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 }