Web_TracerMethodology/pages/login/login.vue

<template>
	<view class="login-page">
		<image class="bgImage" src="/static/images/shade.png"></image>
		<text class="titleOne row" @click="openModal">你好，</text>
		<view class="titleTwo row">欢迎使用追踪方法学系统</view>
		<view class="inputArea">
	       <input class="inputTag" type="text" placeholder="请输入账号" placeholder-class="inputTagHolderPlace" v-model="username"  />
		</view>
		<view class="inputArea pwd">
		   <input class="inputTag" password="true" type="text" placeholder="请输入密码" placeholder-class="inputTagHolderPlace"  v-model="password" />
		</view>
		
		<button :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 @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>
</template>

<script>
	import encryption from "../../utils/crypto.js";
	import {loginAfterHandle} from '../../utils/loginHandle.js';
	export default {
		data() {
			return {
				index:0,
				appHospSign:'IGlcn5nc4xBWc08C',//app端更新hospSign
				showInputModal:false,
				hospSign: '', // 医院标识
				username: '', // 用户名
				password: '', // 密码
				version:'',
				deviceInfo:{}
			}
		},
		computed:{
			isInput:function(){
				return (this.username.length>0&&this.password.length>0)?true:false
			},
		},
		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

			  
			  
		},
		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');
				// #ifdef APP-PLUS
				   const hospSign  = this.appHospSign;
				// #endif
				// #ifdef H5
				  const 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: center;
		height:100vh;
		padding: 0 62.5rpx;
		padding-bottom: 100rpx;
		background-color: #FFFFFF;
		.bgImage {
			position: absolute;
			right: 0;
			top:0;
			width: 430rpx;
			height: 281.25rpx;
		}
		.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;
		}
		.inputArea {
			height: 80rpx;
			margin-bottom: 37.5rpx;
			border-bottom: 1.25rpx solid #E6EAF2;
			input {
				-webkit-box-shadow: 0 0 0 1000px white inset;
			}
			.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;
			background: #A3B1CC;
			border-radius: 37.5rpx;
			border:none;
			background-color: #A3B1CC;
			&.on {
				background: linear-gradient(90deg, #3377FF 0%, #4D97FF 100%);
			}
		}
		
		.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>