appFormLowcode/src/views/login/index.vue

<!--
@ 作者: 秦东
@ 时间: 2024-10-23 08:52:35
@ 备注: 登录页面
-->
<script lang='ts' setup>
import { useRoute,useRouter } from 'vue-router'
import { userStror } from "@/utils/pinia/stores/modules/userOrders";
import { loginStruct } from '@/api/login/type'
import { getTimeUnix } from '@/api/common/index'
import { getVerifyCode } from '@/api/login/index'
const router = useRouter()
const route = useRoute()
const userPinia = userStror();
const loginTitle = import.meta.env.VITE_APP_TITLE
const loginInfo = reactive<loginStruct>({
    username: "",
    password: "",
    captchaId: "",
    captcha:"",
    verifyCodeKey:"",
    time: getTimeUnix()
})
const singButLoading = ref(false)

const xingzhi = ref(1)
//验证码图片
const codePic = ref<string>("")
const getSignCode = () => {
    getVerifyCode()
        .then(({data}) => {
            // console.log("验证码",data);
            loginInfo.captchaId = data.captchaid
            loginInfo.verifyCodeKey = data.captchaid
            codePic.value = data.picPath
        });
        
}
onBeforeMount(() => {
    xingzhi.value = judgingEnvironment();
    // console.log("==============>",route.query.userkey,route.query.token)
    // if(!userPinia.judgeIsLogin(route.query.userkey,route.query.token)){
       
    //     console.log("======1========>",xingzhi.value)
    //     if(xingzhi.value == 2 || xingzhi.value == 3){
    //         window.location.href="http://wab.hxgk.group/systemapi/wechat/obtaOnePage?systemapp="+import.meta.env.VITE_APP_SYSTEM_APP+"&isagain="+import.meta.env.VITE_APP_AGAIN+"&userid="+route.query.userid+"&call_back_type=login"
    //     }else{
    //         xingzhi.value = 1
    //         getSignCode()
    //     }

    // }else{
    //     console.log("=======3=======>",route.query.userkey,route.query.token)
    //     userPinia.getInfo()
    //     router.push('/')
    // }
    xingzhi.value = 2
    getSignCode()
})
const loginForm = ref(ElForm);  //表单实例化

/**
@ 作者: 秦东
@ 时间: 2024-10-24 16:25:15
@ 功能: 重置表单
*/
const resetForm = () => {
    loginForm.value.resetFields();
    loginForm.value.clearValidate();

    loginInfo.username = ""
    loginInfo.password = ""
    loginInfo.captchaId = ""
    loginInfo.captcha = ""
    loginInfo.verifyCodeKey = ""
    loginInfo.time = ""
    getSignCode()
}
/**
@ 作者: 秦东
@ 时间: 2024-10-24 16:28:09
@ 功能: 表格验证规则
*/
const rules = reactive({
    username: [{ required: true, message: "请输入工号！", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码！", trigger: "blur" }],
    captcha: [{ required: true, message: "请输入验证码！", trigger: "blur" }],
});
/**
@ 作者: 秦东
@ 时间: 2024-10-24 16:30:18
@ 功能: 登录系统
*/
const submitLoginForm = () => {
    singButLoading.value = true
    loginForm.value.validate((valid: any) => {
        if (valid) {
            userPinia.login(loginInfo)
                .then(()=>{
                    const query: LocationQuery = route.query;

                    const redirect = (query.redirect as LocationQueryValue) ?? "/";

                    const otherQueryParams = Object.keys(query).reduce(
                        (acc: any, cur: string) => {
                            if (cur !== "redirect") {
                            acc[cur] = query[cur];
                            }
                            return acc;
                        },
                        {}
                    );
                    console.log("登陆输出：",redirect,otherQueryParams);
                    nextTick(() =>{
                        router.push({ path: redirect, query: otherQueryParams });
                    })
                })
                .catch(() => {
                    // 验证失败，重新生成验证码
                    getSignCode();
                })
                .finally(()=>{
                    singButLoading.value = false
                });
            
        }else{
            singButLoading.value = false
        }
    });
}

/**
@ 作者: 秦东
@ 时间: 2024-10-23 13:46:25
@ 功能: 判断登录环境
*/
const judgingEnvironment = () => {
    let huanjing =  window.navigator.userAgent.toLowerCase()
    if( (huanjing.match(/MicroMessenger/i) == 'micromessenger') && (huanjing.match(/wxwork/i) == 'wxwork') ){
        return 3;
    }else if( huanjing.match(/MicroMessenger/i) == 'micromessenger' ){
        return 2;
    }else{
        return 1;
    }
    return 3;
}
</script>
<template>{{xingzhi}}
    <div class="appBodyBeiJing appBody contentCenter">
        <el-card v-if="xingzhi==1"  v-loading="true" element-loading-text="身份验证中！请耐心等待！..." style="max-width: 90%; min-width:80%; height:250px; background-color: rgba(255,255,255,0.1); border:  rgba(255,255,255,0.1);" element-loading-background="rgba(255,255,255,0.6)"> 
        </el-card>
        <el-card v-else style="max-width: 90%; background-color: rgba(255,255,255,0.6); border:  rgba(255,255,255,0.6);">
            <template #header>
                <div class="card-header">
                    <el-text class="loginTitle">{{ loginTitle }}</el-text>
                </div>
            </template>
            <el-form
                ref="loginForm"
                :model="loginInfo"
                :rules="rules"
                :label-width = "80"
            >
                <el-form-item label="工号：" prop="username">
                    <el-input v-model="loginInfo.username" clearable />
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-input v-model="loginInfo.password" type="password" autocomplete="off" clearable  />
                </el-form-item>
                <el-form-item label="验证码：" prop="captcha">
                    <el-row>
                        <el-col :span="14">
                            <el-input v-model="loginInfo.captcha" clearable />
                        </el-col>
                        <el-col :span="10">
                            <el-image style="width: 100%; height: 35px" :src="codePic" fit="cover" @click="getSignCode" />
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item>
                    <el-button v-loading="singButLoading" type="primary" @click="submitLoginForm()">登录</el-button>
                    <el-button @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>
<style  lang='scss' scoped>
.loginTitle{
    display: block;
    font-size: 20pt;
    // margin-bottom: 15px;
    text-align: center;
}
</style>