aircraft-pilot/aircraft/server/my/child_pages/login.vue

<!-- 登录页 -->
<template>
	<view class="aircraft-login">
		<lwTopnav :isShow="true" />
		<view class="login-title">
			登录
		</view>
		<view class="login-logo">
			<u-icon :name="logo" size="140" label="爱尚云" label-pos="bottom"
			margin-top="21" label-size="50" label-color="#1F2937" 
			:custom-style="{fontFamily: 'Roboto',fontWeight: 600}"/>
		</view>
		<view class="login-form">
			<u-input v-model="loginForm.username" :height="98" placeholder="请输入账号" 
			placeholder-style="color: #6B7280;font-size:28rpx;font-family: Roboto;" trim
			:custom-style="{color:'#1F2937',borderRadius: '14rpx',padding: '28rpx 20rpx 28rpx 70rpx'}" />
			<u-input v-model.number="loginForm.password" :height="98" placeholder="请输入密码"
			placeholder-style="color: #6B7280;font-size:28rpx;font-family: Roboto;" trim type="password"
			:custom-style="{color:'#1F2937',borderRadius: '14rpx',padding: '28rpx 20rpx 28rpx 70rpx'}" />
			<u-checkbox class="login-form-agreement" v-model="isAgreed" active-color="#2563EB" 
			size="30" label-size="26" label-disabled>
				我已阅读并同意<text @click="handleCheckAgreement('userAgreement')">《用户协议》</text>
				和<text @click="handleCheckAgreement('privateAgreement')">《隐私政策》</text>
			</u-checkbox>
			<u-button :disabled="isDisable" :loading="loading" :hair-line="false" 
			:custom-style="{borderRadius: '8rpx',background: '#2563EB',
			color:'#FFFFFF',fontWeight: '500',fontSize:'32rpx',fontFamily:'Roboto',
			padding:'28rpx 0',marginTop:'42rpx',opacity: isDisable ? 0.6 : 1}"
			>登 录</u-button>
		</view>
		<view class="login-copyright">
			© 2025 爱尚云 版权所有 
		</view>
		<u-toast ref="uToast"></u-toast>
		<DotLoading :show="dotLoading" />
	</view>
</template>

