airconditioner/sources/client/vrv-moblie/pages/login/login.vue

<template>
	<view>
		<!-- 	<view class="head"></view>
 -->
		<view class="img">
			<image src="../../static/登录/bg@2x.png" class="image"></image>

			<view class="white">
				<view class="title">
					<text class="title1">中央空调管理系统</text>
					<text class="title2">MANAGEMENT SYSTEM</text>
				</view>

				<view class="form">
					<form @submit="formSubmit">
						<view class="uni-form-item">
							<view class="titleA">用户名</view>
							<view class="input">
								<input placeholder="请输入用户名" v-model="formData.account" style="margin-left: 30rpx;" />
							</view>
						</view>
						<view class="uni-form-item">
							<view class="titleA">密码</view>
							<view class="input">
								<input type="password" placeholder="请输入密码" v-model="formData.password"
									style="margin-left: 30rpx;" />
								<!-- 	<input placeholder="请输入密码" v-model="formData.password" style="margin-left: 30rpx;" />
								<view class="icon">
									<uni-icons type="eye" size="26" @click="isC" v-show="block"></uni-icons>
									<uni-icons type="eye-slash" size="26" @click="isC" v-show="toggle"></uni-icons>
								</view> -->
							</view>

						</view>

						<view class="uni-form-item">
							<view class="titleA">验证码</view>
							<view class="AAA">
								<view class="input1">
									<input placeholder="请输入验证码" v-model="formData.verifyCode"
										style="margin-left: 30rpx;" />
								</view>

								<view class="code" @tap="handleRefreshVerifyCode">
									<img class="verify-img" :src="verifyCodeUrl" style="cursor: pointer">
								</view>
							</view>

						</view>

						<view class="login">
							<button class="loginBut" form-type="submit">登录</button>
						</view>
						<view class="forget">忘记密码</view>

					</form>
				</view>



			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				verifyCodeUrl: 'http://127.0.0.1:9999/auth/verifyCode',

				isCollapse: false,
				toggle: false, //第二个图标默认隐藏
				block: true, //默认显示第一个图标


				formData: {
					account: '',
					password: '',
					verifyCode: '',
				}
			}
		},

		onLoad() {

		},

		methods: {
			handleRefreshVerifyCode() {
				this.verifyCodeUrl = 'http://127.0.0.1:9999/auth/verifyCode' + "?t=" + new Date()
					.getTime();
			},

			isC() {
				this.isCollapse = !this.isCollapse;
				this.toggle = !this.toggle;
				this.block = !this.block;
			},



			async formSubmit(e) {
				let vm = this;
				let url = uni.$api.auth.login;
				let data = {
					account: this.formData.account,
					password: this.formData.password,
					verifyCode: this.formData.verifyCode

				};
				let res = await uni.$http.get(url, data);
				console.log('form发生了submit事件')

				console.log(res);


				if (res.data.status == 200) {
					uni.showToast({
						title: res.data.desc,
						icon: "none"
					})

					uni.switchTab({
						url: '/pages/operator/operator'
					})
				}

				if (res.data.status == 400) {
					uni.showToast({
						title: res.data.data.errorFields[0].message,
						icon: "none"
					})
				}

				if (res.data.status == 500) {
					uni.showToast({
						title: res.data.desc,
						icon: "none"
					})
				}
			}

		},
	}
</script>

<style>
	.AAA {
		display: flex;
		flex-direction: row;
	}

	.icon {
		margin-left: 200rpx;
	}

	.form {
		margin-top: 80rpx;
	}

	.titleA {
		font-size: 30rpx;
		margin-bottom: 20rpx;
		margin-left: 32rpx;
		margin-top: 24rpx;
	}

	.input {
		background-color: white;
		width: 654rpx;
		margin-left: 24rpx;
		height: 98rpx;
		border-radius: 10rpx;
		border: 4rpx solid #F7F8F9;

		display: flex;
		align-items: center;
	}

	.verify-img {
		margin-left: 20rpx;
		width: 320rpx;
		height: 100rpx;
		border-radius: 10rpx;
	}

	.input1 {
		background-color: white;
		width: 320rpx;
		margin-left: 24rpx;
		height: 98rpx;
		border-radius: 10rpx;
		border: 4rpx solid #F7F8F9;

		display: flex;
		align-items: center;
	}

	.title1 {
		font-size: 44rpx;
		font-weight: 550;
	}

	.title2 {
		font-size: 26rpx;
		color: #AAAAAA;
		margin-top: 10rpx;
	}

	.title {
		margin-top: 60rpx;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.img {
		width: 750rpx;
		height: 1520rpx;
		z-index: 9;
	}

	.white {
		position: absolute;
		bottom: 40rpx;
		z-index: 10;
		width: 702rpx;
		height: 1060rpx;
		margin-left: 24rpx;
		background-color: #FFFFFF;
		opacity: 0.8;
	}

	.image {
		width: 750rpx;
		height: 1500rpx;
	}

	/* 	.head {
		height: 80rpx;
		background-color: white;
	} */

	.loginBut {
		margin-top: 60rpx;
		background-color: #007AFF;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 654rpx;
		height: 98rpx;
	}

	.forget {
		font-size: 30rpx;
		color: #007AFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
	}
</style>