161 lines
3.2 KiB
Plaintext
161 lines
3.2 KiB
Plaintext
<template>
|
|
<view class="container">
|
|
<view class="login-card">
|
|
|
|
<view class="title">
|
|
系统登录
|
|
</view>
|
|
<!-- 用户名 -->
|
|
<input class="input" type="text" v-model="loginForm.username" placeholder="请输入用户名" />
|
|
<!-- 密码 -->
|
|
<input class="input" type="password" v-model="loginForm.password" placeholder="请输入密码" />
|
|
<!-- 验证码 -->
|
|
<view class="code-box">
|
|
<input class="code-input" type="text" v-model="loginForm.code" placeholder="请输入验证码" />
|
|
<image class="code-image" :src="imgCode" mode="aspectFit" @click="loadCode" />
|
|
</view>
|
|
<!-- 登录按钮 -->
|
|
<button class="login-btn" type="primary" @click="login"> 登录 </button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { CodeApi } from '@/api/codeApi.uts'
|
|
import { LoginData } from '@/api/types'
|
|
import { LoginApi } from '@/api/loginApi'
|
|
import { Crypto } from '@/utils/crypto'
|
|
|
|
const loginForm = ref(new LoginData())
|
|
loginForm.value.username = "admin"
|
|
loginForm.value.password = "admin123"
|
|
|
|
const imgCode = ref('')
|
|
|
|
/**
|
|
* 加载验证码
|
|
*/
|
|
function loadCode() {
|
|
CodeApi.getImgCode().then(res => {
|
|
loginForm.value.uuid = res.uuid
|
|
imgCode.value = "data:image/png;base64," + res.img
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 登录
|
|
*/
|
|
async function login() {
|
|
if (loginForm.value.username == null || loginForm.value.username == "") {
|
|
uni.showToast({
|
|
title: '请输入用户名',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (loginForm.value.password == null || loginForm.value.password == "") {
|
|
uni.showToast({
|
|
title: '请输入密码',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (loginForm.value.code == null || loginForm.value.code == "") {
|
|
uni.showToast({
|
|
title: '请输入验证码',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
try {
|
|
const res = await LoginApi.login(loginForm.value)
|
|
if (res != null) {
|
|
uni.showToast({
|
|
title: '登录成功',
|
|
icon: 'success'
|
|
})
|
|
uni.navigateTo({
|
|
url: '/pages/index'
|
|
})
|
|
}
|
|
} catch (e) {
|
|
console.error('登录失败:', e)
|
|
loadCode()
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 页面初始化
|
|
*/
|
|
onMounted(() => {
|
|
loadCode()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
height: 100vh;
|
|
background-color: #f5f6fa;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.login-card {
|
|
width: 100%;
|
|
max-width: 700rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 20rpx;
|
|
padding: 40rpx;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.title {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin-bottom: 50rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.input {
|
|
height: 90rpx;
|
|
border: 1rpx solid #e5e5e5;
|
|
border-radius: 12rpx;
|
|
padding: 0 20rpx;
|
|
margin-bottom: 25rpx;
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
.code-box {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.code-input {
|
|
flex: 1;
|
|
height: 90rpx;
|
|
border: 1rpx solid #e5e5e5;
|
|
border-radius: 12rpx;
|
|
padding: 0 20rpx;
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
.code-image {
|
|
width: 220rpx;
|
|
height: 90rpx;
|
|
margin-left: 20rpx;
|
|
border-radius: 12rpx;
|
|
border: 1rpx solid #e5e5e5;
|
|
}
|
|
|
|
.login-btn {
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
border-radius: 12rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
</style> |