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-row-center">
			<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.reLaunch({
									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: fixed;
			bottom: 70rpx;
			left: 0;
			width: 750rpx;
			text-align: center;
			font-size: 24rpx;

			.u-checkbox__label {
				display: none;
			}

			.text {
				font-size: 24rpx;
				padding-left: 8rpx;

				text {
					color: $color;
				}
			}
		}
	}
</style>