From 90db83e12e3d8e74d8d2f3786f197a2ed2e23c6f Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Wed, 20 Jul 2022 10:00:29 +0800
Subject: [PATCH] feat: add qrcode login

---
 yudao-ui-admin-vue3/src/locales/en.ts         |  1 +
 yudao-ui-admin-vue3/src/locales/zh-CN.ts      |  1 +
 yudao-ui-admin-vue3/src/views/Login/Login.vue |  4 ++-
 .../src/views/Login/components/LoginForm.vue  |  4 ++-
 .../src/views/Login/components/QrCodeForm.vue | 34 +++++++++++++++++++
 .../views/Login/components/RegisterForm.vue   | 10 +++---
 .../src/views/Login/components/index.ts       |  3 +-
 7 files changed, 49 insertions(+), 8 deletions(-)
 create mode 100644 yudao-ui-admin-vue3/src/views/Login/components/QrCodeForm.vue

diff --git a/yudao-ui-admin-vue3/src/locales/en.ts b/yudao-ui-admin-vue3/src/locales/en.ts
index 9ec9121b8..6d0cff298 100644
--- a/yudao-ui-admin-vue3/src/locales/en.ts
+++ b/yudao-ui-admin-vue3/src/locales/en.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'
   },
diff --git a/yudao-ui-admin-vue3/src/locales/zh-CN.ts b/yudao-ui-admin-vue3/src/locales/zh-CN.ts
index 06b503006..96098d178 100644
--- a/yudao-ui-admin-vue3/src/locales/zh-CN.ts
+++ b/yudao-ui-admin-vue3/src/locales/zh-CN.ts
@@ -124,6 +124,7 @@ export default {
     getSmsCode: '获取验证码',
     btnMobile: '手机登录',
     btnQRCode: '二维码登录',
+    qrcode: '扫描二维码登录',
     btnRegister: '注册',
     SmsSendMsg: '验证码已发送'
   },
diff --git a/yudao-ui-admin-vue3/src/views/Login/Login.vue b/yudao-ui-admin-vue3/src/views/Login/Login.vue
index f81180002..e4638876f 100644
--- a/yudao-ui-admin-vue3/src/views/Login/Login.vue
+++ b/yudao-ui-admin-vue3/src/views/Login/Login.vue
@@ -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>
diff --git a/yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue b/yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue
index c3f0a659a..9bea00428 100644
--- a/yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue
+++ b/yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue
@@ -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)">
diff --git a/yudao-ui-admin-vue3/src/views/Login/components/QrCodeForm.vue b/yudao-ui-admin-vue3/src/views/Login/components/QrCodeForm.vue
new file mode 100644
index 000000000..7348fcd29
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/Login/components/QrCodeForm.vue
@@ -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>
diff --git a/yudao-ui-admin-vue3/src/views/Login/components/RegisterForm.vue b/yudao-ui-admin-vue3/src/views/Login/components/RegisterForm.vue
index 13820962d..1424a9c9d 100644
--- a/yudao-ui-admin-vue3/src/views/Login/components/RegisterForm.vue
+++ b/yudao-ui-admin-vue3/src/views/Login/components/RegisterForm.vue
@@ -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>
diff --git a/yudao-ui-admin-vue3/src/views/Login/components/index.ts b/yudao-ui-admin-vue3/src/views/Login/components/index.ts
index 2ac13ca18..903b17233 100644
--- a/yudao-ui-admin-vue3/src/views/Login/components/index.ts
+++ b/yudao-ui-admin-vue3/src/views/Login/components/index.ts
@@ -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 }