<template>
|
<uni-base-page>
|
<view slot="page" class="login-container">
|
<view class="login-card">
|
<view class="logo-container">
|
<image src="../../static/img/bj/bg2.png" class="logo-image" mode="aspectFit"></image>
|
</view>
|
<view class="form-title">系统登录</view>
|
|
<uni-input-row type="text" title="账号" v-model="account" :focus="accountFocus"
|
@resetFocus="e=>{accountFocus=e;}" clearable placeholder="请输入账号"
|
class="input-item"></uni-input-row>
|
|
<uni-input-row type="password" title="密码" v-model="password" :focus="passwordFocus"
|
@resetFocus="e=>{passwordFocus=e}" displayable @confirm="bindLogin"
|
placeholder="请输入密码" class="input-item"></uni-input-row>
|
|
<view class="btn-row">
|
<button type="primary" class="login-button" @tap="bindLogin">
|
<text class="button-text">登 录</text>
|
</button>
|
</view>
|
|
<view class="footer-text">© 2025 广深科技版权所有</view>
|
</view>
|
</view>
|
</uni-base-page>
|
</template>
|
|
<script>
|
import {
|
downWgt
|
} from '../../common/update.js';
|
|
export default {
|
data() {
|
return {
|
accountFocus: false,
|
passwordFocus: false,
|
tokenId: '',
|
account: '',
|
userName: '',
|
password: '',
|
factoryArray: [],
|
selectFactory: {},
|
selectLanguage: {},
|
};
|
},
|
async onReady() {
|
this.account = this.$loginInfo.account || '';
|
this.selectFactory = this.$loginInfo.factory || 0;
|
this.selectLanguage = this.$loginInfo.language || 0;
|
},
|
methods: {
|
bindLogin() {
|
if (!this.account) {
|
uni.showToast({
|
icon: 'none',
|
title: '请输入账号'
|
});
|
this.accountFocus = true;
|
return;
|
}
|
if (!this.password) {
|
uni.showToast({
|
icon: 'none',
|
title: '请输入密码'
|
});
|
this.passwordFocus = true;
|
return;
|
}
|
uni.showLoading({
|
mask: true,
|
title: "登录中..."
|
});
|
uni.request({
|
url: this.$store.state.serverInfo.serverAPI + '/login/login',
|
method: "POST",
|
header: {
|
'content-type': "application/json"
|
},
|
data: {
|
userID: this.account,
|
userPass: this.password
|
},
|
success: res => {
|
if (res.data.status == 0) {
|
this.toMain(res.data.data.tbBillList[0]);
|
} else {
|
uni.showToast({
|
icon: 'none',
|
title: res.data.message
|
});
|
}
|
},
|
fail(err) {
|
uni.showToast({
|
icon: 'none',
|
title: "服务器断开"
|
});
|
},
|
complete: () => {
|
uni.hideLoading();
|
}
|
});
|
},
|
toMain(user) {
|
this.$loginInfo.account = this.account;
|
this.$loginInfo.userName = this.userName;
|
this.$loginInfo.factory = this.selectFactory;
|
this.$loginInfo.language = this.selectLanguage;
|
this.$loginInfo.menu = this.menu;
|
this.$loginInfo.deptNo = user.departmentid;
|
this.$loginInfo.chineseName = user.fname;
|
this.$loginInfo.id = user.fid;
|
this.$login();
|
if (this.$loginInfo.forcedLogin) {
|
uni.reLaunch({
|
url: 'main'
|
});
|
} else {
|
uni.navigateBack();
|
}
|
}
|
}
|
};
|
</script>
|
|
<style>
|
/* 基础样式重置 */
|
page {
|
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ed 100%);
|
min-height: 100vh;
|
width: 100%;
|
margin: 0;
|
padding: 0;
|
box-sizing: border-box;
|
overflow-x: hidden;
|
}
|
|
/* 自适应容器 */
|
.login-container {
|
width: 100%;
|
min-height: 100vh;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 20px;
|
box-sizing: border-box;
|
}
|
|
/* 登录卡片 - 自适应设计 */
|
.login-card {
|
background-color: #fff;
|
border-radius: 16px;
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
padding: clamp(25px, 5vw, 40px);
|
width: 100%;
|
max-width: clamp(300px, 80vw, 450px);
|
transition: all 0.3s ease;
|
}
|
|
/* 设备方向优化 */
|
@media (orientation: landscape) and (max-height: 500px) {
|
.login-container {
|
align-items: flex-start;
|
padding-top: 30px;
|
}
|
|
.login-card {
|
max-width: 80%;
|
}
|
}
|
|
/* 头部Logo */
|
.logo-container {
|
display: flex;
|
justify-content: center;
|
margin-bottom: clamp(15px, 3vw, 25px);
|
}
|
|
.logo-image {
|
width: clamp(80px, 20vw, 140px);
|
height: clamp(80px, 20vw, 140px);
|
border-radius: 50%;
|
transition: all 0.3s ease;
|
}
|
|
.logo-image:hover {
|
transform: scale(1.05);
|
}
|
|
/* 标题样式 */
|
.form-title {
|
text-align: center;
|
font-size: clamp(1.5rem, 4vw, 2rem);
|
font-weight: 600;
|
color: #333;
|
margin-bottom: clamp(20px, 5vw, 35px);
|
position: relative;
|
}
|
|
.form-title::after {
|
content: '';
|
display: block;
|
width: clamp(40px, 10vw, 60px);
|
height: 3px;
|
background-color: #0faeff;
|
margin: 10px auto 0;
|
border-radius: 3px;
|
}
|
|
/* 输入框样式 */
|
.input-item {
|
margin-bottom: clamp(15px, 3vw, 20px);
|
}
|
|
uni-input-row {
|
border-radius: 8px;
|
overflow: hidden;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
transition: all 0.3s ease;
|
}
|
|
uni-input-row:hover {
|
box-shadow: 0 4px 15px rgba(15, 174, 255, 0.15);
|
}
|
|
uni-input-row .uni-input-group {
|
border: none;
|
}
|
|
uni-input-row .uni-input-title {
|
color: #555;
|
font-weight: 500;
|
}
|
|
uni-input-row .uni-input {
|
padding-right: 15px;
|
}
|
|
/* 按钮样式 */
|
.btn-row {
|
margin-top: clamp(20px, 4vw, 30px);
|
}
|
|
.login-button {
|
background-color: #0faeff;
|
border-radius: 8px;
|
height: clamp(40px, 10vw, 50px);
|
line-height: clamp(40px, 10vw, 50px);
|
font-size: clamp(1rem, 3vw, 1.2rem);
|
font-weight: 500;
|
transition: all 0.3s ease;
|
box-shadow: 0 4px 12px rgba(15, 174, 255, 0.3);
|
}
|
|
.login-button:active {
|
transform: translateY(2px);
|
box-shadow: 0 2px 8px rgba(15, 174, 255, 0.2);
|
}
|
|
.button-text {
|
color: #fff;
|
}
|
|
/* 底部版权信息 */
|
.footer-text {
|
text-align: center;
|
color: #999;
|
font-size: clamp(0.8rem, 2vw, 1rem);
|
margin-top: clamp(15px, 3vw, 25px);
|
}
|
|
/* 动画效果 */
|
@keyframes fadeIn {
|
from { opacity: 0; transform: translateY(20px); }
|
to { opacity: 1; transform: translateY(0); }
|
}
|
|
.login-card {
|
animation: fadeIn 0.5s ease forwards;
|
}
|
</style>
|
