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>
			<button class="cu-btn bg-red lg" @tap="checkIsSoterEnrolledInDeviceFingerPrint"  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;
		},
		windpowerstationName: function() {
			return this.$store.state.default_wpname;
		},
		windpowerstationId: function() {
			return this.$store.state.default_wpid;
		}
	},
	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;
			_this.loginFalg = true;
			uni.switchTab({
			     url: '/pages/index/Index'
			    });
		},
		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);
			this.setFingerPrintPassword();
		},
		setFingerPrintPassword: function() {
			uni.setStorageSync('fingerPrintname', this.username);
			uni.setStorageSync('fingerPrintpassword', this.password);
		},
		getFingerPrintPassword: function() {

			if (uni.getStorageSync('fingerPrintname') != '' && uni.getStorageSync('fingerPrintpassword') != '') {
				uni.switchTab({
					url: '/pages/index/Index'
				});
			}else
			{
				uni.showToast({
					title:"请先用密码登录!"
				});
			}
		},
		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');
			//uni.removeStorageSync('userid');
		},
		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;
					
					uni.setStorageSync('userid',_this.userid);
					//sessionStorage.setItem('userid',_this.userid);
					if (res.data.code == 200) {
						
						_this.dataprocessing.putWindPowerStationId(_this.$store.state.default_wpid);
						_this.dataprocessing.putWindPowerStationName(_this.$store.state.default_wpname);
						// if(_this.dataprocessing.getWindPowerStationId()=='')
						// {
						// 	//debugger
						// 	_this.dataprocessing.putWindPowerStationId(_this.$store.state.default_wpid);
						// }
						
						// if(_this.dataprocessing.getWindPowerStationName()=='')
						// {
						// 	//debugger
						// 	_this.dataprocessing.putWindPowerStationName(_this.$store.state.default_wpname);
						// }
						_this.setUsernamePassword();
						_this.loginFalg = true;
						_this.lastUserName = _this.username;
						_this.lastPassWord = _this.password;
						uni.switchTab({
							url: '/pages/index/Index'
						});
					} else {
						uni.showModal({
							content: '用户名密码输入错误，请核对'
						});
						_this.username = '';
						_this.password = '';
					}
				},
				fail: () => {
					_this.tips = '网络错误，小程序端请检查合法域名';
				}
			});
		},checkIsSoterEnrolledInDeviceFingerPrint() {
				let _this = this;
                uni.checkIsSoterEnrolledInDevice({
                    checkAuthMode: 'fingerPrint',
                    success(res) {
						
                        uni.startSoterAuthentication({
                            requestAuthModes: ['fingerPrint'],
                            challenge: '123456',
                            authContent: '请用指纹解锁',
                            success(result) {
					
									if(result.errMsg=="startSoterAuthentication:ok")
									{	
											//_this.setUsernamePassword();
											//_this.loginFalg = true;
											//_this.getUser()
											_this.getFingerPrintPassword();
									}else {
											uni.showToast({
												title:"指纹登录失败！"
											});
											_this.username = '';
											_this.password = '';
										}
                     
								},
                            fail(err) {
                                console.log(err);
                            },
                            complete(res) {
                                console.log(res);
                            }
                        })
                    },
                    fail(err) {
						uni.showToast({
							title:"请用手机指纹管理功能新建指纹录！"
						});
                    },
                    complete(res) {
                        console.log(res);
                    }
                })
            }
	}
	
};
</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>