You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.0 KiB
Vue
85 lines
2.0 KiB
Vue
e<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 { ref } from 'vue'
|
|
|
|
const username = ref('admin')
|
|
const password = ref('admin')
|
|
|
|
const loginAction = async () => {
|
|
const loginParams = {
|
|
username: username.value,
|
|
password: password.value,
|
|
tenantId: null
|
|
}
|
|
|
|
try {
|
|
const res = await userLogin(loginParams)
|
|
uni.setStorage({key: 'token', data: res.accessToken})
|
|
uni.setStorage({key: 'userInfo', data: JSON.stringify(res.userInfo)})
|
|
uni.navigateTo({
|
|
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> |