sisMobilePhone/components/login/Login.vue

<template>
	<view>
		<div class="container">
			<view class="title"><h3>云端气象采集预测</h3></view>
			<view class="usernameContainer" :style="{'margin-left':marginLeft}">
				<span :style="{'font-size':fontSize}">用户名：</span><input type="text" v-model="username" class="username"/>
			</view>
			<view class="passwordContainer" :style="{'margin-left':marginLeft}">
				<span :style="{'font-size':fontSize}">密&nbsp;&nbsp;&nbsp;&nbsp;码：</span><input type="password" v-model="password" class="password"/>
			</view>
			<view class="noLogin" :style="{'width':noLoginWidth,'font-size':noLoginFontSize,'margin-top':noLoginMarginTop}">
				<a href="#" @tap="noLogin">免登录，以游客身份浏览</a>
			</view>
			<button class="cu-btn bg-blue lg" @tap="login" :style="{'margin-top':loginMarginTop}">登录</button>
			

		</div>
	</view>
</template>

<script>
	export default{
		data:function(){
			return{
				username:"",
				password:"",
				lastUserName:"",
				lastPassWord:"",
				windPowerStations:[],
				windPowerStationId:"",
				windpowerstationName:"",
				windowWidth:"",
				windowHeight:"",
				fontSize:"",
				marginLeft:"",
				loginMarginTop:"",
				noLoginMarginTop:"",
				noLoginFontSize:"",
				loginFalg:false,
				noLoginWidth:""
			}
		},
		created() {
			this.windowWidth=uni.getSystemInfoSync().windowWidth;
			this.windowHeight=uni.getSystemInfoSync().windowHeight;
			//console.log(this.windowWidth);
			if(this.windowWidth>=768){
				this.fontSize="25px";
				this.marginLeft="5%";
				this.loginMarginTop="10%";
				this.noLoginMarginTop="5%";
				this.noLoginFontSize="22px";
				this.noLoginWidth="calc(70% + 147px)";
			}else{
				this.fontSize="18px";
				this.marginLeft="0";
				this.loginMarginTop="0";
				this.noLoginMarginTop="0";
				this.noLoginFontSize="14px";
				this.noLoginWidth="calc(70% + 84px)";
			}
		},
		methods:{
			login:function(){
				let _this=this;
				uni.request({
					url: 'http://49.4.78.143:8081/admin/appLogin?username='+this.username+'&password='+this.password,
						data:{
						},
						method:'GET',
						success: function(res) {
							console.log(res.data)
							if(res.data.code==200){
								_this.loginFalg=true;
								_this.getUser();
															
							}else{
								uni.showModal({
								 content: '用户名密码输入错误，请核对',								
								}); 
								_this.username="";
								_this.password="";
							}
						},
						fail: () => {
							_this.tips="网络错误，小程序端请检查合法域名";
						},
					});
			},
			getUser:function(){
				let _this=this;
				uni.request({
					url: 'http://49.4.78.143:8081/UserauthorityController/getUserSession',
						data:{
						},
						method:'GET',
						success: function(res) {					
							_this.lastUserName=res.data[0];
							_this.lastPassWord=res.data[1];
							_this.getWindPowerStation();
						},
						fail: () => {
							_this.tips="网络错误，小程序端请检查合法域名";
						},
					});
			},
			getWindPowerStation:function(){
				let _this=this;
				uni.request({
					url: 'http://49.4.78.143:8081/UserauthorityController/selectuserauthority?userName='+this.lastUserName+'&password='+this.lastPassWord,
						data:{
						},
						method:'GET',
						success: function(res) {					
							_this.windPowerStations=res.data;
							//console.log(_this.windPowerStations);
							_this.windPowerStationId=_this.windPowerStations[0];
							if(_this.loginFalg){
								if(_this.windPowerStationId=="MHS_FDC"){
									_this.windpowerstationName="麻黄山";
								}
								if(_this.windPowerStationId=="NSS_FDC"){
									_this.windpowerstationName="牛首山";
								}
								if(_this.windPowerStationId=="XS_FDC"){
									_this.windpowerstationName="香山";
								}
								if(_this.windPowerStationId=="SBQ_FDC"){
									_this.windpowerstationName="石板泉";
								}
								if(_this.windPowerStationId=="QS_FDC"){
									_this.windpowerstationName="青山";
								}
								if(_this.windPowerStationId=="CL_FDC"){
									_this.windpowerstationName="崇礼";
								}
								if(_this.windPowerStationId=="KB_FDC"){
									_this.windpowerstationName="康保";
								}
								if(_this.windPowerStationId=="YMG_FDC"){
									_this.windpowerstationName="雁门关";
								}
								if(_this.windPowerStationId=="TY_FDC"){
									_this.windpowerstationName="天源";
								}
								if(_this.windPowerStationId=="AL_FDC"){
									_this.windpowerstationName="熬伦";
								}
								if(_this.windPowerStationId=="DBS_FDC"){
									_this.windpowerstationName="调兵山";
								}
								if(_this.windPowerStationId=="BZ_FDC"){
									_this.windpowerstationName="北镇";
								}
								if(_this.windPowerStationId=="XC_FDC"){
									_this.windpowerstationName="兴城";
								}
								if(_this.windPowerStationId=="FS_FDC"){
									_this.windpowerstationName="芳山";
								}
								if(_this.windPowerStationId=="LH_FDC"){
									_this.windpowerstationName="凌海";
								}
								if(_this.windPowerStationId=="XBQ_FDC"){
									_this.windpowerstationName="西八千";
								}
								if(_this.windPowerStationId=="TZS_FDC"){
									_this.windpowerstationName="台子山";
								}
								if(_this.windPowerStationId=="YM_FDC"){
									_this.windpowerstationName="永茂";
								}
								if(_this.windPowerStationId=="WF_FDC"){
									_this.windpowerstationName="万发";
								}
							}else{
								_this.windpowerstationName="游客身份浏览";
							}
							
							_this.pushWindPowerStationNameToSessionStorage(_this.windpowerstationName);
							
						},
						fail: () => {
							_this.tips="网络错误，小程序端请检查合法域名";
							
						},
					});
			},
			pushWindPowerStationNameToSessionStorage(windpowerstationName) {
				uni.setStorageSync('windpowerstationName',windpowerstationName);			
				uni.setStorageSync('windpowerstationNames',JSON.stringify(this.windPowerStations));
				uni.setStorageSync('windPowerStationId',this.windPowerStationId);
				uni.switchTab({
				     url: '/pages/index/Index'
				});
				//sessionStorage.setItem('windpowerstationName', windpowerstationName);
				//alert("v"+ sessionStorage.getItem("windpowerstationName"));
				//this.common.goback('/pages/index/Index');
			},
			noLogin:function(){
				let _this=this;
				
				uni.request({
					url: 'http://49.4.78.143:8081/admin/appLogin?username=abc&password=123',
						data:{
						},
						method:'GET',
						success: function(res) {
							console.log(res.data)
							if(res.data.code==200){
								_this.loginFalg=false;
								_this.getUser();			
							}
						},
						fail: () => {
							_this.tips="网络错误，小程序端请检查合法域名";
						},
					});
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
		background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#2F698E), color-stop(0.15, #5C757C), to(#004C90));		
	}
	.container{
		border-radius: 20px;
		width: 90%;
		height: 700upx;
		margin: 0px auto;
		position: absolute;
		top: 20%;
		left: 5%;
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#024F93), color-stop(1.5, #cccccc), to(#437193));
		background: rgba(0, 0, 0, 0.1);
	}
	.title{
		width: 100%;
		height: 50px;
		color: white;
		line-height: 50px;
		text-align: center;
		margin-top: 5%;
	}
	.usernameContainer{
		width: 100%;
		height: 40px;
		line-height: 40px;
		margin-top: 10%;
	}
	.usernameContainer span{
		float: left;
		font-size: 18px;
		color: white;
		margin-left: 10px;
	}
	.username{
		width: 70%;
		height: 40px;
		border: 1px solid white;
		float: left;
		border-radius: 5px;
		
	}	
	.passwordContainer{
		width: 100%;
		height: 40px;
		line-height: 40px;
		margin-top: 10%;
	}
	.passwordContainer span{
		float: left;
		font-size: 18px;
		color: white;
		margin-left: 10px;
	}
	.password{
		width: 70%;
		height: 40px;
		border: 1px solid white;
		float: left;
		border-radius: 5px;
	}
	.noLogin{
		width: calc(70% + 84px);
		height: 40px;
		text-align: right;
		color: white;
		/* margin-left:15% ; */
		/* margin-right: 10px; */
		line-height: 40px;
	}
	.noLogin a:link{
		color: white;
	}
	.noLogin a:hover{
		color: white;
	}
	.noLogin a:visited{
		color: white;
	}
	.noLogin a:active{
		color: white;
	}
	.cu-btn{
		width: 80%;
		height: 50px;
		margin-left: 10%;
		/* margin-top: 10%; */
	}
</style>