庄锐波
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