<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="UTF-8">
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimun-scale=1.0,maximum-scale=1.0,user-scalable=no">

    <title>登录</title>
    <!-- 引入 Element Plus 样式 -->
<!--    <link rel="stylesheet" href="css/index.css">-->
    <link rel="stylesheet" href="https://sso.cquet.edu.cn/staticfile/css/styles/vab.css?v=0.0.1">
<!--    <script src="https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js"></script>-->
<!--    <script src="js/login/vconsole.js"></script>-->
    <!-- 引入 Vue 3 -->
<!--    <script src="https://unpkg.com/vue@next"></script>-->
    <script src="https://sso.cquet.edu.cn/staticfile/js/login/vue.global.js"></script>
    <script src="https://sso.cquet.edu.cn/staticfile/js/login/element-plus.js"></script>
    <script src="https://sso.cquet.edu.cn/staticfile/js/login/axios.min.js"></script>
    <script type="text/javascript" src="https://sso.cquet.edu.cn/staticfile/js/login/crypto-js.js"></script>
    <script type="text/javascript" src="https://sso.cquet.edu.cn/staticfile/js/login/js-cookie.js"></script>
    <script type="text/javascript" src="https://sso.cquet.edu.cn/staticfile/js/login/Math.uuid.js"></script>
    <link rel="stylesheet" href="https://sso.cquet.edu.cn/staticfile/css/login_vue.css?v=0.0.1"/>
    <link rel="stylesheet" href="https://sso.cquet.edu.cn/staticfile/css/drag.css?v=0.0.1"/>
    <style>


        .login-container .vertical-line {
            border-left: 1px solid #E1E6ED; /* 竖线的样式 */
        }

        .login-container .myAside {
            /* 样式规则 */
        }

        .login-container .myMain {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            flex-direction: column;
        }

        .login-container .myCard {
            background: white!important;
            width: 800px;
            overflow-y: auto;
        }



        .login-container .el-tabs__item {
            font-size: 22px; /* 自定义字体大小 */
            color: #606266; /* 默认颜色 */
            padding: 0 20px; /* 增加水平内边距 */
            font-weight: 400;
        }

        .login-container .el-tabs__item.is-active {
            color: #8254AB; /* 自定义选中的颜色 */
        }

        .login-container .el-tabs__active-bar {
            background-color: #8254AB; /* 自定义底部条的颜色，与选中的颜色保持一致 */
        }

        /* 可选：自定义悬停效果 */
        .login-container .el-tabs__item:hover {
            color: #8254AB; /* 悬停时的颜色 */
        }

        /* 可选：调整标签之间的间距 */
        /*.login-container .el-tabs__nav-wrap {
            padding-bottom: 5px;
        }*/



        .login-container .el-card__body {
            padding-top: 0px;
            padding-bottom: 0;
        }

        .login-container .login-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .login-container .form-group {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }





        .login-container .el-input__inner:hover {
            border-color: rgb(35, 79, 151);
        }

        .login-container .el-input__inner:focus {
            border-color: rgb(35, 79, 151);
        }

        .login-container .el-icon-search {
            color: #2a74e4;
            font-size: 16px;
        }

        .login-container .form-input:focus {
            outline: none;
            border-color: #8254AB;
            box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.1);
        }

        .login-container .form-input::placeholder {
            color: #909399;
        }

        .login-container .options-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .login-container .checkbox-label {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }

        .login-container .checkbox-input {
            width: 16px;
            height: 16px;
            accent-color: #8254AB;
        }

        .login-container .checkbox-text {
            font-size: 14px;
            color: #606266;
        }

        .login-container .links {
            display: flex;
            gap: 16px;
        }

        .login-container .link {
            font-size: 14px;
            color: #8254AB;
            text-decoration: none;
            transition: color 0.3s;
        }

        .login-container .link:hover {
            color: #8254AB;
        }

        .login-container .login-button {
            height: 44px;
            background-color: #8254AB;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .login-container .login-button:hover {
            background-color: #8254AB;
        }

        .login-container .help-center {
            text-align: center;
            font-size: 14px;
            color: #606266;
        }

        .login-container .help-text {
            margin-right: 4px;
        }

        .login-container .help-link {
            color: #801E14;
            text-decoration: none;
        }

        .login-container .help-link:hover {
            color: #801E14;
        }

        .login-container .authLogo-container {
            height: 80px;
            margin-bottom: 40px;
        }



        /* 微信登录相关 */
        .login-container .wechat-login {
            max-width: 320px;
            margin: 0 auto;
            padding: 24px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
        }

        .login-container .logo-container {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .login-container .wechat-logo {
            width: 30px;
            height: 30px;
            object-fit: contain;
        }

        .login-container .logo-text {
            font-size: 22px;
            font-weight: 500;
        }

        .login-container .qr-container {
            display: flex;
            margin-top: 6px;
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }

        .login-container .qr-container-enter {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }

        .login-container .qr-code {
            width: 200px;
            height: 180px;
            border-radius: 8px;
        }

        .login-container .qr-text {
            margin-top: 18px;
            font-size: 16px;
            color: #666;
            text-align: center;
        }

        .login-container .more-options {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }



        .login-container .button-group {
            display: flex;
            gap: 14px;
            width: 100%;
            justify-content: center;
        }

        .login-container .wx-check-button {
            background: white;
            width: 84.62px;
            height: 36px;
            border-radius: 17px;
            opacity: 1;
            box-sizing: border-box;
            color: #29293A;
            border: 1px solid rgba(83, 83, 106, 0.4);
        }

        /*.login-container .login-button:hover {*/
        /*    background: #E1E6ED;*/
        /*    border-color: #919293;*/
        /*}*/

        .login-container .login-button:active {
            transform: translateY(1px);
        }

        .login-container .scanChangeBtn-text {
            font-size: 16px;
            font-weight: 700;
            /*color: #29293A !important;*/
        }

        /* 企业微信 */
        .login-container .enterWx-login {
            max-width: 320px;
            margin: 0 auto;
            padding: 24px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
        }

        .login-container .enterWx-title {
            float: left;
            position: absolute;
            z-index: 10;
            width: 210px;
            align-items: center;
            height: 50px;
            /*margin-left: 20px;*/
            background-color: white;
        }

        .login-container .enterWx-login .logo-container {
            display: flex;
            align-items: center;
            gap: 8px;

        }

        .login-container .enterWx-login .wechat-logo {
            width: 30px;
            height: 30px;
            object-fit: contain;
        }

        .login-container .enterWx-login .logo-text {
            font-size: 22px;
            font-weight: 500;
        }

        .login-container .enterWx-login .qr-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }

        .login-container .enterWx-login .qr-code {
            height: 240px;
            border: 1px solid #E5E7EB;
        }



        .qrcode {
            margin-top: 10px;
            text-align: center;
        }
        .qrcode   img {
                width: 250px;
                height: 250px;
            }
        .qrcode .desc {
                font-size: 16px;
                font-weight: bold;
                margin-top: 10px;
                margin-bottom: 10px;
                color: #07C160;
            }


        .qrcodeInputBody {
            text-align: center;
        }
        .qrcodeInputBody   .qrcodeInput {
                margin-top: 30px;
                margin-bottom: 10px;
            }
        .qrcodeInputBody   .qrcodeInputLogo {
                width: 200px;
            }


    </style>

