xjc-vue/src/views/xjc-integratedmachine/login/student_login.vue

<template>

    <div>
        <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
            <h3 class="title">{{ title }}</h3>
            <el-form-item prop="username">
                <el-input
                        v-model="loginForm.username"
                        type="text"
                        size="large"
                        auto-complete="off"
                        placeholder="身份证号"
                >
                    <template #prefix>
                        <svg-icon icon-class="user" class="el-input__icon input-icon"/>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input
                        v-model="loginForm.password"
                        type="password"
                        size="large"
                        auto-complete="off"
                        placeholder="密码"
                        @keyup.enter="handleLogin"
                >
                    <template #prefix>
                        <svg-icon icon-class="password" class="el-input__icon input-icon"/>
                    </template>
                </el-input>
            </el-form-item>

            <el-form-item style="width:100%;">
                <el-button
                        :loading="loading"
                        size="large"
                        type="primary"
                        style="width:100%;"
                        @click.prevent="handleLogin"
                >
                    <span v-if="!loading">登 录</span>

                    <span v-else>登 录 中...</span>
                </el-button>
                <el-button @click="forgetPass">忘记密码</el-button>
                <div style="float: right;" v-if="register">
                    <router-link class="link-type" :to="'/register'">立即注册</router-link>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
    import {login} from '@/api/login'
    import useUserStore from '@/store/modules/user'
    import { setToken } from '@/utils/auth'
    const userStore = useUserStore()

    const {proxy} = getCurrentInstance()

    const router = useRouter()
    const route = useRoute()

    const params = route.query

    const loading = ref(false)
    const loginForm = ref({
        username: "",
        password: "",
        loginType: "1",
        rememberMe: false,
        code: "",
        uuid: ""
    })
    const loginRules = {
        username: [{required: true, trigger: "blur", message: "请输入您的身份证号"}],
        password: [{required: true, trigger: "blur", message: "请输入您的密码"}],
    }

    function handleLogin() {
        proxy.$refs.loginRef.validate(valid => {
            if (valid) {
                loading.value = true
                // 调用action的登录方法
                loginForm.value.loginType = "1"
                login(loginForm.value.username, loginForm.value.password, null, null, loginForm.value.loginType).then(resp => {
                    setToken(resp.data.access_token)
                    router.push({
                        path: params.modulePath
                    })
                })
            }
        })
    }

    function forgetPass() {
        router.push({
            path : '/xjc-integratedmachine/login/student_forgetpass',
            query:{
                modulePath : params.modulePath
            }
        })
    }

</script>

<style scoped>

</style>