parking_inspection/pages/login/login.vue

<template>
	<view class="pages login wrap f-padding">
		<view class="top">
			<!-- <view class="logo u-text-center">
				<image class="login-title" src="../../static/img/login-title.png" mode="aspectFit"></image>
			</view> -->
			<view class="til">智慧停车</view>
			<view class="sub-til">设备巡检系统</view>
		</view>
		<u-form class="form" :model="form" ref="uForm" :error-type="['toast','toast']">
			<u-form-item label="" prop="officerNo" left-icon="account-fill" :left-icon-style="{color:'#fff'}" :border-bottom="false" label-width="120">
				<u-input v-model="form.officerNo" placeholder="请输入工号" />
			</u-form-item>
			<u-form-item label="" prop="loginPwd" left-icon="lock-fill" :left-icon-style="{color:'#fff'}" :border-bottom="false" label-width="120">
				<u-input :loginPwd-icon="true" type="loginPwd" v-model="form.loginPwd" placeholder="请输入密码" />
			</u-form-item>
			<u-button class="submit-btn" type="default" @click="submit" >登录</u-button>
		</u-form>
		<u-bottom></u-bottom>
	</view>
</template>

<script>
// import sha256 from 'crypto-js/sha256';
import crypto from 'utils/crypto.js'
export default {
	data() {
		return {
			form:{
				officerNo:'9349',
				loginPwd:'000000',
			},
			rules: {
				officerNo: [
					{ 
						required: true, 
						message: '请输入帐号', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change','blur'],
					}
				],
				loginPwd: [
					{
						required: true, 
						min: 6, 
						message: '密码不能少于6个字符', 
						trigger: 'change'
					}
				]
			}
		}
	},
	computed: {
		
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		submit() {
			// uni.switchTab({
			// 	url: '../index/index'
			// });
			this.$refs.uForm.validate(valid => {
				if (valid) {
					// this.form.loginPwd = crypto.Encrypt(this.form.loginPwd)
					this.$u.api.getLogin(this.form).then(res=>{
						if(res.code==200){
							this.$u.vuex('vuex_user', res.data);
							this.jumpIndex();
						}else{
							uni.showToast({
								icon:'none',
								title:res.msg
							})
						}
						console.log('res',res);
					}).catch(err=>{
						console.log('err',err);
					})
					// console.log('验证通过');
				} else {
					// console.log('验证失败');
				}
			});
		},
		//登录跳转
		jumpIndex() {
			//#ifdef H5
			let ret = localStorage.getItem('backUrl')
			if (ret && ret.indexOf('phoneLogin') < 0) {
				// 截取url
				const pagesIndex = ret.indexOf('pages')
				let switchTabList = ['pages/index/index','pages/center/index','pages/maintenanceCenter/maintenanceCenter','pages/warningCenter/warningCenter'];
				// debugger
				
				if (pagesIndex > (-1)) {
					const pageUrl = ret.slice(pagesIndex)
					console.log('switchTabList.includes(pageUrl)',switchTabList.includes(pageUrl));
					if(switchTabList.includes(pageUrl)){
						setTimeout(() => {
							uni.switchTab({
								url: '/' + pageUrl
							})
						}, 100)
					}else{
						console.log('pageUrl',pageUrl);
						setTimeout(() => {
							uni.navigateTo({
								url: '/' + pageUrl
							})
						}, 100)
					}
					
				} else {
					uni.switchTab({
						url: '../index/index'
					})
				}
			} else {
				uni.switchTab({
					url: '../index/index'
				})
			}
			//#endif
			
			//#ifdef APP-PLUS
			uni.switchTab({
				url: '../index/index'
			})
			//#endif
		},
	}
};
</script>

<style lang="scss" scoped>
.pages{
	position: relative;
	background: linear-gradient(99deg, #7A4398 0%, #5A5DB9 100%);
	background-size: 100% auto;
	min-height: 100vh;
}
.top{
	text-align: center;
	font-size: 70rpx;
	color: #fff;
	line-height: 98rpx;
	font-weight: 800;
	padding: 180rpx 0 68rpx;
	.til{
		
	}
	.sub-til{
		letter-spacing: 20rpx;
	}
}
.wrap {
	background-color: transparent;
	.login-title{
		height: 133rpx;
	}
	.form{
		padding: 0 30rpx;
		.u-form-item{
			background: rgba(255,255,255,.2);
			border-radius: 5px;
			border: none;
			margin-bottom: 30rpx;
			padding-left: 25rpx;
			padding-right: 25rpx;
			font-size: 36rpx;
			/deep/ .uni-input-input{
				color: #fff;
			}
		}
		.submit-btn{
			margin-top: 45rpx;
			background: transparent;
			color: #fff;
			border-color: rgba(255,255,255,.4);
		}
	}
}
</style>