</head>
<body>
<div id="app">
    <div  class="index_phone_bg"></div>
    <div  class="index_phone_bg-css"></div>

    <div class="login-container">
        <el-container class="login-el-container">
            <img src="https://sso.cquet.edu.cn/staticfile/images/login_images/schoolLogo.svg" class="schoolLogo-container">
            <el-aside width="37%" class="left-aside">
                <img alt="" class="" style="width: 96%;height: 100%;"
                     src="https://sso.cquet.edu.cn/staticfile/images/login_images/cqcet/index_bg.png"/>
            </el-aside>

            <el-main class="myMain">
                <img src="https://sso.cquet.edu.cn/staticfile/images/login_images/authLogo.svg" class="authLogo-container">
                <el-card class="myCard">
                    <div class="authLogo-div">
                        <img src="https://sso.cquet.edu.cn/staticfile/images/login_images/authLogo.svg"
                             class="authLogo-container-phone">
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="8" class="left-login-col" v-if="showScanCode"
                                style="border-right: 1.5px solid #e4e7ed;">
                            <div class="wechat-login"
                                 v-show="scanType == 'WX' && loginData.loginType.indexOf('wx')!=-1">
                                <!-- 微信 Logo -->
                                <div class="logo-container">
                                    <img src="https://sso.cquet.edu.cn/staticfile/images/login_images/weChat.svg" alt="WeChat Logo" class="wechat-logo"/>
                                    <span class="logo-text">微信登录</span>
                                </div>

                                <!-- 二维码 -->
                                <div class="qr-container">
                                    <div class="qr-code qr-code-flex">
                                        <iframe id="wxIframe"
                                                sandbox="allow-scripts allow-top-navigation allow-same-origin"
                                                scrolling="no" width="200" height="200" v-if="scanType == 'WX'"
                                                frameBorder="0" allowTransparency="true" :src="ifreamUrl"></iframe>
                                    </div>
                                    <p class="qr-text"><span class="qr-text" style="color: #07C160">微信APP</span><span
                                            style="color: #9191A1">扫描二维码登录</span></p>
                                </div>

                                <!-- 更多登录方式 -->
                                <div class="more-options">
                                    <div class="straight-div">
                                        <div class="straightLine"></div>
                                        <p class="options-text"> 更多登录方式 </p>
                                        <div class="straightLine"></div>
                                    </div>

                                    <div class="button-group">
                                        <button class="wx-check-button" @click="changeScanType('WX')"
                                                v-if="loginData.loginType.indexOf('wx')!=-1">
                                            <span class="scanChangeBtn-text"
                                              :style="{color: scanType=='WX'?'#8254AB':'#29293A'}">微信</span>
                                        </button>
                                        <button class="wx-check-button" @click="changeScanType('ENTERWX')"
                                                v-if="loginData.loginType.indexOf('enter')!=-1">
                                            <span class="scanChangeBtn-text"
                                                  :style="{color: scanType=='ENTERWX'?'#8254AB':'#29293A'}">企业微信</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="enterWx-login"
                                 v-show="scanType == 'ENTERWX' && loginData.loginType.indexOf('enter')!=-1">
                                <!-- 企业微信 Logo -->
                                <div class="logo-container enterWx-title ">
