client_LemonBeans/pages/login/index.vue

<template>
	<view class="login-box">
		<image class="logoImg" src="@/static/logo.png"></image>
		<image class="loginImg" src="@/static/login.png"></image>
		<view class="loginContent">
			<p class="title">企业数字应用平台</p>
			<uni-forms :modelValue="formData" :rules="rules" ref="form">
				<uni-forms-item name="enterpriseCode">
					<uni-easyinput type="text" prefixIcon="vip-filled" v-model="formData.enterpriseCode"
						placeholder="请输入企业简称" />
				</uni-forms-item>
				<uni-forms-item name="username">
					<uni-easyinput type="text" prefixIcon="person" v-model="formData.username" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput type="password" prefixIcon="locked" v-model="formData.password"
						placeholder="请输入密码" />
				</uni-forms-item>
				<view class="form-code">
					<view class="input-box">
						<uni-forms-item name="code">
							<uni-easyinput type="text" prefixIcon="locked-filled" v-model="formData.code"
								placeholder="请输入验证码" />
						</uni-forms-item>
					</view>
					<view class="img-box">
						<image :src="codeUrl" class="img_code" @click="getImgCode"></image>
					</view>
				</view>
			</uni-forms>
			<button type="primary" class="loginBtn" @click="login">登 录</button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import $baseUrl from '@/https/index.js';
	export default {
		data() {
			return {
				formData: {
					enterpriseCode: '',
					username: '',
					password: '',
					code: '',
					uuid: ''
				},
				rules: {
					enterpriseCode: {
						rules: [{
							required: true,
							errorMessage: '请输入企业简称',
						}, ],
					},
					username: {
						rules: [{
							required: true,
							errorMessage: '请输入用户名',
						}, ],
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						}, ],
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码',
						}, ],
					}
				},
				codeUrl: '',
			}
		},
		onShow() {
			this.getImgCode()
			uni.hideLoading()
			const enterpriseCode = uni.getStorageSync('enterpriseCode') // 获取缓存中的企业简称
			if (enterpriseCode) {
				this.formData.enterpriseCode = enterpriseCode
			}
			const username = uni.getStorageSync('username') // 获取缓存中的用户名
			if (username) {
				this.formData.username = username
			}
			const password = uni.getStorageSync('password') // 获取缓存中的密码
			if (password) {
				this.formData.password = password
			}
		},
		methods: {
			getImgCode() {
				const url = '/captchaImage'
				uni.request({
						method: 'get',
						url: $baseUrl.url + url,
					})
					.then((response) => {
						const res = response[1].data
						if (res.code === 200) {
							this.codeUrl = 'data:image/gif;base64,' + res.img
							this.formData.uuid = res.uuid
						}
					}).catch((reject) => {
						console.log('请求失败')
					})
			},
			// 登录
			login(form) {
				this.$refs.form.validate().then(res => {
					const url = '/login'
					uni.request({
							method: 'post',
							url: $baseUrl.url + url,
							data: this.formData,
						})
						.then((response) => {
							const res = response[1].data
							if (res.code === 200) {
								uni.setStorageSync('token', res.token);
								uni.setStorageSync('enterpriseCode', this.formData.enterpriseCode);
								uni.setStorageSync('username', this.formData.username);
								uni.setStorageSync('password', this.formData.password);
								uni.showLoading({
									title: '登录中...'
								});
								setTimeout(function() {
									uni.hideLoading();
									uni.reLaunch({
										url: "/pages/index/index"
									})
								}, 2000);
							} else {
								this.$refs.uToast.show({
									type: 'error',
									message: res.msg,
								})
								this.getImgCode()
								this.formData.code = ''
							}
						}).catch((reject) => {
							console.log('请求失败')
						})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login-box {
		background-color: #fff;
		height: 100%;
	}
	
	.logoImg{
		z-index: 1;
		width: 320rpx;
		height: 80rpx;
		position: absolute;
		top: 10rpx;
		left: 10rpx;
	}

	.loginImg {
		width: 100%;
	}

	.loginContent {
		width: 80%;
		margin: auto;
		text-align: center;

		.title {
			font-size: 44rpx;
			font-weight: bold;
			color: #3f7fff;
			margin: 20rpx 0 60rpx 0;
		}

		/deep/.uni-forms-item .is-required {
			display: none;
		}

		/deep/.uni-forms-item__label {
			padding: 0;
		}

		/deep/.uni-easyinput__content.is-input-border {
			height: 90rpx;
			border-radius: 50rpx;
			padding: 20rpx;
		}

		.loginBtn {
			font-size: 38rpx;
			height: 100rpx;
			line-height: 100rpx;
			border-radius: 50rpx;
			width: 100%;
			background-image: linear-gradient(to right, #3f7fff, #5cb7ec);
			border: none;
			margin-top: 40rpx;
		}

	}

	.form-code {
		display: flex;
		justify-content: space-between;

		.input-box {
			width: 60%;
		}

		.img-box {
			width: 40%;
			height: 80rpx;
			margin-left: 2%;

			.img_code {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>