zk-platform
/
student-web


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365
							<!DOCTYPE html>
<html>

<head>
  <title>广西自学考试网上系统</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 
<!--<link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css">-->
<!--<link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css">-->
<link rel="stylesheet" href="https://lib.baomitu.com/element-ui/2.12.0/theme-chalk/index.css">
  <script src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="./vendor/md5/md5.js" type="text/javascript"></script>
  <script src="./js/tool.js"></script>
  <script src="https://lib.baomitu.com/vue/2.5.17/vue.min.js"></script>
  <script src="https://lib.baomitu.com/element-ui/2.4.11/index.js"></script>
  <script>
  function keyDown(){
    if (event.keyCode==13)  //回车键的键值为13
      document.getElementById("loginBtn").click(); //调用登录按钮的登录事件
    }
  </script>
</head>

<body onkeydown="keyDown();">
  
	<div id="particles-js"></div>

  <div id="app">
 
    
    <div class="center" v-show="loaded">
        
      <div class="content">
        

        <el-card class="box-card" style="position: absolute;top: 20%;width: 380px;min-height: 350px;max-height: 380px;">
          <div slot="header" class="clearfix" style="text-align: center;">
            <span>广西自学考试网上系统</span>
          </div>
          <el-form ref="loginForm" :model="loginForm" :rules="loginFormRule">
            

            <form class="el-form">
              <div class="el-form-item">
                <div class="el-form-item__content">
                  <div class="el-input el-input-group el-input-group--prepend">
                    <div class="el-input-group__prepend" style="padding-left: 15px;padding-right: 15px;color: black">
                    
                    </div>
                      <input type="text" v-model="loginForm.cert_no"
                      autocomplete="off" placeholder="登录账号:证件号/准考证号" class="el-input__inner">
                  </div>
                </div>
              </div>
              <div class="el-form-item">
                <div class="el-form-item__content">
                  <div class="el-input el-input-group el-input-group--prepend">
                    <div class="el-input-group__prepend" style="padding-left: 15px;padding-right: 15px;color: black">
                      <i class="fa fa-key fa-fw"></i>
                    </div>
                    <input v-model="loginForm.std_pass"
                      type="password" autocomplete="off" placeholder="密码" class="el-input__inner">
                  </div>
                </div>
              </div>
              <div class="el-form-item">
                <div class="el-form-item__content">
                  <div class="el-input el-input-group el-input-group--prepend">
                    <div class="el-input-group__prepend" style="padding-left: 15px;padding-right: 15px;color: black">
                      <i class="fa fa-hand-o-right fa-fw"></i>
                    </div>
                    <input v-model="validateCode" maxlength="4"
                      type="text" autocomplete="off" placeholder="校验码" class="el-input__inner">
                      <i v-if="validateCode_check==1" class="fa fa-check-circle-o fa-lg" style="font-size: 22px; position: absolute;top: 15px;right: 100px;height: 80%;color:#67C23A"></i>
                      <i v-if="validateCode_check==0" class="fa fa-times-circle-o fa-lg" style="font-size: 22px; position: absolute;top: 15px;right: 100px;height: 80%;color: #F56C6C"></i>
                      <i v-if="validateCode_check=='loading'" class="fa fa-spinner fa-lg" style="font-size: 22px; position: absolute;top: 15px;right: 100px;height: 80%;color: blue"></i>

                      <img :src="validateCodesrc" @click="freshImg" style="cursor:pointer; position: absolute;top: 5px;right: 2px;height: 80%;">
                  </div>
                </div>
                
              </div>
              
            </form>
           
            <div v-if="errorInfo" >
              <div style="margin-bottom: 5px;">
                <div role="alert" class="el-alert el-alert--error" size="mini" style=" font-size:10px;">
                  <i class="fa fa-info-circle fa-lg"></i>
                  <div class="el-alert__content">{{errorInfo}}
                    <i class="el-alert__closebtn  fa fa-window-close fa-lg" @click="errorInfo = null"></i>
                  </div>
                </div>
              </div>
            </div>
            <el-form-item>
              <span style="width:100%">
                <el-button type="primary" id="loginBtn" class="btn-long" @click="login('loginForm')">登录</el-button>
              </span>
             
              
            </el-form-item>
          </el-form>
        </el-card>

        
      </div>

      
    </div>
  </div>

</body>


