295 lines
7.3 KiB
Vue
295 lines
7.3 KiB
Vue
<template>
|
|
<view class="wrap">
|
|
<!-- <u-loading-page :loading="loading" loading-text="正在登录"></u-loading-page> -->
|
|
<view class="content" v-show="!loading">
|
|
<view class="title">欢迎使用ziMWMS PDA</view>
|
|
<u-form ref="uLoginForm" :model="form" :rules="rules" border>
|
|
<view class="tips">请使用和WMS相同账户</view>
|
|
<u-form-item prop="userid" :borderBoottom="false">
|
|
<u-input class="u-input-rounded" v-model="form.userid" placeholder="请输入账号" />
|
|
</u-form-item>
|
|
<u-form-item :borderBbottom="false" prop="password">
|
|
<u-input class="u-input-rounded" type="password" v-model="form.password"
|
|
placeholder="请输入密码" />
|
|
</u-form-item>
|
|
</u-form>
|
|
|
|
<u-button @click="submit" class="getCaptcha">进入系统</u-button>
|
|
<view class="environment-selector">
|
|
<view class="current-env" @click="showEnvSelect = true">当前环境: {{ currentEnv }}</view>
|
|
<u-picker :show="showEnvSelect" :columns="envOptions.map(option => option.label)" @confirm="onPickerConfirm" @cancel="showEnvSelect = false"></u-picker>
|
|
</view>
|
|
</view>
|
|
<view class="buttom" v-show="!loading">
|
|
<view class="hint">
|
|
Copyright 2025 北京中祥英科技有限公司_显示智造BU Technology
|
|
</view>
|
|
</view>
|
|
<u-toast ref="uTakeOverToast" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapActions } from 'vuex';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
password: '',
|
|
form: {
|
|
userid: '',
|
|
password: ''
|
|
},
|
|
rules: {
|
|
userid: [{
|
|
required: true,
|
|
message: "请输入账号",
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
password: [{
|
|
required: true,
|
|
message: "请输入密码",
|
|
trigger: ['blur', 'change']
|
|
}]
|
|
},
|
|
loading: false,
|
|
loading_text: '正在登录',
|
|
selectedEnv: 'test', // 默认选中的环境
|
|
envOptions: [
|
|
{ label: '测试环境', value: 'test' },
|
|
{ label: '正式环境', value: 'production' }
|
|
],
|
|
showEnvSelect: false // 控制 u-select 弹框的显示
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['backendUrl']),
|
|
currentEnv() {
|
|
return this.selectedEnv === 'test' ? '测试环境' : '正式环境';
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions(['setBackendUrl', 'login']),
|
|
|
|
|
|
|
|
submit() {
|
|
|
|
// this.$refs.uLoginForm
|
|
// this.$refs.uLoginForm.validate(valid => {
|
|
// if (valid) {
|
|
// this.loading_text = '正在登录';
|
|
// this.loading = true;
|
|
// const _param = {
|
|
// userId: this.form.userid,
|
|
// password: this.form.password,
|
|
// siteName: "B16"
|
|
// };
|
|
// this.login({ params: _param })
|
|
// .then(res => {
|
|
// this.loading = false;
|
|
// console.log(this.$store.token)
|
|
// uni.switchTab({
|
|
// url: '/pages/material/index', //跳转到物料的主页
|
|
// });
|
|
// })
|
|
// .catch(err => {
|
|
// this.loading = false;
|
|
// this.$showMessage(err.message || '登录失败，请稍后再试', 'error');
|
|
// });
|
|
// } else {
|
|
// // 验证失败时的处理
|
|
// this.$showMessage('请检查输入信息', 'error');
|
|
// }
|
|
// });
|
|
|
|
|
|
this.$refs.uLoginForm.validate().then(res => {
|
|
uni.$u.toast('校验通过')
|
|
console.log('校验通过')
|
|
const _param = {
|
|
userId: this.form.userid,
|
|
password: this.form.password,
|
|
siteName: "B16"
|
|
};
|
|
|
|
this.login({ params: _param })
|
|
.then(res => {
|
|
this.loading = false;
|
|
console.log(this.$store.token)
|
|
uni.switchTab({
|
|
url: '/pages/material/index', //跳转到物料的主页
|
|
});
|
|
})
|
|
.catch(err => {
|
|
this.loading = false;
|
|
this.$showMessage(err.message || '登录失败，请稍后再试', 'error');
|
|
});
|
|
|
|
}).catch(errors => {
|
|
uni.$u.toast('校验失败')
|
|
})
|
|
|
|
|
|
},
|
|
changeEnvironment(e) {
|
|
const selectedValue = e[0].value;
|
|
this.selectedEnv = selectedValue;
|
|
const newUrl = selectedValue === 'test' ? 'http://162.14.99.253:32293' : 'http://162.14.99.253:32293';
|
|
this.setBackendUrl(newUrl);
|
|
this.$showMessage(`当前环境: ${selectedValue === 'test' ? '测试环境' : '正式环境'}`, 'success');
|
|
},
|
|
onPickerConfirm(e) {
|
|
const selectedIndex = e.indexs[0];
|
|
const selectedValue = this.envOptions[selectedIndex].value;
|
|
this.changeEnvironment([{ value: selectedValue }]);
|
|
this.showEnvSelect = false;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wrap {
|
|
font-size: 22rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
background-image: url('../../static/img/background.jpg'); /* 设置背景图片 */
|
|
background-size: cover; /* 使背景图片覆盖整个页面 */
|
|
background-position: center; /* 背景图片居中 */
|
|
background-repeat: no-repeat; /* 防止背景图片重复 */
|
|
position: relative; /* 确保子元素的绝对定位相对于wrap */
|
|
|
|
.loading-overlay {
|
|
|
|
.loading-content {
|
|
|
|
.loading-gif {
|
|
}
|
|
|
|
.loading-text {
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 600rpx;
|
|
background-color: rgba(255, 255, 255, 0.9); /* 半透明背景 */
|
|
padding: 40rpx;
|
|
border-radius: 20rpx;
|
|
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
text-align: center;
|
|
|
|
.title {
|
|
font-size: 60rpx;
|
|
font-weight: 500;
|
|
margin-bottom: 70rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.tips {
|
|
margin-bottom: 30rpx;
|
|
margin-top: 8rpx;
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.u-form-item {
|
|
margin-bottom: 30rpx;
|
|
position: relative; /* 添加相对定位 */
|
|
}
|
|
|
|
.u-input-rounded {
|
|
border-radius: 10rpx;
|
|
padding: 20rpx;
|
|
border: 1px solid #ddd;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
background-color: #fff; /* 输入框背景色 */
|
|
width: 100%; /* 确保输入框宽度占满 */
|
|
}
|
|
|
|
.u-form-item__error-message {
|
|
position: absolute; /* 绝对定位 */
|
|
bottom: -20rpx; /* 调整提示信息的位置 */
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center; /* 居中对齐 */
|
|
color: red; /* 提示信息颜色 */
|
|
font-size: 24rpx; /* 提示信息字体大小 */
|
|
}
|
|
|
|
.getCaptcha {
|
|
background-color: rgb(253, 140, 64);
|
|
color: #ffffff;
|
|
border: none;
|
|
font-size: 30rpx;
|
|
padding: 12rpx 0;
|
|
margin-top: 60rpx;
|
|
border-radius: 10rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
.environment-selector {
|
|
margin-top: 20rpx;
|
|
text-align: center;
|
|
|
|
.current-env {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-bottom: 10rpx;
|
|
cursor: pointer; /* 添加鼠标指针样式 */
|
|
text-decoration: underline; /* 添加下划线 */
|
|
}
|
|
|
|
.u-select {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.buttom {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: rgba(255, 255, 255, 0.9); /* 半透明背景 */
|
|
padding: 20rpx;
|
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
|
|
text-align: center;
|
|
|
|
.hint {
|
|
font-size: 28rpx; /* 调整字体大小 */
|
|
color: #666; /* 调整字体颜色 */
|
|
font-weight: 400; /* 调整字体粗细 */
|
|
text-align: center;
|
|
padding: 10rpx 20rpx; /* 增加内边距 */
|
|
border-top: 1px solid #ddd; /* 添加顶部边框 */
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 删除: 定义动态省略号动画 */
|
|
/* 删除: @keyframes loading-dots { */
|
|
/* 删除: 0%, */
|
|
/* 删除: 100% { */
|
|
/* 删除: content: '正在登录'; */
|
|
/* 删除: } */
|
|
/* 删除: 25% { */
|
|
/* 删除: content: '正在登录.'; */
|
|
/* 删除: } */
|
|
/* 删除: 50% { */
|
|
/* 删除: content: '正在登录..'; */
|
|
/* 删除: } */
|
|
/* 删除: 75% { */
|
|
/* 删除: content: '正在登录...'; */
|
|
/* 删除: } */
|
|
/* 删除: } */
|
|
</style>
|
|
|
|
|
|
|