<script>
import lwTopnav from '@/components/lw-topnav/lw-topnav.vue';
import configService from '@/common/config.service.js';
export default {
	// #ifdef MP
	options: {
		styleIsolation: 'shared'
	},
	// #endif
	components: {
		lwTopnav
	},
	data(){
		return{
			// #ifdef MP
			// 微信小程序自定义导航栏参数
			StatusBar: this.StatusBar || 0,
			CustomBarHeight: this.Custom.height+(this.Custom.top-this.StatusBar)*2 || 0,
			// #endif
			logo: '/static/logo.png',// logo图标
			loading: true,// 加载
			// 登录表单
			loginForm: {
				username: '',
				password: ''
			},
			// 登录验证规则
			loginRules: {
				username: [
					{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号格式不正确',
						trigger: ['blur']
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}
				]
			},
			// 加载
			dotLoading: false,
			// 是否同意协议、政策
			isAgreed: false,
			// 返回地址
			nextUrl: ''
		}
	},
	computed:{
		// 判断是否禁用按钮
		isDisable(){
			const { username, password } = this.loginForm;
			return !(this.isAgreed&&username&&password);
		}
	},
	onLoad(options) {
		this.loading = false;
		this.nextUrl = (options.nextUrl != null && options.nextUrl != '/pages/mobile_web/my/child_pages/login') ?
			options.nextUrl : '';
		// 判断上次登录记录
		let loginMemory = uni.getStorageSync('loginMemory');
		if(loginMemory) {
			const {username, password, timer} = JSON.parse(loginMemory);
			// 距离上次存储间隔5天，则删除缓存
			if(Math.floor((Date.parse(new Date()) - Date.parse(new Date(timer)))/(24*3600*1000)) >5){
				uni.removeStorageSync('loginMemory');
			}else{
				this.loginForm = {
					username: username,
					password: password
				}
			}
		}
	},
	onReady() {
		// this.$refs.loginForm.setRules(this.loginRules);
	},
	methods:{
		// 返回
		back(){
			console.log(this.nextUrl);
			// if(this.nextUrl==='/pages/mobile_web/index/index'&&
			// uni.getStorageSync('current')===1){
			// 	uni.setStorageSync('current',0);
			// 	uni.navigateBack();
			// } else {
			// 	uni.navigateBack();
			// }
		},
		// 提交
		submit(){
			if(!this.isAgreed){
				this.$refs.uToast.show({type: 'warning',title: "请阅读并勾选同意协议!"});
				return;
			}
			try{
				let that = this;
				this.dotLoading = true;
				// this.$refs.loginForm.validate(async(valid) => {
				// 	if (valid) {
				// 		// 判断注册或登录的表单值，进行调整匹配
				// 		if(!that.current) delete that.loginForm.confirmPassword;
				// 		let res = await that.$api[that.current?'register':'login'](that.loginForm);
				// 		if(res.success){
				// 			if(!that.current){
				// 				// 存储登录记录
				// 				uni.setStorageSync('loginMemory',JSON.stringify({
				// 					username: that.loginForm.username,
				// 					password: that.loginForm.password,
				// 					timer: new Date()
				// 				}));
				// 				that.$u.vuex('vuex_token', res.data.token);
				// 				// that.$u.vuex('vuex_token', 'fbc545a91cc94fe89296828a25a7e08e@9085553879028596738');
				// 				await that.$u.vuex('user_message', JSON.stringify(res.data.user));
				// 				if(that.nextUrl===''){
				// 					uni.navigateBack({complete() {
				// 						setTimeout(()=>{
				// 							uni.showToast({icon: 'none', title: '登录成功！'});
				// 						},600)
				// 					}})
				// 				}else{
				// 					uni.redirectTo({
				// 						url: that.nextUrl,
				// 						complete() {
				// 							setTimeout(()=>{
				// 								uni.showToast({icon: 'none', title: '登录成功！'});
				// 							},600)
				// 						}
				// 					});
				// 				}
				// 			}else{
				// 				that.$refs.uToast.show({type: 'success',title: "注册成功，请登录"});
				// 				that.current = 0;
				// 			}
				// 			that.$refs.loginForm.resetFields();
				// 		}else{
				// 			that.$refs.uToast.show({type: 'error',
				// 			title: that.current?`${res.data}!`:"手机号或密码错误!"});
				// 		}
				// 	}
				// });
			}catch(e){}
			finally{
				this.dotLoading = false;
			}
		},
		// 查看协议
		handleCheckAgreement(agreement){
			
		}
	},
}
</script>

<style scoped lang="scss">
.aircraft-login{
	box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
	/* 自动布局 */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	.login{
		&-title{
			margin: 0rpx auto 0;
			font-weight: 600;
			font-size: 36rpx;
			font-family: Roboto;
			color: #1F2937;
		}
		&-logo{
			margin: 100rpx auto 0;
		}
		&-form{
			margin: 100rpx 56rpx 0;
			&::v-deep .u-input{
				background-color: #f2f2f2;
				border-radius: 14rpx;
				font-family: Roboto;
				margin-bottom: 42rpx;
			}
			&::v-deep .u-input__right-icon{
				margin-right: 21rpx;
			}
			&-agreement{
				font-family: Roboto;
				text{
					margin: 0 6rpx;
					color: #2563EB;
					&:active{
						opacity: 0.8;
					}
				}
			}
			&::v-deep .u-checkbox__icon-wrap{
				margin-right: 14rpx;
			}
		}
		&-copyright{
			margin: auto auto 56rpx;
			color: #9CA3AF;
			font-family: Roboto;
			font-size: 21rpx;
		}
	}
}
</style>