uav-uniapp-240725/pages/login/login.vue

<!-- 登录页面 -->
<template>
	<view class="login bx">

		<!-- 背景图片 -->
		<view class="bg-box">
			<image @click="showSelectLanguageProp" class="language" src="@/static/login/language.png" mode="aspectFit"></image>
			<image src="@/static/logo.png" mode="aspectFit"></image>
		</view>
		
		<!-- 加载效果 -->
		<loading :loading="loading" @close="closeLoading"></loading>

		<view v-if="!loading" class="main">
			<!-- 登录标题 -->
			<view class="login-title">
			
				<view class="title">{{ $t('page.login.title') }}</view>
			
				<view class="login-descript">{{ $t('page.login.please-login') }}</view>
			
			</view>
			
			<!-- 输入框列表 -->
			<view class="input-list">
			
				<view class="input-item">
					<view class="input-descript">{{ $t('page.login.username') }}</view>
			
					<input v-model="form.account" type="text" :placeholder="$t('page.login.username-placeholder')" />
				</view>
			
				<view class="input-item">
					<view class="input-descript">{{ $t('page.login.password') }}</view>
			
					<input v-model="form.pass" type="password" :placeholder="$t('page.login.password-placeholder')" />
				</view>
			
			</view>
			
			<!-- 忘记密码 -->
			<view class="forgot-password">
				<text  @click="forgetPass">{{ $t('page.login.forgot-password') }}</text>
			</view>
			
			<!-- 按钮组 -->
			<view class="btns">
			
				<view @click="Login" class="now-login-btn">{{ $t('page.login.login') }}</view>
			
				<view @click="toRegister" class="now-register-btn">{{ $t('page.login.register') }}</view>
			
			</view>
		</view>
		
		<!-- 切换语言 -->
		<changeLanguage :show.sync="showSelectLanguage" @close="closeSelectLanguageProp"></changeLanguage>
		
		<!-- 客服列表 -->
		<serviceList :show="showService" :serverList="serverList" @close="closeServiceList"></serviceList>
		
		<!-- 初始页面 -->
		<pageInit></pageInit>

	</view>
</template>

<script>
	import changeLanguage from '../../components/changeLanguage/changeLanguage.vue';
	import serviceList from '@/components/serviceList/serviceList.vue';
	import pageInit from '@/components/pageInit/pageInit.vue'
	import loading from '@/components/pageInit/loading.vue'
	
	export default {
		components : { changeLanguage , serviceList , pageInit , loading },
		data() {
			return {
				form: {
					account: '',
					pass: '',
					loginIp : ''
				},
				showSelectLanguage : false,
				showService : false,
				serverList : [],
				loading : true
			}
		},
		created() {

		},
		methods: {
			//登录
			Login() {
				this.$play()
				let _self = this;
				let { account , pass } = this.form
				if(account.trim() == ''){
					return uni.showToast({title: this.$t('page.login.accountEmpty'),icon : 'none'});
				}
				if(pass.trim() == ''){
					return uni.showToast({title: this.$t('page.login.passEmpty'),icon : 'none'});
				}
				
				return uni.request({
					url: 'https://api.ipify.org?format=json',
					success: function(res) {
						_self.form.loginIp = res.data.ip;
						_self.request('login', {}, _self.form).then(res => {
							if(res.code == 200){
								localStorage.setItem("userInfo",JSON.stringify(res.result.userInfo))
								localStorage.setItem("token", res.result.token)
								uni.navigateTo({
									url: '/pages/home/home'
								})
							}
						})
					}
				});
				
			},

			//跳转注册页面
			toRegister() {
				this.$play()
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			
			//显示选择语言弹框
			showSelectLanguageProp(){
				this.$play()
				this.showSelectLanguage = true
			},
			
			//关闭语言选择弹框
			closeSelectLanguageProp(){
				this.showSelectLanguage = false
			},
			
			//显示客服列表
			revealServiceList(){
				this.$play()
				this.showService = true;
			},
			
			//关闭客服列表
			closeServiceList(){
				this.showService = false;
			},
			
			//关闭加载效果
			closeLoading(){
				this.loading = false;
			},
			
			//忘记密码
			forgetPass(){
				this.request('forgetPass').then(res => {
					if(res.code == 200){
						this.serverList = res.result
						this.revealServiceList()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 750rpx;
		height: 100vh;
		margin: 0px auto;
		background: black;
		background-image: url('@/static/login/bg.png');
		background-size: 100%;
		background-repeat: no-repeat;
		box-sizing: border-box;
		padding: 0rpx 20rpx;

		.bg-box {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 40%;

			.language {
				position: absolute;
				top: 30rpx;
				right: 30rpx;
				width: 60rpx;
				height: 60rpx;
				z-index: 999;
			}
		}

		.login-title {
			padding: 0rpx 10rpx;
			box-sizing: border-box;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #B0C73B;
				margin-bottom: 10rpx;
			}

			.login-descript {
				font-size: 32rpx;
				color: white;
				margin-bottom: 20rpx;
			}
		}

		.input-list {
			padding: 0rpx 10rpx;
			box-sizing: border-box;
			margin: 40rpx 0rpx;

			.input-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border: 1px solid #B0C73B;
				padding: 20rpx;
				border-radius: 5rpx;
				margin-bottom: 25rpx;
				box-sizing: border-box;
				font-size: 28rpx;

				.input-descript {
					color: #B0C73B;
				}

				input {
					color: #B0C73B;
				}
			}
		}

		.forgot-password {
			color: #B0C73B;
			text-align: center;

			text {
				border-bottom: 1rpx solid #ccc;
			}
		}

		.btns {
			padding: 0rpx 10rpx;
			margin-top: 40rpx;

			.now-login-btn,
			.now-register-btn {
				background: #B0C73B;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;
				font-weight: bold;
			}

			.now-login-btn {
				height: 90rpx;
				font-size: 40rpx;
			}

			.now-register-btn {
				height: 60rpx;
				width: 90%;
				font-size: 28rpx;
				margin: 0 auto;
			}
		}
	}
</style>