epidemic_store/pages/login/login.vue

<template>
	<view class="login-content">
		<view class="login-header">
			<view class="text">云岩区发改委物资管理系统</view>
			<view class="text">(库管人员)</view>
			<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
				viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
				<defs>
					<path id="gentle-wave"
						d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
				</defs>
				<g class="parallax">
					<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
					<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
					<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
					<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
				</g>
			</svg>
		</view>
		<!-- 登录表单 -->
		<view class="from-box">
			<u-form labelPosition="left" :model="form" :rules="rules" ref="uForm">
				<u-form-item prop="username">
					<u-input v-model="form.username" placeholder="用户名" :border="false" clearable></u-input>
				</u-form-item>
				<u-form-item prop="password">
					<u-input v-model="form.password" type="password" placeholder="登录密码" :border="false"
						:password-icon="true" clearable></u-input>
				</u-form-item>
			</u-form>
			<view class="btn-box">
				<u-button class="main-color-btn" @click="submit" type="error">登录</u-button>
			</view>
		</view>

		<u-modal :show="tipShow" title="登录提示" @confirm="confirm" :content="content"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '登录错误',
				tipShow: false,
				form: {
					username: '',
					password: '',
				},
				password: true,
				rules: {
					username: {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change']
					},
					password: {
						type: 'string',
						required: true,
						message: '请填写登录密码',
						trigger: ['blur', 'change']
					},
				}
			};
		},
		created() {
			// this.getCaptchaImage();
		},
		onReady() {
			// 设置表单校验规则
			this.$refs.uForm.setRules(this.rules);
			if(process.env.NODE_ENV=='development'){
				this.form.username = 'zdd3';
				this.form.password = '123456'
			}
		},
		methods: {
			// 获取图片验证码
			async getCaptchaImage() {
				const {
					code,
					data,
					msg
				} = await this.$u.api.captchaImage();
				if (code === 200) {
					this.image = data.captchaImage;
					this.form.uuid = data.uuid;
				} else {
					console.log('1111');
				}
			},
			// 登录表单提交验证
			submit() {
				this.$refs.uForm
					.validate()
					.then((res) => {
						this.loginApi();
					})
					.catch((errors) => {
						uni.$u.toast('校验失败');
					});
			},
			confirm() {
				this.tipShow = false;
			},
			// 登录接口
			async loginApi() {
				let postMap = {
					username: this.form.username,
					password:this.form.password,
				};
				const {
					code,
					data,
					msg
				} = await this.$u.api.login(postMap);
				if (code === 200) {
					// 清空用户数据缓存
					this.$u.vuex('vuex_user', {});
					this.$u.vuex('user_info', {});
					this.$u.vuex('vuex_user', data);
					this.goToEven();
					// 获取用户数据
					// this.$store.dispatch('getUserInfo', (data) => {
					// 	this.$u.vuex('user_info', data);
					// 	this.goToEven();
					// });

				} else {
					this.tipShow = true;
					this.content = msg;
				}
			},
			// 登录成功进入首页
			goToEven() {
				this.$u.route({
					url: 'pages/index/index',
				})
				// 处理刷新时候 leader为403问题
				// if (window && window.location) {
				// 	window.location.href = window.location.protocol + '//' + window.location.host +
				// 		'/leader/pages/index/index'
				// } else {
				// 	uni.navigateTo({
				// 		url: '/pages/index/index'
				// 	});
				// }
			}
		}
	};
</script>

<style lang="scss">
	.from-box {
		width: 80vw;
		margin: 0 auto;
		::v-deep .uni-input-input{
			font-size: 40rpx;
		}
	}

	.login-header {
		position: relative;
		box-sizing: border-box;
		height: 30vh;
		padding-top: 5vh;
		background-color: var(--main-color);

		.text {
			text-align: center;
			font-size: 36rpx;
			color: #fff;
			line-height: 1.5;
		}
	}

	.btn-box {
		margin-top: 24px;
	}

	.waves {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 15vh;
		height: 40px;
		margin-bottom: -7px;
		/*Fix for safari gap*/
		min-height: 100px;
		max-height: 150px;
	}

	.parallax>use {
		animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
	}

	.parallax>use:nth-child(1) {
		animation-delay: -2s;
		animation-duration: 7s;
	}

	.parallax>use:nth-child(2) {
		animation-delay: -3s;
		animation-duration: 10s;
	}

	.parallax>use:nth-child(3) {
		animation-delay: -4s;
		animation-duration: 13s;
	}

	.parallax>use:nth-child(4) {
		animation-delay: -5s;
		animation-duration: 20s;
	}

	@keyframes move-forever {
		0% {
			transform: translate3d(-90px, 0, 0);
		}

		100% {
			transform: translate3d(85px, 0, 0);
		}
	}

	// waves end
</style>