<template>
|
<view class="login-page">
|
<view class="login-content">
|
<view class="logo-area">
|
<image src="../../static/img/bj/gs.png" alt="广深科技" class="company-logo"></image>
|
|
</view>
|
|
<form class="login-form" @submit.prevent="handleSubmit">
|
<view class="form-group">
|
<text class="form-label">账号</text>
|
<input type="text" id="username" v-model="username" placeholder="请输入账号" class="form-input"
|
autocapitalize="off" autocomplete="username" @keyup.enter="handleSubmit" />
|
</view>
|
|
<view class="form-group">
|
<text class="form-label">密码</text>
|
<input :type="showPassword ? 'text' : 'password'" id="password" v-model="password"
|
placeholder="请输入密码" class="form-input" autocomplete="current-password"
|
@keyup.enter="handleSubmit" />
|
<view class="password-toggles">
|
<text class="show-password" @tap="toggleShowPassword">
|
{{ showPassword ? '隐藏密码' : '显示密码' }}
|
</text>
|
</view>
|
</view>
|
|
<button form-type="submit" class="login-button">登 录</button>
|
</form>
|
|
<view class="footer">
|
<text>广深科技技术支持</text>
|
<text class="version">版本号 v1.0.1</text>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
username: '',
|
password: '',
|
showPassword: false,
|
accountFocus: false,
|
passwordFocus: false,
|
tokenId: '',
|
account: '',
|
factoryArray: [],
|
//selectFactory: { value: this.$loginInfo.factoryKey||'',text:this.$loginInfo.factoryName||'',index: this.$loginInfo.factoryIndex}, //选择的账套信息
|
selectFactory: {},
|
selectLanguage: {}, //选择的语言
|
}
|
},
|
async onReady() {
|
this.account = this.$loginInfo.account || '';
|
this.selectFactory = this.$loginInfo.factory || 0;
|
this.selectLanguage = this.$loginInfo.language || 0;
|
},
|
methods: {
|
toggleShowPassword() {
|
this.showPassword = !this.showPassword;
|
},
|
handleSubmit() {
|
|
// uni.showToast({
|
// title: '登录功能仅为演示',
|
// icon: 'none'
|
// });
|
// 实际登录逻辑可以在这里实现
|
// this.$request.post('/login', {
|
// username: this.username,
|
// password: this.password
|
// }).then(...)
|
|
if (!this.username) {
|
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.username,
|
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 = user.fcode;
|
this.$loginInfo.userName = user.fname;
|
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.$loginInfo.roleid = user.roleids;
|
|
uni.setStorage({
|
key: 'gs_mes_pad_userid',
|
data: this.username,
|
success: function() {
|
|
}
|
});
|
uni.setStorage({
|
key: 'gs_mes_pad_userkey',
|
data: this.password,
|
success: function() {
|
|
}
|
});
|
this.$login();
|
if (this.$loginInfo.forcedLogin) {
|
uni.reLaunch({
|
url: 'main'
|
});
|
} else {
|
uni.navigateBack();
|
}
|
}
|
},
|
onLoad(options) {
|
try {
|
const id = uni.getStorageSync('gs_mes_pad_userid');
|
const pwd = uni.getStorageSync('gs_mes_pad_userkey');
|
if(id){
|
this.username=id;
|
}
|
if(pwd){
|
this.password=pwd;
|
}
|
if (id&&pwd) {
|
|
uni.showLoading({
|
mask: true,
|
title: "登录中..."
|
});
|
uni.request({
|
url: this.$store.state.serverInfo.serverAPI + '/login/login',
|
method: "POST",
|
header: {
|
'content-type': "application/json"
|
},
|
data: {
|
userID: id,
|
userPass: pwd
|
},
|
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();
|
}
|
});
|
}
|
} catch (e) {
|
// error
|
}
|
}
|
}
|
</script>
|
|
<style>
|
/* 基础样式 */
|
* {
|
margin: 0;
|
padding: 0;
|
box-sizing: border-box;
|
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
}
|
|
.login-page {
|
width: 100%;
|
min-height: 96vh;
|
display: flex;
|
flex-direction: column;
|
background-color: #f5f7fa;
|
}
|
|
.login-content {
|
width: 100%;
|
margin: 0 auto;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
flex-grow: 1;
|
padding: 20px;
|
}
|
|
/* 标志区域 */
|
.logo-area {
|
margin-bottom: 6vh;
|
text-align: center;
|
}
|
|
.company-logo {
|
width: 25vw;
|
height: 25vw;
|
max-width: 100px;
|
max-height: 100px;
|
margin-bottom: 2vh;
|
}
|
|
.welcome-text {
|
color: #333;
|
font-size: 7vw;
|
font-weight: 500;
|
line-height: 1.3;
|
}
|
|
/* 表单样式 */
|
.login-form {
|
display: flex;
|
flex-direction: column;
|
gap: 4vh;
|
width: 100%;
|
}
|
|
.form-group {
|
text-align: left;
|
width: 100%;
|
}
|
|
.form-label {
|
display: block;
|
margin-bottom: 2vh;
|
font-size: 4.5vw;
|
color: #666;
|
font-weight: 500;
|
}
|
|
.form-input {
|
width: 100%;
|
padding: 4.5vw;
|
border: 1px solid #e0e0e0;
|
border-radius: 2vw;
|
font-size: 4.8vw;
|
transition: all 0.3s;
|
-webkit-appearance: none;
|
background-color: white;
|
height: 12vw;
|
min-height: 50px;
|
}
|
|
.form-input:focus {
|
border-color: #3498db;
|
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
|
outline: none;
|
}
|
|
/* 密码相关控制 */
|
.password-toggles {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 2vh;
|
font-size: 4vw;
|
}
|
|
.show-password {
|
color: #3498db;
|
padding: 1vw 0;
|
}
|
|
/* 登录按钮 */
|
.login-button {
|
background-color: #3498db;
|
color: white;
|
border: none;
|
padding: 4.5vw;
|
border-radius: 2vw;
|
font-size: 5vw;
|
font-weight: 500;
|
transition: all 0.3s;
|
margin-top: 4vh;
|
width: 100%;
|
height: 12vw;
|
min-height: 50px;
|
}
|
|
.login-button:active {
|
background-color: #2980b9;
|
}
|
|
/* 页脚 */
|
.footer {
|
margin-top: 6vh;
|
color: #999;
|
font-size: 3.8vw;
|
line-height: 1.5;
|
text-align: center;
|
}
|
|
.version {
|
margin-top: 1vh;
|
font-size: 3.5vw;
|
margin-left: 1vh;
|
}
|
|
/* 平板和桌面样式 */
|
@media (min-width: 768px) {
|
.login-content {
|
max-width: 800px;
|
padding: 40px;
|
}
|
|
.company-logo {
|
width: 80px;
|
height: 80px;
|
}
|
|
.welcome-text {
|
font-size: 28px;
|
}
|
|
.login-form {
|
gap: 25px;
|
}
|
|
.form-label {
|
font-size: 16px;
|
margin-bottom: 12px;
|
}
|
|
.form-input {
|
padding: 16px;
|
font-size: 16px;
|
height: auto;
|
border-radius: 8px;
|
}
|
|
.password-toggles {
|
font-size: 14px;
|
}
|
|
.login-button {
|
padding: 0px;
|
font-size: 18px;
|
border-radius: 8px;
|
height: auto;
|
}
|
|
.footer {
|
font-size: 14px;
|
}
|
|
.version {
|
font-size: 13px;
|
}
|
}
|
|
/* 手机样式 */
|
@media (min-width: 300px) {
|
.login-content {
|
max-width: 800px;
|
padding: 40px;
|
}
|
|
.company-logo {
|
width: 80px;
|
height: 80px;
|
}
|
|
.welcome-text {
|
font-size: 28px;
|
}
|
|
.login-form {
|
gap: 25px;
|
}
|
|
.form-label {
|
font-size: 0px;
|
margin-bottom: 12px;
|
}
|
|
.form-input {
|
padding: 16px;
|
font-size: 16px;
|
height: auto;
|
border-radius: 8px;
|
}
|
|
.password-toggles {
|
font-size: 14px;
|
}
|
|
.login-button {
|
padding: 0px;
|
font-size: 18px;
|
border-radius: 8px;
|
height: auto;
|
}
|
|
.footer {
|
font-size: 14px;
|
}
|
|
.version {
|
font-size: 13px;
|
}
|
}
|
</style>
|
