|
|
<template>
|
|
|
<div class="page-container tn-gradient-bg__cool-5">
|
|
|
<cheader></cheader>
|
|
|
<div class="login-body">
|
|
|
<div class="login-form tn-grey_shadow">
|
|
|
<p>账号登录</p>
|
|
|
<tn-input v-model="username" placeholder="请输入用户名">
|
|
|
<template #prefix>
|
|
|
<uni-icons type="contact" size="18" color="#ccc"></uni-icons>
|
|
|
</template>
|
|
|
</tn-input>
|
|
|
<div class="divider"></div>
|
|
|
<tn-input v-model="password" type="password" placeholder="请输入密码">
|
|
|
<template #prefix>
|
|
|
<uni-icons type="locked-filled" size="18" color="#ccc"></uni-icons>
|
|
|
</template>
|
|
|
</tn-input>
|
|
|
<div class="divider"></div>
|
|
|
<tn-button width="250px" height="36px" @click="loginAction()">登 录</tn-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import cheader from '@/components/header.vue'
|
|
|
import { userLogin } from '@/api/index.js'
|
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
|
import { ref } from 'vue'
|
|
|
|
|
|
const LOGIN_USERNAME_KEY = 'login_username'
|
|
|
const LOGIN_PASSWORD_KEY = 'login_password'
|
|
|
|
|
|
const username = ref('')
|
|
|
const password = ref('')
|
|
|
|
|
|
onLoad(() => {
|
|
|
const savedUsername = uni.getStorageSync(LOGIN_USERNAME_KEY)
|
|
|
const savedPassword = uni.getStorageSync(LOGIN_PASSWORD_KEY)
|
|
|
if (savedUsername) {
|
|
|
username.value = savedUsername
|
|
|
}
|
|
|
if (savedPassword) {
|
|
|
password.value = savedPassword
|
|
|
}
|
|
|
})
|
|
|
|
|
|
const loginAction = async () => {
|
|
|
const loginParams = {
|
|
|
username: username.value,
|
|
|
password: password.value,
|
|
|
tenantId: null
|
|
|
}
|
|
|
|
|
|
try {
|
|
|
const res = await userLogin(loginParams)
|
|
|
console.log(res)
|
|
|
// profile 请求会立即读取 token，这里使用同步存储避免异步写入导致 401
|
|
|
uni.setStorageSync('token', res.access_token)
|
|
|
if (res.refresh_token) {
|
|
|
uni.setStorageSync('refresh_token', res.refresh_token)
|
|
|
}
|
|
|
uni.setStorageSync('userInfo', JSON.stringify(res.userInfo))
|
|
|
uni.setStorageSync(LOGIN_USERNAME_KEY, username.value)
|
|
|
uni.setStorageSync(LOGIN_PASSWORD_KEY, password.value)
|
|
|
// 登录成功后重置路由栈，避免返回到登录页
|
|
|
uni.reLaunch({
|
|
|
url: '/pages/index/index',
|
|
|
})
|
|
|
} catch (error) {
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.login-body {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
height: 90vh;
|
|
|
|
|
|
.login-form {
|
|
|
height: 40vh;
|
|
|
width: 30vw;
|
|
|
padding: 15px 40px;
|
|
|
background-color: #fff;
|
|
|
border-radius: 5px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
|
|
|
p {
|
|
|
font-size: 28px;
|
|
|
font-weight: 600;
|
|
|
margin-bottom: 20px;
|
|
|
background: linear-gradient(to right, #1874CD 70%, #0099ff);
|
|
|
-webkit-background-clip: text;
|
|
|
background-clip: text;
|
|
|
color: transparent;
|
|
|
}
|
|
|
|
|
|
.divider {
|
|
|
height: 20px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |
