xinelu-doctor-app/pages/login/login.vue

<template>
	<view class="app">
		<image src="../../static/logos.png" mode=""></image>
		<view class="text">
			欢迎登录医生助手
		</view>
		<view class="body">
			<!-- <view class="login">
				<view class="logins" @tap="pwdlogin">
					登录
				</view>
				<view class="border">
				</view>
			</view> -->
			<view class="name">
				<u-form :model="form" ref="uForm" label-width="110">
					<u-form-item label="用户名:"><u-input placeholder="请输入用户名" v-model="personAccount" /></u-form-item>
					<u-form-item label="密码:">
						<u-input placeholder="请输入密码" :password-icon="true" type="password" v-model="personPassword" />
						<!-- 	<span class="pwd">忘记密码</span> -->
					</u-form-item>
				</u-form>
			</view>
			<view class="loginsubmit" @tap="login">
				登录
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		appLogin,
		createMobileToken
	} from '@/api/login/index.js'
	import {
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				personAccount: '',
				personPassword: '',
				form: {
					name: '',
				}
			}
		},
		// onReady() {
		// 	this.$refs.uForm.setRules(this.rules);
		// },
		//获取到传值
		// onLoad(options) {
		// 	if (options.phonenumber && options.password) {
		// 		this.phonenumber = options.phonenumber
		// 		this.password = options.password
		// 	}
		// },
		onShow() {
			this.personAccount = uni.getStorageSync('loginform').personAccount
			this.personPassword = uni.getStorageSync('loginform').personPassword
		},
		methods: {
			...mapMutations(['scoket']),
			login() {
				var that = this
				appLogin(this.personAccount, this.personPassword).then(res => {
					if (res.data.code == 200) {
						uni.setStorageSync("id", res.data.data.id)
						uni.setStorageSync("status", res.data.data.status)
						if (res.data.data.status == 1) {
							that.scoket()
						}
						if (res.data.data.status == 3) {
							that.$refs.uToast.show({
								title: '当前用户无权限',
								type: 'error',
								duration: '1500'
							})
						} else if (res.data.data.status == 2 || res.data.data.status == 1) {
							let form = {
								personAccount: this.personAccount,
								personPassword: this.personPassword
							}
							uni.setStorageSync('loginform', form);
							that.$refs.uToast.show({
								title: '登录成功',
								type: 'success',
								duration: '1500'
							})
							if (that.timer) {
								clearTimeout(that.timer)
							}
							that.timer = setTimeout(e => {
								uni.reLaunch({
									url: '/pages/homepage/homepage',
								})
							}, 2000)
						}
						// uni.setStorageSync("nursePersonName", res.data.nursePersonName)
						// uni.setStorageSync("nurseStationId", res.data.nurseStationId)
					} else {
						that.$refs.uToast.show({
							title: res.data.msg,
							type: 'error'
						})
					}
				})
			},
			//密码登录
			pwdlogin() {
				var that = this
				createMobileToken().then(res => {
					uni.setStorageSync("token", res.data.token)
					that.login();
				})
			},
			// gohomepage() {
			// 	uni.redirectTo({
			// 		url: '/pages/homepage/homepage'
			// 	})
			// },
		}
	}
</script>

<style lang="scss">
	.app {
		height: 100vh;
		background-image: url(../../static/bg.png);
		background-size: 100% 100%;
		position: relative;
		overflow: scroll;

		.text {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			position: absolute;
			text-align: center;
			top: 22%;
			width: 100%;
			left: 0;
			margin: 0 auto;
		}

		image {
			position: absolute;
			width: 114rpx;
			height: 114rpx;
			left: 50%;
			top: 12%;
			transform: translateX(-50%);
		}

		.body {
			width: 100%;
			height: 70%;
			position: relative;
			top: 32%;
			overflow: scroll;
			background: #F9F9F9;
			border-radius: 30rpx 0rpx 0rpx 30rpx;
			opacity: 1;

			.login {
				top: 31px;
				width: 36%;
				height: 49px;
				font-size: 23px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #18CBB3;
				/* background: red; */
				position: relative;

				.logins {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					// top: 5%;

				}

				.border {
					width: 30rpx;
					height: 8rpx;
					background: #18CBB3;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					opacity: 1;

					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					border: 1rpx solid #18CBB3;
					top: 65rpx;

				}

			}

			.name {
				position: relative;
				width: 83%;
				/* background: red; */
				left: 50%;
				transform: translateX(-50%);
				top: 9%;

				::v-deep .u-form-item--left {
					font-size: 30rpx;
				}

				.pwd {
					display: inline-block;
					position: absolute;
					right: 10%;
					font-size: 30rpx;
					font-family: SourceHanSansCN-Regular, SourceHanSansCN;
					font-weight: 400;
					color: #18CBB3;
					line-height: 38rpx;
				}


			}

			.loginsubmit {
				text-align: center;
				width: 83%;
				height: 88rpx;
				line-height: 88rpx;
				background: #18CBB3;
				/* position: absolute; */
				margin: 177rpx auto;
				color: #fff;
				border-radius: 100rpx
			}
		}
	}
</style>