Web_TracerMethodology/pages/login/login.vue

<template>
	<view class="login-model">
		<view class="com-model">
			<view class="top-box">
				<image class="pic" src="/static/images/底纹.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: '' // 密码
			}
		},
		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('token', data.hiId);
						uni.setStorageSync('token', data.permissions);
			      uni.setStorageSync('token', data.token);
					  uni.setStorageSync('token', data.nowPermission);
					}
				});
			}
		},
		computed:{
			//判断是否输入了用户名和密码
			isLogin(){
				return !this.username || !this.password;
			}
		}
	}
</script>

<style lang="less" scoped>
 .pic{
	 height: 281.25rpx;
	 width: 430rpx;
	 float: right;
 }
 .title-top{
	 height: 45rpx;
	 font-size: 45rpx;
	 font-weight: bold;
	 margin-top: 250rpx;
	 margin-left: 62.5rpx;
	 font-family: SourceHanSansCN-Bold, SourceHanSansCN;
	 color: #2E2F33;
	 float: left;
 }
 .title-buttom{
	 height: 45rpx;
	 font-size: 45rpx;
	 font-family: SourceHanSansCN-Bold, SourceHanSansCN;
	 font-weight: bold;
	 color: #2E2F33;
	 float: left;
	 margin-left: 62.5rpx;
	 margin-top: 40rpx;
 }
 .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>