|
@@ -74,27 +74,11 @@
|
|
|
登录
|
|
登录
|
|
|
</n-button>
|
|
</n-button>
|
|
|
</n-tab-pane>
|
|
</n-tab-pane>
|
|
|
- <n-tab-pane
|
|
|
|
|
- v-if="MODULE_CONFIG_SWITCH.wechatQrcodeLogin && !isMobile()"
|
|
|
|
|
- name="qrcodelogin"
|
|
|
|
|
- tab="微信扫码登录"
|
|
|
|
|
- >
|
|
|
|
|
- <div
|
|
|
|
|
- class="qrcode"
|
|
|
|
|
- :style="{
|
|
|
|
|
- backgroundImage: `url(${base64})`,
|
|
|
|
|
- }"
|
|
|
|
|
- ></div>
|
|
|
|
|
- </n-tab-pane>
|
|
|
|
|
</n-tabs>
|
|
</n-tabs>
|
|
|
</n-card>
|
|
</n-card>
|
|
|
- <div
|
|
|
|
|
- class="other-login"
|
|
|
|
|
- v-if="MODULE_CONFIG_SWITCH.thirdLogin"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <div class="other-login">
|
|
|
<span>第三方登录:</span>
|
|
<span>第三方登录:</span>
|
|
|
<div
|
|
<div
|
|
|
- v-if="MODULE_CONFIG_SWITCH.qqLogin"
|
|
|
|
|
class="logo-wrap"
|
|
class="logo-wrap"
|
|
|
@click="handleQQLogin()"
|
|
@click="handleQQLogin()"
|
|
|
>
|
|
>
|
|
@@ -104,17 +88,6 @@
|
|
|
/>
|
|
/>
|
|
|
</div>
|
|
</div>
|
|
|
<div
|
|
<div
|
|
|
- v-if="MODULE_CONFIG_SWITCH.wechatLogin"
|
|
|
|
|
- class="logo-wrap"
|
|
|
|
|
- @click="handleWechatLogin()"
|
|
|
|
|
- >
|
|
|
|
|
- <img
|
|
|
|
|
- class="logo"
|
|
|
|
|
- src="@/assets/img/wechat_logo.webp"
|
|
|
|
|
- />
|
|
|
|
|
- </div>
|
|
|
|
|
- <div
|
|
|
|
|
- v-if="MODULE_CONFIG_SWITCH.githubLogin"
|
|
|
|
|
class="logo-wrap"
|
|
class="logo-wrap"
|
|
|
@click="handleGithubLogin"
|
|
@click="handleGithubLogin"
|
|
|
>
|
|
>
|
|
@@ -131,13 +104,9 @@
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
|
import { LockClosedOutline, PersonOutline } from '@vicons/ionicons5';
|
|
import { LockClosedOutline, PersonOutline } from '@vicons/ionicons5';
|
|
|
-import { getRandomString, isMobile, isWechat } from 'billd-utils';
|
|
|
|
|
-import QRCode from 'qrcode';
|
|
|
|
|
-import { onMounted, onUnmounted, reactive, ref } from 'vue';
|
|
|
|
|
|
|
+import { onMounted, onUnmounted, ref } from 'vue';
|
|
|
|
|
|
|
|
-import { fetchQrcodeLogin, fetchQrcodeLoginStatus } from '@/api/user';
|
|
|
|
|
-import { MODULE_CONFIG_SWITCH, QRCODE_LOGIN_URI } from '@/constant';
|
|
|
|
|
-import { useQQLogin, useWechatLogin } from '@/hooks/use-login';
|
|
|
|
|
|
|
+import { useQQLogin } from '@/hooks/use-login';
|
|
|
import { useAppStore } from '@/store/app';
|
|
import { useAppStore } from '@/store/app';
|
|
|
import { useUserStore } from '@/store/user';
|
|
import { useUserStore } from '@/store/user';
|
|
|
|
|
|
|
@@ -153,14 +122,8 @@ const loginForm = ref({
|
|
|
id: '',
|
|
id: '',
|
|
|
password: '',
|
|
password: '',
|
|
|
});
|
|
});
|
|
|
-const qrcodeParams = reactive({
|
|
|
|
|
- platform: 'wechat',
|
|
|
|
|
- exp: 24,
|
|
|
|
|
- loginId: '',
|
|
|
|
|
-});
|
|
|
|
|
-const base64 = ref('');
|
|
|
|
|
const loginFormRef = ref(null);
|
|
const loginFormRef = ref(null);
|
|
|
-const currentTab = ref('pwdlogin'); // qrcodelogin,pwdlogin
|
|
|
|
|
|
|
+const currentTab = ref('pwdlogin'); // pwdlogin
|
|
|
const loopTimer = ref();
|
|
const loopTimer = ref();
|
|
|
const emits = defineEmits(['close']);
|
|
const emits = defineEmits(['close']);
|
|
|
|
|
|
|
@@ -169,18 +132,6 @@ onUnmounted(() => {
|
|
|
clearInterval(loopTimer.value);
|
|
clearInterval(loopTimer.value);
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
-async function generateQR(text) {
|
|
|
|
|
- let base64 = '';
|
|
|
|
|
- try {
|
|
|
|
|
- base64 = await QRCode.toDataURL(text, {
|
|
|
|
|
- margin: 1,
|
|
|
|
|
- });
|
|
|
|
|
- } catch (err) {
|
|
|
|
|
- console.error('生成二维码失败!', err);
|
|
|
|
|
- }
|
|
|
|
|
- return base64;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
function handleGithubLogin() {
|
|
function handleGithubLogin() {
|
|
|
window.$message.warning('敬请期待!');
|
|
window.$message.warning('敬请期待!');
|
|
|
}
|
|
}
|
|
@@ -189,62 +140,6 @@ function handleQQLogin() {
|
|
|
useQQLogin({ exp: 24 });
|
|
useQQLogin({ exp: 24 });
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-function handleWechatLogin() {
|
|
|
|
|
- if (!isWechat()) {
|
|
|
|
|
- window.$message.warning('请在微信打开!');
|
|
|
|
|
- } else {
|
|
|
|
|
- useWechatLogin({
|
|
|
|
|
- platform: 'wechat',
|
|
|
|
|
- exp: 24,
|
|
|
|
|
- loginId: getRandomString(8),
|
|
|
|
|
- });
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-async function handleWechatQrcodeLogin() {
|
|
|
|
|
- const res = await fetchQrcodeLogin({
|
|
|
|
|
- platform: qrcodeParams.platform,
|
|
|
|
|
- exp: qrcodeParams.exp,
|
|
|
|
|
- });
|
|
|
|
|
- if (res.code === 200) {
|
|
|
|
|
- qrcodeParams.loginId = res.data.login_id;
|
|
|
|
|
- base64.value = await generateQR(
|
|
|
|
|
- `${QRCODE_LOGIN_URI}?platform=${qrcodeParams.platform}&exp=${qrcodeParams.exp}&loginId=${qrcodeParams.loginId}`
|
|
|
|
|
- );
|
|
|
|
|
- handleLoopQrcodeLoginStatus();
|
|
|
|
|
- } else {
|
|
|
|
|
- window.$message.error(res.message);
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-function handleLoopQrcodeLoginStatus() {
|
|
|
|
|
- clearInterval(loopTimer.value);
|
|
|
|
|
- async function loopFn() {
|
|
|
|
|
- try {
|
|
|
|
|
- const res = await fetchQrcodeLoginStatus({
|
|
|
|
|
- platform: qrcodeParams.platform,
|
|
|
|
|
- login_id: qrcodeParams.loginId,
|
|
|
|
|
- });
|
|
|
|
|
- if (res.code === 200) {
|
|
|
|
|
- if (res.data.isLogin && res.data.token) {
|
|
|
|
|
- userStore.setToken(res.data.token, res.data.exp);
|
|
|
|
|
- userStore.getUserInfo();
|
|
|
|
|
- appStore.showLoginModal = false;
|
|
|
|
|
- clearInterval(loopTimer.value);
|
|
|
|
|
- }
|
|
|
|
|
- } else {
|
|
|
|
|
- window.$message.error(res.message);
|
|
|
|
|
- }
|
|
|
|
|
- } catch (error) {
|
|
|
|
|
- console.log(error);
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- loopTimer.value = setInterval(() => {
|
|
|
|
|
- loopFn();
|
|
|
|
|
- }, 1000);
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
function handleClose() {
|
|
function handleClose() {
|
|
|
appStore.showLoginModal = false;
|
|
appStore.showLoginModal = false;
|
|
|
emits('close');
|
|
emits('close');
|
|
@@ -252,14 +147,10 @@ function handleClose() {
|
|
|
|
|
|
|
|
const handleLogin = async () => {
|
|
const handleLogin = async () => {
|
|
|
let token = null;
|
|
let token = null;
|
|
|
- if (currentTab.value === 'qrcodelogin') {
|
|
|
|
|
- handleWechatQrcodeLogin();
|
|
|
|
|
- } else {
|
|
|
|
|
- token = await userStore.pwdLogin({
|
|
|
|
|
- id: +loginForm.value.id,
|
|
|
|
|
- password: loginForm.value.password,
|
|
|
|
|
- });
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ token = await userStore.pwdLogin({
|
|
|
|
|
+ id: +loginForm.value.id,
|
|
|
|
|
+ password: loginForm.value.password,
|
|
|
|
|
+ });
|
|
|
if (token) {
|
|
if (token) {
|
|
|
window.$message.success('登录成功!');
|
|
window.$message.success('登录成功!');
|
|
|
userStore.getUserInfo();
|
|
userStore.getUserInfo();
|
|
@@ -278,9 +169,6 @@ const handleLoginSubmit = (e) => {
|
|
|
const tabChange = (v) => {
|
|
const tabChange = (v) => {
|
|
|
currentTab.value = v;
|
|
currentTab.value = v;
|
|
|
clearInterval(loopTimer.value);
|
|
clearInterval(loopTimer.value);
|
|
|
- if (currentTab.value === 'qrcodelogin') {
|
|
|
|
|
- handleWechatQrcodeLogin();
|
|
|
|
|
- }
|
|
|
|
|
};
|
|
};
|
|
|
const focus = ref(false);
|
|
const focus = ref(false);
|
|
|
const onFocus = () => {
|
|
const onFocus = () => {
|