gwlz/jp-mobile/pages/login/login.vue

<template>
	<view class="">
		<view id="box">
			<view id="top" class="">
				<view class="top_le"></view>
				<view class="top_ri"></view>
			</view>
			<view class="title">
				<view style="font-size: 28px!important;">盐都区工信局
					<br>办公自动化平台
				</view>
			</view>
			<view class="login-form">
				<u--form :model="inputForm" labelWidth="100px" labelPosition="left" :rules="rules" ref="uForm"
					:labelStyle="{'font-size':'20px'}">
					<u-form-item label="用户名" borderBottom prop="username">
						<view style="position: relative;">
							<u-input v-model="inputForm.username" @blur="onBlur" @input="getname" @focus="getname"></u-input>
							<remember :topPosition="40" :show="isAccount" :list="currentAccounts"
								@getAccount="getAccount"></remember>
						</view>
					</u-form-item>
					<u-form-item label="密码" borderBottom prop="password">
						<u-input password v-model="inputForm.password" />
					</u-form-item>
					<u-form-item>
						<u-checkbox-group :labelDisabled="true" v-model="account">
							<u-checkbox label="记住账号" name="1">
							</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
				</u--form>
			</view>
			<view class="but">
				<u-button type="primary" shape="circle" color="linear-gradient(90deg, #1989FA, #19C2FA)"
					@click="bindLogin" text="登录"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import * as $auth from "@/common/auth.js"
	import loginService from "@/api/auth/loginService"
	import {
		mapActions
	} from 'vuex'
	import remember from "./remember.vue"
	export default {
		data() {
			return {
				isfocus: false,
				captchaImg: '',
				accounts: [],
				currentAccounts: [],
				account: [],
				isAccount: false,
				isrember: [],
				inputForm: {
					'username': '',
					'password': '',
					'code': '',
					'uuid': ''
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		components: {
			remember
		},
		created() {
			this.getCaptcha()
			if (uni.getStorageSync("accounts")) {
				this.accounts = JSON.parse(uni.getStorageSync("accounts"))
				this.currentAccounts = JSON.parse(uni.getStorageSync("accounts"))
			}

		},
		methods: {
			...mapActions(['refreshUserInfo']),
			// 登录
			bindLogin() {
				/**
				 * 客户端对账号信息进行一些必要的校验。
				 * 实际开发中，根据业务需要进行处理，这里仅做示例。
				 */
				this.$refs.uForm.validate().then(res => {
					loginService.login(this.inputForm).then((data) => {
						this.$store.commit('SET_TOKEN', data.token);
						if (this.account.length > 0) {
							let item = {
								loginName: this.inputForm.username,
								password: this.inputForm.password
							}
							this.accounts.push(item)
							uni.setStorageSync("accounts", JSON.stringify(this.accounts))
						}
						this.refreshUserInfo();
						uni.reLaunch({
							url: '../index/index',
						});
					}).catch(e => {
						uni.showToast({
							title: e.data
						})
						this.getCaptcha()
					})
				})
			},
			// 获取验证码
			getCaptcha() {
				loginService.getCode().then((data) => {
					this.captchaImg = 'data:image/gif;base64,' + data.codeImg
					this.inputForm.uuid = data.uuid
				})
			},
			// 筛选信息
			getname(val) {
				this.currentAccounts = this.accounts
				if (this.accounts == '') {
					this.isAccount = false
				} else {
					this.currentAccounts = this.currentAccounts.filter(item => item.loginName.includes(this.inputForm
						.username))
					if (this.currentAccounts.length > 0) {
						this.isAccount = true
					} else {
						this.isAccount = false
					}
				}
			},
			// 获取选择的账号信息
			getAccount(item) {
				if (this.inputForm.username != item.loginName) {
					this.inputForm.username = item.loginName
				}
				this.inputForm.password = item.password
				this.isAccount = false
			},
			// 失焦关闭
			onBlur(){
				setTimeout(()=>{
					this.isAccount = false
				},300)
			}
		}
	}
</script>

<style lang="scss" scoped>
	#box {
		position: relative;
		width: 100vw;
		overflow: hidden;
	}

	.title {
		position: absolute;
		top: 15vh;
		width: 100vw;
		text-align: center;
		font-size: 28rpx;
		color: #198bfa;

	}

	.title view:nth-child(1) {
		height: 54px;
		font-size: 56rpx;
		font-family: PingFang SC;
		font-weight: bold;
		text-shadow: 0px 2px 24px rgba(58, 199, 118, 0.4);

	}

	.title view:nth-child(2) {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #198BFA;
		margin-top: 5vw;
	}



	#top {
		width: 100vw;
		height: 40vh;
		position: relative;
	}

	.top_ri {
		width: 100vw;
		height: 100vw;
		background: linear-gradient(141deg, #19C0FA 0%, #198BFA 100%);
		opacity: 0.1;
		border-radius: 50%;
		position: absolute;
		right: -47vw;
		top: -37vw;
	}

	.top_le {
		width: 100vw;
		height: 100vw;
		background: linear-gradient(141deg, #19C0FA 0%, #198BFA 100%);
		opacity: 0.1;
		border-radius: 50%;
		position: absolute;
		left: -34vw;
		top: -54vw;
	}

	.inp {
		padding-left: 5vw;
		position: relative;
		top: -4vh;

	}

	.inp text {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-left: 5px;
	}


	.but {
		padding-left: 50rpx;
		padding-right: 50rpx;
		margin-top: 60rpx;

	}

	.but * {
		font-size: 40rpx !important;
	}

	.fot {
		width: 100vw;
		height: 26px;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #8E8E8E;
		margin-top: 20px;
	}

	.login-form {
		padding-left: 100rpx;
		padding-right: 30rpx;
	}
</style>