MTP2.0_WEB/src/views/account/login.vue

<template>
    <div class="login">
        <a-row type="flex" justify="center" align="middle">
            <a-col>
                <div class="login-background">
                    <div id="img">
                        <!-- <img src="./logo.png"
                        alt="" />-->
                    </div>
                </div>
                <div class="login-content">
                    <p>账号登录</p>
                    <a-form ref="formDom" :model="form" :rules="rules">
                        <a-form-item name="account">
                            <a-input placeholder="用户名/账号/手机号" v-model:value="form.account">
                                <template #prefix>
                                    <img src="@/assets/images/user.png" alt />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item name="password" class="mb20">
                            <a-input
                                @keyup.enter="loginAction"
                                placeholder="请输入您的登录密码"
                                type="password"
                                v-model:value="form.password"
                            >
                                <template #prefix>
                                    <img src="@/assets/images/password.png" alt />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item>
                            <div class="login-remember-password">
                                <a-checkbox v-model:checked="form.isRemember">记住账号</a-checkbox>
                                <!-- <router-link to="/resetPassword">忘记密码?</router-link> -->
                            </div>
                        </a-form-item>
                        <!-- <a-form-item>
              <div style="text-align:left">
                <a-checkbox v-model:checked="form.isRead">
                  我已阅读并同意
                </a-checkbox>
                <router-link to="/resetPassword">《用户协议》</router-link>
              </div>
                        </a-form-item>-->
                        <a-form-item class="mt20">
                            <a-button
                                @click="loginAction"
                                :loading="loading"
                                :disabled="goHomeloading"
                            >登录</a-button>
                        </a-form-item>
                    </a-form>
                </div>
            </a-col>
        </a-row>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRaw, onMounted } from 'vue';
import { globalDataRefresh } from '@/services/bus/index';
import { login } from '@/services/bus/login';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import { localStorageUtil } from '@/utils/storage/index';
import { initData, setLoadComplete } from '@/common/methods';
import eventBus from '@/utils/eventBus/index';
import { QWebChannel } from '@/utils/qt/qwebchannel.js';
import { qtAction } from './qt';
import { serviceURL } from '@/services/request/serviceURL';

interface Form {
    account: string;
    password: string;
    isRemember: boolean;
    isRead: boolean;
}

const initForm: Form = {
    account: '',
    password: '',
    isRemember: false,
    isRead: false,
};

function setRememberAccount(): void {
    const account: string = localStorageUtil.getItem('loginAccount');
    if (account) {
        Object.assign(initForm, { account, isRemember: true });
    }
}

// declare global {
//     interface Window {
//         qt: {
//             webChannelTransport: {
//                 send: (payload: any) => void;
//                 onmessage: (payload: any) => void;
//             };
//         };
//     }
// }
// function qtAction() {
//     // 获取 与qt交互实例
//     let qtWebChannel: any = null;
//     const webChannelTransport = window.qt?.webChannelTransport;
//     if (webChannelTransport) {
//         new QWebChannel(webChannelTransport, (channel: any) => {
//             // all published objects are available in channel.objects under
//             // the identifier set in their attached WebChannel.id property
//             qtWebChannel = channel.objects.bridge;
//             console.log('qtWebChannel', qtWebChannel);
//         });
//     }

//     function getQtInfo(): Promise<Uint8Array[]> {
//         if (qtWebChannel) {
//             return qtWebChannel.getSystemInfo().then((res: any) => {
//                 return base64ToUint8Array(res);
//             });
//         } else {
//             console.warn('qtWebChannel is null');
//             return Promise.resolve([]);
//         }
//     }
//     return { getQtInfo };
// }

// function base64ToUint8Array(base64String: string) {
//     let padding = '='.repeat((4 - (base64String.length % 4)) % 4);
//     let base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/');

//     let rawData = window.atob(base64);
//     let outputArray = new Uint8Array(rawData.length);

//     for (var i = 0; i < rawData.length; ++i) {
//         outputArray[i] = rawData.charCodeAt(i);
//     }
//     return outputArray;
// }

