RunForge-Frontend/src/pages/Login/uniLogin/uniLogin.vue

<template>
    <div class="root">
        <div class="logo">
            <img alt="哪吒乐跑" src="/logo.svg" height="40">
            <span class="title">哪吒乐跑 | 快捷登录</span>
        </div>

        <a-form size="large" :model="form" :rules="[]" class="form" @submit="handleSubmit">
            <div class="uniLoginButton">
                <div class="button">
                    <a-tooltip content="QQ登录" mini>
                        <a-avatar :size="64" :style="{ backgroundColor: 'rgb(255, 52, 52)' }"
                            @click="GetLoginUrl('qq')"><icon-qq /></a-avatar>
                    </a-tooltip>
                </div>
                <div class="button">
                    <a-tooltip content="微信登录" mini>
                        <a-avatar :size="64" :style="{ backgroundColor: 'rgb(255, 52, 52)' }"
                            @click="GetLoginUrl('wx')"><icon-wechat /></a-avatar>
                    </a-tooltip>
                </div>
            </div>
            <div class="tip">未注册的账号登录后将自动注册<br>不同登录方式的账号资产和权限互不共享</div>
            <a-button type="text" class="forgetpass" @click="emit('changeMode', 'login')">账号密码登录</a-button>
        </a-form>
    </div>

    <div class="loading" v-if="loading">
        <div class="loadingTip">
            <icon-loading :size="32" />
            <div class="text">努力加载中</div>
        </div>
    </div>
</template>

<script setup>
import { getLoginUrl } from '@/api/login'
import { timeFix } from '@/utils/util'
import { useRoute, useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import { Notification } from '@arco-design/web-vue'
import { useUserStore } from '@/store/modules/user'
import { isElectron } from '@/utils/electron'

const userStore = useUserStore()

const loading = ref(false)
const route = useRoute()
const router = useRouter()
const emit = defineEmits(['changeMode', 'changeLoading'])

const from = route.query.from

const GetLoginUrl = async (type) => {
    try {
        changeLoading(true)
        const res = await getLoginUrl({ type })
        if (!res || res.code != 0)
            return requestFailed('获取登录链接失败！' + res?.msg ?? '')
        if (isElectron())
            window.electron.openNewWindow(res.data)
        else
            window.location.href = res.data
    } catch (error) {
        console.log(error)
        requestFailed('获取登录链接失败！')
    } finally {
        changeLoading(false)
    }
}

const UniLogin = async (type, code) => {
    try {
        changeLoading(true)
        userStore.uniLogin(type, code)
            .then((res) => { loginSuccess(res) })
            .catch((err) => {
                requestFailed(err.message)
            })
            .finally(() => {
                changeLoading(false)
            })
    } catch (error) {
        requestFailed('登录失败！请稍后再试')
    }
}

const changeLoading = (value) => {
    loading.value = value
}

const loginSuccess = (res) => {
    Notification.success({
        title: `${timeFix()}，${res.username}`,
        content: '欢迎回来！',
        duration: 2000
    })
    if (isElectron())
        window.electron.openOldWindow(from || '/')
    else
        router.push(from || '/')
}

const requestFailed = (msg) => {
    Notification.error({
        title: '错误',
        content: msg || '请求出现错误，请稍后再试',
    })
}

onMounted(() => {
    if (route.query.type && route.query.code) {
        UniLogin(route.query.type, route.query.code)
    }
})

</script>

<style lang="less" scoped>
.loading {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 9999;
    border-radius: 10px;

    .loadingTip {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: rgb(255, 52, 52);

        .text {
            font-family: 'Alimama ShuHeiTi';
            font-size: 1.2em;
        }
    }
}

.root {
    display: flex;
    gap: 40px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.form {
    width: 100%;
}

.logo {
    display: flex;

    .title {
        color: rgb(255, 52, 52);
        font-size: 1.8em;
        font-weight: bold;
        margin-left: 15px;
        font-family: Alimama ShuHeiTi, -apple-system, BlinkMacSystemFont;
    }
}

.tip {
    color: #777;
    font-size: 0.9em;
    text-align: left;
    margin-bottom: 20px;
    margin-left: -8px;
}

.uniLoginButton {
    display: flex;
    gap: 40px;
    justify-content: center;
    height: 100px;

    .button {
        cursor: pointer;
    }
}

.forgetpass {
    width: 100px;
    margin-top: -10px;
    margin-left: -15px;
}
</style>