EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/loginByV1System.vue

<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:"d76453e3-6945-4b02-9943-efbd0e8aee9e",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;
            }
            // 市认证机构/执法单位非登录硬门槛，无映射时允许登录并继续写 token
            // 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 || "");
            useCommon.SET_HAS_LAW(response.data.lawOfficer || "");
            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>