工作台

pages/auth/auth.vue

@@ -0,0 +1,190 @@
+<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" 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>