guosen-ldt-mall/pages/login/account-login.vue

<template>
	<view style="position: relative;">
		<view class="bg"></view>
		<view class="bg1"></view>
		<view class="content">
			<view class="top">
				<view class="logo">
					<image src="@/static/icon/logo.png" mode=""></image>
				</view>
			</view>
			
			<view  style="width: 76%;margin-top: 30rpx;">
				<u-form :model="form" :error-type="['message']"  ref="uForm">
					<u-form-item  label="商编"  prop="tenantId" label-width="150">
						<u-input :border="false" placeholder="请输入商编" v-model="form.tenantId" ></u-input>
					</u-form-item>
					<u-form-item  label="账号" prop="username" label-width="150">
						<u-input :border="false" placeholder="请输入账号" v-model="form.username" ></u-input>
					</u-form-item>
					<u-form-item   label="密码" prop="password" label-width="150">
						<u-input :border="false" placeholder="请输入密码" type="password" v-model="form.password"></u-input>
					</u-form-item>
				</u-form>
			</view>
			
			<view  style="width: 86%;margin-top: 120rpx;">
				<view @click="login" class="btn cu-btn round" style="width:100%;height: 90rpx;font-size: 36rpx;">
					立即登录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import md5Libs from "uview-ui/libs/function/md5";
	export default {
		data() {
			return {
				customStyle:{
					'backgroundColor':'#d18c42',
					'color':'#ffffff'
				},
				form:{
					tenantId:'',
					username:'',
					password:''
				},
				rules: {
					tenantId: [
						{ 
							required: true, 
							message: '请输入商编', 
							trigger: ['change','blur'],
						}
					],
					username: [
						{ 
							required: true, 
							message: '请输入账号', 
							trigger: ['change','blur'],
						}
					],
					password: [
						{ 
							required: true, 
							message: '请输入密码', 
							trigger: ['change','blur'],
						}
					],
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			 if (this.$cache.get('token')) {
			 	uni.reLaunch({
			 		url:"/pages/index/index"
			 	})
			 }
		},
		methods: {
			login() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$dialog.showLoading('登录中..')
						setTimeout(()=>{
							this.doLogin()
						},500)
					}
				});
			},
			async doLogin(){
				let params={
					tenantId:this.form.tenantId,
					username:this.form.username,
					password:md5Libs.md5(this.form.password)
				}
				this.$api.system.login(params).then(res=>{
					if (this.$isNotEmpty(res.access_token)) {
						this.cacheToken(res)
						uni.redirectTo({
							url:"../index/index"
						})
					}
				})
			},
			cacheToken(data){
				let tokenInfo={
					accessToken:data.access_token,
					//提前200秒过期
					expiresIn:new Date().getTime() + (data.expires_in - 200) * 1000,
					refreshToken:data.refresh_token,
					tenantId:data.tenant_id,
					nickName:data.nick_name
				}
				this.$cache.put('token',data.access_token)
				this.$cache.put("tokenInfo",tokenInfo)
			},
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	$color:#d18c42;
	
	page{
		background-color: #FFFFFF;
	}
	
	.btn{
		background-color: $color;
		color:#FFFFFF;
	}
	
	.bg{
		z-index: 99;
		height: 440rpx;
		width: 440rpx;
		position: absolute;
		right: -240rpx;
		top: -240rpx;
		background-color: #d18c42;
		border-radius: 50%;
		box-shadow: 0rpx 0rpx 50rpx #c5803b;
	}
	
	.bg1{
		height: 500rpx;
		width: 500rpx;
		position: absolute;
		right: -240rpx;
		top: -240rpx;
		background-color: #d18c42;
		border-radius: 50%;
		box-shadow: #c6813b;
	}
	
	.content{
		height: 84vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		.top{
			display: flex;
			.logo{
				background-color: $color;
				width: 160rpx;
				height: 160rpx;
				border-radius: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				
				image{
					width: 100rpx;
					height: 100rpx;
				}
			}
			
			.title{
				margin-right: 20rpx;
				display: flex;
				flex-direction: column;
				text-align: left;
				
				text:first-child{
					font-size: 46rpx;
					color: #000;
					margin-bottom: 20rpx;
				}
				
				text:last-child{
					font-size: 28rpx;
					color: #7f7f7f;
				}
			}
			
			
		}
	}
</style>