export default defineComponent({
    name: 'login',
    components: {},
    setup() {
        function setLogo() {
            const img = document.querySelector('#logo_img') || document.createElement('img');
            const obj = {
                id: 'logo_img',
                src: './wrLogo.png',
            };
            Object.assign(img, obj);
            document.querySelector('#img')?.appendChild(img);
        }
        onMounted(() => {
            setLogo();
        });

        const loading = ref<boolean>(false);
        const form = reactive(initForm);
        const rules = {
            account: [{ required: true, message: '请输入手机号!', trigger: 'change', type: 'string' }],
            password: [{ required: true, message: '请输入密码！', trigger: 'change', type: 'string' }],
        };
        const formDom: any = ref(null);
        const router = useRouter();
        form.password = '';
        // setRememberAccount();
        // qt
        const { getQtInfo } = qtAction();
        function loginAction() {
            formDom.value.validate().then(() => {
                loading.value = true;
                const { account, password } = toRaw(form);
                setLoadComplete(false);
                getQtInfo().then((arr) => {
                    login(account, password, arr)
                        .then((value: any) => {
                            setLoadComplete(true);
                            const { account, isRemember } = toRaw(form);
                            if (isRemember) {
                                localStorageUtil.setItem('loginAccount', account); // 缓存登录账号
                            }
                            eventBus.$emit('loginSuccess', true);
                            router.push({ name: 'home' });
                            loading.value = false;
                        })
                        .catch((err: any) => {
                            loading.value = false;
                            err && message.error(err);
                        });
                });
            });
        }
        // 直接前往首页
        const goHomeloading = ref<boolean>(false);
        const goHome = () => {
            goHomeloading.value = true;
            setLoadComplete(false);
            globalDataRefresh()
                .then((res) => {
                    setLoadComplete(true);
                    goHomeloading.value = false;
                    router.push({ name: 'home' });
                })
                .catch((err) => {
                    console.error(err);
                    goHomeloading.value = false;
                });
        };
        return { form, loginAction, rules, formDom, loading, goHomeloading, goHome };
    },
});
</script>

<style lang="less" scoped>
.login {
    width: 100%;
    height: 100%;
    background: url(../../assets/images/loginBackground.png) no-repeat scroll 0 0;
    background-size: 100% 100%;
}
.ant-row {
    height: 100%;
}
.ant-col {
    width: 690px;
    height: 450px;
    background: @m-white0;
    border-radius: 5px;
    box-shadow: 0px 5px 10px 0px rgba(18, 22, 24, 0.18);
    .flex();
}
.login-background {
    width: 275px;
    background: url('../../assets/images/logoBackground.png') no-repeat scroll 0 0;
    background-size: cover;
    div {
        margin-top: 120px;
        // margin-left: 69.5px; // 企业风管logo
        margin-left: 33px; // 云融
        width: 136px;
        height: 136px;
        min-width: 136px;
        min-height: 136px;
        position: relative;
        img {
            max-width: 100%;
            max-height: 100%;
            .position(absolute, 0%, auto, auto, 50%);
            z-index: 10;
            transform: translate(-50%, -50%);
        }
    }

    // .ant-btn {
    //     background: @cyan-color2;
    //     border-color: @cyan-color2;
    //     border-radius: 10px;
    //     font-size: 14px;
    //     color: @white;
    //     margin-top: 90px;
    //     margin-left: -60px;
    // }
}
.login-content {
    flex: 1;
    padding-left: 53px;
    padding-right: 53px;
    min-width: 405px;
    ::v-deep(.ant-form) {
        margin-top: 20px;
        .ant-form-item-control-wrapper {
            width: 100%;
        }
        .ant-form-item-control.has-error {
            .ant-form-item-children {
                .ant-input-affix-wrapper {
                    .ant-input {
                        background: transparent !important;
                    }
                }
            }
            .ant-form-explain {
                text-align: left;
                padding-left: 24px;
            }
        }
        .ant-input {
            border: 0;
            border-radius: 0;
            width: 154px;
            height: 40px;
            font-size: 16px;
            font-family: Adobe Heiti Std;
        }
        .ant-input-affix-wrapper {
            box-shadow: none;
            border: none;
            border-radius: 0;
            border-bottom: 1px solid @m-grey3;
            padding: 0;
        }
        .ant-input-affix-wrapper:hover {
            border-bottom: 1px solid @m-blue1;
        }
    }
    .mt20 {
        margin-top: 20px;
    }
    .mb20 {
        margin-bottom: 20px;
    }
    .ant-form-item,
    .ant-form label {
        font-size: 16px;
    }
    .ant-form-item {
        margin-bottom: 10px;
    }
    p {
        font-size: 26px;
        text-align: left;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: @m-grey4;
        margin-top: 40px;
        margin-bottom: 10px;
    }
    img {
        width: 19px;
        height: 21px;
    }
    .login-remember-password {
        .flex();
        justify-content: space-between;
        a {
            color: @m-grey4;
        }
    }

    .ant-btn {
        width: 100%;
        font-size: 16px;
        background: @m-blue1;
        border-radius: 3px;
        color: @m-white0;
        height: 50px;
        font-weight: 500;
        line-height: 43px;
    }
}
</style>