wit-uniapp/pages/login/login.vue

<template>
	<view class="content">
		<view class="info_bg">
			<image src="../../static/management/login-bg.png" class="bgImg"></image>
			<div class="title">
				<image src="../../static/management/logo.svg"></image>
				<text>双碳感知资产运营管理平台</text>
			</div>
		</view>
		<view class="form-box">
			<view class="loginTxt">登录</view>
			<view class="row-input">
				<u-icon name="account" color="#2979ff" size="50" style="padding: 0 20rpx;"></u-icon>
				<input v-model="account" placeholder="请输入用户账号" maxlength="18" clearable />
			</view>
			<view class="row-input">
				<u-icon name="lock" color="#2979ff" size="50" style="padding: 0 20rpx;"></u-icon>
				<input v-model="password" placeholder="登陆密码" clearable :password="!isShowPassword" />
				<u-icon name="eye-fill" color="#2979ff" size="50" style="padding-right:20rpx" v-if="isShowPassword"
					@click="showOrHide"></u-icon>
				<u-icon name="eye-off" color="#2979ff" size="50" style="padding-right:0rpx" v-else @click="showOrHide">
				</u-icon>
			</view>

			<!-- <view class="menu-link">
				<text @click="forget">找回密码</text>
			</view> -->
			<view class="login-btn" @click="loginbtn">登录</view>
			<!-- <view class="tip-link">
			</view> -->
		</view>

		<u-toast ref="uToast" />

	</view>
</template>

<script>
	// function getUUID() {
	//   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
	//     return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
	//   })
	// }
	//const BaseApi= require("@/http/baseApi.js");

	export default {

		data() {
			return {
				isShowPassword: false,
				account: '',
				password: '',
				captcha: '',
				uuid: '',
				captchaPath: '',


			}
		},

		onLoad() {
			//	 this.getCaptcha();
		},
		onUnload() {
			//触发水印显示
			uni.$emit('ly-show-watermark');
		},
		methods: {
			loginbtn() {

				if (this.account == '') {
					this.$refs.uToast.show({
						type: 'error',
						message: "请输入账号",
					})
				} else if (this.password == '') {
					this.$refs.uToast.show({
						type: 'error',
						message: "请输入密码",
					})
				}

				let formData = {
					username: this.account,
					password: this.password,
				}
				//登录功能
				this.$api.post('/login', formData)
					.then(res => {

						if (res.data.code == 0) {
							uni.setStorageSync('tokendata', res.data.data.token); //token
							uni.setStorageSync('Userinformation', formData); //用户信息
							//获取用户的信息，如组织架构，个人信息，权限等
							Promise.all([this.getpermissions(), this.getDictList(), this.getuserInfo(), ]).then(() => {
								uni.navigateTo({
									url: '/pages/index/index'
								})
							});
						} else {
							this.$refs.uToast.show({
								type: 'error',
								message: "账号或者密码错误，请重新输入",
							})
						}
					})


			},
			getpermissions() {
				console.log('权限功能', )
				//获取用户权限功能
				return new Promise((resolve, reject) => {
					this.$api.get('/menu/permissions', {}).then((res) => {
						uni.setStorageSync('ButtonPermissions', res.data.data);
						resolve(res);
						//	console.log('111111111111111111', res)

					}).catch(e => {
						reject(e)
					})
				});


				// this.$api.get('/menu/permissions', {})
				// 	.then(res1 => {
				// 		uni.setStorageSync('ButtonPermissions', res1.data.data); //权限列表
				// 	})
			},
			getDictList() {
				//获取字典列表, 添加并全局变量保存
				return new Promise((resolve, reject) => {
					this.$api.get('/all', {}).then((res) => {
						uni.setStorageSync('getDictDataList', res.data.data);
						resolve(res);
						//	console.log('222222', res)

					}).catch(e => {
						reject(e)
					})
				});


				// this.$api.get('/all', {})
				// 	.then(res => {
				// 		//  console.log('88888', res.data.data)
				// 		uni.setStorageSync('getDictDataList', res.data.data);
				// 	})
			},
			getuserInfo() {
				//获取用户信息
				return new Promise((resolve, reject) => {
					this.$api.get('/user/userInfo', {}).then((res) => {
						uni.setStorageSync('getuserInfo', res.data.data);
						resolve(res);
						//console.log('333333', res)

					}).catch(e => {
						reject(e)
					})
				});

				// this.$api.get('/user/userInfo', {})
				// 	.then(res => {
				// 		//  console.log('88888', res.data.data)
				// 		uni.setStorageSync('getuserInfo', res.data.data);
				// 	})
			},

			// 密码显示/密码隐藏
			showOrHide() {
				this.isShowPassword = !this.isShowPassword
			},

			// 找回密码
			forget() {
				uni.navigateTo({
					url: '/pages/login/forget',
					success: res => {},
					fail: () => {},
					complete: () => {},
				})
			},

			// 注册
			register() {
				uni.navigateTo({
					url: '/pages/login/register',
					success: res => {},
					fail: () => {},
					complete: () => {},
				})
			}
		}
	}
</script>

<style lang="scss">
	.form-box {
		width: 91%;
		background: #fff;
		margin: -130rpx auto 0;
		position: relative;
		z-index: 3;
		padding: 60rpx 40rpx 100rpx;
		box-sizing: border-box;
		border-radius: 32rpx;
		.loginTxt{
			color: #0C1935;
			font-size: 40rpx;
			margin-bottom: 80rpx;
			text-align: center;
		}
		.row-input {
			display: flex;
			align-items: center;
			height: 80rpx;
			background-color: #F4F7FF;
			border-radius: 36rpx;
			margin-bottom: 40rpx;
			padding: 0 20rpx;

			input {
				width: 460rpx;
				font-size: 30rpx;
				color: #a1a2a3;
				flex: 1
			}
		}

		.login-btn {
			margin-top: 50px;
			font-size: 16px;
			letter-spacing: 7px;
			color: #FFFFFF;
			height: 40px;
			border-radius: 18px;
			background: #5C8FFF;
			text-align: center;
			line-height: 40px;
		}

	}

	.content {
		.bgImg {
			width: 78%;
			position: absolute;
			left: -5px;
			top: 9px;
			z-index: 0;
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			z-index: 2;

			image {
				width: 64rpx;
				height: 64rpx;
				margin-right: 4rpx;
			}

			text {
				font-size: 36rpx;
				color: #fff;
			}
		}
	}

	.info_bg {
		padding-top: 40rpx;
		width: 100%;
		height: 400rpx;
		background: #5c8fff;
		border-radius: 0px 0px 32rpx 32rpx;
		position: relative;

		image {
			width: 272px;
			height: 157px;
		}

	}
</style>