pinganxiaoyuan/monitorMobile/pages/login.vue

<template>
	<view style="height: 100%;">
		<view class="logoBox">
			<image src="/static/image/logo.png" mode="heightFix"></image>
			<view class="logoText">
				AI监控预警分析平台
			</view>
		</view>
		<view class="loginBox">
			<view class="title">
				账号登录
			</view>
			<u--form labelPosition="left" :model="form" labelWidth="30rpx" :rules="rules" ref="uForm">
				<u-form-item prop="account">
					<u--input v-model="form.account" border="none" placeholder="请输入账号"
						:customStyle="{backgroundColor:'#F5F5F5',height:'98rpx',borderRadius:'20rpx',padding:'0rpx 30rpx'}"></u--input>
				</u-form-item>
				<u-form-item prop="password">
					<u--input v-model="form.password" :type="passType" border="none" placeholder="请输入密码"
						:customStyle="{backgroundColor:'#F5F5F5',height:'98rpx',borderRadius:'20rpx',padding:'0rpx 30rpx'}">
						<view slot="suffix">
							<view :style="{opacity:passType=='text'?'1':'0',height:passType=='text'?'auto':'0'}">
								<u-icon name="eye" color="#777777" size="38rpx"
									@click="passType='password'"></u-icon>
							</view>
							<image v-show="passType=='password'" src="/static/image/eyeclose.png"
								style="width: 38rpx;height: 38rpx;margin-top: 12rpx;" @click="passType='text'">
							</image>
						</view>
					</u--input>
				</u-form-item>
				<u-form-item>
					<u-button @click="login" :loading="isLoading" :disabled="isLoading" text="登录" :color="'#2388FF'"
						:customStyle="{height:'98rpx',borderRadius:'20rpx',marginTop:'60rpx'}"></u-button>
				</u-form-item>
			</u--form>
		</view>
	</view>
</template>

<script>
	import {
		login,
	} from '@/api/user.js'
	import smCrypto from '@/utils/smCrypto'
	export default {
		data() {
			return {
				form: {
					account: '',
					password: '',
				},
				passType: 'password',
				isLoading: false,
				redirect: '',
				rules: {
					account: [{
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							if (value.length < 6) {
								callback(new Error('请输入正确的密码'));
								return
							}
							callback();
						},
					}]
				}
			}
		},
		onLoad(e) {
			if (e.redirect) this.redirect = e.redirect
			if (process.env.NODE_ENV === 'development') {
				this.form.account = 'superAdmin'
				this.form.password = '123456'
			}
		},
		methods: {
			async login() {
				this.$refs.uForm.validate().then(() => {
					this.isLoading = true
					login({
						...this.form,
						password: smCrypto.doSm2Encrypt(this.form.password)
					}).then(res => {
						this.isLoading = false
						if (res.code != 200) return
						let data = res.data
						this.$store.dispatch('setToken', {
							token: data.token
						})
						this.$store.dispatch('getUserInfo')
						this.$store.dispatch('getAllOptions')
						this.NAV_TO('/')
					}).finally(() => {
						this.isLoading = false
					})
				})
			},
			getLoginUser() {
				return getLoginUser().then(res => {
					if (res.code != 200) return
					this.$u.vuex('userInfo', res.data)
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style scoped lang="scss">
	body,
	uni-page-body {
		background-color: #fff;
	}

	uni-page-body {
		background-image: url('/static/image/loginBg.png');
		background-position: top;
		background-size: 100% auto;
		background-repeat: no-repeat;
	}

	input[type="password"]::-ms-reveal {
		display: none !important;
	}

	.logoBox {
		/* #ifdef H5*/
		padding-top: 42rpx;
		/* #endif */
		/* #ifndef H5*/
		padding-top: 88rpx;
		/* #endif */
		text-align: center;

		uni-image {
			height: 80rpx;
			margin-top: 160rpx;
		}

		.logoText {
			font-family: 'Alimama ShuHeiTi';
			font-weight: 700;
			color: #333;
			margin-top: 24rpx;
			font-size: 40rpx;
		}
	}

	.loginBox {
		border-radius: 40rpx;
		background-color: #fff;
		height: calc(100% - 880rpx);
		margin-top: 46rpx;
		padding: 60rpx 60rpx 0 60rpx;
		min-height: 450rpx;

		.title {
			color: #333;
			font-size: 42rpx;
			margin-bottom: 30rpx;
			// font-weight: 700;
		}

		/deep/.u-form-item__body {
			padding: 15rpx 0;
		}
	}
</style>