HDhotel/pages/login/login.vue

<template>
	<view class="pages">
		
		<view class="wrap login">
			<form @submit="" @reset="">
				<view class="til">
					登录
				</view>
				<view class="uni-form-item-wrap">
					<view class="uni-form-item">
						<input class="uni-input" v-model="userName" maxlength="11" focus placeholder="手机号" />
					</view>
					<view class="uni-form-item">
						<input v-model="userPwd" :type="viewpassword?'text':'password'" class="uni-input" maxlength="16" focus placeholder="密码" />
						<button type="default" @click="eyeclick" class="eyebtn" :class="viewpassword?'text':'password'"></button>
					</view>
				</view>		
				<button form-type="submit" type="primary" @click="login" class="btn">登录</button>						
			</form>			
		</view>	
		
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	export default{
		components:{
			
		},
		props:{
			
		},
		data(){
			return{
				backpage:'',
				//用户输入的内容
				userName:"demo",
				userPwd:"123456",
				params:{
					username: this.userName, 
					password: this.userPwd,
					grant_type:'password',
					client_id:this.config.client_id,
					client_secret:this.config.client_secret,
				},
				viewpassword:false,
				//验证的规则
				rules:{
					userName:{
						rule:/\S/,
						msg:"账号不能为空"
					},
					userPwd:{
						rule:/^[0-9a-zA-Z]{6,16}$/,
						msg:"密码应该为6-16位"
					}
				}
				
			}
		},
		onLoad(options){
			this.backpage = options.backpage
			
		},
		methods:{
			...mapMutations(['setLogin']),
			login(){
				let serf = this;
				if(!this.validate('userName')) return;
				if(!this.validate("userPwd"))  return;
				uni.showLoading({
					title:"登录中..."
				});
				this.$api.http.post(this.config.apiBaseurl+'oauth/token',{
					username: this.userName, 
					password: this.userPwd,
					grant_type:'password',
					client_id:this.config.client_id,
					client_secret:this.config.client_secret,
				}).then(res => {
					console.log(res);
					uni.hideLoading();
					uni.showToast({
						icon:'none',
						title:res.data.message,
						duration: 2000
					});
					serf.setLogin(res.data);
					if(serf.backpage == '' || !serf.backpage){
						uni.redirectTo({
							url: '/pages/index/index',
							fail:function(e){
								console.log(e);
							}
						})
					}else{
						uni.navigateTo({
							url:serf.backpage
						})
					}
					// setTimeout(()=>{
					// 	uni.redirectTo({
					// 	    url: '../index/index'
					// 	});
					// },1000);
				}).catch(err => {
					console.log(err)
				
				});
			},
			//判断验证是否符合要求
			validate(key){
				let bool=true;
				if(!this.rules[key].rule.test(this[key])){
					//提示信息
					uni.showToast({
						title:this.rules[key].msg,
					})
					//取反
					bool=false;
					return false;
				}
				return bool;
			},
			//显示隐藏密码
			eyeclick(){
				this.viewpassword = !this.viewpassword;
			}
			
		}
	}
</script>

<style lang="scss" scoped>
/* @import url("login.scss"); */
page{background-color: $uni-bg-color-grey;}
.til{margin: $uni-spacing-col-lg 0;}
.login{padding-top: $uni-spacing-col-lg;}
.uni-input{width: 100%;box-sizing: border-box;border-radius:$uni-border-radius-llg;background-color: $uni-bg-color;height: 50px;padding-left: 80rpx;}
.uni-form-item{position: relative;margin-bottom: 40rpx;}
.btn{border-radius: $uni-border-radius-llg;}
.uni-form-item-wrap{margin-bottom:  80rpx;}

.eyebtn {position: absolute;height: 100%; width: 50px;top: 0; right: 0;background: transparent;cursor: pointer;border: 0;padding: 0;margin: 0;outline: 0;}
.eyebtn::before,
.eyebtn::after {content:'';position: absolute;top: 0; left: 0; bottom: 0; right: 0;margin: auto;}
.eyebtn::after{transform-origin:unset;transform: scale(0.8);}
.eyebtn.password::before {width: 20px;height: 20px;background: #e0e0e0;border-radius: 15px 0 15px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);-webkit-transition: height .168s;transition: height .168s;}
.eyebtn.password::after {width: 10px;height: 10px;border-radius: 50%;background: #424242;}
.eyebtn.text::before {width: 15px;height: 15px;background: transparent;border: 3px solid #e0e0e0;border-radius: 15px 0 15px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.eyebtn.text::after {width: 3px;height: 30px;border-radius: 0;-webkit-transform: rotate(30deg);-ms-transform: rotate(30deg);transform: rotate(30deg);background: #e0e0e0;-webkit-transition: height .132s;transition: height .132s;}
</style>