Web_TracerMethodology/pages/login/login.vue

<template>
	<view class="login-page">
		<image class="bgImage" src="/static/images/shade.png" mode="widthFix"></image>
		<view class="form-area" :style="{ paddingBottom: (keyboardHeight > 0 ? (keyboardPadding + 'px') : '100rpx') }">
			<view class="inputArea">
				<image class="inputIcon" src="/static/images/login_account_icon.png" mode="aspectFit"></image>
				<input class="inputTag" type="text" placeholder="请输入账号" placeholder-class="inputTagHolderPlace"
					v-model="username" />
			</view>
			<view class="inputArea pwd">
				<image class="inputIcon" src="/static/images/login_pwd_icon.png" mode="aspectFit"></image>
				<input class="inputTag" password="true" type="text" placeholder="请输入密码"
					placeholder-class="inputTagHolderPlace" v-model="password" />
			</view>

			<button id="loginBtn" :class="[isInput?'loginBtn on':'loginBtn']" type="default" @click="login">登录</button>

			<tm-modal v-if="showInputModal" @click="clickModalhandle">
				<view class="checkItemResultModal">
					<view class="modalContent">
						<view class="modalBar">{{`开发者模式(v${version})`}}</view>
						<input class="keyInutArea" type="text" v-model="appHospSign" @input='setHospSign'
							placeholder="请输入hospSign" />
						<image v-if="enableAppScan" @click="openScanner" class="scanBtn" src="../../static/scancodeIcon.png" mode=""></image>
						<view>{{deviceInfo}}</view>
						<button class="commitActBtn" @click="updateHospSign(true)" type="default">确定</button>
						<!-- 			  <button class="commitActBtn" @click="updateHospSign(false)" type="default">确定</button> -->
					</view>
				</view>
			</tm-modal>
		</view>
	</view>
</template>

