couponCenter_mpapp/src/pages-fg/login/login.vue

<script lang="ts" setup>
import { useTokenStore } from '@/store/token'
import { isPageTabbar } from '@/tabbar/store'
import { HOME_PAGE } from '@/utils/index'

// 使用自定义导航栏样式
definePage({
    style: {
        navigationBarTitleText: '',
        navigationStyle: 'custom',
        backgroundColor: '#f7f7f7',
    },
})

const tokenStore = useTokenStore()

async function doLogin() {
    if (tokenStore.hasLogin) {
        uni.navigateBack()
        return
    }

    try {
        uni.showLoading({
            title: '登录中...',
        })
        // 调用登录接口
        await tokenStore.wxLogin()

        // 登录成功后，检查是否有重定向参数
        const pages = getCurrentPages()
        const currentPage = pages[pages.length - 1]
        const redirect = currentPage?.options?.redirect
        uni.hideLoading()
        if (redirect) {
            const redirectUrl = decodeURIComponent(redirect)
            if (isPageTabbar(redirectUrl)) {
                uni.switchTab({ url: redirectUrl })
            }
            else {
                uni.redirectTo({ url: redirectUrl })
            }
        }
        else {
            // 默认跳转到首页
            if (isPageTabbar(HOME_PAGE)) {
                uni.switchTab({ url: HOME_PAGE })
            }
            else {
                uni.redirectTo({ url: HOME_PAGE })
            }
        }
    }
    catch (error) {
        uni.hideLoading()
        console.log('登录失败', error)
        uni.showToast({
            title: '登录失败，请稍后重试',
            icon: 'none',
        })
    }
}
</script>

<template>
    <view class="login-container">
        <!-- Logo区域 -->
        <view class="logo-section">
            <image class="logo" src="~@/static/images/index/logo.jpg" mode="aspectFit" />
        </view>

        <!-- 登录按钮区域 -->
        <view class="login-btn-section">
            <button class="login-btn" open-type="getUserInfo" @click="doLogin">
                <text class="btn-text">微信快捷登录</text>
            </button>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.login-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f7f7f7;
    padding: 0 30px;
}

.logo-section {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    .logo {
        width: 160px;
        height: 160px;
        border-radius: 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

.login-btn-section {
    margin-bottom: 390rpx;

    .login-btn {
        background-color: #07c160;
        color: white;
        font-size: 16px;
        font-weight: 500;
        width: 100%;
        height: 48px;
        line-height: 48px;
        border-radius: 24px;
        border: none;
        box-shadow: 0 2px 8px rgba(7, 193, 96, 0.3);

        &:active {
            background-color: #06b356;
        }
    }
}

.agreement-section {
    text-align: center;
    padding-bottom: 30px;

    .agreement-text {
        font-size: 12px;
        color: #999;

        .link {
            color: #07c160;
            text-decoration: underline;
        }
    }
}
</style>