212 lines
6.0 KiB
Vue
212 lines
6.0 KiB
Vue
<!-- 登录页 -->
|
||
<template>
|
||
<view class="aircraft-login">
|
||
<lwTopnav :isShow="true" />
|
||
<view class="login-title">
|
||
{{ currentLoginType ? '飞行员' : '用户' }}登录
|
||
</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="`请输入${ currentLoginType ? '飞行员' : '用户'}账号`"
|
||
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('privacyAgreement')">《隐私政策》</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:'40rpx 0',marginTop:'42rpx',opacity: isDisable ? 0.6 : 1}"
|
||
@click="submit">登 录</u-button>
|
||
<view class="login-form-change" @click="currentLoginType=(currentLoginType+1)%2">
|
||
切换至{{ currentLoginType ? '用户' : '飞行员' }}登录
|
||
</view>
|
||
</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';
|
||
import { encrypt } from '@/utils/rsaEncrypt';
|
||
export default {
|
||
// #ifdef MP
|
||
options: {
|
||
styleIsolation: 'shared'
|
||
},
|
||
// #endif
|
||
components: {
|
||
lwTopnav
|
||
},
|
||
data(){
|
||
return{
|
||
currentLoginType: 0,//当前登录方式-1飞行员、0用户
|
||
logo: '/static/logo.png',// logo图标
|
||
loading: true,// 加载
|
||
// 登录表单
|
||
loginForm: {
|
||
username: '',
|
||
password: ''
|
||
},
|
||
// 加载
|
||
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
|
||
}
|
||
}
|
||
}
|
||
},
|
||
methods:{
|
||
// 提交
|
||
async submit(){
|
||
if(!this.isAgreed){
|
||
this.$refs.uToast.show({type: 'warning',title: "请阅读并勾选同意协议!"});
|
||
return;
|
||
}
|
||
try{
|
||
let that = this;
|
||
this.dotLoading = true;
|
||
const isA = that.currentLoginType===1;
|
||
let res = await that.$api[isA?'aLogin':'bLogin']
|
||
({...that.loginForm,password:encrypt(that.loginForm.password)});
|
||
if(!res){
|
||
that.$refs.uToast.show({type: 'error',title: "账号或密码错误!"});
|
||
}else{
|
||
// 存储登录记录
|
||
uni.setStorageSync('loginMemory',JSON.stringify({...that.loginForm,timer: new Date()}));
|
||
that.$u.vuex('user_type',that.currentLoginType);
|
||
that.$u.vuex('vuex_token', res.token);
|
||
// that.$u.vuex('vuex_token', 'fbc545a91cc94fe89296828a25a7e08e@9085553879028596738');
|
||
await that.$u.vuex('user_message', JSON.stringify(res.user.user));
|
||
if(that.nextUrl===''){
|
||
uni.redirectTo({url: '/aircraft/server/index/index',complete() {
|
||
setTimeout(()=>{
|
||
uni.showToast({icon: 'none', title: '登录成功！'});
|
||
},600)
|
||
}})
|
||
}else{
|
||
uni.redirectTo({
|
||
url: that.nextUrl,
|
||
complete() {
|
||
setTimeout(()=>{
|
||
uni.showToast({icon: 'none', title: '登录成功！'});
|
||
},600)
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}catch(e){
|
||
this.$refs.uToast.show({type: 'error',title: "处理失败!"});
|
||
}finally{
|
||
this.dotLoading = false;
|
||
}
|
||
},
|
||
// 查看协议
|
||
handleCheckAgreement(agreement){
|
||
uni.navigateTo({
|
||
url: `/aircraft/server/index/agreement?type=${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;
|
||
}
|
||
}
|
||
}
|
||
&-change{
|
||
margin-top: 42rpx;
|
||
color: #6B7280;
|
||
font-family: Roboto;
|
||
font-size: 26rpx;
|
||
text-align: center;
|
||
}
|
||
&::v-deep .u-checkbox__icon-wrap{
|
||
margin-right: 14rpx;
|
||
}
|
||
}
|
||
&-copyright{
|
||
margin: auto auto 56rpx;
|
||
color: #9CA3AF;
|
||
font-family: Roboto;
|
||
font-size: 21rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |