bonus-material-app/src/pages/login/index.vue

<template>
    <!-- 登录页面 -->
    <view class="login" v-if="origin.indexOf('ticket') == -1">
        <uni-forms :modelValue="loginForm" label-position="top" class="login-form">
            <h1>用户登录</h1>
            <uni-forms-item required label="用户名">
                <uni-easyinput v-model="loginForm.username" placeholder="请输入用户名" />
            </uni-forms-item>
            <uni-forms-item required label="密码">
                <uni-easyinput
                    type="password"
                    placeholder="请输入密码"
                    v-model="loginForm.password"
                />
            </uni-forms-item>

            <view class="login-btn" @tap="onHandleLogin">登录</view>
        </uni-forms>
    </view>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { appLoginAPI, getUserInfoAPI, iwsLoginAPI } from '@/services/index.js'
import { useMemberStore } from '@/stores'
const memberStore = useMemberStore()
const origin = window.location.href

// 登录参数
const loginForm = reactive({
    username: uni.getStorageSync('username'),
    password: uni.getStorageSync('password'),
    loginType: 'USERNAME_PASSWORD',
    code: '',
    phoneUuid: '',
    uuid: '',
    verificationCode: '',
})

onMounted(async () => {
    console.log('🚀 ~ onMounted ~ origin:', origin)
    // uni.showToast({
    //     title: origin,
    //     icon: 'none',
    //     duration: 5000,
    // })
    if (origin.indexOf('ticket') != -1) {
        try {
            uni.showLoading({ title: '登录中' })

            const { data: result } = await iwsLoginAPI({
                ticket: origin.split('ticket=')[1].split('#/')[0],
                sysType: 1,
            })

            // 1.  获取 token 并存储
            memberStore.setToken(result.access_token)
            // 2 . 获取用户信息并存储
            const res = await getUserInfoAPI()
            memberStore.setUserInfo(res.user)
            uni.showToast({ title: '登录成功！', icon: 'none' })
            uni.setStorageSync('username', loginForm.username)
            uni.setStorageSync('password', loginForm.password)
            setTimeout(() => {
                uni.switchTab({
                    url: '/pages/index/index',
                })
            }, 500)
        } catch (error) {
            console.log(error)
            uni.hideLoading()
            showToast('登录失败')
        }
    }
})

// 登录按钮
const onHandleLogin = async () => {
    const res = await appLoginAPI(loginForm)
    if (res.code === 200) {
        // 1.  获取 token 并存储
        memberStore.setToken(res.data.access_token)
        // 2 . 获取用户信息并存储
        const result = await getUserInfoAPI()
        memberStore.setUserInfo(result.user)
        uni.showToast({ title: '登录成功！', icon: 'none' })
        uni.setStorageSync('username', loginForm.username)
        uni.setStorageSync('password', loginForm.password)
        setTimeout(() => {
            uni.switchTab({
                url: '/pages/index/index',
            })
        }, 500)
    }
}
</script>

<style lang="scss" scoped>
.login {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #dcf4ff;

    .login-form {
        width: 90%;
        padding: 15rpx;
        border: 1px solid #eee;
        background-color: #fff;
        border-radius: 16rpx;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

        h1 {
            text-align: center;
            padding: 30rpx 0;
            font-size: 32rpx;
            font-weight: bold;
        }

        .login-btn {
            padding: 18rpx 0;
            text-align: center;
            background-color: #1989fa;
            color: #fff;
            border-radius: 10rpx;
        }
    }
}
</style>