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">开发者模式</view>
					  <input class="keyInutArea" type="text" v-model="appHospSign" @input='setHospSign' placeholder="请输入hospSign" />
					  <image @click="openScanner" class="scanBtn" src="../../static/scancodeIcon.png" mode=""></image>
					  <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";
	export default {
		data() {
			return {
				index:0,
				appHospSign:'tYAoFaa20yCAgaiy',//app端更新hospSign 8CJYqxlGIdLEIwaG
				showInputModal:false,
				hospSign: '', // 医院标识
				username: '', // 用户名
				password: '', // 密码
				rolList: [
					{permission: 1, name: '管理员', pagePath: 'pages/situationsCenter/situationsCenter'}, // targetIndexs：targetList种对应的下标
					{permission: 2, name: '查核组长',pagePath: 'pages/situationsCenter/situationsCenter'},
					{permission: 3, name: '查核组员', pagePath: 'pages/situationsCenter/situationsCenter'},
					{permission: 4, name: '单位负责人', pagePath: 'pages/mission/mission'},
					{permission: 5, name: '改善者', pagePath: 'pages/mission/mission'}
				]
			}
		},
		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');
				 this.appHospSign = hospSignFromLocal;
			  // #endif
		},
		mounted(){
            console.log(this.username);
		},
		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
							// hospSign:'tYAoFaa20yCAgaiy'
						}
					}
				}).then((data) => {
					if (data) {
						uni.setStorageSync('hiId', data.hiId);
						uni.setStorageSync('permissions', data.permissions);
			            uni.setStorageSync('token', data.token);
						uni.setStorageSync('code', data.code);
					    uni.setStorageSync('nowPermission', data.nowPermission);
						uni.setStorageSync('id', data.id);
						uni.setStorageSync('name', data.name);
						uni.setStorageSync('hospSign',hospSign);
						this.rolToTarget(data.nowPermission)
					}
				});
			},
			clickModalhandle(){
				
			},
			//角色和对应的跳转页面
			rolToTarget(nowPermission) {
				if(nowPermission != 0){
					let current = this.rolList.find(item => item.permission == nowPermission);
					if(current){
						// 页面跳转
						uni.redirectTo({
							 url: `/${current.pagePath}`
						});
					}
				}
			}
		}
	}
</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 {
			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>