dou_fire/pages/auth/auth.vue

<template>
	<view class="auth-center">
		<view class="login-left" @click="onBack()">
			<u-icon name="close" color="#000" size="24"></u-icon>
		</view>
		<view class="login">
			<view class="logo">
				<image class="logo-src" src="@/static/imgs/logo.png"/>
			</view>
			<view class="hello">欢迎使用抖火法律</view>
			<view class="input input-phone">
				<label>+86</label>
				<input type="number" v-model="phone" maxlength="11" placeholder="请输入手机号码">
			</view>
			<view class="input">
				<input type="safe-password" password v-model="password" placeholder="请输入密码">
			</view>
			<view class="btn">
				<button :disabled="phone.length < 11 || password == '' || agreement.length == 0" @click="onAuth()">登录</button>
			</view>
			<view class="agreement">
				<u-checkbox-group
					v-model="agreement"
					placement="row"
				>
					<u-checkbox shape="circle" name="agreement" activeColor="#446EFE"></u-checkbox>
					我已阅读并同意
					<my-link class="agreement-nav" :to="{name: 'RichText', params: {id: 1}}">服务协议</my-link>、
					<my-link class="agreement-nav" :to="{name: 'RichText', params: {id: 2}}">隐私权政策</my-link>
				</u-checkbox-group>
			</view>
		</view>
		<view class="footer">
			<my-link class="footer-nav" :to="{ name: 'Registered' }">注册账号</my-link>
			<my-link class="footer-nav" :to="{ name: 'ResetPassword' }">找回密码</my-link>
		</view>
	</view>
</template>

<script>
	import { auth } from '@/apis/interfaces/auth.js'
	export default {
		data() {
			return {
				phone		: '',
				password	: '',
				agreement	: []
			};
		},
		methods: {
			onAuth(){
				uni.showLoading({
					title: '登录中...'
				})
				auth({
					username: this.phone,
					password: this.password
				}).then(res => {
					// 存储登录凭证
					this.$store.commit('setToken', res.token_type + ' ' + res.access_token);
					this.onBack()
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			onBack(){
				try{
					this.$Router.back()
				}catch(e){
					this.$Router.replaceAll({name: 'Index'})
				}
			}
		}
	}
</script>

<style lang="scss">
	.auth-center{
		position: relative;
		background: white;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 100vh;
		box-sizing: border-box;
		@extend .ios-bottom;
		@extend .ios-top;
	}
	// 关闭登录
	.login-left{
		position: absolute;
		right: $padding * 2;
		top: $padding;
		@extend .ios-top;
	}
	// 登录
	.login{
		padding: $padding * 2;
		.logo{
			padding-top: $padding * 2;
			padding-bottom: $padding / 2;
			.logo-src{
				width: 98rpx;
				height: 98rpx;
				border-radius: $radius;
				vertical-align: top;
			}
		}
		.hello{
			font-weight: bold;
			font-size: 54rpx;
			color: $text-color;
			padding-bottom: $padding * 2;
		}
		.input{
			border-bottom: solid 1rpx $border-color;
			height: 100rpx;
			line-height: 100rpx;
			margin-bottom: $margin;
			input{
				height: 100rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				color: $text-color;
			}
			&.input-phone{
				display: flex;
				align-items: center;
				label{
					border-right: solid 1rpx $border-color;
					padding: 0 $padding;
					box-sizing: border-box;
					width: 140rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 32rpx;
					color: $text-color;
				}
				input{
					padding: 0 $padding;
					flex: 1;
				}
			}
		}
		.btn{
			button{
				background: $main-color;
				border-radius: $radius-lg;
				height: 100rpx;
				line-height: 100rpx;
				color: white;
				font-size: 38rpx;
				&::after{
					display: none;
				}
				&[disabled]{
					opacity: .5;
				}
			}
		}
		.agreement{
			padding-top: $padding * 2;
			font-size: 30rpx;
			color: $text-gray;
			&-nav{
				display: inline-block;
				font-size: 30rpx;
				color: $main-color;
			}
		}
	}
	// 底部
	.footer{
		padding: 50rpx 50rpx 100rpx;
		height: 100rpx;
		text-align: center;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		&-nav{
			font-size: 30rpx;
			margin: 0 $margin;
			color: $text-gray;
		}
	}
</style>