<template>
|
<view class="login-page">
|
<!-- 服务器设置按钮 -->
|
<view class="settings-btn" @tap="showServerDialog">
|
<text class="settings-icon">⚙</text>
|
</view>
|
|
<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 class="dialog-mask" v-if="showDialog" @tap="hideServerDialog">
|
<view class="dialog-content" @tap.stop>
|
<view class="dialog-header">
|
<text class="dialog-title">服务器设置</text>
|
<text class="dialog-close" @tap="hideServerDialog">✕</text>
|
</view>
|
|
<view class="dialog-body">
|
<view class="server-url-display">
|
<text class="url-text">{{ tempServerUrl }}</text>
|
</view>
|
|
<view class="quick-select">
|
<text class="quick-select-label">快速选择:</text>
|
<view class="preset-buttons">
|
<view
|
v-for="(preset, index) in serverPresets"
|
:key="index"
|
class="preset-btn"
|
:class="{ 'active': tempServerUrl === preset.url }"
|
@tap="selectPreset(preset)">
|
<text class="preset-btn-text">{{ preset.name }}</text>
|
</view>
|
</view>
|
</view>
|
|
<view class="current-server-info">
|
<text class="info-text">当前地址: {{ tempServerUrl }}</text>
|
</view>
|
</view>
|
|
<view class="dialog-footer">
|
<button class="dialog-btn cancel-btn" @tap="hideServerDialog">取消</button>
|
<button class="dialog-btn confirm-btn" @tap="saveServerSetting">保存</button>
|
</view>
|
</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: {}, //选择的语言
|
showDialog: false, // 是否显示服务器设置弹窗
|
tempServerUrl: '', // 临时存储选择的服务器地址
|
}
|
},
|
computed: {
|
// 获取服务器预设列表
|
serverPresets() {
|
return this.$store.state.serverInfo.serverPresets || [];
|
}
|
},
|
async onReady() {
|
this.account = this.$loginInfo.account || '';
|
this.selectFactory = this.$loginInfo.factory || 0;
|
this.selectLanguage = this.$loginInfo.language || 0;
|
},
|
methods: {
|
// 显示服务器设置弹窗
|
showServerDialog() {
|
this.tempServerUrl = this.$store.state.serverInfo.serverAPI;
|
this.showDialog = true;
|
},
|
// 隐藏服务器设置弹窗
|
hideServerDialog() {
|
this.showDialog = false;
|
},
|
// 选择预设服务器
|
selectPreset(preset) {
|
this.tempServerUrl = preset.url;
|
},
|
// 保存服务器设置
|
saveServerSetting() {
|
this.$store.commit('updateServerAPI', this.tempServerUrl);
|
|
// 查找服务器名称
|
const preset = this.serverPresets.find(item => item.url === this.tempServerUrl);
|
const serverName = preset ? preset.name : '自定义';
|
|
uni.showToast({
|
title: `已切换到${serverName}`,
|
icon: 'success',
|
duration: 1500
|
});
|
|
this.hideServerDialog();
|
},
|
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;
|
position: relative;
|
}
|
|
/* 设置按钮样式 */
|
.settings-btn {
|
position: absolute;
|
top: 20px;
|
right: 20px;
|
width: 50px;
|
height: 50px;
|
background-color: rgba(255, 255, 255, 0.9);
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
z-index: 10;
|
cursor: pointer;
|
transition: all 0.3s;
|
}
|
|
.settings-btn:active {
|
background-color: rgba(255, 255, 255, 1);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
transform: scale(0.95);
|
}
|
|
.settings-icon {
|
font-size: 24px;
|
color: #666;
|
}
|
|
.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;
|
}
|
}
|
|
/* 弹窗样式 */
|
.dialog-mask {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-color: rgba(0, 0, 0, 0.5);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
z-index: 1000;
|
}
|
|
.dialog-content {
|
background-color: white;
|
border-radius: 12px;
|
width: 85%;
|
max-width: 500px;
|
max-height: 80vh;
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
}
|
|
.dialog-header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 20px;
|
border-bottom: 1px solid #e0e0e0;
|
}
|
|
.dialog-title {
|
font-size: 18px;
|
font-weight: 500;
|
color: #333;
|
}
|
|
.dialog-close {
|
font-size: 24px;
|
color: #999;
|
cursor: pointer;
|
width: 30px;
|
height: 30px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.dialog-body {
|
padding: 20px;
|
flex: 1;
|
overflow-y: auto;
|
}
|
|
.server-url-display {
|
background-color: #f5f7fa;
|
padding: 15px;
|
border-radius: 8px;
|
margin-bottom: 20px;
|
}
|
|
.url-text {
|
font-size: 14px;
|
color: #666;
|
word-break: break-all;
|
}
|
|
.quick-select {
|
margin-bottom: 20px;
|
}
|
|
.quick-select-label {
|
font-size: 15px;
|
color: #666;
|
margin-bottom: 12px;
|
display: block;
|
}
|
|
.preset-buttons {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 10px;
|
}
|
|
.preset-btn {
|
padding: 10px 20px;
|
border: 1px solid #e0e0e0;
|
border-radius: 6px;
|
background-color: white;
|
cursor: pointer;
|
transition: all 0.3s;
|
}
|
|
.preset-btn.active {
|
background-color: #3498db;
|
border-color: #3498db;
|
}
|
|
.preset-btn-text {
|
font-size: 14px;
|
color: #333;
|
}
|
|
.preset-btn.active .preset-btn-text {
|
color: white;
|
}
|
|
.current-server-info {
|
background-color: #f0f8ff;
|
padding: 12px;
|
border-radius: 6px;
|
border-left: 3px solid #3498db;
|
}
|
|
.info-text {
|
font-size: 13px;
|
color: #666;
|
word-break: break-all;
|
}
|
|
.dialog-footer {
|
display: flex;
|
border-top: 1px solid #e0e0e0;
|
padding: 15px 20px;
|
gap: 10px;
|
}
|
|
.dialog-btn {
|
flex: 1;
|
padding: 12px;
|
border-radius: 6px;
|
font-size: 16px;
|
border: none;
|
cursor: pointer;
|
transition: all 0.3s;
|
}
|
|
.cancel-btn {
|
background-color: #f5f7fa;
|
color: #666;
|
}
|
|
.cancel-btn:active {
|
background-color: #e8eaed;
|
}
|
|
.confirm-btn {
|
background-color: #3498db;
|
color: white;
|
}
|
|
.confirm-btn:active {
|
background-color: #2980b9;
|
}
|
</style>
|
