<template>
	<view class="container">
		<view style="width: 100%;">
			<image style="width: 100%; height: 200px; background-color: #eeeeee;"
				src="@/static/2021111015193250849.jpg"></image>
		</view>
		<view class="title">
			<h1>危化品车辆运单平台</h1>
		</view>
		<view class="login">
			<u--form class="form" labelPosition="left" :model="userInfo" ref="uForm">
				<u-form-item label="账号:" prop="userInfo.account" borderBottom ref="item1">
					<u--input v-model="userInfo.account" border="none" maxlength="20"
						placeholder="请输入账号"></u--input>
				</u-form-item>
				<u-form-item label="密码:" prop="userInfo.password" borderBottom>
					<u--input v-model="userInfo.password" border="none" type="password" maxlength="20"
						placeholder="请输入密码"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="register">
			<u--text type="primary" text="没有账号，前往注册？" @click="register"></u--text>
		</view>
		<u-button type="primary" class="btn" text="登录" shape="circle" @click="login"></u-button>
	</view>

</template>
<script>
	import {
		get,
		post
	} from '@/common/request.js'
	export default {
		data() {
			return {
				userInfo: {
					account: '',
					password: '',
				},
			};
		},
		onLoad() {
			if (uni.getStorageSync('token')) {
				this.login()
			}
		},
		methods: {
			register() {
				uni.navigateTo({
					url: '/pages/my/register'
				})
			},
			login() {
				uni.showLoading({
					title: '登录中'
				})

				post('/myapi/api/yq_driver/login', {
					...this.userInfo
				}).then(res => {

					setTimeout(() => {
						uni.setStorageSync('token', res.data.token)
						uni.hideLoading()
						uni.showToast({
							title: '登录成功！',
							icon: "none"
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/my/index'
							})
						}, 500)

					}, 500)

				})
			}
		},

	};
</script>

<style scoped lang="less">
	.container {

		display: flex;
		flex-direction: column;
		align-items: center;
		height: calc(100vh - 50px);

		.title {
			position: fixed;
			top: 110px;
			color: #fff;
		}


		.login {
			// border: 1px solid #f4f4f4;
			// border-radius: 15px;
			padding: 20px 0;
			width: 80%;


			.form {
				height: 100px;
			}
		}

		.register {
			width: 80%;
			padding-bottom: 10px;
		}

		.btn {
			width: 80%;
			font-size: 24px;
		}


	}
</style>