庄锐波
4 months ago
5 changed files with 228 additions and 28 deletions
@ -0,0 +1,216 @@ |
|||
<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 style="margin: 0.42rem 0.42rem 0; text-align: center;display: none"> |
|||
<van-button plain type="default" size="small" @click="showTestPicker = true" |
|||
style="background-color: darkred;color: white">选择测试用户 |
|||
</van-button> |
|||
</div> |
|||
<van-action-sheet v-model:show="showTestPicker" title="选择测试用户"> |
|||
<div class="test-enterprise-list"> |
|||
<van-cell |
|||
v-for="(item, index) in testUsers" |
|||
:key="index" |
|||
:title="item.name+' / '+item.bureauUnitName" |
|||
:label="'账号：' + item.account" |
|||
is-link |
|||
@click="selectTestUser(item)" |
|||
/> |
|||
</div> |
|||
</van-action-sheet> |
|||
<van-popup v-model:show="showNavigatePicker" :close-on-click-overlay="false" round style="width: 80%; padding: 0.4rem;"> |
|||
<div style="font-size: 0.5rem; font-weight: bold;" class="navigate-title">请选择进入系统</div> |
|||
<div class="navigate-list"> |
|||
<van-cell |
|||
is-link |
|||
@click="navigateTo('enforcement')" |
|||
style="margin-bottom: 30px" |
|||
> |
|||
<template #title> |
|||
<span style="font-size: 0.5rem; font-weight: bold;">移动执法端</span> |
|||
</template> |
|||
</van-cell> |
|||
<van-cell |
|||
is-link |
|||
@click="navigateTo('supervision')" |
|||
> |
|||
<template #title> |
|||
<span style="font-size: 0.5rem; font-weight: bold;">移动监督端</span> |
|||
</template> |
|||
</van-cell> |
|||
</div> |
|||
</van-popup> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
import {reactive, ref, onMounted} from 'vue'; |
|||
import {enforcementLogin, enforcementLoginByPassword} from '../../api/enforcement'; |
|||
import CryptoJS from "crypto-js"; |
|||
import {showFailToast} from 'vant'; |
|||
import 'vant/es/toast/style'; |
|||
|
|||
const {useCommon} = $globalStore; |
|||
const router = useRouter(); |
|||
const route = useRoute(); |
|||
const loginParam = reactive({ |
|||
secretName: "", |
|||
secretKey: "" |
|||
}) |
|||
|
|||
const showTestPicker = ref(false); |
|||
const showNavigatePicker = ref(false); |
|||
|
|||
const navigateTo = (target) => { |
|||
showNavigatePicker.value = false; |
|||
if (target === 'enforcement') { |
|||
router.push({name: "enforcementHome"}); |
|||
} else if (target === 'supervision') { |
|||
router.push('/enforcement/enforcementRecord'); |
|||
} |
|||
}; |
|||
const testUsers = [ |
|||
{loginUserId:"0001002",account: 'cuifengyuan', name: '', password: 'szsf@zfjd',bureauUnitName:""} |
|||
]; |
|||
|
|||
const selectTestUser = (item) => { |
|||
loginParam.secretName = item.account; |
|||
loginParam.secretKey = item.password; |
|||
showTestPicker.value = false; |
|||
// 直接触发登录 |
|||
doLogin(item.account, item.password); |
|||
} |
|||
const doLogin = (secretName, secretKey) => { |
|||
const encryptedKey = Encrypt(secretKey); |
|||
enforcementLoginByPassword({"secretName": secretName, "secretKey": encryptedKey}, response => { |
|||
if (response.code === 200) { |
|||
// 验证关键组织信息 |
|||
if (!response.data.deptId) { |
|||
showFailToast("该用户未关联部门，无法登录"); |
|||
return; |
|||
} |
|||
if (!response.data.organId) { |
|||
showFailToast("该用户未关联认证机构，无法登录"); |
|||
return; |
|||
} |
|||
if (!response.data.bureauUnitId) { |
|||
showFailToast("该用户未关联执法单位，无法登录"); |
|||
return; |
|||
} |
|||
// 执法端登录成功 → 赋值用户基本信息 |
|||
useCommon.SET_USER_PHONENUMBER(response.data.phonenumber || ""); |
|||
useCommon.SET_USER_ID(response.data.userId); |
|||
useCommon.SET_USER_NAME(response.data.userName || ""); |
|||
useCommon.SET_NICK_NAME(response.data.nickName || ""); |
|||
useCommon.SET_TOKEN(response.data.token); |
|||
useCommon.SET_DEPT_ID(response.data.deptId); |
|||
useCommon.SET_DEPT_NAME(response.data.deptName || ""); |
|||
useCommon.SET_ORGAN_ID(response.data.organId); |
|||
useCommon.SET_ORGAN_NAME(response.data.organName || ""); |
|||
useCommon.SET_BUREAU_UNIT_ID(response.data.bureauUnitId); |
|||
useCommon.SET_BUREAU_UNIT_NAME(response.data.bureauUnitName || ""); |
|||
console.log("bureauUnitName", response.data.bureauUnitName); |
|||
console.log("enforcement login success", useCommon.userId); |
|||
showNavigatePicker.value = true; |
|||
} else { |
|||
showFailToast(response.msg || "登录失败"); |
|||
} |
|||
}, error => { |
|||
showFailToast(error?.msg || "登录失败，请检查网络"); |
|||
}) |
|||
}; |
|||
|
|||
const onSubmit = async () => { |
|||
doLogin(loginParam.secretName, loginParam.secretKey); |
|||
}; |
|||
|
|||
// 检测URL中的loginUserId参数，自动登录对应测试用户 |
|||
onMounted(() => { |
|||
const loginUserId = route.query.loginUserId; |
|||
if (loginUserId) { |
|||
const targetUser = testUsers.find(u => u.loginUserId === loginUserId); |
|||
if (targetUser) { |
|||
loginParam.secretName = targetUser.account; |
|||
loginParam.secretKey = targetUser.password; |
|||
doLogin(targetUser.account, targetUser.password); |
|||
} else { |
|||
showFailToast(`未找到loginUserId为${loginUserId}的测试用户`); |
|||
} |
|||
} |
|||
}); |
|||
|
|||
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; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.test-enterprise-list { |
|||
max-height: 60vh; |
|||
overflow-y: auto; |
|||
padding: 0.2rem; |
|||
} |
|||
|
|||
.navigate-title { |
|||
text-align: center; |
|||
font-size: 0.4rem; |
|||
font-weight: 600; |
|||
padding: 0.2rem 0 0.3rem; |
|||
} |
|||
|
|||
.navigate-list { |
|||
padding: 0.2rem; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue