sisMobilePhone/components/login/Login.vue

<template>
	<view>
		<view v-show="accountIsShow">
			<view class="title">账号密码登录</view>
			<view class="usernameAndPassword">
				<view class="usernameContent">
					<input type="text" v-model="username" placeholder="账号" @input="usernameInput"/>
				</view>
				<view class="passwordContent">
					<input type="text" v-model="password" :password="passwordShow" placeholder="请输入密码" @input="passwordInput"/>
					<sunui-password @change="showPass" />
				</view>
			</view>
			<view class="type" :style="{ 'margin-top': typeMarginTop }">
				<a @tap="changeType('phone')">手机验证码登录</a>
				<a style="float: right;color:#77A8E6;" @tap="goToIndex()">游客身份登录</a>
			</view>
			<button class="cu-btn bg-red lg" @tap="login" :disabled="usernameLoginDisabled" type="" :style="{ 'height': buttonHeight}">登录</button>
			<view class="bottomWord" :style="{ 'font-size': bottomWordFontSize,'margin-top':bottomWordMarginTop}">
				点击登录，即代表已阅读并同意<a href="#">隐私政策</a>和<a href="#">用户协议</a>
			</view>
		</view>
		<view v-show="phoneIsShow">
			<view class="title">手机验证码登录</view>
			<view class="usernameAndPassword">
				<view class="phoneContent">
					<span>+86</span>
					<input type="text" v-model="phone" placeholder="请输入手机号码" @input="phoneInput" />					
				</view>
				<view class="codeContent">
					<input type="text" v-model="code" placeholder="请输入验证码" @input="codeInput"/>
					<span :style="{ 'color': codeColor,'width':codeWidth }" @tap="getCode">获取验证码</span>
				</view>
			</view>			
			<view class="type" :style="{ 'margin-top': typeMarginTop }">
				<a @tap="changeType('account')">账号登录</a>
			</view>
			<button class="cu-btn bg-red lg" :disabled="codeLoginDisabled" type="" :style="{ 'height': buttonHeight}">登录</button>
			<view class="bottomWord" :style="{ 'font-size': bottomWordFontSize,'margin-top':bottomWordMarginTop}">
				点击登录，即代表已阅读并同意<a href="#">隐私政策</a>和<a href="#">用户协议</a>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data: function() {
		return {
			passwordShow: true,
			accountIsShow:true,
			phoneIsShow:false,
			usernameLoginDisabled:true,
			codeLoginDisabled:true,
			username: '',
			password: '',
			phone:"",
			code:"",
			codeColor:"#808080",
			usernameFlag:false,
			passwordFlag:false,
			phoneFlag:false,
			codeFlag:false,
			getCodeFlag:false,
			lastUserName: '',
			lastPassWord: '',
			windowWidth:"",
			windowHeight:"",
			typeMarginTop:"",
			codeWidth:"",
			bottomWordFontSize:"",
			bottomWordMarginTop:"",
			buttonHeight:"",
			userid:'',
		};
	},
	created() {
		this.windowWidth = uni.getSystemInfoSync().windowWidth;
		this.windowHeight = uni.getSystemInfoSync().windowHeight;
		//console.log(this.windowWidth);
		if (this.windowWidth >= 768) {
			this.typeMarginTop="10%";
			this.codeWidth="200px";
			this.bottomWordFontSize="18px";
			this.bottomWordMarginTop="500px";
			this.buttonHeight="50px";
		} else {
			this.typeMarginTop="0";
			this.codeWidth="100px";
			this.bottomWordFontSize="13px";
			this.bottomWordMarginTop="270px";
			this.buttonHeight="40px";
		}
		//this.removeUsernamePassword();
		this.getUsernamePassword();
	},
	computed: {
		backStageIp: function() {
			return this.$store.state.wholeSituationBackStageIp;
		},
		backStagePort: function() {
			return this.$store.state.wholeSituationBackStagePort;
		},
		windpowerstationNameToId: function() {
			return this.$store.state.windpowerstationNameToId;
		}
	},
	methods: {
		showPass(e) {
			this.passwordShow = e;
		},
		usernameInput(e){
			if(e.detail.value!=""){
				this.usernameFlag=true;
				if(this.passwordFlag){
					this.usernameLoginDisabled=false;
				}
			}else{
				this.usernameFlag=false;
				this.usernameLoginDisabled=true;
			}
		},
		passwordInput(e){
			if(e.detail.value!=""){
				this.passwordFlag=true;
				if(this.usernameFlag){
					this.usernameLoginDisabled=false;
				}
			}else{
				this.passwordFlag=false;
				this.usernameLoginDisabled=true;
			}
		},
		phoneInput(e){
			// console.log(e.detail.value)
			var phoneStr = e.detail.value;
			    if(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phoneStr)){ 
					this.codeColor="black";
					this.getCodeFlag=true;
					this.phoneFlag=true;
					if(this.codeFlag){
						this.codeLoginDisabled=false;
					}
			    }
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phoneStr))){
					this.codeColor="#808080";
					this.getCodeFlag=false;
					this.phoneFlag=false;
					this.codeLoginDisabled=true;
				}
		},
		codeInput(e){
			if(e.detail.value!=""){
				this.codeFlag=true;
				if(this.phoneFlag){
					this.codeLoginDisabled=false;
				}
			}else{
				this.codeFlag=false;
				this.codeLoginDisabled=true;
			}
		},
		getCode:function(){
			if(this.getCodeFlag){
				console.log("获取验证码")
			}else{
				console.log("不能获取验证码")
			}
			
		},
		changeType:function(type){
			if(type=="account"){
				this.accountIsShow=true;
				this.phoneIsShow=false;
			}
			if(type=="phone"){
				this.phoneIsShow=true;
				this.accountIsShow=false;
			}
		},
		goToIndex:function(){
			let _this = this;
			uni.request({
				url: 'http://49.4.78.143:8057/GyeeuserController/login?username='+'admin'+'&password='+'admin',
				data: {},
				method: 'GET',
				success: function(res) {
					console.log(res.data);
					if (res.data.code == 200) {
						_this.loginFalg = true;
					} 
				},
				fail: () => {
					_this.tips = '网络错误，小程序端请检查合法域名';
				}
			});
			uni.switchTab({
			     url: '/pages/index/Index'
			    });
				console.log(this.username)
		},
		falseLogin: function() {
			if (this.username == 'admin' && this.password == 'admin') {
				this.setUsernamePassword();
				uni.switchTab({
					url: '/pages/index/Index'
				});
			}else{
				uni.showModal({
					content: '用户名密码输入错误，请核对'
				});
				this.username = '';
				this.password = '';
			}
		},
		setUsernamePassword: function() {
			uni.setStorageSync('gyeeusername', this.username);
			uni.setStorageSync('gyeepassword', this.password);
		},
		getUsernamePassword: function() {
			this.lastUserName = uni.getStorageSync('gyeeusername');
			this.lastPassWord = uni.getStorageSync('gyeepassword');
			if (this.lastUserName != '' && this.lastPassWord != '') {
				uni.switchTab({
					url: '/pages/index/Index'
				});
			}
		},
		removeUsernamePassword: function() {
			uni.removeStorageSync('gyeeusername');
			uni.removeStorageSync('gyeepassword');
		},
		login: function() {
			let _this = this;
			uni.request({
				url: 'http://' + this.backStageIp + ':' + this.backStagePort + '/GyeeuserController/login?username=' + this.username + '&password=' + this.password,
				data: {},
				method: 'GET',
				success: function(res) {
					console.log(res.data);
					_this.userid = res.data.data;
					sessionStorage.setItem('userid',_this.userid);
					if (res.data.code == 200) {
						_this.setUsernamePassword();
						_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 {
	background-color: #FFFFFF;
	height: 100%;
	/* background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#2f698e), color-stop(0.15, #5c757c), to(#004c90)); */
}
.title {
	width: 90%;
	height: 100px;
	font-size: 25px;
	font-weight: bold;
	padding-top: 50px;
	/* margin-top: 80px; */
	margin-left: 10%;
}
.usernameAndPassword {
	width: 100%;
	height: 100px;
	margin-top: 50px;
}
.usernameContent {
	width: 80%;
	margin-left: 10%;
	border-bottom: 2upx solid #D3D3D3;
}
.passwordContent {
	width: 80%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2upx solid #D3D3D3;
	margin-top: 20px;
	margin-left: 10%;
}
input {
	width: 100%;
	height: 30px;
}
.type{
	width: 80%;
	height: 20px;
	line-height: 20px;
	margin-left: 10%;
}
.cu-btn {
	width: 80%;
	height: 40px;
	margin-left: 10%;
	margin-top: 25px;
}
.phoneContent{
	width: 80%;
	margin-left: 10%;
	border-bottom: 2upx solid #D3D3D3;
	display: flex;
}
.phoneContent span{
	line-height: 30px;
	margin-right: 5px;

}
.codeContent{
	width: 80%;
	margin-left: 10%;
	border-bottom: 2upx solid #D3D3D3;
	display: flex;
	margin-top: 20px;
}
.codeContent span{
	width: 100px; 
}
.bottomWord{
	width: 80%;
	margin-left: 10%;
	color: #808080;
	font-size: 13px;
	margin-top: 270px;
	text-align: center;
}
a{
	text-decoration: none;
}
.bottomWord a:link {
	color: #5C97E4;
}
.bottomWord a:hover {
	color: #5C97E4;
}
.bottomWord a:visited {
	color: #5C97E4;
}
.bottomWord a:active {
	color: #5C97E4;
}
/* .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>