EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/auth/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>
            <router-link to="/enterprise/register" class="link">还没有账号,去注册</router-link>
            <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 testEnterprises"
                        :key="index"
                        :title="item.name"
                        :label="'账号：' + item.account"
                        is-link
                        @click="selectTestEnterprise(item)"
                    />
                </div>
            </van-action-sheet>
        </div>
    </div>
</template>
<script setup>
    import {reactive, ref} from 'vue';
    import {enterpriseLogin, getUserRefEnterpriseInfo} from '../../../api/enterprise';
    import JSEncrypt from 'jsencrypt';
    import {showFailToast, showToast} from 'vant';
    import 'vant/es/toast/style';

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

    const showTestPicker = ref(false);
    const testEnterprises = [];

    const selectTestEnterprise = (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);
        enterpriseLogin({"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);
                //debugger;
                // 暂时不调用获取关联企业信息接口
                // getUserRefEnterpriseInfo({userId: response.data.userId}, res => {
                //     console.log("getUserRefEnterpriseInfo", res);
                //     if (res.code === 200 && res.data && Array.isArray(res.data) && res.data.length > 0) {
                //         const firstEnterprise = res.data[0];
                //         useCommon.SET_USER_ENTERPRISE_NUMBER(firstEnterprise.enterpriseNumber || "未找到企业信用代码");
                //         useCommon.SET_USER_ENTERPRISE_NAME(firstEnterprise.enterpriseName || "未找到企业名称");
                //         useCommon.SET_USER_ENTERPRISE_ID(firstEnterprise.enterpriseId || "未找到企业ID");
                //         if (res.data.length > 1) {
                //             showToast('您关联了多个企业，已默认选择企业：' + (firstEnterprise.enterpriseName || ''));
                //         }
                //     }
                //     router.push({name: "enterpriseHome"});
                // }, () => {
                //     // 获取企业信息失败也照常跳转
                //     showFailToast("获取企业信息失败!");
                // });
                router.push({name: "enterpriseHome"});
            } else {
                showFailToast(response.msg || "登录失败");
            }
        }, error => {
            showFailToast(error?.msg || "登录失败，请检查网络");
        })
    };

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

    const Encrypt = (passWord) => {
        const encryptor = new JSEncrypt();
        encryptor.setPublicKey(import.meta.env.VITE_APP_RSA_PUBLIC_KEY);
        return encryptor.encrypt(passWord);
    }
</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;
            }
        }

        .link {
            font-size: 0.32rem;
            color: #069;
            float: right;
            margin-right: 0.4rem;
        }
    }
</style>