Skip to content

W
web-project
Commit 14e0abfd authored by 朱超's avatar 朱超
Browse files
Options

Merge branch 'master' of https://gitee.com/tj-wang-yahui/AMS_HeatSys_Vue_V10

parents 040ff1d7 312199ed
Hide whitespace changes
Inline Side-by-side
Showing with 107 additions and 52 deletions
src/views/login/login.vue
View file @ 14e0abfd
...@@ -10,14 +10,16 @@ ...@@ -10,14 +10,16 @@
<div class="login-text1 text">用户登录</div> <div class="login-text1 text">用户登录</div>
<div class="login-text2 text">DATA MANAGEMENT BACKGROUND OF PACKET DIAGRAM</div> <div class="login-text2 text">DATA MANAGEMENT BACKGROUND OF PACKET DIAGRAM</div>
<div class="div-input"> <div class="div-input">
<el-input v-model="userInfo.userName" style="width: 380px ; height: 50px" placeholder="请输入账号" <el-input v-model="userInfo.userName" style="width: 380px ; height: 50px"
:prefix-icon="User" input-style="color:black" /> placeholder="请输入账号" :prefix-icon="User" input-style="color:black" />
</div> </div>
<el-row> <el-row>
<el-col> <el-col>
<div class="div-input"> <div class="div-input">
<el-input v-model="userInfo.password" style=" color: white;width: 380px ; height: 50px" type="password" <el-input v-model="userInfo.password"
placeholder="请输入密码" show-password :prefix-icon="Lock" input-style="color:black" /> style=" color: white;width: 380px ; height: 50px" type="password"
placeholder="请输入密码" show-password :prefix-icon="Lock"
input-style="color:black" />
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -27,12 +29,13 @@ ...@@ -27,12 +29,13 @@
<el-col :span="15"> <el-col :span="15">
<div class="div-input input-contain"> <div class="div-input input-contain">
<el-input v-model="code" style="width: 240px ; height: 50px" <el-input v-model="code" style="width: 240px ; height: 50px"
placeholder="请输入验证码" input-style="color:black" @keyup.enter="login"/> placeholder="请输入验证码" input-style="color:black" @keyup.enter="login" />
</div> </div>
</el-col> </el-col>
<el-col :span="9"> <el-col :span="9">
<div class="div-input img-contain"> <div class="div-input img-contain">
<el-image @click="getPicture" style="width: 100%; height: 50px" :src="codeurl" :fit="'fill'" /> <el-image @click="getPicture" style="width: 100%; height: 50px" :src="codeurl"
:fit="'fill'" />
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -40,7 +43,7 @@ ...@@ -40,7 +43,7 @@
<el-row justify="space-around"> <el-row justify="space-around">
<el-col :span="12"> <el-col :span="12">
<el-checkbox class="text" v-model="isRemember" label="记住密码" size="large" /> <el-checkbox class="text" v-model="isRemember" label="记住密码" size="large" @change="changeCheck"/>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="text">忘记密码</div> <div class="text">忘记密码</div>
...@@ -52,7 +55,7 @@ ...@@ -52,7 +55,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row justify="space-around" style="margin-bottom: 20px;"> <el-row justify="space-around" style="margin-bottom: 20px;">
<div id="login_button" @click="login" style="width: 380px; height: 80px">登录</div> <div id="login_button" @click="login" style="width: 380px; height: 80px">登录</div>
</el-row> </el-row>
</div> </div>
</div> </div>
...@@ -197,20 +200,19 @@ ...@@ -197,20 +200,19 @@
color: red; color: red;
font-size: small; font-size: small;
} }
</style> </style>
<script lang="ts" setup> <script lang="ts" setup>
import { import {
defineComponent, defineComponent,
ref, ref,
reactive, reactive,
toRefs, toRefs,
getCurrentInstance, getCurrentInstance,
onMounted, onMounted,
onUpdated, onUpdated,
onBeforeUnmount onBeforeUnmount
} from 'vue'; } from 'vue';
import { User, Lock } from '@element-plus/icons-vue' import { User, Lock } from '@element-plus/icons-vue'
...@@ -225,67 +227,68 @@ const isRemember = ref(false); ...@@ -225,67 +227,68 @@ const isRemember = ref(false);
const loading = ref(false); const loading = ref(false);
const errorMessage = ref('用户或密码错误，请重试') const errorMessage = ref('用户或密码错误，请重试')
var showMessage=ref(false); var showMessage = ref(false);
const userInfo = reactive({ const userInfo = reactive({
userName: '', userName: '',
password: '', password: '',
verificationCode: '', verificationCode: '',
UUID: undefined UUID: undefined
}); });
localStorage.setItem("SERVEICE", ""); localStorage.setItem("SERVEICE", "");
const clientIp = ref("加载中"); const clientIp = ref("加载中");
async function fetchClientIp() { async function fetchClientIp() {
try { try {
const res = await fetch('https://api.ipify.org?format=json'); const res = await fetch('https://api.ipify.org?format=json');
const data = await res.json(); const data = await res.json();
clientIp.value = data.ip; clientIp.value = data.ip;
store.commit('setSERVEICE', data.ip); store.commit('setSERVEICE', data.ip);
//http.ipAddress = store.getters.getSERVEICE; //http.ipAddress = store.getters.getSERVEICE;
console.log("changeip:"+clientIp.value + " " ); console.log("changeip:" + clientIp.value + " ");
getPicture(); getPicture();
} catch (error) { } catch (error) {
clientIp.value = '获取失败'; clientIp.value = '获取失败';
console.error('Error fetching client IP:', error); console.error('Error fetching client IP:', error);
} }
} }
async function getPicture() { async function getPicture() {
try{ try {
var serverIP = localStorage.getItem("SERVEICE"); var serverIP = localStorage.getItem("SERVEICE");
console.log(clientIp.value + " " + serverIP); console.log(clientIp.value + " " + serverIP);
if(!serverIP || serverIP == null || serverIP == ""){ if (!serverIP || serverIP == null || serverIP == "") {
await fetchClientIp(); await fetchClientIp();
} }
await http.get('/api/User/getVierificationCode').then((x) => { await http.get('/api/User/getVierificationCode').then((x) => {
try{ try {
var jobj=x.data; var jobj = x.data;
codeurl.value = 'data:image/jpg;base64,' + jobj.img; codeurl.value = 'data:image/jpg;base64,' + jobj.img;
userInfo.UUID = jobj.uuid; userInfo.UUID = jobj.uuid;
}catch(error){ } catch (error) {
console.log(error.message); console.log(error.message);
} }
}); });
}catch(error){ } catch (error) {
console.log(error.message); console.log(error.message);
await fetchClientIp(); await fetchClientIp();
} }
} }
getPicture(); getPicture();
getUserInfo();
let appContext = getCurrentInstance()!.appContext; let appContext = getCurrentInstance()!.appContext;
let $message = appContext.config.globalProperties.$message; let $message = appContext.config.globalProperties.$message;
function login() { function login() {
if(code.value == ''){ if (code.value == '') {
showMessage.value=true; showMessage.value = true;
errorMessage.value="请输入验证码"; errorMessage.value = "请输入验证码";
return $message.error(errorMessage.value); return $message.error(errorMessage.value);
} }
loading.value = true; loading.value = true;
...@@ -295,15 +298,67 @@ function login() { ...@@ -295,15 +298,67 @@ function login() {
if (!result.success) { if (!result.success) {
loading.value = false; loading.value = false;
getPicture(); getPicture();
showMessage.value=true; showMessage.value = true;
errorMessage.value=result.message; errorMessage.value = result.message;
return $message.error(result.message); return $message.error(result.message);
} }
$message.success('登录成功,正在跳转!'); $message.success('登录成功,正在跳转!');
store.commit('setUserInfo', result.data); store.commit('setUserInfo', result.data);
// router.push({ path: '/Home'}); //保存
router.push({ path: '/GisHome'}); if(isRemember.value){
}); saveUserInfo(userInfo);
}
// router.push({ path: '/Home'});
router.push({ path: '/GisHome' });
});
}
function saveUserInfo(userInfo) {
var days = 30;//设置30天过期
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
document.cookie = "userName=" + userInfo.userName + "; expires=" + date.toUTCString();
document.cookie = "password=" + userInfo.password + "; expires=" + date.toUTCString();
}
function clearUserInfo() {
document.cookie = "userName=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
document.cookie = "password=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
} }
function getUserInfo() {
var key_name ='userName' + "=";
var key_password='password'+"=";
var tuserInfo={
}
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(key_name) == 0){
tuserInfo.username=c.substring(key_name.length, c.length);
}else if(c.indexOf(key_password) == 0){
tuserInfo.password=c.substring(key_password.length, c.length);
}
}
//如果名称和密码都存在，返回用户信息，否则返回空
if(tuserInfo.username && tuserInfo.password){
isRemember.value=true;
userInfo.userName=tuserInfo.username;
userInfo.password=tuserInfo.passowrd;
return tuserInfo;
}
return null;
}
console.log('test remember')
//
function changeCheck(value){
console.log(isRemember);
if(!isRemember.value){
clearUserInfo();
}
}
</script> </script>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment