muck_truck_app/pages/login/index - 副本.vue

<template>
	<view class="content">
		<view class="title">辉南渣土车运输</view>
		<view class="loginBox">
			<u--form :model="loginForm" ref="uForm" :rules="rules">
				<u-form-item label="" prop="username">
					<u-input class="inputStyle" v-model="loginForm.username" placeholder="请输入用户账号" />
				</u-form-item>
				<u-form-item label="" prop="password">
					<u-input class="inputStyle" type="password" v-model="loginForm.password" placeholder="请输入密码" />
				</u-form-item>
			</u--form>
			<u-button @click="submit" class="mt buttonStyle">登 陆</u-button>
			<text class="register" @click="register">注册账号</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginForm: {
					username: '',
					password: '',
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户账号',
						trigger: ['blur', 'change']
					}, ],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}, ]
				}
			}
		},
		onLoad() {

		},
		methods: {
			async register() {
				this.$tab.navigateTo('/pages/register/index')
				
			},
			// 密码登录
			async pwdLogin() {
				this.$store.dispatch('Login', this.loginForm).then(() => {
					this.$modal.closeLoading()
					this.loginSuccess()
				}).catch(() => {
					
				})
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
				// 设置用户信息
				this.$store.dispatch('GetInfo').then(res => {
					this.$tab.reLaunch('/pages/home/index')
				})
			},
			submit() {
				this.$tab.navigateTo('/pages/home/index')
				// this.$refs.uForm.validate().then(res => {
				// 	this.$modal.loading("登录中，请耐心等待...")
				// 	this.pwdLogin()
				// }).catch(errors => {
				
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background-image: url('@/static/images/loginBj.png');
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		/* border: 1px salmon soli;
		background-color: aquamarine; */
	}

	.title {
		text-align: center;
		font-size: 60rpx;
		// font-family: FZZongYi-M05S;
		font-weight: 600;
		margin-top: 18vh;
		color: #FFFFFF;
		letter-spacing: 9rpx;
		text-shadow: 0rpx 2rpx 13rpx rgba(27, 43, 95, 0.25);
		margin-bottom: 18vh;
	}

	.loginBox {
		width: 80%;
		margin: 0 auto;
		text-align: center;
	}

	.mt {
		margin-top: 78rpx;
		margin-bottom: 25rpx;
	}

	.register {
		margin-top: 47rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 0.5;
	}

	// // 未通过校验提示
	// /deep/ .u-form-item__body__right__message {
	// 	margin-left: 0 !important;
	// 	text-align: left;
	// }

	// /deep/ .u-form-item__body__right__content__slot{
	// 	// width: 562rpx;
	// 	height: 72rpx;
	// 	background: #A1C5EF;
	// 	border: 2rpx solid #77A8FF;
	// 	box-shadow: 0px 2rpx 13rpx 0px rgba(27,43,95,0.25), 0px 0px 24rpx 6rpx rgba(109,160,251,0.6);
	// 	// opacity: 0.8;
	// 	border-radius: 15rpx;
	// 	color: #FFFFFF;
	// 	font-size: 28rpx;
	// }

	.inputStyle {
		// border-width: 0 !important;
		// height: 72rpx;
		background: #A1C5EF;

		// background: rgba(255,255,255,0.74);
		border: 2rpx solid #77A8FF !important;
		box-shadow: 0px 2rpx 13rpx 0px rgba(27, 43, 95, 0.25), 0px 0px 24rpx 6rpx rgba(109, 160, 251, 0.6);
		// opacity: 0.8;
		border-radius: 15rpx;

		/deep/ .u-input__content__field-wrapper__field {
			color: #FFFFFF !important;
			font-size: 28rpx;
		}

		/deep/ .input-placeholder {
			color: #FFFFFF !important;
			font-size: 28rpx;
		}
	}

	.buttonStyle {
		// width: 562px;
		height: 72rpx;
		background: linear-gradient(0deg, #FFD334 0%, #F59A02 100%);
		box-shadow: 0px 2rpx 13rpx 0px rgba(27, 43, 95, 0.25);
		border-radius: 15rpx;
		border-width: 0;
		color: #FFFFFF;
		font-size: 28rpx;
	}
</style>