You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
3.4 KiB
97 lines
3.4 KiB
7 months ago
|
<template>
|
||
|
|
<div class="login-page">
|
||
|
|
<div class="login-content">
|
||
|
|
<van-nav-bar>
|
||
|
|
<template #title>
|
||
|
|
<div class="title">
|
||
|
|
执法端登录
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</van-nav-bar>
|
||
|
|
<van-form @submit="onSubmit">
|
||
|
|
<van-field v-model="loginParam.secretName" name="secretName" label="用户名" placeholder="用户名"
|
||
|
|
:rules="[{ required: true, message: '请填写用户名' }]"/>
|
||
|
|
<van-field v-model="loginParam.secretKey" type="password" name="secretKey" label="密码" placeholder="密码"
|
||
|
|
:rules="[{ required: true, message: '请填写密码' }]"/>
|
||
|
|
<div style="margin: 0.42rem">
|
||
|
|
<van-button block type="primary" native-type="submit">登录</van-button>
|
||
|
|
</div>
|
||
|
|
</van-form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
import {reactive} from 'vue';
|
||
|
|
import {userLogin, testLogin} from '../../api/Home';
|
||
|
|
import CryptoJS from "crypto-js";
|
||
|
|
|
||
|
|
const {useCommon} = $globalStore;
|
||
|
|
const router = useRouter();
|
||
|
|
const loginParam = reactive({
|
||
|
|
secretName: "",
|
||
|
|
secretKey: ""
|
||
|
|
})
|
||
|
|
|
||
|
|
const onSubmit = async (values) => {
|
||
|
|
values.secretKey = Encrypt(values.secretKey);
|
||
|
|
testLogin({"secretName": loginParam.secretName, "secretKey": values.secretKey}, success => {
|
||
|
|
if (success.success) {
|
||
|
|
// 执法端登录成功 → 跳转执法端首页
|
||
|
|
router.push({name: "enforceHome"});
|
||
|
|
useCommon.SET_USER_PHONENUMBER(success.data.phonenumber.toString());
|
||
|
|
useCommon.SET_USER_ID(success.data.userId);
|
||
|
|
useCommon.SET_TOKEN(success.data.token);
|
||
|
|
window.addEventListener('message', (event) => {
|
||
|
|
console.log('Received message from uni-app:', event.data);
|
||
|
|
window.parent.postMessage('Hello, uni-app!', '*');
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
console.log("登录失败")
|
||
|
|
}
|
||
|
|
}, error => {
|
||
|
|
console.log("登录失败")
|
||
|
|
})
|
||
|
|
};
|
||
|
|
|
||
|
|
const Encrypt = (passWord) => {
|
||
|
|
var keyStr = '1234567898745621';
|
||
|
|
var ivStr = keyStr;
|
||
|
|
var key = CryptoJS.enc.Utf8.parse(keyStr);
|
||
|
|
var iv = CryptoJS.enc.Utf8.parse(ivStr);
|
||
|
|
var srcs = CryptoJS.enc.Utf8.parse(passWord);
|
||
|
|
var encrypted = CryptoJS.AES.encrypt(srcs, key, {
|
||
|
|
iv: iv,
|
||
|
|
mode: CryptoJS.mode.CBC,
|
||
|
|
padding: CryptoJS.pad.ZeroPadding
|
||
|
|
});
|
||
|
|
return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.login-page {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
overflow: hidden;
|
||
|
|
background-image: url("~@/assets/images/login.jpg");
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
opacity: 0.9;
|
||
|
|
|
||
|
|
.login-content {
|
||
|
|
margin: auto;
|
||
|
|
padding: 0.27rem 0.27rem 0.52rem 0.27rem;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 0.27rem;
|
||
|
|
box-shadow: 0 0 0.27rem rgba(0, 0, 0, 0.2);
|
||
|
|
opacity: 0.9;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 0.52rem;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|