i2-school-employee-uniapp/pages/login/index.vue

<template>
	<view class="login">
		<view class="login-top">
			<image class="login-bg" src="/static/login/login_top_backgroud.png"></image>
			<view class="login-top-content">
				<image class="login-icon" src="/static/logo.png"></image>
				<text class="login-title"> {{ $t('login') }} </text>
			</view>
		</view>
		
		<!-- 登录框 -->
		<view class="login-card cu-card padding radius shadow bg-white">
			<view class="flex padding-tb justify-between">
				<view class="u-border-bottom text-xl text-red"> {{ $t('userLogin') }} </view>
				<view class="text-xl" @click="changeToEnglish"> {{ $t('switchLanguage') }} </view>
			</view>
			
			<!-- 输入框 -->
			<u-gap height="20"/>
			<u--input v-model="user.account" :placeholder="$t('userName')" clearable prefixIcon="account" border="bottom" prefixIconStyle="font-size: 22px;color: #909399" @clear="clearInput(true)"/>
			<u-gap height="10"/>
			<u--input v-model="user.password" :placeholder="$t('password')" clearable password prefixIcon="lock" border="bottom" prefixIconStyle="font-size: 22px;color: #909399" @clear="clearInput(false)"/>
			
			<!-- 登录按钮 -->
			<u-gap height="40"/>
			<button class="cu-btn block bg-red margin-tb-sm lg radio" @click="startLogin">
				<text v-if="loading" class="cuIcon-loading2 cuIconfont-spin"></text>
				<text> {{ $t('logIn') }} </text>
			</button>
			
			<!-- 隐私政策 -->
			<u-gap height="20"/>
			<view class="flex u-row u-flex-start align-center">
				<text class="lg text-gray" :class="aggred?'cuIcon-roundcheck':'cuIcon-round'" :style="[{color:aggred?'red':'gray'}]" @click="aggreeBtnClick"></text>
				<text class="u-line-2 text-sm">
					请阅读并勾选同意
					<text class="text-red"> 用户使用协议 </text>
					与
					<text class="text-red"> 隐私政策 </text>
				</text>
			</view>
		</view>
	
		<text class="version-text self-center"> {{ $t('appVersion', {version: '1.0.0'}) }} </text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				loginStr: '登录',
				user: {
					account: '',
					password: '',
				},
				animation: '',
				aggred: false,
			}
		},
		methods: {
			startLogin() {
				
				if (this.user.account == '') return uni.showToast({
					icon:'none',
					title: this.$i18n.t('pleaseInput') + this.$i18n.t('userName')
				})
				
				if (this.user.password == '') return uni.showToast({
					icon:'none',
					title: this.$i18n.t('pleaseInput') + this.$i18n.t('password')
				})
				
				if (!this.aggred) return uni.showToast({
					icon:'none',
					title: this.$i18n.t('pleaseReadAndAggreeThePrivacyPolicy')
				})
				
				this.loading = true
				setTimeout(() => {
					this.loading = false
					uni.navigateTo({
						url:'../index/index'
					})
				}, 2.0*1000);
			},
			changeToEnglish() {
				let locale = this.$i18n.locale
				locale === 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh'
			},
			/// 清除输入框
			clearInput(isUserAccount) {
				if (isUserAccount) {
					this.user.account = ''
				} else {
					this.user.password = ''
				}
			},
			aggreeBtnClick() {
				this.aggred = !this.aggred
			}
		}
	}
</script>

<style lang="scss">
	.login {
		width: 100%;
		position: absolute;
		display: flex;
		flex-direction: column;
		height: 100%;
		.login-top {
			width: 100%;
			.login-bg {
				width: 100%;
				height: 55vw;
			}
			.login-top-content {
				position: absolute;
				left: 30px;
				height: 49px;
				top: 50px;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				.login-icon {
					width: 30px;
					height: 30px;
				}
				.login-title {
					margin-left: 10px;
					font-size: 48rpx;
					color: white;
				}
			}
		}
		.login-card{
			position: absolute;
			top: 45vw;
			width: 90%;
			left: 5%;
		}
		.version-text {
			position: absolute;
			bottom: 35px;
			width: 100%;
			text-align: center;
		}
	}
</style>