<template> <!-- 登录 --> <div class="loginPage"> <div class="loginHead"> <img :src="LogoImg" class="image" /> <p class="title">开封海绵中心工程运维</p> </div> <van-form @submit="submitData"> <van-cell-group inset> <van-field v-model="allData.userName" label="" left-icon="manager" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" /> <!-- :rules="[{ pattern, required: true, message: '请输入由字母+数字组成的6-16位密码' }]" --> <van-field v-model="allData.password" :rules="[{ required: true, message: '请输入密码' }]" left-icon="lock" type="password" label="" placeholder="请输入密码" /> <van-checkbox v-model="allData.remberPass" icon-size="20px">记住密码</van-checkbox> </van-cell-group> <div style="margin: 16px"> <van-button round block type="primary" native-type="submit"> 登录 </van-button> </div> </van-form> <van-overlay :show="allData.show"> <div class="wrapper"> <van-loading type="spinner" /> <p>登录中</p> </div> </van-overlay> </div> </template> <script setup name="loginPage"> import { useStore } from '@/pinia/store.js'; import { useRouter } from 'vue-router'; import { sysLogin } from '@/api/publicApi.js'; import LogoImg from '@/assets/images/logo.png'; import { EncryptAES, DecryptAES } from '@/utils/AES.js'; const pinias = useStore(); const router = useRouter(); // const pattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/; //字母+数字组成的6-16位密码 const allData = reactive({ userName: '', password: '', code: '', remberPass: true, uuid: '', show: false, }); // 登录提交 const submitData = async () => { allData.show = true; // 默认存储密码 if (allData.remberPass) { localStorage.setItem('usernameGCApp', allData.userName); // localStorage.setItem("passwordGCApp", EncryptAES(allData.password)); localStorage.setItem('passwordGCApp', allData.password); } else { localStorage.removeItem('usernameGCApp'); localStorage.removeItem('passwordGCApp'); } let params = { login: allData.userName, // pwd: EncryptAES(allData.password), pwd: allData.password, }; let res = await sysLogin(params); allData.show = false; if (res && res.data.code == 1) { const access_token = res.data.data.token; pinias.$patch((state) => { state.token = access_token; }); localStorage.setItem('GCAppToken', access_token); //存储token localStorage.setItem('userNo', res.data.data.login); //存储userNo localStorage.setItem('roleId', res.data.data.roleId); localStorage.setItem('roleName', res.data.data.roleName); localStorage.setItem('realName', res.data.data.realName); localStorage.setItem('mobile', res.data.data.mobile); localStorage.setItem('LoginUserID', res.data.data.id); localStorage.setItem('appRoleCategory', res.data.data.appRoleCategory); router.push('/home_homePage'); } else { } }; onMounted(() => { pinias.hideLoading(); if (allData.remberPass) { const usernameGCApp = localStorage.getItem('usernameGCApp'); const passwordGCApp = localStorage.getItem('passwordGCApp'); allData.userName = usernameGCApp ? usernameGCApp : ''; // allData.password = passwordGCApp ? DecryptAES(passwordGCApp) : ""; allData.password = passwordGCApp ? passwordGCApp : ''; } }); </script> <style lang="less"> .loginPage { .loginHead { width: 100%; height: 500px; background: url('@/assets/images/loginBg.png') no-repeat 100% 100%; background-size: cover; text-align: center; .image { width: 161px; height: 52px; margin-top: 25%; } .title { font-weight: 900; font-size: 32px; width: 100%; text-align: center; color: white; letter-spacing: 6px; margin-top: 30px; } } .van-form { margin-top: 60px; margin-left: 5%; width: 90%; .van-cell { margin: 30px auto; background-color: #f5f6f7; border-radius: 40px; .van-field__control { padding-left: 20px; } .van-checkbox { margin: 20px 30px; font-size: 24px; } } .specialField { padding: 0px var(--van-cell-horizontal-padding); .van-field__left-icon { margin-top: 14px; } } } .wrapper { width: 100%; height: 100%; text-align: center; color: white; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; } } </style>