zk-platform
/
student-web


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406
							<!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: 5px;padding-right: 5px;color: black">
                      &nbsp;&nbsp;&nbsp;&nbsp;问题
                    </div>
                    <el-select v-model="loginForm.question" filterable placeholder="请选择问题" style="width:285px;">
                      <el-option label="我的出生地" value="我的出生地"></el-option>
                      <el-option label="我就读的小学" value="我就读的小学"></el-option>
                      <el-option label="我母亲的名字" value="我母亲的名字"></el-option>
                      <el-option label="我父亲的名字" value="我父亲的名字"></el-option>
                      <el-option label="我最好的朋友的名字" value="我最好的朋友的名字"></el-option>

                    </el-select>

                      
                  </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: 5px;padding-right: 5px;color: black">
                      &nbsp;&nbsp;&nbsp;&nbsp;答案
                    </div>
                    <input v-model="loginForm.answer" maxlength="32"
                      type="text" 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: 5px;padding-right: 5px;color: black">
                      校验码
                    </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%" v-show="!isLogin">
                <el-button type="primary" id="loginBtn" class="btn-long" @click="login('loginForm')">确定</el-button>
                <a style="cursor:pointer; position: absolute;top: 35px;right: 2px;height: 80%;" href="javascript:void(0)"  @click="goPhone()">绑定手机</a>

              </span>
              <span style="width:100%" v-show="isLogin">
                <el-button type="primary" id="loginBtn" class="btn-long" @click="goLogin()">返回登陆页面</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,
        isLogin:false,
        logoPath: "",
        productName: "广西自考报考系统",
        errorInfo: null,
        validateCode: "",
        isMutiAccount:false,
        selection:null,
        accountArrayloading:false,
        loginForm: {
          question: "",
          answer: "",
          validateCode:"",
          std_id:""
        },
        loginFormRule: {
          question: [{
            required: true,
            message: "请填写问题",
            trigger: "blur"
          }],
          answer: [{
            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());
      },
      goLogin: function() {
        window.location.href = "./login.html";
      },
      goPhone: function() {
        window.location.href = "./phone.html";
      },
      
      
      login: function () {
        this.errorInfo = null;
        var _this = this;
        if(!this.loginForm.question){
          this.errorInfo = "请填写问题";
          return;
        }
        if(!this.loginForm.answer){
          this.errorInfo = "请填写答案";
          return;
        }

        if(!this.validateCode){
          this.errorInfo = "请填写校验码";
          return;
        }
        
        var rtn = window.confirm("确定设置密保问题吗?（请妥善保管好问题答案，方便以后找回密码）");
        if(rtn){
         
              var answer_md5 = hex_md5(this.loginForm.answer);
              var cloneLoginForm = JSON.parse(JSON.stringify(this.loginForm));
              cloneLoginForm.answer = answer_md5;
              cloneLoginForm.validateCode = this.validateCode;

              let std_id = '';
              let uerStr = localStorage.getItem("user");
              if(uerStr){
                let user = JSON.parse(uerStr);
                if(user){
                  std_id = user.id;
                }
              }

              cloneLoginForm.std_id = std_id;

              ajaxRequest("", '/std/setQuestion.htm', cloneLoginForm, function (resp) {
                if (resp.success) {
                  if(!resp.login){
                    _this.errorInfo = "请先登陆后再设置密保问题！";
                    _this.freshImg();
                    _this.validateCode = "";
                    _this.isLogin = true;
                  }else{
                    _this.$alert("恭喜您，成功设置密保问题。请牢记密保问题和答案！", '信息提示', { 
                      confirmButtonText: '确定', callback: function() { 
                        
                        window.location.href = "../#/index";
                      } 
                    });
           
                   
                  }
                  
                  
                } 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>