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">你好，</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>
	</view>
</template>

<script>
	import encryption from "../../utils/crypto.js";
	export default {
		data() {
			return {
				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'}
				]
			}
		},
		methods: {
			login() {
				if(this.isLogin) return
				this.$store.dispatch({
					type: 'login/commActions',
					payload: {
						key: 'login',
						data: {
							username: encryption(this.username),
							password: encryption(this.password)
						}
					}
				}).then((data) => {
					if (data) {
						uni.setStorageSync('hiId', data.hiId);
						uni.setStorageSync('permissions', data.permissions);
			      uni.setStorageSync('token', data.token);
					  uni.setStorageSync('nowPermission', data.nowPermission);
						uni.setStorageSync('id', data.id);
						uni.setStorageSync('name', data.name);
						this.rolToTarget(data.nowPermission)
					}
				});
			},
			//角色和对应的跳转页面
			rolToTarget(nowPermission) {
				if(nowPermission != 0){
					let current = this.rolList.find(item => item.permission == nowPermission);
					if(current){
						// 页面跳转
						uni.navigateTo({
							 url: `/${current.pagePath}`
						});
					}
				}
			}
		},
		computed:{
			//判断是否输入了用户名和密码
			isLogin(){
				return !this.username || !this.password;
			}
		}
	}
</script>

<style lang="less" scoped>
	.login-page {
		height: 100%;
		background-color: #FFFFFF;
		.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>