hospital/app/pages/user/loginDoctor.vue

<template>
	<view>
		<view class="app_top">
			<image src="https://axure-file.lanhuapp.com/md5__f93627286149f825890eb821ab5d5abb.png" mode="widthFix" class="img"></image>
		</view>
		<view class="dk">
			<view class="tx">
				<image src="../../static/favicon.png" mode="aspectFill"></image>
			</view>
			<view class="unit">岑溪人民医院随访系统</view>
			<view class="bg">
				<text class="icon">&#xe616;</text>
				<input v-model="item.username" placeholder="请输入账号" class="input" />
			</view>
			<view class="bg">
				<text class="icon">&#xe62a;</text>
				<input :password="show" v-model="item.password" placeholder="请输入密码" class="input" />
				<view class="label"><view class="icon" :class="{ active: !show }" @click="show = !show">&#xe6ef;</view></view>
			</view>
			<view class="bg">
				<text class="icon">&#xe613;</text>
				<input type="number" v-model="item.code" placeholder="请输入验证码" class="input" />
				<view class="label" @click="getCaptcha()"><image :src="img" mode="widthFix" class="captcha"></image></view>
			</view>
			<button class="btn" @click="login()">立即登录</button>
			<view class="fg" @click="forget()">忘记密码?</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			img: '',
			item: { username: '', password: '' },
			show: true
		};
	},
	onLoad(e) {
		this.getCaptcha();
		if (this.hasLogin()) {
			uni.redirectTo({
				url: '/pages/index/index'
			});
		}
	},
	methods: {
		back() {
			uni.navigateBack();
		},
		//图形验证码
		getCaptcha() {
			this.http.request({
				url: '/app/common/captcha',
				success: (res) => {
					this.img = res.data.data.img;
					this.item.uuid = res.data.data.uuid;
				}
			});
		},
		//登录
		login() {
			let rule = [
				{ name: 'username', checkType: 'notnull', errorMsg: '请输入账号' },
				{ name: 'password', checkType: 'notnull', errorMsg: '请输入密码' }
			];
			if (!this.verify.check(this.item, rule)) {
				uni.showModal({ content: this.verify.error, showCancel: false });
				return false;
			}
			this.http.request({
				url: '/login',
				data: this.item,
				method: 'POST',
				success: (res) => {
					let user = res.data.user.user;
					user.doctor = true;
					user.token = res.data.token;
					uni.setStorageSync('user', user);
					uni.showToast({ title: '登录成功' });
					setTimeout(() => {
						uni.navigateBack({
							delta: 2
						});
					}, 1000);
				},
				fail: (res) => {
					this.getCaptcha();
				}
			});
		},
		forget() {
			uni.showModal({ title: '提示', content: '如忘记密码，请联系管理员重置密码', showCancel: false });
		}
	}
};
</script>

<style lang="scss">
.app_top {
	display: block;
	position: relative;
	.icon {
		position: absolute;
		color: white;
		z-index: 2;
		top: 18%;
		left: 13px;
		font-size: 25px;
	}
	.img {
		width: 100%;
	}
}
.dk {
	position: relative;
	margin: 0 auto;
	padding: 20px;
	width: 75%;
	background-color: white;
	border-radius: 10px;
	margin-top: -130px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	.tx {
		text-align: center;
		position: relative;
		margin-top: -70px;
		image {
			width: 80px;
			height: 80px;
			border-radius: 50%;
			border: 2px solid white;
		}
	}
	.unit {
		text-align: center;
		margin-bottom: 25px;
		font-size: 20px;
		color: #545555;
		margin-top: 10px;
		font-weight: bold;
	}
	.bg {
		overflow: hidden;
		margin-bottom: 15px;
		border-radius: 5px;
		border: 1px solid #cdcdcd;
		.icon {
			float: left;
			padding-left: 10px;
			margin-top: 12px;
			font-size: 18px;
			color: $font-c;
		}
		.input {
			height: 45px;
			text-align: left;
			padding-left: 15px;
			font-size: 14px;
			color: $font-c;
			width: 60%;
		}
		.label {
			float: right;
			margin-top: -31px;
			padding-right: 15px;
			font-size: 14px;
			color: $main-color;
			cursor: pointer;
			.icon {
				color: darkgray;
				font-size: 22px;
				margin-top: -4px;
				&.active {
					color: $main-color;
				}
			}
			.captcha {
				width: 90px;
				height: 34px;
				margin-top: -8px;
				border-radius: 3px;
			}
		}
	}
	.fg {
		text-align: center;
		margin-top: 30px;
		color: #989898;
		font-size: 14px;
	}
}
.btn {
	margin-top: 30px;
}
</style>