<!--                  <span style="margin-left: 40px">-->
                  <img src="https://sso.cquet.edu.cn/staticfile/images/login_images/enterWeChat.svg" alt="WeChat Logo" class="wechat-logo"/>
                  <div class="logo-text">企业微信</div>
                  </span>
                                </div>

                                <!-- 二维码 -->
                                <div class="qr-container" style=" margin-top: -40px !important;">
                                    <iframe id="enterWxIframe" v-if="scanType == 'ENTERWX'"
                                            sandbox="allow-scripts allow-top-navigation allow-same-origin"
                                            scrolling="no" width="200" height="320" frameBorder="0"
                                            allowTransparency="true"
                                            :src="enterIfreamUrl"></iframe>
                                    <p class="qr-text" style="width: 250px"><span class="qr-text"
                                                                                  style="color: #2386EE">企业微信APP</span><span
                                            style="color: #9191A1">扫描二维码登录</span></p>
                                </div>

                                <!-- 更多登录方式 -->
                                <div class="more-options">
                                    <div class="straight-div">
                                        <div class="straightLine"></div>
                                        <p class="options-text"> 更多登录方式 </p>
                                        <div class="straightLine"></div>
                                    </div>

                                    <div class="button-group">
                                        <button class="wx-check-button" @click="changeScanType('WX')"
                                                v-if="loginData.loginType.indexOf('wx')!=-1">
                                            <span class="scanChangeBtn-text"
                                                  :style="{color: scanType=='WX'?'#8254AB':'#29293A'}">微信</span>
                                        </button>
                                        <button class="wx-check-button" @click="changeScanType('ENTERWX')"
                                                v-if="loginData.loginType.indexOf('enter')!=-1">
                                            <span class="scanChangeBtn-text"
                                                  :style="{color: scanType=='ENTERWX'?'#8254AB':'#29293A'}">企业微信</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="colWidth" class="right-login-col" >
                            <el-tabs v-model="activeName" class="myTabs">
                                <el-tab-pane label="密码" name="password"
                                             v-if="loginData.loginType.indexOf('password')!=-1">
                                    <el-form ref="formRef" class="login-form" v-show="activeName==='password'"
                                             label-position="left" :model="form" @submit.prevent>
                                        <div class="form-group">
                                            <label class="form-label">账号</label>
                                            <el-input
                                                    v-model="form.username"
                                                    type="text"
                                                    @change="checkCodeStatus"
                                                    class="form-input"
                                                    placeholder="请输入账号"
                                            />
                                        </div>

                                        <!-- Password Input -->
                                        <div class="form-group">
                                            <label class="form-label">密码</label>
                                            <el-input
                                                    v-model="form.password"
                                                    show-password
                                                    type="password"

                                                    class="form-input"
                                                    placeholder="请输入登录密码"
                                            />
                                        </div>
                                        <div class="form-group" v-if="codeStatus">
                                            <label class="form-label">人机校验</label>
                                            <div class="drag" ref="dragDiv">
                                                <div class="drag_bg" ref="bgRef"></div>
                                                <div class="drag_text" ref="textRef">
                                                    {{confirmWords}}
                                                </div>
                                                <div ref="moveDiv"
                                                     class="handler"
                                                     :class="{'handler-success': confirmSuccess}"
                                                     @mousedown="mouseDownFn($event)"
                                                     @touchstart="mouseDownFn($event)"
                                                >


                                                    <img src="https://sso.cquet.edu.cn/staticfile/images/dragImg/slideIcon.png" alt="" class="slide-icon" v-if="!confirmSuccess" />
                                                    <img src="https://sso.cquet.edu.cn/staticfile/images/dragImg/slideSuccessIcon.png" alt="" class="slidesuccess-icon" v-else/>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Remember Account & Links -->
                                        <div class="options-row">
                                            <label class="checkbox-label">
                                                <input
                                                        type="checkbox"
                                                        v-model="form.remember"
                                                        class="checkbox-input"
                                                />
                                                <span class="checkbox-text">记住账号</span>
                                            </label>
                                            <div class="links">
                                                <a @click="gotoUnfreezing" class="link">申请解冻</a>
                                                <div class="vertical-line"></div>
                                                <a @click="gotoRePassword" class="link"
                                                   v-if="loginData.loginType.indexOf('password')!=-1">忘记密码</a>
                                            </div>
                                        </div>

                                        <!-- Login Button -->
                                        <button type="button" @click="LoginByPassword" class="login-button">
                                            登录
                                        </button>

                                        <!-- Help Center Link -->
                                        <div class="help-center">
                                            <img src="https://sso.cquet.edu.cn/staticfile/images/login_images/information.png"
                                                 class="information-icon">
                                             <div class="help-text">  登录遇到问题？进入</div>
                                            <a href="https://ossc.cquet.edu.cn/static/question.html" class="help-link">帮助中心</a>
                                        </div>
                                    </el-form>
                                </el-tab-pane>
                                <el-tab-pane label="验证码" name="phone"
                                             v-if="loginData.loginType.indexOf('phone')!=-1 ">
                                    <el-form ref="formRef" v-show="activeName==='phone'" class="login-form"
                                             label-position="left" :model="form">
                                        <div class="form-group">
                                            <label class="form-label">账号</label>
                                            <el-input
                                                    v-model="form.loginUserCode"
                                                    type="text"
                                                    class="form-input"
                                                    placeholder="请输入账号"

                                            />
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">人机校验</label>
                                            <div class="drag" ref="dragDivPhone">
                                                <div class="drag_bg" ref="bgRefPhone"></div>
                                                <div class="drag_text" ref="textRefPhone">
                                                    {{confirmPhoneWords}}
                                                </div>
                                                <div ref="moveDivPhone"
                                                     class="handler"
                                                     :class="{'handler-success': confirmPhoneSuccess}"
                                                     @mousedown="mouseDownPhoneFn($event)"
                                                     @touchstart="mouseDownPhoneFn($event)"
                                                >
                                                    <img src="https://sso.cquet.edu.cn/staticfile/images/dragImg/slideIcon.png" alt="" class="slide-icon" v-if="!confirmPhoneSuccess" />
                                                    <img src="https://sso.cquet.edu.cn/staticfile/images/dragImg/slideSuccessIcon.png" alt="" class="slidesuccess-icon" v-else/>

                                                </div>
                                            </div>
                                        </div>
                                        <!-- Password Input -->
                                        <div class="form-group">
                                            <label class="form-label">验证码</label>
                                            <el-row>
                                                <el-col :span="15">
                                                    <el-input
                                                            v-model="form.code"
                                                            type="text"
                                                            class="form-input"
                                                            placeholder="请输入验证码"
                                                    />
                                                </el-col>
                                                <el-col :span="1" class="code-margin-col"></el-col>
                                                <el-col :span="8" class="code-buttton-col">
                                                    <el-button class="code-buttton" style=""
                                                               v-if="isSend"
                                                               @click="resendCode">获取验证码
                                                    </el-button>
                                                    <el-button disabled class="code-buttton-disabled" style="height: 46px;width: 100%" v-else>
                                                        ({{ remainingTime }})重新发送
                                                    </el-button>
                                                </el-col>
                                            </el-row>
                                        </div>
                                        <!-- Remember Account & Links -->
                                        <div class="options-row">
                                            <label class="checkbox-label">

                                            </label>
                                            <div class="links">
                                                <a @click="gotoUnfreezing" class="link">申请解冻</a>
                                                <div class="vertical-line"></div>
                                                <a @click="gotoRePassword" class="link"  v-if="loginData.loginType.indexOf('password')!=-1">忘记密码</a>
                                            </div>
                                        </div>

                                        <!-- Login Button -->
                                        <button type="button" @click="LoginByPhone" class="login-button">
                                            登录
                                        </button>

                                        <!-- Help Center Link -->

                                        <div class="help-center">
                                            <img src="https://sso.cquet.edu.cn/staticfile/images/login_images/information.png"
                                                 class="information-icon">
                                            <div class="help-text">  登录遇到问题？进入</div>
                                            <a href="https://ossc.cquet.edu.cn/static/question.html" class="help-link">帮助中心</a>
                                        </div>
                                    </el-form>
                                </el-tab-pane>
                                <el-tab-pane label="人脸识别" name="face"
                                             v-if="loginData.loginType.indexOf('face')!=-1">

                                    <div class="form-group" >
                                        <label class="form-label">账号</label>
                                        <el-row>
                                            <el-col :span="15">
                                                <el-input
                                                        v-model="form.username"
                                                        type="text"
                                                        class="form-input"
                                                        placeholder="请输入账号"
                                                        @change="createLivenessQrcode"
                                                    ></el-input>
                                            </el-col>
                                            <el-col :span="1" class="code-margin-col"></el-col>
                                            <el-col :span="8" class="code-buttton-col">
                                                <el-button class="code-buttton" style=""
                                                           @click="createLivenessQrcode">{{faceButtonText}}
                                                </el-button>
                                                <template #suffix>
                                                    <el-button type="text" @click="createLivenessQrcode">
                                                        <el-icon><qr-code /></el-icon>
                                                    </el-button>
                                                </template>
                                            </el-col>
                                        </el-row>
                                        </el-input>
                                    </div>
                                    <div class="qrcode" v-if="livenessQrcodeImageVisible">
                                        <img :src="qrcodeBase64" alt="人脸活体二维码">
                                        <div class="desc">{{ desc }}</div>
                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                        </el-col>
                    </el-row>
                </el-card>
            </el-main>
        </el-container>
    </div>
    <footer class="site-footer">
        <div class="footer-content">
            <!-- Main Info Row -->
            <div class="info-row">
                <span class="info-item">地址：重庆大学城重庆电子科技职业大学</span>
                <span class="divider">|</span>
                <span class="info-item">邮编：401331</span>
                <span class="divider">|</span>
                <span class="info-item">平台咨询：023-65926001</span>
                <span class="divider">|</span>
                <span class="info-item">版权所有© 重庆电子科技职业大学</span>
                <span class="divider">|</span>
                <span class="info-item">渝ICP备2003499号-1</span>
                <span class="divider">|</span>
                <span class="info-item">
          <img src="https://sso.cquet.edu.cn/staticfile/images/login_images/cqcet/publicSafe.png" alt="公安备案图标" class="police-icon"/>
          公安备案号：50010602500133
        </span>
            </div>

            <!-- Browser Support Row -->
            <div class="browser-support">
                建议使用谷歌、Edge、360极速、火狐浏览器
            </div>
        </div>
    </footer>

    <el-dialog
            class="prompt-win"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            title="防诈骗“十一条”"
            :show-close="false"
            v-model="dialogVisible"
            :before-close="handleClose">
        <template #title >
            <span class="prompt-win-title">防诈提示</span>
        </template>

        <span class="prompt-top">
            <span class="prompt-top-title">防诈十一条</span><br>
            1.凡是“不要求资质”，且放款前要先交费的网贷平台，都是诈骗!<br>
            2.凡是刷单，都是诈骗!<br>
            3.凡是通过网络交友,诱导你进行投资或赌博的，都是诈骗!<br>
            4.凡是网上购物遇到自称客服说要退款，索要银行卡号和验证码的，都是诈骗!<br>
            5.凡是自称“领导”、“熟人”要求汇款的，都是诈骗!<br>
            6.凡是自称“公检法”让你汇款到“安全账户”的，都是诈骗!<br>
            7.凡是通过社交平台添加微信、QQ拉你入群，让你下载APP或者点击链接进行投资、赌博的，都是诈骗!<br>
            8.凡是通知中奖、领奖，让你先交钱的，都是诈骗!<br>
            9.凡是声称“根据国家相关政策需要配合注销账号，否则影响个人征信的”，都是诈骗!<br>
            10.凡是非官方买卖游戏装备或者游戏币的，都是诈骗!<br>
            11.凡是要求转发验证码的，都是诈骗！<br>
        </span>
        <div class="prompt-button-txt">
            <span class="prompt-button-title">
                牢记“三不一多”原则：
            </span><br>
            未知链接不点击、陌生来电不轻信、个人信息不透漏、 转账汇款多核实
        </div>
        <div class="prompt-button-txt" >
            <span class="prompt-button-title"> 求助电话：
            </span><br>
            校园24小时求助电话：<span style="font-weight: 700;">65926110</span>  <br>
            陈家桥派出所电话：<span style="font-weight: 700;">023-65633179</span>
        </div>
        <template #footer >
<!--      <el-button @click="dialogVisible = false">取 消</el-button>-->
            <div class="dialog-footer">
                <el-button  class="prompt-button" :disabled="promptDisabled"
                            color="#791DB5"
                            @click="dialogVisible = false">{{promptButtonTxt}}</el-button>
            </div>
        </template>
    </el-dialog>
</div>

<script type="module">
    // import {ElLoading} from "../../static/js/login/element-plus";
    // var vConsole = new VConsole();
    const {createApp} = Vue;
    const app = createApp({
        beforeMount() { // 防调试代码
            const block = () => {
                // Vue 2 中没有 useIntervalFn，使用 setInterval 替代
                setInterval(() => {
                    (function () {
                        return false
                    })
                        .constructor('debugger')
                        .call()
                }, 50)
            }
            block()
        },
        data() {
            return {
                form: {
                    username: '',
                    password: '',
                    verificationCode: ''
                },
                loginData: {
                    loginType: `password,phone,face,wx,enter`?`password,phone,face,wx,enter`:'phone,password',
                    checkCodeTime:`60`,
                    wxId:`wxLoginQRcode`,
                    appId:`wxc4d02c130eafe0fd`,
                    wxHref:`https://weixin.cquet.edu.cn/WxQRcodeNew.css`,
                    wxScope:`snsapi_login`,
                    isShow:`true`,
                    // isShow:`true`,
                    key:`43g4WjOq24niSgzZ`,
                    phone:``,
                    username:``,
                    loginBeforeType:`wx`,
                    type:`1`,
                    redirectUrl:`https://ossc.cquet.edu.cn`,

                }, // 登录所需参数
                // type:'WX',// 二维码方式
                codeStatus: false, // 是否出验证码
                isSend: true, // 是否可以发送验证码
                remainingTime: 0, // 发送验证码剩余时间
                defalutTime: 120, // 默认发送验证码剩余时间
                activeName: 'password',
                showScanCode: false,
                ifreamUrl: '',
                enterIfreamUrl: '',
                scanType: 'WX', //扫码类型 WX  ENTERWX 微信和企业微信
                colWidth: 16,
                key: "sdfjk1534NBfviws", // cookie 存储账号密码的时候使用的加密串
                weChatCodeLogin: null,
                timer: null, // 存储定时器的句柄，用于管理 setInterval
                deviceId:"", //验证码的机器码
                deviceCode:"",// 验证码信息，用于后端验证
                confirmWords: '向右滑动验证', // 滑块文字 [ty-reference](1)
                confirmSuccess: false, // 是否已经成功
                beginClientX: 0, // 距离屏幕左端距离
                mouseMoveState: false, // 是否触发拖动状态
                maxWidth: 0, // 拖动最大宽度
                dragDiv: null,
                moveDiv: null,
                bgRef: null,
                textRef: null,
                confirmPhoneWords: '向右滑动验证', // 滑块文字 [ty-reference](1)
                confirmPhoneSuccess: false, // 是否已经成功
                beginPhoneClientX: 0, // 距离屏幕左端距离
                mouseMovePhoneState: false, // 是否触发拖动状态
                maxPhoneWidth: 0, // 拖动最大宽度
                dragDivPhone: null,
                moveDivPhone: null,
                bgRefPhone: null,
                textRefPhone: null,
                authServer : `https://sso.cquet.edu.cn`,
                agentId : `1000126`,
                errorMsg : ``,
               // 人脸信息
                desc:'',
                faceButtonText:'获取二维码',
                livenessQrcodeInputVisible: false,
                livenessQrcodeImageVisible: false,
                qrcodeBase64: null,
                sessionId: null,
                pollingInterval: 2000, // 轮询间隔，单位为毫秒
                // 弹出框
                dialogVisible:false,

                promptDisabled:true,
                promptButtonTxt: "请阅读3s",
            };
        },
        async mounted() {

            // ElementPlus.ElMessage.success(
            //     { message: "登录成功！",duration:0}
            // )

            this.checkLoginConfig();
            // await this.getLoginPageData();

            this.setSrc()
            // this.initCode()
            this.initPage();
            this.initLoginType();




        },
        beforeDestroy() {
            // 确保移除事件监听器以避免内存泄漏
            document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn);
            document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.mouseUpFn);


            document.getElementsByTagName('html')[0].removeEventListener('touchmove', this.mouseMoveFn);
            document.getElementsByTagName('html')[0].removeEventListener('touchend', this.mouseUpFn);

        },
        methods: {
            /** 初始化登录类型，获取字符串第一个类型*/
             initLoginType(){
               let loginType=this.loginData.loginType
                 if(loginType){
                     let loginTypeArr=loginType.split(",")
                     if(loginTypeArr && loginTypeArr.length>0){
                         this.activeName=loginTypeArr[0]

                         this.$nextTick(() => {
                             const htmlElement = document.documentElement;
                             htmlElement.addEventListener('mousemove', this.mouseMoveFn);
                             htmlElement.addEventListener('mouseup', this.mouseUpFn);

                             htmlElement.addEventListener('touchmove', this.mouseMoveFn);
                             htmlElement.addEventListener('touchend', this.mouseUpFn);
                             this.initCode()
                         })



                     }
                 }else {
                     this.activeName='password'
                 }
             },


            // 初始化验证码
            initCode() {
                this.$nextTick(() => {
                    if (this.activeName === 'password') {

                        this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth;
                        this.$refs.textRef.style.color = '#838395';
                        // 添加新的事件监听器
                        // if (!this.confirmSuccess) {
                        if (!this.confirmSuccess && this.codeStatus) {
                            const htmlElement = document.documentElement;
                            htmlElement.addEventListener('mousemove', this.mouseMoveFn);
                            htmlElement.addEventListener('mouseup', this.mouseUpFn);

                            htmlElement.addEventListener('touchmove', this.mouseMoveFn);
                            htmlElement.addEventListener('touchend', this.mouseUpFn);
                        }

                    } else if (this.activeName === 'phone') {
                        this.maxPhoneWidth = this.$refs.dragDivPhone.clientWidth - this.$refs.moveDivPhone.clientWidth;
                        this.$refs.textRefPhone.style.color = '#838395';
                        // 添加新的事件监听器
                        if (!this.confirmPhoneSuccess) {
                            const htmlElement = document.documentElement;
                            htmlElement.addEventListener('mousemove', this.mouseMovePhoneFn);
                            htmlElement.addEventListener('mouseup', this.mouseUpPhoneFn);


                            htmlElement.addEventListener('touchmove', this.mouseMovePhoneFn);
                            htmlElement.addEventListener('touchend', this.mouseUpPhoneFn);
                        }
                    }
                    axios.get(this.authServer + "/validata/deviceCode/" + this.deviceId)
                        .then((data) => {
                            this.deviceCode = data.data
                        }).catch((e) => {
                        ElementPlus.ElMessage.error("获取验证码异常")
                    })
                })

            },
            handleClose() {
                this.dialogVisible = false
            },
            // 检查登录配置
            checkLoginConfig() {
                this.showScanCode = !this.showScanCode;
                this.colWidth = this.showScanCode ? 16 : 24;
            },
            checkCodeStatus() {
                axios.get(this.authServer + "/verificationCode?userCode=" + this.form.username)
                    .then((data) => {
                        let res = data.data
                        if (res) { //
                            this.codeStatus = true;
                            this.initCode()
                        } else { //
                            this.codeStatus = false;
                        }
                    })
            },
            // 初始化页面
            initPage() {
                if (this.errorMsg) { // 有错误信息，则提示
                    ElementPlus.ElMessage.error(this.errorMsg)
                }
                // 记住密码
                const remember = Cookies.get("remember");
                if (remember === "true") {
                    const username = Cookies.get("username");
                    if (username) {
                        this.form.username = this.decrypt(username, this.key);
                    }
                    const password = Cookies.get("password");
                    if (password) {
                        this.form.password = this.decrypt(password, this.key);
                    }
                    this.form.remember = remember;
                    this.$nextTick(() => {
                        this.checkCodeStatus()
                    });

                }
                // 弹窗是否展示
                if (this.loginData.isShow === 'true') {
                    this.dialogVisible = true;
                    let timer = 3
                    let interval = setInterval(() => {
                        console.log(timer)
                        if (timer > 0) {
                            this.promptButtonTxt = '请阅读' + (timer) + 's'
                            timer--
                        } else {
                            this.promptButtonTxt = "已知晓"
                            this.promptDisabled = false
                            clearInterval(interval);

                        }
                    }, 1000)
                }
                // 机器码
                this.deviceId = Math.uuid();
            },
            // 密码登录
            LoginByPassword() {
                if (!this.form.username) {
                    ElementPlus.ElMessage.error("请输入职工号/学号!")
                    return false;
                }
                if (!this.form.password) {
                    ElementPlus.ElMessage.error("请输入密码!")
                    return false;
                }
                // if (this.codeStatus && this.confirmSuccess) { //验证码验证通过
                //todo 提交代码的时候记得还回去
                if (true) { //验证码验证通过
                    const loading = ElementPlus.ElLoading.service({
                        lock: true,
                        text: '登录中...',
                        background: 'rgba(0,0,0,0.5)'
                    })
                    const encryptedPwd = this.encrypt(this.form.password, this.loginData.key); // 加密密码
                    const data = {
                        username: this.form.username,
                        password: encryptedPwd,
                        type: "1",// 密码登录
                        deviceId: this.deviceId,
                        imgCode: this.deviceCode,
                        key: this.loginData.key
                    }
                    const config = {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded', // 根据API的要求设置合适的Content-Type
                        }
                    };
                    axios.post(this.authServer + "/uaa/login_process", data, config).then((data) => {
                        let res = data.data
                        if (res.code == 1) {
                            if (this.form.remember) {  //记住密码  30天内有效
                                Cookies.set("username", this.encrypt(this.form.username, this.key), {expires: 30})
                                Cookies.set("password", this.encrypt(this.form.password, this.key), {expires: 30})
                                Cookies.set("remember", this.form.remember, {expires: 30})
                            } else { // 不记住
                                Cookies.remove("username")
                                Cookies.remove("password")
                                Cookies.remove("remember")
                            }
                            ElementPlus.ElMessage.success("登录成功！")
                            let redirectUrl= this.loginData.redirectUrl
                            if(res.redirectUrl){
                                redirectUrl=res.redirectUrl
                            }
                            window.location.href = redirectUrl
                        } else {

                            this.removeLoginCode();// 人机校验取消，再次登录需要重新验证
                            this.initCode()
                            ElementPlus.ElMessage.error(res.msg)
                        }
                        loading.close()
                    }).catch((e) => {
                        loading.close()
                    })
                } else {
                    ElementPlus.ElMessage.error("请先通过人机校验验证码！")
                }

            },
            /**
             * 清除登录的验证码
             */
            removeLoginCode() {
                this.confirmWords = '向右滑动验证', // 滑块文字 [ty-reference](1)
                    this.confirmSuccess = false // 是否已经成功
                this.beginClientX = 0 // 距离屏幕左端距离
                this.mouseMoveState = false // 是否触发拖动状态
                this.maxWidth = 0 // 拖动最大宽度
                this.dragDiv = null
                this.moveDiv = null
                this.bgRef = null
                this.textRef = null
                this.$refs.dragDiv.style.background = '#E1E6ED';
                this.$refs.moveDiv.style.left = '0px';
                this.$refs.bgRef.style.width = '0px';
            },
            // 手机号登录
            LoginByPhone() {
                if (!this.form.loginUserCode) {
                    ElementPlus.ElMessage.error("请输入账号!")
                    return false;
                }
                if (!this.form.code) {
                    ElementPlus.ElMessage.error("请输入验证码!")
                    return false;
                }

                let width = 0;
                if (this.confirmPhoneSuccess) {
                    const loading = ElementPlus.ElLoading.service({
                        lock: true,
                        text: '登录中...',
                        background: 'rgba(0,0,0,0.5)'
                    })

                    const data = {
                        loginUserCode: this.form.loginUserCode,
                        code: this.form.code,
                        deviceId: this.deviceId,
                        imgCode: this.deviceCode,
                        type: "2",// 手机号登录
                    }
                    const config = {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded', // 根据API的要求设置合适的Content-Type
                        }
                    };
                    axios.post(this.authServer + "/uaa/login_process", data, config)
                        .then((data) => {
                            let res = data.data
                            if (res.code == 1) {
                                ElementPlus.ElMessage.success("登录成功！")
                                let redirectUrl= this.loginData.redirectUrl
                                if(res.redirectUrl){
                                    redirectUrl=res.redirectUrl
                                }
                                window.location.href = redirectUrl
                            } else {
                                this.removePhoneCode()
                                this.initCode()
                                ElementPlus.ElMessage.error(res.msg)

                            }
                            loading.close()
                        }).catch((e) => {
                        loading.close()
                    })
                } else {
                    ElementPlus.ElMessage.error("请先通过人机校验验证码！")
                }
            },

            /**
             * 清除手机号登录登录的验证码
             */
            removePhoneCode() {
                this.confirmPhoneWords = '向右滑动验证', // 滑块文字 [ty-reference](1)
                    this.confirmPhoneSuccess = false // 是否已经成功
                this.beginPhoneClientX = 0 // 距离屏幕左端距离
                this.mouseMovePhoneState = false // 是否触发拖动状态
                this.maxPhoneWidth = 0 // 拖动最大宽度
                this.dragDivPhone = null
                this.moveDivPhone = null
                this.bgRefPhone = null
                this.textRefPhone = null
                this.$refs.dragDivPhone.style.background = '#E1E6ED';
                this.$refs.moveDivPhone.style.left = '0px';
                this.$refs.bgRefPhone.style.width = '0px';
            },
            // 获取code
            resendCode() {
                if (!this.form.loginUserCode) {
                    ElementPlus.ElMessage.error("请先输入账号！")
                    return;
                }

                const config = {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded', // 根据API的要求设置合适的Content-Type
                    }
                };
                let width = 0;
                if (this.confirmPhoneSuccess) {
                    this.isSend = false; //发送开始就不允许再次发送
                    width = this.maxPhoneWidth
                    axios.post(this.authServer + "/oauthv2/sms/getCodeByUser", {
                        userCode: this.form.loginUserCode,
                        code: width
                    }, config)
                        .then((data) => {
                            let res = data.data
                            if (res.code === 1) { // 发送成功  todo 测试暂时屏蔽
                                ElementPlus.ElMessage.success(res.msg)
                                this.startCountdown(res)
                            } else { //  发送失败，还需要的如果拿到时间
                                ElementPlus.ElMessage.error(res.msg)
                                if (res.intervalTime) {
                                    this.startCountdown(res)
                                } else {
                                    this.isSend = true;// 其他错误可继续发送验证码
                                    this.removePhoneCode()
                                    this.initCode()
                                }
                            }
                        })
                } else {
                    ElementPlus.ElMessage.error("请先通过人机校验验证码！")
                }

            },

            startCountdown(res) {
                this.isSend = false;
                this.remainingTime = res.intervalTime || this.defalutTime;
                this.timer = setInterval(() => {
                    if (this.remainingTime > 0) {
                        this.remainingTime -= 1;
                    } else {
                        this.pauseCountdown();
                    }
                }, 1000);
            },

            pauseCountdown() {
                this.isSend = true;
                if (this.timer) {
                    clearInterval(this.timer);
                    this.timer = null;
                }
            },

            changeScanType(type) {
                this.scanType = type;
                if (type === 'ENTERWX') {
                    this.setSrc()
                }
            },
            // 去解冻申请页面
            gotoUnfreezing() {

                window.location.href = this.authServer + "/unfreezing"
            },
            // 取修改密码页面
            gotoRePassword() {
                // this.$router.push({path: '/rePassword', replace: true}).then(() => {
                // });
                window.location.href = this.authServer + "/updatePassword"
            },
            // 设置url地址
            setSrc() {

                if (this.scanType === 'WX') {
                    let _url = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + this.loginData.appId
                        + '&scope=snsapi_login'
                        + '&redirect_uri=' + encodeURIComponent(this.authServer + '/uaa/login_process?type=3')
                        + '&state=' + this.loginData.state
                        + '&login_type=jssdk'
                        + '&style=black'
                        + '&stylelite=1'
                        + '&self_redirect=default'
                        + '&href=' + this.loginData.wxHref + "&tips=";
                    this.ifreamUrl = _url;
                } else {

                    let _url = 'https://login.work.weixin.qq.com/wwlogin/sso/login/?login_type=CorpApp&appid=ww142c4a4f3af6fc6f' +
                        '&agentid='+this.agentId+'&redirect_uri=' + encodeURIComponent(this.authServer + '/uaa/login_process?type=5') + '&href=' + this.loginData.wxHref;
                    this.enterIfreamUrl = _url;
                }
            },
            // 加密
            encrypt(text, key) {
                const encrypted = CryptoJS.AES.encrypt(text, CryptoJS.enc.Utf8.parse(key), {
                    mode: CryptoJS.mode.ECB,
                    padding: CryptoJS.pad.Pkcs7,
                });
                return encrypted.toString();
            },
