3 changed files with 152 additions and 134 deletions
@ -1,116 +1,131 @@ |
|||||
<template> |
<template> |
||||
<div class="login-page"> |
<div class="login-page"> |
||||
<div class="login-content"> |
<div class="login-content"> |
||||
<van-nav-bar> |
<van-nav-bar> |
||||
<template #title> |
<template #title> |
||||
<div class="title"> |
<div class="title">登录</div> |
||||
登录 |
</template> |
||||
</div> |
</van-nav-bar> |
||||
</template> |
<van-form @submit="onSubmit"> |
||||
</van-nav-bar> |
<van-field |
||||
<van-form @submit="onSubmit"> |
v-model="loginParam.secretName" |
||||
<van-field v-model="loginParam.secretName" name="secretName" label="用户名" placeholder="用户名" |
name="secretName" |
||||
:rules="[{ required: true, message: '请填写用户名' }]"/> |
label="用户名" |
||||
<van-field v-model="loginParam.secretKey" type="password" name="secretKey" label="密码" placeholder="密码" |
placeholder="用户名" |
||||
:rules="[{ required: true, message: '请填写密码' }]"/> |
:rules="[{ required: true, message: '请填写用户名' }]" |
||||
<div style="margin: 0.42rem"> |
/> |
||||
<van-button block type="primary" native-type="submit">登录</van-button> |
<van-field |
||||
</div> |
v-model="loginParam.secretKey" |
||||
</van-form> |
type="password" |
||||
<router-link to="/register" class="link">还没有账号,去注册</router-link> |
name="secretKey" |
||||
|
label="密码" |
||||
|
placeholder="密码" |
||||
|
:rules="[{ required: true, message: '请填写密码' }]" |
||||
|
/> |
||||
|
<div style="margin: 0.42rem"> |
||||
|
<van-button block type="primary" native-type="submit" |
||||
|
>登录</van-button |
||||
|
> |
||||
</div> |
</div> |
||||
|
</van-form> |
||||
|
<router-link to="/register" class="link">还没有账号,去注册</router-link> |
||||
</div> |
</div> |
||||
|
</div> |
||||
</template> |
</template> |
||||
<script setup> |
<script setup> |
||||
import {reactive} from 'vue'; |
import { reactive } from "vue"; |
||||
import {userLogin, testLogin} from '../api/Home'; |
import { userLogin, testLogin } from "../api/Home"; |
||||
import CryptoJS from "crypto-js"; |
import CryptoJS from "crypto-js"; |
||||
|
|
||||
const {useCommon} = $globalStore; |
const { useCommon } = $globalStore; |
||||
const router = useRouter(); |
const router = useRouter(); |
||||
const loginParam = reactive({ |
const loginParam = reactive({ |
||||
secretName: "", |
secretName: "", |
||||
secretKey: "" |
secretKey: "", |
||||
}) |
}); |
||||
const userLoginParam = {}; |
const userLoginParam = {}; |
||||
userLoginParam.username = loginParam.username; |
userLoginParam.username = loginParam.username; |
||||
userLoginParam.password = loginParam.password; |
userLoginParam.password = loginParam.password; |
||||
const onSubmit = async (values) => { |
const onSubmit = async (values) => { |
||||
// await getGoodsnum(); |
// await getGoodsnum(); |
||||
// await getLang(); |
// await getLang(); |
||||
// values.secretName = values.name; |
// values.secretName = values.name; |
||||
values.secretKey = Encrypt(values.secretKey); |
values.secretKey = Encrypt(values.secretKey); |
||||
// return; |
// return; |
||||
// userLogin(values,success=>{ |
// userLogin(values,success=>{ |
||||
testLogin({"secretName": loginParam.secretName, "secretKey": values.secretKey}, success => { |
testLogin( |
||||
if (success.success) { |
{ secretName: loginParam.secretName, secretKey: values.secretKey }, |
||||
//企业端 |
(success) => { |
||||
router.push({ name: "Home" }); |
if (success.success) { |
||||
//执法端 |
//企业端 |
||||
// router.push({name: "enforceHome"}); |
router.push({ name: "Home" }); |
||||
//设置全局变量 |
//执法端 |
||||
useCommon.SET_USER_PHONENUMBER(success.data.phonenumber.toString()); |
// router.push({ name: "enforceHome" }); |
||||
useCommon.SET_USER_ID(success.data.userId); |
//设置全局变量 |
||||
useCommon.SET_TOKEN(success.data.token); |
useCommon.SET_USER_PHONENUMBER(success.data.phonenumber.toString()); |
||||
// 监听uni-app发送的消息 |
useCommon.SET_USER_ID(success.data.userId); |
||||
window.addEventListener('message', (event) => { |
useCommon.SET_TOKEN(success.data.token); |
||||
console.log('Received message from uni-app:', event.data); |
// 监听uni-app发送的消息 |
||||
// 向uni-app返回消息 |
window.addEventListener("message", (event) => { |
||||
window.parent.postMessage('Hello, uni-app!', '*'); |
console.log("Received message from uni-app:", event.data); |
||||
}); |
// 向uni-app返回消息 |
||||
} else { |
window.parent.postMessage("Hello, uni-app!", "*"); |
||||
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); |
} 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> |
</script> |
||||
|
|
||||
<style lang="less" scoped> |
<style lang="less" scoped> |
||||
.login-page { |
.login-page { |
||||
width: 100%; |
width: 100%; |
||||
height: 100%; |
height: 100%; |
||||
display: flex; |
display: flex; |
||||
overflow: hidden; |
overflow: hidden; |
||||
background-image: url("~@/assets/images/login.jpg"); |
background-image: url("~@/assets/images/login.jpg"); |
||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||
background-size: cover; |
background-size: cover; |
||||
opacity: 0.9; |
opacity: 0.9; |
||||
|
|
||||
.login-content { |
.login-content { |
||||
margin: auto; |
margin: auto; |
||||
padding: 0.27rem 0.27rem 0.52rem 0.27rem; |
padding: 0.27rem 0.27rem 0.52rem 0.27rem; |
||||
background-color: #fff; |
background-color: #fff; |
||||
border-radius: 0.27rem; |
border-radius: 0.27rem; |
||||
box-shadow: 0 0 0.27rem rgba(0, 0, 0, 0.2); |
box-shadow: 0 0 0.27rem rgba(0, 0, 0, 0.2); |
||||
opacity: 0.9; |
opacity: 0.9; |
||||
|
|
||||
.title { |
.title { |
||||
font-size: 0.52rem; |
font-size: 0.52rem; |
||||
font-weight: 600; |
font-weight: 600; |
||||
} |
|
||||
} |
|
||||
|
|
||||
.link { |
|
||||
font-size: 0.32rem; |
|
||||
color: #069; |
|
||||
float: right; |
|
||||
margin-right: 0.4rem; |
|
||||
} |
|
||||
} |
} |
||||
|
} |
||||
|
|
||||
|
.link { |
||||
|
font-size: 0.32rem; |
||||
|
color: #069; |
||||
|
float: right; |
||||
|
margin-right: 0.4rem; |
||||
|
} |
||||
|
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue