96 lines
2.6 KiB
Vue
96 lines
2.6 KiB
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>
|