3 changed files with 152 additions and 134 deletions
@ -1,116 +1,131 @@ |
|||
<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> |
|||
<router-link to="/register" class="link">还没有账号,去注册</router-link> |
|||
<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> |
|||
<router-link to="/register" class="link">还没有账号,去注册</router-link> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
import {reactive} from 'vue'; |
|||
import {userLogin, testLogin} from '../api/Home'; |
|||
import CryptoJS from "crypto-js"; |
|||
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 userLoginParam = {}; |
|||
userLoginParam.username = loginParam.username; |
|||
userLoginParam.password = loginParam.password; |
|||
const onSubmit = async (values) => { |
|||
// await getGoodsnum(); |
|||
// await getLang(); |
|||
// values.secretName = values.name; |
|||
values.secretKey = Encrypt(values.secretKey); |
|||
// return; |
|||
// userLogin(values,success=>{ |
|||
testLogin({"secretName": loginParam.secretName, "secretKey": values.secretKey}, success => { |
|||
if (success.success) { |
|||
//企业端 |
|||
router.push({ name: "Home" }); |
|||
//执法端 |
|||
// 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); |
|||
// 监听uni-app发送的消息 |
|||
window.addEventListener('message', (event) => { |
|||
console.log('Received message from uni-app:', event.data); |
|||
// 向uni-app返回消息 |
|||
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 |
|||
const { useCommon } = $globalStore; |
|||
const router = useRouter(); |
|||
const loginParam = reactive({ |
|||
secretName: "", |
|||
secretKey: "", |
|||
}); |
|||
const userLoginParam = {}; |
|||
userLoginParam.username = loginParam.username; |
|||
userLoginParam.password = loginParam.password; |
|||
const onSubmit = async (values) => { |
|||
// await getGoodsnum(); |
|||
// await getLang(); |
|||
// values.secretName = values.name; |
|||
values.secretKey = Encrypt(values.secretKey); |
|||
// return; |
|||
// userLogin(values,success=>{ |
|||
testLogin( |
|||
{ secretName: loginParam.secretName, secretKey: values.secretKey }, |
|||
(success) => { |
|||
if (success.success) { |
|||
//企业端 |
|||
router.push({ name: "Home" }); |
|||
//执法端 |
|||
// 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); |
|||
// 监听uni-app发送的消息 |
|||
window.addEventListener("message", (event) => { |
|||
console.log("Received message from uni-app:", event.data); |
|||
// 向uni-app返回消息 |
|||
window.parent.postMessage("Hello, uni-app!", "*"); |
|||
}); |
|||
return CryptoJS.enc.Base64.stringify(encrypted.ciphertext); |
|||
} |
|||
} 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-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; |
|||
.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; |
|||
} |
|||
} |
|||
|
|||
.link { |
|||
font-size: 0.32rem; |
|||
color: #069; |
|||
float: right; |
|||
margin-right: 0.4rem; |
|||
} |
|||
.title { |
|||
font-size: 0.52rem; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
|
|||
.link { |
|||
font-size: 0.32rem; |
|||
color: #069; |
|||
float: right; |
|||
margin-right: 0.4rem; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue