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

<template>
    <!-- 登录页面 -->
    <view class="login">
        <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 } from '@/services/index.js'
import { useMemberStore } from '@/stores'
import { onLoad } from '@dcloudio/uni-app'
// const memberStore = useMemberStore()

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

// 登录按钮
const onHandleLogin = async () => {
    const res = await appLoginAPI(loginForm)
    console.log(res)
    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>