wisdom/pages/login/login.vue

<template>
	<view class="backgroud-plate">
		<u-notify ref="uNotify"></u-notify>
		<view class="AI">
			<image src="../../static/southeast.png"></image>
		</view>
		<view class="subject">
			<view class="User">
				<u-input placeholder="请输入账号" v-model="record.User" border="bottom" clearable="true"></u-input>
			</view>
			<view class="password">
				<u-input placeholder="请输入密码" v-model="record.password" border="bottom" password="true" 
					clearable = "true">
				</u-input>
			</view>
			<view class="verification">
				<view class="ver-input">
					<u-input placeholder="请输入验证码" v-model="record.code" border="bottom" clearable="true"></u-input>
				</view>
				<view class="ver-img" @click="prove()">
					<image :src="record.img" style="width: 200rpx;height: 70rpx;"></image>
				</view>
			</view>
			<view class="remember">
				<checkbox @click="remembers()" :checked="learn">记住账号密码</checkbox>
			</view>
			<view class="login-button">
				<u-button @click="login(record)" type="primary" text="登录" border="bottom"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import md5 from 'js-md5'
	export default {
		data() {
			return {
				record:{
					User: '', //账号
					password: '', //密码
					code: '', //验证码
					img: '',
					key:'',
					tenantId:'000000',
					type: "account",
				},
				learn:false
			}
		},
		onLoad() {
			this.prove();
			this.learns();
			this.fill();
			//this.getaddress();
		},
		methods: {
			exError(message){
				this.$refs.uNotify.show({
				    top: 10,
				    type: 'error',
				    color: '#ffffff',
				    bgColor: '#f56c6c',
				    message: message,
				    duration: 1500,
				    fontSize: 15,
				})
			},
			// async getaddress(){
			// 	let that = this
			// 	let demit = uni.$http.baseUrl
			// 	const {data:res} = await uni.$http.get('/api/blade-system/tenant/info?domain=' + demit)
			// 	const data = res.data
			// 	if (data.success && data.tenantId) {
			// 	    that.record.tenantId = data.tenantId;
			// 	}
			// },
			login(record) {
				var that = this
				uni.request({
					url:'https://cloud.long-chi.com/api/blade-auth/oauth/token?tenantId='+ record.tenantId + '&username=' +
						record.User + '&password=' + md5(record.password) + '&grant_type=captcha&scope=all&type=account',
					header:{
						'Tenant-Id': record.tenantId,
						'Captcha-Key': record.key,
						'Captcha-Code': record.code,
					},
					method:'POST',
					success(res) {
						let data = res.data
						if(data.code != 200 && 'code' in data){
							that.exError(data.msg)
						}else{
							//缓存token,账号密码以及是否记住账号密码
							uni.setStorageSync('token',data.access_token)
							uni.setStorageSync('User',that.record.User)
							uni.setStorageSync('password',that.record.password)
							uni.setStorageSync('learn',that.learn)
							uni.switchTab({
								url:'/pages/lampControls/lampControls'
							})
						}
					}
				})
			},
			async prove(){
				var that = this
				const {data:res} = await uni.$http.get('/api/blade-auth/oauth/captcha')
				that.record.key = res.key
				that.record.img = res.image
			},
			//是否填充账号密码
			fill(){
				const loginUser = uni.getStorageSync('User')
				const loginPassword = uni.getStorageSync('password')
				if(loginUser && loginPassword){
					this.record.User = loginUser
					this.record.password = loginPassword
				}else{
					this.record.User = ''
					this.record.password = ''
				}
			},
			//加载时是否记住了账号密码
			learns(){
				const learn = uni.getStorageSync('learn')
				if(learn == true){
					this.learn = true
				}else{
					this.learn = false
					uni.removeStorageSync('User')
					uni.removeStorageSync('password')
				}
			},
			//是否记住账号密码
			remembers(){
				this.learn = !this.learn
				uni.setStorageSync('learn',this.learn)
			}
		},
	}
</script>

<style lang="scss">
	.backgroud-plate {}

	.AI {
		width: 750rpx;
		height: 400rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		image{
			width: 300rpx;
			height: 300rpx;
		}
	}
	
	.subject {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-around;
		margin-top: 40rpx;
		width: 750rpx;
		height: 750rpx;
		position: relative;
	}

	.User,
	.password,
	.verification {
		width: 550rpx;
		height: 70rpx;
	}
	
	.verification{
		display: flex;
	}
	
	.ver-input {
		width: 350rpx;
		height: 70rpx;
	}

	.ver-img {
		width: 200rpx;
		height: 70rpx;
	}

	.login-button {
		width: 550rpx;
		height: 70rpx;
		margin-top: 70rpx;
	}
	.remember{
		width: 500rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		flex-direction:row-reverse;
		position: absolute;
		top: 520rpx;
	}
</style>