<script>
	import encryption from "../../utils/crypto.js";
	import {
		mapState
	} from "vuex";
	import {
		loginAfterHandle
	} from '../../utils/loginHandle.js';
	export default {
		data() {
			return {
				index: 0,
				appHospSign: 'gKMa7SLw9hRglxm5', //app端更新hospSign
				showInputModal: false,
				hospSign: '', // 医院标识
				username: '', // 用户名
				password: '', // 密码
				version: '',
				deviceInfo: {},
				enableAppScan: false,
				keyboardHeight: 0, // 软键盘高度（px）
				keyboardPadding: 0 // 计算后的底部最小必要留白（px）
			}
		},
		computed: {
			isInput: function() {
				return (this.username.length > 0 && this.password.length > 0) ? true : false
			},
			isPad:function(){
				return getApp().globalData.isPad
			},
		},
		onLoad({
			hospSign
		}) {
			this.hospSign = hospSign;
			// #ifdef APP-PLUS
			const hospSignFromLocal = uni.getStorageSync('hospSign');
			if (hospSignFromLocal != '') {
				this.appHospSign = hospSignFromLocal;
			}
			this.deviceInfo = uni.getSystemInfoSync();
			//获取版本号
			plus.runtime.getProperty(plus.runtime.appid, (inf) => {
				this.version = inf.version;
			});

			// #endif

		},
		onReady() {
			// APP端设置键盘模式为adjustPan
			// #ifdef APP-PLUS
			try {
				plus.webview.currentWebview().setStyle({
					softinputMode: 'adjustPan'
				});
			} catch (e) {}
			// #endif
			// 监听键盘高度变化，动态计算最小必要留白
			if (typeof uni.onKeyboardHeightChange === 'function') {
				uni.onKeyboardHeightChange((res) => {
					this.keyboardHeight = res && res.height ? res.height : 0;
					if (this.keyboardHeight <= 0) {
						this.keyboardPadding = 0;
						return;
					}
					this.$nextTick(() => {
						// 获取登录按钮的位置，计算与键盘顶部的距离
						const query = uni.createSelectorQuery();
						query.select('#loginBtn').boundingClientRect();
						query.exec((resRects) => {
							if (!resRects || !resRects[0]) {
								this.keyboardPadding = this.keyboardHeight;
								return;
							}
							const btnRect = resRects[0];
							const windowInfo = uni.getSystemInfoSync();
							const windowHeight = windowInfo.windowHeight; // px
							const keyboardTop = windowHeight - this.keyboardHeight; // 键盘顶部y
							const btnBottom = btnRect.bottom; // 按钮底部y
							const gap = keyboardTop - btnBottom; // 需要留白的空间
							const safeInset = (windowInfo.safeAreaInsets && windowInfo.safeAreaInsets.bottom) ? windowInfo.safeAreaInsets.bottom : 0;
							// 仅当gap<安全间距时，补齐差值与安全区，避免过大留白
							this.keyboardPadding = gap < 8 ? (8 + safeInset) : (safeInset);
							// 保底不为负
							if (this.keyboardPadding < 0) this.keyboardPadding = 0;
							// 边缘场景：若输入框获得焦点且更靠下，允许适度滚动
							if (gap < 0) {
								uni.pageScrollTo({ scrollTop: 999999, duration: 0 });
							}
						});
					});
				});
			}
		},
		methods: {
			openScanner() {
				// 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						this.appHospSign = res.result;
					}
				});
			},
			setHospSign(e) {
				this.appHospSign = e.target.value
			},
			openModal() {
				// #ifdef APP-PLUS
				this.index = this.index + 1;
				if (this.index == 3) this.showInputModal = true;
				// #endif
			},
			updateHospSign(bool) {
				if (bool) {
					this.hospSign = this.appHospSign;
				}
				this.index = 0;
				this.showInputModal = false;
			},
			login() {
				if (this.isLogin) return;
				const nowPermission = uni.getStorageSync('nowPermission');
				let hospSign = '';
				// #ifdef APP-PLUS
				hospSign = uni.getStorageSync('hospSign') || this.appHospSign;
				// #endif
				// #ifdef H5
				hospSign = this.hospSign;
				// #endif

				this.$store.dispatch({
					type: 'login/commActions',
					payload: {
						key: 'login',
						data: {
							username: encryption(this.username),
							password: encryption(this.password),
							hospSign: hospSign,
							nowPermission: nowPermission
						}
					}
				}).then((data) => {
					if (data) {
						loginAfterHandle(data, hospSign);
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.login-page {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		min-height: 100vh; // 使用最小高度避免键盘弹出时整体被压缩
		height: auto; // 允许内容在需要时溢出并滚动

		padding-bottom: 100rpx;
		background-color: #FFFFFF;

		.bgImage {
			width: 100%;
			display: block;
			flex-shrink: 0; // 禁止在弹出键盘时被压缩
			// 不设置height，自动按比例撑开
			// 去掉position、top、right等定位属性
		}

		.row {
			position: relative;
			z-index: 100;
			font-size: 45rpx;
			font-family: SourceHanSansCN-Bold, SourceHanSansCN;
			font-weight: bold;
			color: #2E2F33;
			line-height: 67.5rpx;
		}

		.titleTwo {
			margin-bottom: 75rpx;
		}

		.form-area {
			padding: 0 62.5rpx;
		}

		.inputArea {
			display: flex;
			align-items: center;
			height: 80rpx;
			margin-bottom: 37.5rpx;
			border-bottom: 1.25rpx solid #E6EAF2;

			input {
				-webkit-box-shadow: 0 0 0 1000px white inset;
			}

			.inputIcon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
			}

			.inputTag {
				height: 100%;
				width: 100%;
				font-size: 30rpx;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #292C33;

				// &.-internal-autofill-selected {
				// 	background-color:#FFFFFF;
				// }
			}

			// /deep/.inputTag .uni-input-input {
			// 	font-size: 30rpx;
			// 	font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			// 	font-weight: 500;
			// 	color: #292C33;
			// 	box-shadow: 0 0 0 54rpx #fff inset;
			// }
			.inputTagHolderPlace {
				font-size: 30rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #B8BECC;
			}

			// /deep/.inputTag .uni-input-placeholder {
			// 	font-size: 30rpx;
			// }
			&.pwd {
				margin-bottom: 62.5rpx;
			}
		}

		.loginBtn {
			display: block;
			width: 100%;
			height: 75rpx;
			text-align: center;
			line-height: 75rpx;
			font-size: 30rpx;
			font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			font-weight: 400;
			color: #FFFFFF;
			border-radius: 37.5rpx;
			border: none;
			background: #A3B1CC; // 默认灰色
			// background-color: #A3B1CC; // 建议去掉，避免和渐变冲突
			&.on {
				background: linear-gradient(90deg, #3377FF 0%, #4D97FF 100%) !important; // 渐变，优先级高
			}
		}

		.checkItemResultModal {
			display: flex;
			height: 100%;
			justify-content: center;
			align-items: center;
			overflow: hidden;

			.modalContent {
				position: relative;
				width: 90%;
				height: 500rpx;
				border-radius: 20rpx;
				overflow: hidden;
				background-color: #FFFFFF;

				.modalBar {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 80rpx;
					color: #4E78FF;
					font-size: 22.5rpx;
					border-bottom: 0.1rpx solid #E5E5E5;
				}

				.keyInutArea {
					height: 80rpx;
					color: #4E78FF;
					font-size: 22.5rpx;
					padding: 0 20rpx;
					border: 0.1rpx solid #E5E5E5;
				}

				.scanBtn {
					position: absolute;
					display: block;
					width: 25rpx;
					height: 25rpx;
					top: 105rpx;
					right: 30rpx;
					z-index: 10;
				}

				.commitActBtn {
					position: absolute;
					width: 100%;
					bottom: 0;
					border-radius: 0;
				}
			}
		}

	}
</style>