119 lines
2.3 KiB
Vue
119 lines
2.3 KiB
Vue
<template>
|
|
<view class="login-page">
|
|
<view class="login-title">
|
|
<text class="title-text">用户登陆</text>
|
|
</view>
|
|
<view class="login-container">
|
|
<nut-input v-model="username" placeholder="请输入用户名" clearable label="用户名" class="login-input"></nut-input>
|
|
<nut-input v-model="password" placeholder="请输入密码" clearable label="密码" type="password"
|
|
class="login-input"></nut-input>
|
|
<view style="padding-top:100rpx ;">
|
|
<!-- 登录按钮 -->
|
|
<nut-button type="primary" block @click="handleLogin">
|
|
登录
|
|
</nut-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
reactive,
|
|
onMounted,
|
|
computed
|
|
} from 'vue'
|
|
|
|
import {
|
|
onLoad,
|
|
onShow,
|
|
} from '@dcloudio/uni-app'
|
|
import {
|
|
fetchRooms,
|
|
fetchBooking,
|
|
fetchUnBooking,
|
|
fetchLogin,
|
|
} from '@/api/index';
|
|
import {
|
|
navigateTo,
|
|
} from '@/utils/helper'
|
|
|
|
|
|
|
|
// 响应式数据
|
|
const username = ref('');
|
|
const password = ref('');
|
|
|
|
// 登录方法
|
|
const handleLogin = () => {
|
|
if (username.value === '') {
|
|
uni.showToast({
|
|
title: '请输入用户名',
|
|
icon: 'none',
|
|
});
|
|
return;
|
|
}
|
|
if (password.value === '') {
|
|
uni.showToast({
|
|
title: '请输入密码',
|
|
icon: 'none',
|
|
});
|
|
return;
|
|
}
|
|
fetchLogin({
|
|
user_name: username.value,
|
|
password: password.value
|
|
}).then(res => {
|
|
console.log(res);
|
|
uni.setStorageSync('token', res.token)
|
|
uni.setStorageSync('uid', res.user.user_id)
|
|
uni.setStorageSync('username', res.user.user_name)
|
|
uni.setStorageSync('role', res.user.role.value)
|
|
// isLoggedIn.value = true
|
|
// 登录操作（模拟成功）
|
|
uni.showToast({
|
|
title: '登录成功',
|
|
icon: 'success',
|
|
});
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
})
|
|
|
|
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.login-page {
|
|
display: flex;
|
|
// justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
}
|
|
|
|
.login-title {
|
|
margin-top: 240rpx;
|
|
|
|
margin-bottom: 40rpx;
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.title-text {
|
|
font-size: 36rpx;
|
|
color: #ff6600;
|
|
text-align: center;
|
|
}
|
|
|
|
.login-container {
|
|
width: 80%;
|
|
// max-width: 700rpx;
|
|
padding: 40rpx;
|
|
}
|
|
|
|
</style> |