iot-platform-app/pages/user/login.vue

<template>
	<view class="login">


		<view class="login-header">
			<image src="../../static/logo.png" mode=""></image>
			<h2>ByteSailing管理系统</h2>

		</view>
		<view class="login-form">
			<uni-easyinput type="text" v-model="loginForm.tenantId" placeholder="请输入租户ID" />
			<uni-easyinput type="text" v-model="loginForm.username" placeholder="请输入账号" />
			<uni-easyinput type="password" v-model="loginForm.password" placeholder="请输入密码" />
			
			<uni-easyinput type="text" v-model="loginForm.code" placeholder="验证码" />
			<image :src="image" @click="getCodeImg" style="width:200rpx;height:100rpx" mode=""></image>
		</view>
		<view class="login-btn">
			<view class="check-warp">
				<view class="check-icon-warp">
					<i class="iconfont" style="margin-right:16rpx">&#xe6cb;</i>
				</view>
				已阅读并同意：Bytesailing <span>服务条款</span> 和 <span>隐私协议</span>
			</view>
			<button type="default" @click="lodingFn">登录</button>
		</view>


	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		getParams
	} from '@/util/uitl.js'
	export default {
		data() {
			return {
				loginForm: {
					//租户ID
					tenantId: '000000',
					//部门ID
					deptId: '',
					//角色ID
					roleId: '',
					//用户名
					username: 'admin',
					//密码
					password: '21232f297a57a5a743894a0e4a801fc3',
					//账号类型
					type: 'account',
					//验证码的值
					code: '',
					//验证码的索引
					key: '',
					grant_type: 'captcha',
					scope: 'all'
					//预加载白色背景

				},
				image: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
				formData: {}
			}
		},
		onLoad() {
			const v = this
			v.getCodeImg()
		},
		methods: {
			init() {
				const v = this
			},
			lodingFn() {
				const v = this
				uni.switchTab({
					url: '/pages/equipment/equipment'
				})
				return
				
				uni.request({
					url:v.$baseUrl + '/api/blade-auth/oauth/token?' + getParams(v.loginForm),

					method: 'POST',
					header: {
						'Captcha-Key': this.loginForm.key,
						'Captcha-Code': this.loginForm.code,
						'Tenant-Id': this.loginForm.tenantId,
						'Content-Type': 'application/json;charset=UTF-8',
						'Authorization': 'Basic c2FiZXI6c2FiZXJfc2VjcmV0'
					},
					success: (res) => {
						console.log(res)
						uni.switchTab({
							url: '/pages/equipment/equipment'
						})
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
			getCodeImg() {
				this.$get('/blade-auth/oauth/captcha').then((res) => {
					console.log(res)
					const data = res
					this.loginForm.key = data.key
					this.image = data.image
				})
			},
		},
	}
</script>
<style>

</style>
<style lang="less">
	/deep/ .uni-easyinput {
		margin-bottom: 24rpx;
		background-color: #F1F1F1;
		border-radius: 10rpx !important;
	}

	/deep/ .uni-easyinput__content {
		border-radius: 20rpx !important;
		border: none !important;
	}

	/deep/ .uni-easyinput__content-input {
		height: 110rpx;
		font-size: 32rpx;
		background-color: #F1F1F1;
		color: #999999;


	}

	.login {
		height: 100vh;
		width: 100vw;
		background-size: 100% 100%;

		.login-btn {
			button {
				background-color: #3370FF;
				color: #fff;
				font-size: 32rpx;
				border-radius: 45rpx;
				height: 90rpx;
			}

			.check-warp {
				margin-bottom: 32rpx;
				margin-top: 8rpx;
				font-size: 24rpx;
				display: flex;

				.check-icon-warp {
					height: 30rpx;
					width: 30rpx;
					border-radius: 50%;
					border: 2rpx solid #dddddd;
					margin-right: 10rpx;
				}

				.iconfont {
					color: #39C55A;
				}
			}

			padding: 0 40rpx;
		}

		.login-header {
			padding: 128rpx 40rpx 0;
			background: url(../../static/images/login-header.png);
			background-size: 100% 100%;

			h2 {
				font-size: 48rpx;
				color: #333333;
				font-weight: 800;
				margin-top: 80rpx;
			}

			image {
				width: 280rpx;
				height: 90rpx;
				display: block;
			}

		}

		.login-form {

			margin-top: 64rpx;
			background: #fff;
			border-radius: 10rpx;
			padding: 0 40rpx;
		}
	}
</style>