2025-03-JS-SDK-PDA/pages/login/index.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>