sishitongtang-worker/pages/login/login.vue

<template>
	<view class="login">
		<view class="bkg">
			<u-image src="/static/login/bkg-login.png" width="100vw" height="100vh"></u-image>
		</view>
		<view class="content">
			<view class="title">
				<view class="top-word">HELLO</view>
				<view class="bottom-word">欢迎使用四世同堂管理系统</view>
			</view>

			<view class="username">
				<view class="left-name">账户名</view>
				<u-input v-model="form.username" placeholder="请输入账户名" :custom-style="inputStyle"
					:placeholder-style="placeholderStyle">
				</u-input>
			</view>

			<view class="password">
				<view class="left-name">密码</view>
				<u-input v-model="form.password" placeholder="请输入密码" type="password" :custom-style="inputStyle"
					:placeholder-style="placeholderStyle"></u-input>
			</view>

			<view class="save-state">
				<view class="radio" @click="isRemeber = !isRemeber">
					<u-icon name="checkbox-mark" color="#fff" size="28" v-show="isRemeber">
					</u-icon>
				</view>
				<view class="radio-text">记住当前状态</view>
			</view>

			<view class="btn">
				<u-button :custom-style="btnStyle" :ripple="false" :hair-line="false" @click="login">登陆</u-button>
			</view>

			<view class="bottom"> 2022四世同堂服务有限公司 </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeholderStyle: "color:'#999';font-size:'28rpx';font-weight:'500';",
				inputStyle: {
					color: "#999",
					minHeight: "40rpx",
					height: "40rpx",
					flex: "1",
					lineHeight: "40rpx",
					fontSize: "28rpx",
					fontWeight: "500",
				},
				btnStyle: {
					color: "#fff",
					fontFamily: "PingFang-SC-Medium, PingFang-SC;",
					fontWeight: "500",
					background: "#4CBD8D",
					width: "600rpx",
					height: "90rpx",
					borderRadius: "6rpx",
					border: "none",
					fontSize: "28rpx",
					letterSpacing: "10rpx",
					marginTop: "66rpx",
				},
				isRemeber: true,
				form: {
					username: "",
					password: "",
				},
			};
		},
		methods: {
			login() {

				if (this.form.username == "") {
					uni.showToast({
						icon: "none",
						title: `请正确填写登录名`,
					});
					return false
				}

				if (this.form.password == "") {
					uni.showToast({
						icon: "none",
						title: `请正确填写密码`,
					});
					return false
				}

				this.$u.api.login(this.form).then(res => {
					this.$u.vuex("vuex_token", res.access_token);

					this.getInfo();
				})
			},
			async getInfo() {
				await this.$store.dispatch('me')
				uni.showToast({
					icon: "none",
					title: `欢迎回来,${this.vuex_user.name}`,
				});
				setTimeout(() => {
					uni.switchTab({
						url: "/pages/home/home"
					});
				}, 1500)
			},
		},
		computed: {},
	};
</script>

<style scoped lang="scss">
	/deep/.u-input__right-icon {
		display: none !important;
	}

	.login {
		width: 100vw;
		height: 100vh;
		background: #187bfa;

		.bkg {
			z-index: 0;
			position: fixed;
			top: 0;
			left: 0;
		}
	}

	.content {
		z-index: 1;
		position: relative;

		.title {
			color: #fff;

			padding: 414rpx 0 60rpx 76rpx;

			.top-word {
				width: 400rpx;
				height: 168rpx;
				font-size: 120rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				line-height: 168rpx;
			}

			.bottom-word {
				width: 384rpx;
				height: 46rpx;
				font-size: 32rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				line-height: 46rpx;

				padding-top: calc(576 - 414) rpx;
			}
		}

		.input {
			height: 90rpx;
			width: 600rpx;
			border-radius: 6rpx;
			display: flex;
			align-items: center;
			background: #fff;
			border: 2rpx solid #fffefe;

			margin: 0 auto;

			.left-name {
				width: 84rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #666666;
				line-height: 40rpx;
				text-align-last: justify;

				margin: 0 34rpx 0 32rpx;
			}
		}

		.username {
			@extend .input;
		}

		.password {
			@extend .input;

			margin-top: 40rpx;
		}

		.save-state {
			display: flex;
			align-items: center;

			margin-top: 40rpx;
			margin-left: 76rpx;

			.radio {
				width: 28rpx;
				height: 28rpx;
				border-radius: 6rpx;
				border: 2rpx solid #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.radio-text {
				width: 144rpx;
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #fff;
				line-height: 34rpx;

				margin-left: 30rpx;
			}
		}

		.bottom {
			width: 298rpx;
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #ffffff;
			line-height: 34rpx;

			margin: 418rpx auto 0 auto;
		}
	}
</style>