taiyitanghuyi_uniapp/pages_company/login.vue

<template>
	<view class="content">
		<view class="inner">
			<view class="form-box">
				<view class="form-item">
					<text class="label">员工帐号</text>
					<input type="text" v-model="form.userName" placeholder="登录帐号" placeholder-class="form-input" />
				</view>
				<view class="form-item">
					<text class="label">员工密码</text>
					<input type="password" v-model="form.password" placeholder="登录密码" placeholder-class="form-input" />
				</view>
			</view>
		</view>
		<view class="tips">
			<checkbox :checked="isAgreement" @click="handleAgreement()" />
			<view @click="handleAgreement()">您同意并接受</view>
			<view class="btn" @click="openContent('userHealth')">《健康客服协议》</view>
		</view>
		<view class="btn-box">
			<view class="sub-btn" @click="submit()">员工登录</view>
		</view>
	</view>
</template>

<script>
	import {login} from '@/api/companyUser'
	export default {
		data() {
			return {
				form: {
					userName: null,
					password: null,
				},
				isAgreement:false
			}
		},
		methods: {
			openContent(type) {
				uni.navigateTo({
					url: "/pages_user/agreement?type=" + type
				})
			},
			handleAgreement() {
				this.isAgreement = !this.isAgreement;
			},
			submit() {
				if(!this.form.userName){
					uni.showToast({
						icon:'none',
						title: "请输入员工帐号",
					});
					return;
				}
				if(!this.form.password){
					uni.showToast({
						icon:'none',
						title: "请输入员工密码",
					});
					return;
				}
				if(!this.isAgreement){
					uni.showToast({
						icon:'none',
						title: "请先同意协议后再登录",
					});
					return;
				}
				login(this.form).then(
					res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'success',
								title: "登录成功",
							});
							uni.setStorageSync('companyId', res.user.companyId);
							uni.setStorageSync('companyUserId', res.user.userId);
							uni.setStorageSync('CompanyUserToken', res.companyUserToken);
							uni.redirectTo({
								url: '/pages_company/index'
							})

						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
		},

	}
</script>

<style lang="scss" scoped>
	.tips {
		margin-top: 15rpx;
		padding: 0rpx 30rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 28rpx;
		color: #000;

		checkbox {}

		.btn {
			color: #078C9D;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;

		.inner {
			padding: 20upx;

			.form-box {
				padding: 0 30upx;
				background: #FFFFFF;
				border-radius: 16upx;

				.form-item {
					padding: 30upx 0;
					display: flex;
					align-items: flex-start;
					border-bottom: 1px solid #F1F1F1;

					&:last-child {
						border-bottom: none;
					}

					.label {
						width: 150upx;
						text-align: left;
						font-size: 30upx;
						line-height: 44upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #222222;
						flex-shrink: 0;
					}

					input {
						text-align: left;
					}

					.form-input {
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						text-align: left;
					}

				}
			}

		}

		.btn-box {
			height: 120upx;
			padding: 0 30upx;
			display: flex;
			align-items: center;
			justify-content: center;

			.sub-btn {
				width: 100%;
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				background: #078C9D;
				border-radius: 44upx;
			}
		}
	}
</style>