EnforcementCode-2.0/zdxt-web-client/zdxt-enforcement-code-app/src/views/enforcement/login.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;">
                <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"
                        :label="'账号：' + item.account"
                        is-link
                        @click="selectTestUser(item)"
                    />
                </div>
            </van-action-sheet>
        </div>
    </div>
</template>
<script setup>
    import {reactive, ref} from 'vue';
    import {enforcementLogin} from '../../api/enforcement';
    import CryptoJS from "crypto-js";
    import {showFailToast} from 'vant';
    import 'vant/es/toast/style';

    const {useCommon} = $globalStore;
    const router = useRouter();
    const loginParam = reactive({
        secretName: "",
        secretKey: ""
    })

    const showTestPicker = ref(false);
    const testUsers = [
        { account: 'admin', name: '管理员', password: 'szsf@zfjd' },
    ];

    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);
        enforcementLogin({"secretName": secretName, "secretKey": encryptedKey}, response => {
            if (response.code === 200) {
                // 执法端登录成功 → 赋值用户基本信息
                useCommon.SET_USER_PHONENUMBER(response.data.phonenumber.toString());
                useCommon.SET_USER_ID(response.data.userId);
                useCommon.SET_TOKEN(response.data.token);
                useCommon.SET_ORG_ID(response.data.deptId || "");
                console.log("enforcement login success", useCommon.userId);
                router.push({name: "enforcementHome"});
            } else {
                showFailToast(response.msg || "登录失败");
            }
        }, error => {
            showFailToast(error?.msg || "登录失败，请检查网络");
        })
    };

    const onSubmit = async () => {
        doLogin(loginParam.secretName, loginParam.secretKey);
    };

    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;
    }
</style>