<template>
|
<view class="login-container">
|
<!-- 主题切换按钮 -->
|
<!-- <view class="theme-toggle" @click="toggleTheme">
|
<uni-icon :name="themeIcon" size="40"></uni-icon>
|
</view> -->
|
|
<!-- 顶部logo -->
|
<view class="logo-container">
|
<image src="/static/logo.png" mode="aspectFit" class="logo"></image>
|
<view class="software-title">
|
<text class="title-text">SMT防错系统</text>
|
<text class="welcome-text">欢迎使用，请登录您的账号</text>
|
</view>
|
</view>
|
<!-- 登录表单 -->
|
<view class="form-container">
|
<uni-forms :model="form" ref="uForm">
|
<uni-forms-item label="账号" prop="username">
|
<uni-easyinput v-model="form.username" placeholder="请输入账号" />
|
</uni-forms-item>
|
|
<uni-forms-item label="密码" prop="password">
|
<uni-easyinput v-model="form.password" placeholder="请输入密码" type="password" />
|
</uni-forms-item>
|
</uni-forms>
|
|
<!-- 登录按钮 -->
|
<uni-button type="primary" @click="handleLogin" :loading="loading" class="login-btn">
|
登录
|
</uni-button>
|
|
<!-- 激活入口 -->
|
<!-- <view class="activation-tip">
|
首次使用？<text class="link" @click="goActivation">激活软件</text>
|
</view> -->
|
</view>
|
|
<!-- 试用期提示 -->
|
<!-- <view class="trial-tip" v-if="trialDays > 0">
|
剩余试用期：{{trialDays}}天
|
</view> -->
|
</view>
|
|
</template>
|
|
<script>
|
import {
|
config
|
} from '@/config/config'
|
export default {
|
data() {
|
return {
|
form: {
|
username: '',
|
password: ''
|
},
|
loading: false,
|
trialDays: 7 // 默认试用期7天
|
}
|
},
|
computed: {
|
themeIcon() {
|
return this.$store.state.theme === 'light' ? 'moon' : 'sun'
|
}
|
},
|
methods: {
|
// 登录处理
|
async handleLogin() {
|
// 验证输入
|
if (!this.form.username || !this.form.password) {
|
uni.showToast({
|
title: '请输入用户名和密码',
|
icon: 'none'
|
})
|
return
|
}
|
|
this.loading = true
|
|
try {
|
// 调用authService进行登录验证
|
const authService = require('@/services/authService').default
|
const {
|
userInfo,
|
token,
|
expiryDate
|
} = await authService.login(
|
this.form.username,
|
this.form.password
|
)
|
|
// 存储登录信息
|
uni.setStorageSync(config.storageKeys.userInfo, userInfo)
|
uni.setStorageSync(config.storageKeys.authToken, token)
|
uni.setStorageSync(config.storageKeys.tokenExpiry, expiryDate)
|
|
uni.showToast({
|
title: '登录成功',
|
icon: 'success'
|
})
|
|
// 跳转到首页
|
uni.redirectTo({
|
url: '/pages/index/index'
|
})
|
} catch (error) {
|
console.error('登录失败:', error)
|
uni.showToast({
|
title: error.message || '登录失败，请重试',
|
icon: 'none'
|
})
|
} finally {
|
this.loading = false
|
}
|
},
|
// 跳转激活页面
|
goActivation() {
|
uni.navigateTo({
|
url: '/pages/system/activation',
|
success: () => {},
|
fail: (err) => {
|
console.error('跳转激活页面失败:', err)
|
uni.showToast({
|
title: '跳转失败，请重试',
|
icon: 'none'
|
})
|
}
|
})
|
},
|
// 切换主题
|
toggleTheme() {
|
this.$store.dispatch('toggleTheme')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.login-header {
|
text-align: center;
|
margin-bottom: 40px;
|
}
|
|
.login-header h1 {
|
color: black;
|
font-size: 2.5rem;
|
margin-bottom: 10px;
|
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
}
|
|
.login-header p {
|
color: rgba(0, 0, 0, 0.8);
|
font-size: 0.9rem;
|
}
|
|
.login-container {
|
padding: 40rpx;
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
background-color: var(--bg-color);
|
|
.theme-toggle {
|
position: absolute;
|
right: 30rpx;
|
top: 30rpx;
|
z-index: 999;
|
width: 80rpx;
|
height: 80rpx;
|
border-radius: 50%;
|
background-color: var(--card-bg);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
box-shadow: 0 2rpx 10rpx var(--shadow-color);
|
}
|
|
.logo-container {
|
flex: 1.2;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
margin-bottom: 60rpx;
|
|
.logo {
|
width: 400rpx;
|
height: 400rpx;
|
margin-bottom: 30rpx;
|
margin-top: -150px;
|
}
|
|
.software-title {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
margin-top: -60px;
|
|
.title-text {
|
font-size: 52rpx;
|
font-weight: 600;
|
color: var(--text-color);
|
margin-bottom: 20rpx;
|
letter-spacing: 3rpx;
|
text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.welcome-text {
|
font-size: 30rpx;
|
color: var(--text-color);
|
opacity: 0.75;
|
letter-spacing: 1rpx;
|
}
|
}
|
}
|
|
.form-container {
|
flex: 2;
|
margin-top: -60px;
|
|
.login-btn {
|
margin-top: 60rpx;
|
}
|
|
.activation-tip {
|
margin-top: 30rpx;
|
text-align: center;
|
color: var(--text-color);
|
opacity: 0.7;
|
|
.link {
|
color: #2979ff;
|
margin-left: 10rpx;
|
}
|
}
|
}
|
|
.trial-tip {
|
text-align: center;
|
color: #f56c6c;
|
margin-bottom: 30rpx;
|
}
|
}
|
</style>
|
