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

<template>
    <div class="student-login-page">
      <div class="page-head">
        <img class="head-icon" src="@/assets/images/login/login-return.png" @click="router.go(-1)" alt="404">
      </div>
      <div class="page-content">
        <div class="content-background">
          <div class="content-left">
            <div class="content-form">
              <p>新基础生涯</p>
              <p>欢迎访问新基础生涯唤醒一体机</p>
              <div class="form-box">
                <p>学生登录</p>
                <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
                  <el-form-item prop="username">
                    <el-input
                        v-model="loginForm.username"
                        type="text"
                        size="large"
                        auto-complete="off"
                        placeholder="身份证号"
                        class="form-box-input1"
                    >
                      <template #prefix>
                        <svg-icon icon-class="user_login" 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="密码"
                        show-password
                        class="form-box-input1"
                        @keyup.enter="handleLogin"
                    >
                      <template #prefix>
                        <svg-icon icon-class="password_login" class="el-input__icon input-icon"/>
                      </template>
                    </el-input>
                  </el-form-item>
                  <p class="form-box-text">首次登录请联系班主任获取账号密码</p>
                  <el-form-item style="width:100%;">
                    <div style="display: flex;flex-direction: column;width: 100%">
                      <el-button
                          :loading="loading"
                          size="large"
                          type="primary"
                          class="form-box-btn1"
                          @click.prevent="handleLogin"
                      >
                        <span v-if="!loading">登 录</span>
                        <span v-else>登 录 中...</span>
                      </el-button>
                      <p class="form-box-text1" @click="forgetPass">
                        忘记密码?
                      </p>
                   </div>
                  </el-form-item>
                </el-form>
              </div>

            </div>
          </div>
        </div>
      </div>

    </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
                    })
                      console.log("11",resp)
                })
            }
        })
    }

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

    function jumpReturn(path) {
      router.push({
        path: path,
        query : {
          modulePath : params.modulePath
        }
      })
    }
</script>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
}
.student-login-page{
  background: url('@/assets/images/login/login-page-background.png') no-repeat;
  background-size: 1920px 1080px;
  z-index:10;
  width: 100%;
  height: 1080px;
  .page-head{
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height: 123px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    .head-icon{
      width: 74px;
      height: 74px;
      margin-left: 74px;
    }
  }
  .page-content{
    //background: #ECF2F6;
    width: 100%;
    position: absolute;
    top: 123px;
    bottom: 0;
    .content-left{
      width: 600px;
      margin-left: 237px;
      margin-top: 70px;
      .content-form{
        display: flex;
        flex-direction:column;
        align-items:center;
        p:nth-child(1){
          font-weight: bold;
          font-size: 48px;
          color: #414141;

        }
        p:nth-child(2){
          font-weight: 300;
          font-size: 36px;
          color: #414141;
          margin-top: 42px;
        }
        .form-box{
          width: 490px;
          margin-top: 29px;
          background: #FFFFFF;
          display: flex;
          flex-direction: column;
          align-items: center;
          p:nth-child(1){
            font-weight: 400;
            font-size: 36px;
            color: #666666;
            margin-top: 24px;
          }

          .form-box-input1{
            width: 445px;
            height: 65px;
            background: #F5F9FA;
            border-radius: 5px 5px 5px 5px;
            margin-top: 20px;
            ::v-deep .el-input__wrapper{
              background: #F5F9FA;
              box-shadow: none;
            }


          }
          .form-box-text{
            font-weight: 400;
            font-size: 16px;
            color: #979797;
            margin-top: 6px;
            text-align: center;
          }
          .form-box-text1{
            font-weight: 400;
            font-size: 16px;
            color: #5956E9;
            margin:9px auto 32px;
            text-align: center;
          }

          .form-box-btn1{
            width: 255px;
            height: 65px;
            background-color: #5956E9;
            border-radius: 33px 33px 33px 33px;
            margin:16px auto 9px;
            font-weight: 500;
            font-size: 18px;
            color: #FFFFFF;
          }
          .form-box-btn2{
            width: 150px;
            height: 57px;
            background: #87B8FF;
            border-radius: 10px 10px 10px 10px;
            font-size: 16px;
            color: #FFFFFF;
          }
        }
      }
    }
  }
}
</style>