BLi/pages/login/login.vue

<template>
	<view class="login">
		<u-toast ref="uToast" />
		<image class="bgc" src="../../static/img/group.png" mode=""></image>
		<view class="con">
			<view class="h2">你好，</view>
			<view class="h3">欢迎使用病例收集及调研问卷项目</view>
			<u-tabs :list="list" bar-width="140" font-size="36" :gutter="50" bg-color="transparent" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<view class="form">
				<view class="input">
					<u-input v-model="phone" maxlength="11" :clearable="false" type="number" :border="border" placeholder="请输入账号" />
				</view>
				<view class="input">
					<u-input v-model="password" :clearable="false" type="password" :border="border" placeholder="请输入密码" />
				</view>
				<view class="forget" @click="forget()">
					忘记密码
				</view>
			</view>
			<view class="btn" @click="passwordLogin()">
				登录
			</view>
		</view>
			<view class="agreement flex">
				<u-checkbox-group @change="checkboxGroupChange">
					<u-checkbox 
						v-model="checked"	
						shape="circle"
						active-color="#167FFF"
					></u-checkbox>
				</u-checkbox-group>
				<view class="text">已阅读并同意<text @click="agreement()">《病例收集及调研问卷项目用户隐私协议》</text></view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '医生登录'
				}, {
					name: '专家登录'
				}],
				current: 0,
				phone:'',
				password:'',
				checked:false
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			checkboxGroupChange(e) {
				console.log(this.checked);
			},
			// 登录
			passwordLogin(){
				if(this.phone==''){
					this.$refs.uToast.show({
						title: '请输入手机号',
						type: 'error ',
					})
					return;
				}
				// if(!this.$checkMobile(this.phone)){
				// 	this.$refs.uToast.show({
				// 		title: '请输入正确手机号的格式',
				// 		type: 'error ',
				// 	})
				// 	return;
				// }
				if(this.password==''){
					this.$refs.uToast.show({
						title: '请输入密码',
						type: 'error ',
					})
					return;
				}
				if(!this.checked){
					this.$refs.uToast.show({
						title: '请选中并阅读隐私协议',
						type: 'error ',
					})
					return;
				}
				this.$http.passwordLogin({sf:parseFloat(this.current)+1,phone:this.phone,password:this.password})
				.then(res=>{
					if(res.data.code==200){
						uni.setStorageSync('token', res.data.result.token);
						this.getUserInfo()
					}else{
						this.$refs.uToast.show({
							title: res.data.message,
							type: 'error ',
						})
					}
				})
			},
			getUserInfo(){
				this.$http.getUserInfo()
				.then(res=>{
					if(res.data.code==200){
						// 是否信息完整
						uni.setStorageSync('doctorAndSpecialist', res.data.result.doctorAndSpecialist);
						if(res.data.result.completeInformation != 2){
							uni.navigateTo({
							  url: '/pages/login/perfect',
							})
						}else{
							uni.navigateTo({
							  url: '/pages/index/index',
							})
						}
					}
				})
			},
			agreement(){
				uni.navigateTo({
				  url: '/pages/login/agreement',
				})
			},
			forget(){
				uni.navigateTo({
				  url: '/pages/login/forget',
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.login{
		position: relative;
		height: 100%;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 100rpx;
		.bgc{
			position: absolute;
			left:0;
			top:0;
			width: 100%;
			height: 100%;
		}
		.con{
			position: relative;
			height: 100%;
			color: #000;
			.h2{
				font-size: 56rpx;
				padding-top: 220rpx;
			}
			.h3{
				font-size: 32rpx;
				margin-top: 20rpx;
				margin-bottom:100rpx;
			}
			.form{
				margin-top: 30rpx;
			}
			.u-scroll-box{
				display: block;
				.u-tab-item{
					margin-right: 60rpx;
				}
			}
			.forget{
				text-align: right;
				font-size: 28rpx;
				color: rgba(0,0,0,0.35);
				margin-top: 16rpx;
			}
			.btn{
				margin-top: 100rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				background: $color;
				border-radius: 40rpx;
				font-size: 28rpx;
				color:#fff;
			}
		}
		.agreement{
			position: absolute;
			bottom:70rpx;
			text-align: center;
			font-size: 24rpx;
			.u-checkbox__label{
				display: none;
			}			
			.text{
				font-size: 24rpx;
				padding-left: 8rpx;
				text{
					color: $color;
				}
			}
		}
	}
</style>