Web_TracerMethodology/pages/login/login.vue

<template>
	<view class="login-page">
		<view class="com-model">
			<view class="top-box">
				<image class="pic" src="/static/images/shade.png"></image>
				<text class="title-top" @click="openModal">你好，</text>
				<text class="title-buttom">欢迎使用追踪方法学系统</text>
			</view>
			<view class="main-content">
				<input class="uni-input-box"
				  placeholder="请输入账号"
					placeholder-style="color: #A1A7B3"
					v-model="username" />
				<input class="uni-input-box"
				    placeholder="请输入密码"
					placeholder-style="color: #A1A7B3"
					password
					v-model="password" />
				<com-button class="login-button"
					:width="998" :height="120" :fontSize="48" :background="isLogin?'#A3B1CC':''" btnText="登录" @btnClick="login" />
			</view>
		</view>
		<tm-modal v-if="showInputModal" @click="clickModalhandle">
			<view class="checkItemResultModal">
				 <view class="modalContent">
				 	  <view class="modalBar">开发者模式</view>
					  <input class="keyInutArea" type="text" @input='setHospSign' placeholder="请输入hospSign" />
					  <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:'8CJYqxlGIdLEIwaG',//app端更新hospSign
				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'}
				]
			}
		},
		onLoad({ hospSign }){
			  
	
			  this.hospSign = hospSign;
			
		},
		mounted(){
			const info = uni.getSystemInfoSync();
			
			// uni.showModal({
			//     title: 'info',
			//     content: JSON.stringify(info),
			//     success: function (res) {
			//         if (res.confirm) {
			//             console.log('用户点击确定');
			//         } else if (res.cancel) {
			//             console.log('用户点击取消');
			//         }
			//     }
			// });

			  
		},
		methods: {
			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');
				console.log({nowPermission});
				this.$store.dispatch({
					type: 'login/commActions',
					payload: {
						key: 'login',
						data: {
							username: encryption(this.username),
							password: encryption(this.password),
							// #ifdef APP-PLUS
							hospSign: this.appHospSign,
							// #endif
							// #ifdef H5
							hospSign: this.hospSign,
							// #endif
							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', this.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}`
						});
					}
				}
			}
		},
		computed:{
			//判断是否输入了用户名和密码
			isLogin(){
				return !this.username || !this.password;
			}
		}
	}
</script>

<style lang="less" scoped>
	.login-page {
		height:100vh;
		background-color: #FFFFFF;
		.checkItemResultModal {
			  display: flex;
			  height: 100%;
			  justify-content: center;
			  align-items: center;
			  .modalContent {
				   position: relative;
				   width: 90%;
				   height:500rpx;
				   border-radius: 20rpx;
				   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;
				   }
				   .commitActBtn {
					   position: absolute;
					   width: 100%;
					   bottom: 0;
					   border-radius: 0;
				   }
			  }
		}
		.top-box {
			display: flex;
			flex-direction: column;
			padding-left: 62.5rpx;
			.pic{
				position: absolute;
				top: 0;
				right: 0;
			    width: 430rpx;
				height: 281.25rpx;
			}
			.title-top{
				height: 45rpx;
				font-size: 45rpx;
				font-weight: bold;
				margin-top: 250rpx;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN;
				color: #2E2F33;
			}
			.title-buttom{
				 margin-top: 40rpx;
				 height: 45rpx;
				 font-size: 45rpx;
				 font-family: SourceHanSansCN-Bold, SourceHanSansCN;
				 font-weight: bold;
				 color: #2E2F33;
			}
		}
		.main-content{
			 margin-top: 37.5rpx;
			 float: left;
		}
		.uni-input-box{
			 width: 625rpx;
			 float: left;
			 margin-left: 62.5rpx;
			 margin-top: 62.5rpx;
			 font-size: 30rpx;
			 padding-bottom: 25rpx;
			 border-bottom:1.25rpx solid #E6EAF2 ;
		}
		.login-button{
			  float: left;
			  margin-left: 62.5rpx;
			  margin-top: 62.5rpx;
			  background-color: #A3B1CC;
		}
  }

</style>