<template>
	<view class="container">
		<image class="bkg" mode="aspectFill" src="../static/login-bg.png"></image>
		<view class="login">
			<view class="login-title">
				<view>Hello</view>
				<view>欢迎登录护工端</view>
			</view>
			<view class="login-form">
				<view>
					<u-input v-model="form.username" border-color="#f5f5f5" placeholder="请输入用户名"></u-input>
				</view>
				<view>
					<u-input v-model="form.password" border-color="#f5f5f5" type="password"
						placeholder="请输入密码"></u-input>
				</view>
			</view>
			<view class="login-btn">
				<view  @click="login">立即登录</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					password: ''
				},
			}
		},
		onReady() {},
		methods: {
			login() {
				let that = this
				if(this.base.isNull(this.form.username)){
					this.base.toast("请输入用户名")
					return
				}
				if(this.base.isNull(this.form.password)){
					this.base.toast("请输入密码")
					return
				}
				this.$u.api.login({
					...this.form
				}).then(res=>{
					console.log("res1",res)
					that.base.toast("登录成功",1500,function(){
						
						that.$u.vuex('vuex_token', res.token)
						setTimeout(function(){
							uni.switchTab({
								url:'/pages/index/index'
							})
						},1500)
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		font-size: 32rpx;
		.bkg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
		}

		.login {
			position: absolute;
			top: 0;
			left: 0;
			padding-top: 150rpx;
			// text-align: center;
			width: 100%;

			&-title {
				font-size: 50rpx;
				color: #fff;
				text-align: left;

				&>view {
					width: 50%;
					margin: 0 auto;
				}
			}

			&-form {
				padding: 400rpx 65rpx 100rpx 65rpx;
				&>view {
					background-color: #f5f5f5;
					border-radius: 60rpx;
					padding: 10rpx 30rpx;
					margin-bottom: 35rpx;
				}

			}
			&-btn{
				padding: 0 65rpx;
				&>view{
					font-size: 33rpx;
					border-radius: 60rpx;
					margin-bottom: 35rpx;
					height:90rpx;
					line-height: 90rpx;
					text-align: center;
					color: #fff;
					background: linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%);
					box-shadow: 1rpx 1rpx 10rpx #c10d12;
				}
			}
		}
	}
</style>