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

<template>
	<view class="login">


		<view class="login-header">
			<image src="../../static/logo.png" mode=""></image>
			<h2>{{$t('login.title')}}</h2>

		</view>
		<view class="login-form">
			<uni-easyinput type="text" v-model="loginForm.tenantId" :placeholder="$t('login.form.tenantId')" />
			<uni-easyinput type="text" v-model="loginForm.username" :placeholder="$t('login.form.username')" />
			<uni-easyinput type="password" v-model="loginForm.password" :placeholder="$t('login.form.password')" />
			
			<!-- <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>
				{{$t('login.agreement.text')}} 
				<span>{{$t('login.agreement.clause')}}</span> 
				{{$t('login.agreement.and')}} 
				<span>{{$t('login.agreement.agreement')}}</span>
				
			</view>
			<button type="default" @click="lodingFn">{{$t('login.loginText')}}</button>
			<p @click="toDemo" class="demo">{{$t('login.demo')}}</p>
		</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: '',
					//账号类型
					type: 'loginWithoutVerificationCode',
					//验证码的值
					code: '',
					//验证码的索引
					key: '',
					grant_type: 'captcha',
					scope: 'all'
					//预加载白色背景

				},
				image: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
				formData: {}
			}
		},
		onLoad() {
			const v = this
			v.getCodeImg()
		},
		methods: {
			toDemo(){
				
				uni.navigateTo({
					url: '/pages/equipment/equipmentDemo'
				})
			},
			init() {
				const v = this
			},
			lodingFn() {
				function filter(str) { // 特殊字符转义
					str += ''; // 隐式转换
					str = str.replace(/%/g, '%25');
					str = str.replace(/\+/g, '%2B');
					str = str.replace(/ /g, '%20');
					str = str.replace(/\//g, '%2F');
					str = str.replace(/\?/g, '%3F');
					str = str.replace(/&/g, '%26');
					str = str.replace(/\=/g, '%3D');
					str = str.replace(/#/g, '%23');
					return str;
				}
				
				function formateObjToParamStr(paramObj) {
					const sdata = [];
					for (let attr in paramObj) {
						sdata.push(`${attr}=${filter(paramObj[attr])}`);
					}
					return sdata.join('&');
				}
				const loginForm = {...this.loginForm}
				loginForm.password = this.$w_md5.hex_md5_32(loginForm.password)
				console.log(loginForm)
				uni.request({
					url: 'http://36.134.91.96:10001/api' + '/blade-auth/oauth/token?' + formateObjToParamStr(loginForm),
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
						'Captcha-Key': loginForm.key,
						'Captcha-Code': loginForm.code,
						'Tenant-Id': loginForm.tenantId,
						'Authorization':'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
						'Blade-Auth': undefined
					},
					success: res => {
						if(res.statusCode == 200){
							uni.setStorageSync('token', res.data.access_token)
							uni.setStorageSync('Authorization', res.data)
							Vue.prototype.$token = res.data
							uni.reLaunch({
								url: '/pages/equipment/equipment'
							})
						}else{
							console.log(res)
							uni.showToast({
								icon:"none",
								title: '账号密码错误！'
							})
						}
					},
				});
			},
			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%;
		.demo{
			margin-top: 30rpx;
			text-align: center;
			font-size: 24rpx;
		}
		.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;
					text-align: center;
					position: relative;
					top: -2rpx;
					left: -2rpx;
				}
			}

			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>