<script>
  
  new Vue({
    el: '#app',
    computed: {
        validateCodesrc: function() {
          this.randomnum = Date.parse(new Date());
        return basePath + "/std/validateCode.htm?"+this.randomnum;
        },
       
    },
    watch: {
      validateCode: function(newValue, oldValue) {
          if(newValue && newValue.length ==4){
            this.validateCode_check = "loading";
            var this_ = this;
            //请求验证 校验码
            ajaxRequest("", '/std/stdRegInfo/checkValidateCode.htm', {validateCode:this.validateCode}, function (resp) {
              if (resp.success) {
                this_.validateCode_check = 1;
              } else {
                this_.validateCode_check = 0;
              }
            })
          }
        },
    },
    data: function () {
      return {
        showInfo:true,
        randomnum:null,
        validateCode_check:null,
        loaded: false,
        logoPath: "",
        productName: "广西自考报考系统",
        errorInfo: null,
        validateCode: "",
        isMutiAccount:false,
        selection:null,
        accountArrayloading:false,
        loginForm: {
          cert_no: "",
          std_pass: "",
          validateCode:""
        },
        loginFormRule: {
          cert_no: [{
            required: true,
            message: "请填写登录账号",
            trigger: "blur"
          }],
          std_pass: [{
            required: true,
            message: "请填写密码",
            trigger: "blur"
          }],
          validateCode: [{
            required: true,
            message: "请填写校验码",
            trigger: "blur"
          }]
        }

      }
    },
    mounted: function() {
     
    },
    created: function() {
      this.loaded = true;
    },
    methods: {
      freshImg: function(){
        this.randomnum = Date.parse(new Date());
      },
      handleSelectionChange: function(val){
        this.selection = val;
      },
      handleCurrentChange: function(val){
        this.selection = val;
        this.isMutiAccount = false;
        this.loginForm.cert_no = val.ticket_no;
        this.login();
        
      },
      login: function () {
        this.errorInfo = null;
        var _this = this;
        if(!this.loginForm.cert_no){
          this.errorInfo = "请填写登录账号";
          return;
        }
        if(!this.loginForm.std_pass){
          this.errorInfo = "请填写密码";
          return;
        }

        if(!this.validateCode){
          this.errorInfo = "请填写校验码";
          return;
        }
        var std_pass_md5 = hex_md5(this.loginForm.std_pass);
        var cloneLoginForm = JSON.parse(JSON.stringify(this.loginForm));
        cloneLoginForm.std_pass = std_pass_md5;
        cloneLoginForm.validateCode = this.validateCode;
        ajaxRequest("", '/std/login.htm', cloneLoginForm, function (resp) {
          if (resp.success) {
            if(resp.array){
            
              _this.isMutiAccount = true;
              
              return;
            }
            
            localStorage.setItem("user",JSON.stringify(resp.entity));
            //跳转系统首页
            window.location.href = "./score.html";
          } else {
            _this.errorInfo = resp.errorMsg;
            _this.freshImg();
            _this.validateCode = "";
          }
        })

      }
    }
  });
</script>


<style scoped>
  .home {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  .school-logo {
    margin-left: -300px;
  }

  .header {
    min-height: 120px;
    display: grid;
  }

  .center {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.8;
	  filter: alpha(opacity = 20);
  }

  .content {
    margin-top: 100px;
    margin-left: 35%;
    width: 380px;
    /* height: 300px; */
    border-radius: 6px;
    background-color: white;
    display: grid;
    grid-template-areas: "";
  }

  .login-type {
    flex: 1;
    line-height: 40px;
    background-color: #eeeeee;
  }

  .active-type {
    background-color: #ffffff;
  }

  .close {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #eeeeee;
    color: #999999;
    width: 80px;
    height: 40px;
    line-height: 40px;
  }

  .close:hover {
    color: #444444;
  }

  .btn-long {
    width: 100%;
  }

  body {
    margin: 0px 0px
  }

  .group__prepend{
    padding: 0px 10px !important;
  }

  .el-alert {
    margin: 20px 0 0;
  }
  .el-alert--error {
    background-color: #fef0f0 !important;
    color: #f56c6c;
  }
  .el-alert {
    width: 100%;
    padding: 8px 16px;
    margin: 0;
    box-sizing: border-box;
    border-radius: 4px;
    position: relative;
    background-color: #fff;
    overflow: hidden;
    opacity: 1;
    display: flex;
    align-items: center;
    transition: opacity .2s;
  }
  .artcle-title {
    margin-top: 25px !important;
    font-family: "Microsoft YaHei", "微软雅黑字体";
    color: #4c4c4c  !important;
    font-size: 23px !important;
    text-align: center !important;
    font-weight: bold !important;
  }
  .artcle-detail {
      padding-top: 20px;
      line-height: 30px;
      font-size: 18px;
  }
  
</style>

</html>