MingGaoApp_vue/MingGaoApp/pages/login/login.vue

<template>
	<view class="loginbox">
		<view class="login_info">
			<view class="title">
				登录
			</view>
			<u--form labelPosition="left" :model="userinfo" :rules="rules" ref="uForm">
				<u-form-item label="" prop="name" ref="item1">
					<u--input v-model="userinfo.name" border="none" placeholder="请输入账号"></u--input>
				</u-form-item>
				<u-form-item label="" prop="password" ref="item1">
					<u--input v-model="userinfo.password" border="none" placeholder="请输入密码" type="password"></u--input>
				</u-form-item>
			</u--form>
			<u-checkbox-group v-model="checkboxValue1" placement="column">
				<u-checkbox :customStyle="{marginBottom: '8px'}" label="记住密码" name="0" size="13" labelSize="13">
				</u-checkbox>
			</u-checkbox-group>
			<u-button type="primary" text="登录" @click="verify">{{isloading?"登录中...":"登录"}}</u-button>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				userinfo: {
					name: "",
					password: "",
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
				},
				checkboxValue1: [],
				isloading: false
			}
		},
		methods: {
			...mapMutations(['updateInLoginPageStatus']),
			verify() {
				this.$refs.uForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					this.login()
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
			async getlistinfo() {
				var that = this
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=sysmenage.usermanager.user_info',
				})
				// console.log(res)
				this.app = res.children.filter((item) => {
					return item.purview_name == "APP"
				})
				// console.log(this.app)
				if (this.app.length == 0) {
					uni.setTabBarItem({
						index: 0,
						visible: false
					});
					uni.setTabBarItem({
						index: 1,
						visible: false
					});
					uni.switchTab({
						url: "../response/index"
					})
				} else {
					var renwu = this.app[0].children.some((item) => {
						// console.log(item)
						return item.purview_name == "我的任务"
					})
					var jiandu = this.app[0].children.some((item) => {
						// console.log(item)
						return item.purview_name == "监督"
					})
					if (renwu) {
						uni.setTabBarItem({
							index: 0,
							visible: true
						});
					} else {
						uni.setTabBarItem({
							index: 0,
							visible: false
						});
					}
					if (jiandu) {
						uni.setTabBarItem({
							index: 1,
							visible: true
						});
					} else {
						uni.setTabBarItem({
							index: 1,
							visible: false
						});
					}
					if(renwu){
						uni.switchTab({
							url: "../index/index"
						})
					}else{
						uni.switchTab({
							url: "../supervise/index"
						})
					}
				}
				
				// #ifdef APP-PLUS
				plus.runtime.restart(); // 重启App
				console.log1p('重启App啦')
				// #endif
			},
			async login() {
				this.isloading = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=sysmenage.usermanager.user_login',
					data: {
						username: this.userinfo.name,
						password: this.userinfo.password,
					}
				})
				console.log(res)
				if (res) {
					if (this.checkboxValue1.length) {
						uni.setStorage({
							key: 'logincheckbox',
							data: 1,
						})
						uni.setStorage({
							key: 'username',
							data: this.userinfo.name,
						})
						uni.setStorage({
							key: 'password',
							data: this.userinfo.password,
						})
					} else {
						uni.setStorage({
							key: 'logincheckbox',
							data: 0,
						})
					}
					uni.setStorage({
						key: 'session_key',
						data: res.session_key,
						success: () => {
							this.getlistinfo()
						}
					})
				}else{
					console.log("登陆失败")
				}

			},
		},
		onShow() {
			this.isloading = false
		},
		onLoad() {
			this.updateInLoginPageStatus(true)
			this.isloading = false
			uni.getStorage({
				key: 'logincheckbox',
				success: (res) => {
					console.log(res)
					if (res.data) {
						this.checkboxValue1 = ["0"]
						uni.getStorage({
							key: 'username',
							success: (res) => {
								this.userinfo.name = res.data
							},
						})
						uni.getStorage({
							key: 'password',
							success: (res) => {
								this.userinfo.password = res.data
							},
						})
						uni.getStorage({
							key: 'session_key',
							success: (res) => {
								console.log(res)
								uni.removeStorage({
									key: 'session_key'
								})
								if (res.data != "") {
									this.login()
								}
							},
						})
					} else {
						this.checkboxValue1 = []
					}
				},
			})
		},
		mounted() {
			this.updateInLoginPageStatus(true)
		},
		onHide(){
			console.log('login page hide')
			this.updateInLoginPageStatus(false)
		}
	}
</script>

<style lang="less">
	.loginbox {
		width: 100%;
		height: 100vh;
		background-image: url(../../static/image/login.jpg);
		background-size: 100% 100%;
		padding-top: 400rpx;
		box-sizing: border-box;

		.login_info {
			width: 90%;
			margin: 0 auto;
			height: 600rpx;
			background-color: #fff;
			box-shadow: 0px 0px 8px rgba(64, 158, 255, 0.1);
			padding: 40rpx 80rpx;
			box-sizing: border-box;
			border-radius: 20rpx;

			.title {
				width: 100%;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				font-size: 50rpx;
				color: #409EFF;
				margin-bottom: 30px;
			}

			/deep/.u-form-item__body {
				margin-bottom: 40rpx;
				border-bottom: 1px solid rgb(214, 215, 217);
			}

			/deep/.u-button {
				margin-top: 40rpx;
				border-radius: 38rpx;
			}

			// /deep/.u-checkbox__icon-wrap{
			// 	width: 26rpx !important;
			// 	height: 26rpx !important;
			// }
		}
	}
</style>