// 解密
            decrypt(text, key) {
                const result = CryptoJS.AES.decrypt(text, CryptoJS.enc.Utf8.parse(key), {
                    mode: CryptoJS.mode.ECB,
                    padding: CryptoJS.pad.Pkcs7,
                })
                return result.toString(CryptoJS.enc.Utf8)
            },

            mouseDownFn(e) {
                if (!this.confirmSuccess) {
                    e.preventDefault(); // 阻止文字选中等浏览器默认事件 [ty-reference](1)
                    this.mouseMoveState = true;
                    let clientX = e.clientX
                    if (!clientX) {
                        clientX = e.changedTouches[0].clientX
                    }
                    this.beginClientX = clientX;
                }
            },
            mouseMoveFn(e) {
                if (this.mouseMoveState) {
                    let clientX = e.clientX
                    if (!clientX) {
                        clientX = e.changedTouches[0].clientX
                    }


                    let width = clientX - this.beginClientX;
                    if (width > 0 && width <= this.maxWidth) {
                        this.$refs.moveDiv.style.left = `${width}px`;
                        this.$refs.bgRef.style.width = `${width}px`;

                    } else if (width > this.maxWidth) {
                        this.successFunction();
                    }
                }
            },

            successFunction() {
                this.confirmSuccess = true;
                this.confirmWords = '验证通过';

                const htmlElement = document.documentElement;
                // 移除之前的事件监听器（如果有）
                htmlElement.removeEventListener('mousemove', this.mouseMoveFn);
                htmlElement.removeEventListener('mouseup', this.mouseUpFn);

                htmlElement.removeEventListener('touchmove', this.mouseMoveFn);
                htmlElement.removeEventListener('touchend', this.mouseUpFn);

                this.$refs.textRef.style.color = '#3FC28A';
                this.$refs.dragDiv.style.background = 'transparent';
                this.$refs.moveDiv.style.left = `${this.maxWidth}px`;
                this.$refs.bgRef.style.width = `${this.maxWidth}px`;


            },
            mouseUpFn(e) {
                this.mouseMoveState = false;
                let clientX = e.clientX
                if (!clientX) {
                    clientX = e.changedTouches[0].clientX
                }

                let width = clientX - this.beginClientX;
                if (width < this.maxWidth) {

                    this.$refs.moveDiv.style.left = '0px';
                    this.$refs.bgRef.style.width = '0px';

                }
            },

            mouseDownPhoneFn(e) {
                if (!this.confirmPhoneSuccess) {
                    e.preventDefault(); // 阻止文字选中等浏览器默认事件 [ty-reference](1)
                    this.mouseMovePhoneState = true;
                    let clientX = e.clientX
                    if (!clientX) {
                        clientX = e.changedTouches[0].clientX
                    }
                    this.beginPhoneClientX = clientX;
                }
            },
            mouseMovePhoneFn(e) {
                if (this.mouseMovePhoneState) {
                    let clientX = e.clientX
                    if (!clientX) {
                        clientX = e.changedTouches[0].clientX
                    }
                    let width = clientX - this.beginPhoneClientX;
                    if (width > 0 && width <= this.maxPhoneWidth) {
                        this.$refs.moveDivPhone.style.left = `${width}px`;
                        this.$refs.bgRefPhone.style.width = `${width}px`;

                    } else if (width > this.maxPhoneWidth) {
                        this.successPhoneFunction();
                    }
                }
            },
            mouseUpPhoneFn(e) {
                this.mouseMovePhoneState = false;
                let clientX = e.clientX
                if (!clientX) {
                    clientX = e.changedTouches[0].clientX
                }
                let width = clientX - this.beginPhoneClientX;
                if (width < this.maxPhoneWidth) {

                    this.$refs.moveDivPhone.style.left = '0px';
                    this.$refs.bgRefPhone.style.width = '0px';

                }
            },
            successPhoneFunction() {
                this.confirmPhoneSuccess = true;
                this.confirmPhoneWords = '验证通过';
                const htmlElement = document.documentElement;
                // 移除之前的事件监听器（如果有）
                htmlElement.removeEventListener('mousemove', this.mouseMovePhoneFn);
                htmlElement.removeEventListener('mouseup', this.mouseUpPhoneFn);

                htmlElement.removeEventListener('touchmove', this.mouseMovePhoneFn);
                htmlElement.removeEventListener('touchend', this.mouseUpPhoneFn);
                this.$refs.textRefPhone.style.color = '#3FC28A';
                this.$refs.dragDivPhone.style.background = 'transparent';
                this.$refs.moveDivPhone.style.left = `${this.maxPhoneWidth}px`;
                this.$refs.bgRefPhone.style.width = `${this.maxPhoneWidth}px`;


            },

            // 生成活体二维码
            createLivenessQrcode() {
                console.log('username' + this.form.username)
                if(this.isMobileDevice()){ // 移动端人脸认证
                    axios.get(this.authServer + "/face/mobile", {params: {userCode: this.form.username,redirectSuccessUrl:this.loginData.redirectUrl}}).then((data) => {
                          let res=data.data
                        if(res.code===1){
                            window.location.replace(res.data)

                        }else{
                            ElementPlus.ElMessage.error(res.msg)
                        }
                    });
                }else{ // PC端 人脸认证
                if (this.form.username && this.form.username !== '' && this.form.username !== ' ') {
                    this.livenessLoading = true
                    axios.get(this.authServer + "/face/livenessQrcode", {params: {userCode: this.form.username}}).then((data) => {
                        let res = data.data
                        if (res.code === 1) {
                            if (res.data) {
                                this.livenessQrcodeInputVisible = false
                                this.livenessQrcodeImageVisible = true
                                this.qrcodeBase64 = res.data.qrcodeBase64
                                this.sessionId = res.data.sessionId
                                this.startPolling()
                            }
                        } else {
                            ElementPlus.ElMessage.error(res.msg)
                        }
                    }).catch((err) => {
                        ElementPlus.ElMessage.error('获取人脸活体二维码错误：' + err.message)
                        // eslint-disable-next-line no-return-assign
                    });
                } else {
                    ElementPlus.ElMessage.error('请先输入账号')
                }
                }
            },
            // 开始轮询
            startPolling() {
                this.queryQrcodeInfo() // 立即调用一次接口
                this.pollingTimer = setInterval(this.queryQrcodeInfo, this.pollingInterval) // 开始定时器
            },
            // 停止轮询
            stopPolling() {
                if (this.pollingTimer) {
                    clearInterval(this.pollingTimer)
                    this.pollingTimer = null
                }
            },
            // 查询二维码信息
            queryQrcodeInfo() {
                if (!this.sessionId) {
                    ElementPlus.ElMessage.error('没有sessionId')
                    return
                }
                let that = this;
                axios.get(this.authServer + "/face/liveness/get", {params: {sessionId: this.sessionId}}).then((data) => {
                    let res = data.data
                    try {
                        switch (res.data.message) {
                            case 'CREATED':
                                that.desc = '请扫码，进行活体验证'
                                break
                            case 'SCANNED':
                                that.desc = '已扫码，等待活体验证'
                                break
                            case 'FAIL':
                                that.desc = '活体验证失败，等待重新验证'
                                break
                            case 'SUCCESS':
                                that.desc = '活体验证成功'
                                that.stopPolling()
                                const cas = 'open'
                                let data = {
                                    type: '6',// 人脸登录
                                    sessionId: this.sessionId
                                }
                                const config = {
                                    headers: {
                                        'Content-Type': 'application/x-www-form-urlencoded', // 根据API的要求设置合适的Content-Type
                                    }
                                };
                                axios.post(that.authServer + "/uaa/login_process", data, config)
                                    .then((data) => {
                                        let res = data.data
                                        if (res.code == 1) {
                                            ElementPlus.ElMessage.success("登录成功！")
                                            let redirectUrl= this.loginData.redirectUrl
                                            if(res.redirectUrl){
                                                redirectUrl=res.redirectUrl
                                            }
                                            window.location.href = redirectUrl
                                        } else {
                                            ElementPlus.ElMessage.error(res.msg)

                                        }
                                    })
                                    .catch((err) => {
                                        ElementPlus.ElMessage.error('活体单点登录失败：' + err.message)
                                    })
                                break
                            case 'CANCEL':
                                that.desc = '已取消活体验证'
                                that.stopPolling()
                                break
                            default:
                                that.desc = '未知错误'
                                that.stopPolling()
                                break
                        }
                    } catch (err) {
                        that.desc = '二维码已失效，请重新获取'
                        that.stopPolling()
                    }
                }).catch((err) => {
                    ElementPlus.ElMessage.error('查询二维码信息：' + err.message)
                })
            },
            isMobileDevice() {
                const userAgent = navigator.userAgent || navigator.vendor || window.opera;
                // 检查常见的移动设备标识符
                if (/android/i.test(userAgent)) {
                    return true;
                }

                if (/iPhone|iPad|iPod/i.test(userAgent)) {
                    return true;
                }

                // 其他可能的移动设备标识符
                if (/windows phone/i.test(userAgent)) {
                    return true;
                }

                return false;
            }
        },
        watch: {
            scanType(newVal, oldVal) {
                console.log('scanType变化了', newVal, oldVal);
                if (newVal === 'ENTERWX') {
                    this.changeScanType(newVal);
                }
            },
            activeName(newVal, oldVal){

                console.log('activeName变化了', newVal, oldVal);
                const htmlElement = document.documentElement;
                htmlElement.removeEventListener('mousemove', this.mouseMoveFn);
                htmlElement.removeEventListener('mouseup', this.mouseUpFn);
                htmlElement.removeEventListener('mousemove', this.mouseMovePhoneFn);
                htmlElement.removeEventListener('mouseup', this.mouseUpPhoneFn);
                htmlElement.removeEventListener('touchmove', this.mouseMoveFn);
                htmlElement.removeEventListener('touchend', this.mouseUpFn);
                htmlElement.removeEventListener('touchmove', this.mouseMovePhoneFn);
                htmlElement.removeEventListener('touchend', this.mouseUpPhoneFn);
                if(newVal==='password'){
                    if(this.form.username) {
                        this.checkCodeStatus()
                    }
                    this.stopPolling()
                }else if(newVal==='face'){ // 人脸需要查看是否处二维码
                    if(this.isMobileDevice()){ // 手机端修改字的显示
                        this.faceButtonText='识别'
                    }
                    if(this.form.username){
                        this.createLivenessQrcode()
                    }
                }
                else{
                    this.initCode();
                    this.stopPolling ()
                }
            }
        }
    });

    // 全局注册 Element Plus 组件
    app.use(ElementPlus);

    // app.config.globalProperties.$message = ElMessage;
    // app.config.globalProperties.$loading = ElLoading;

    // 挂载应用到 #app
    app.mount('#app');
</script>
</body>
</html>