考试报名页面修改

liuyg

2021-08-17 591c9c96005659494dcdb91f6d5add9d1a70620c

考试报名页面修改

 src/views/securityApply/index.vue

@@ -1,63 +1,110 @@
<template>
    <div>
        <div class="security-apply">
            <div class = "security-title">
                <span>2021 保安证考试报名</span>
            </div>
            <div>
                <button class="security-btn" @click="applySubmit">报 名</button>
                <button class="security-btn" @click="cancelApply">取 消 报 名</button>
            </div>
            <div class = "apply-status">
                 <span>{{status}}</span>
            </div>
        </div>
  <div class="signUp">
    <div class="title">保安证考试报名</div>
    <div class="icons">
      <!-- <i class="el-icon-error errorRed" v-show="!sinUps"></i> -->
      <div v-show="!sinUps">
        符合申请保安员证条件，可参加保安员证考试!
        <br />
        考试成绩合格，给予发放保安员证。
      </div>
      <i class="el-icon-success successGreen" v-show="sinUps"></i>
      <div v-show="sinUps">
        报名成功!&nbsp;&nbsp;&nbsp;&nbsp;
        具体考试时间请等待通知!&nbsp;&nbsp;&nbsp;&nbsp;请仔细阅读以下提醒!
      </div>
    </div>

    <div class="signUp_but">
      <el-button
        class="security_btn"
        type="primary"
        round
        :disabled="sinUps"
        :class="{ btnnone: sinUps }"
        icon="el-icon-check"
        @click="applySubmit"
        >我 要 报 名</el-button
      >
      <el-button
        class="security_btn btn2"
        type="primary"
        round
        v-show="sinUps"
        icon="el-icon-close"
        @click="cancelApply"
        >取 消 报 名</el-button
      >
      <!-- <button :disabled="sinUps" @click="applySubmit" class="security_btn">
        <i class="el-icon-check"></i> 报 名
      </button>
      <button v-show="sinUps" @click="cancelApply" class="security_btn">
        <i class="el-icon-close"></i> 取 消 报 名
      </button> -->
    </div>

    <div class="mesg">
      <p><label>注意事项：</label></p>
      <p>
        1、年满18周岁的中国公民; <br />
        2、身体健康,品行良好;<br />
        3、初中以上学历; <br />
        4、没有曾被收容教育、强制隔离戒毒、劳动教养或者3次以上行政拘留、曾因故意犯罪被刑事处罚;
        <br />
        5、没有被吊销保安员证未满3年以及曾两次被吊销保安员证等情形。<br />
      </p>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { mapState } from "vuex";
import {
  addApply,
  cancelApply,
  getSecurityApplyInfo
  getSecurityApplyInfo,
} from "@/api/examapi/applyexam";

export default {
  data() {
    return {
        status:null,
        id:null,
        form:{}
      status: null,
      id: null,
      form: {},

      sinUps: false,
    };
  },
  computed: {
      ...mapState({
            userInfo: state => state.user.userInfo
        }),
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  mounted() {
    //查询保安人员报名信息
    this.getSecurityApplyInfo(null);
  },
  methods:{
    getSecurityApplyInfo(id){
        getSecurityApplyInfo(id,this.userInfo.user_id).then((res) => {
          this.form = res.data;
          if(res.data.id!=-1){
              this.id = res.data.id;
          }
          if(res.data.isApply==-1 || res.data.isApply==2){
            this.status = "尚未报名";
          }
          if(res.data.isApply==1){
            this.status = "已报名";
          }
        });
  methods: {
    getSecurityApplyInfo(id) {
      getSecurityApplyInfo(id, this.userInfo.user_id).then((res) => {
        this.form = res.data;
        if (res.data.id != -1) {
          this.id = res.data.id;
        }
        if (res.data.isApply == -1 || res.data.isApply == 2) {
          this.status = "尚未报名";
          this.sinUps = false;
        }
        if (res.data.isApply == 1) {
          this.status = "已报名";
          this.sinUps = true;
        }
      });
    },
    applySubmit(){
    applySubmit() {
      console.log(123546);
      addApply({
        userId: this.userInfo.user_id
        userId: this.userInfo.user_id,
      }).then(
        (res) => {
          if (res.data.data == 201) {
@@ -65,16 +112,19 @@
              type: "warning",
              message: "已报名，不能重复报名",
            });
            this.sinUps = false;
          } else if (res.data.data == 202) {
            this.$message({
              type: "warning",
              message: "报名失败",
            });
            this.sinUps = true;
          } else {
            this.$message({
              type: "success",
              message: "报名成功",
            });
            this.sinUps = true;
            this.getSecurityApplyInfo(null);
          }
        },
@@ -83,10 +133,10 @@
        }
      );
    },
    cancelApply(){
    cancelApply() {
      cancelApply({
        id:this.id,
        userId: this.userInfo.user_id
        id: this.id,
        userId: this.userInfo.user_id,
      }).then(
        (res) => {
          if (res.data.data == 201) {
@@ -94,11 +144,13 @@
              type: "warning",
              message: "尚未报名",
            });
            this.sinUps = false;
          } else {
            this.$message({
              type: "success",
              message: "取消报名成功",
            });
            this.sinUps = true;
            this.getSecurityApplyInfo(null);
          }
        },
@@ -106,39 +158,100 @@
          window.console.log(error);
        }
      );
    }
  }
    },
  },
};
</script>

<style lang="scss">
    .security-apply{
        width: 100%;
        height: 100%;
        margin-top: 250px;

        .security-title{
            width: 30%;
            font-size: 28px;
            margin-left: 35%;
            text-align: center;
            color: cadetblue;
        }

        .security-btn{
            width: 10%;
            margin-left: 45%;
            text-align: center;
            margin-top: 20px;
        }

        .apply-status{
            width: 10%;
            margin-left: 45%;
            text-align: center;
            margin-top: 20px;
        }
.signUp {
  width: 80%;
  height: 90%;
  position: relative;
  top: -2.5%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 2.5% 10%;
  background-color: rgba($color: #fff, $alpha: 1);
  box-sizing: border-box;
  .title {
    font-size: 36px;
    color: #ef6d03;
    position: relative;
    font-weight: 600;
    top: -40px;
    // background-color: #fff;
    padding: 5px 15px;
    // box-shadow: 0px 15px 13px -5px rgba($color: #757575, $alpha: 0.1);
    // border-radius: 15px;
  }
  .icons {
    width: auto;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    // border: 1px solid red;
    .successGreen {
      position: relative;
      top: -10px;
      color: #67c23a;
      font-size: 60px;
    }

    
    .errorRed {
      position: relative;
      top: -10px;
      color: #f32d27;
      font-size: 60px;
    }
    div {
      text-indent: 40px;
      font-size: 20px;
    }
  }
  .signUp_but {
    margin-top: 20px;
    width: 110px;
    height: auto;
    display: flex;
    // border: 1px solid red;
    align-items: center;
    justify-content: space-around;
    .security_btn {
      background-image: linear-gradient(to bottom, #b5e3fb, #63b0f3, #b5e3fb);
    }
    .btnnone {
      background-image: linear-gradient(
        to bottom,
        #ffffff,
        #a1a1a1,
        #ffffff
      ) !important;
      border: 1px solid #8d8d8d;
    }
    .btn2 {
      margin-left: 25px;
    }
  }
  .mesg {
    margin-top: 20px;
    border: 1px solid #e5f2f2;
    background-color: #f0fbff;
    width: 60%;
    // background-color: #fff;
    padding: 15px;
    box-shadow: 0px 15px 13px -5px rgba($color: #f0fbff, $alpha: 0.1);
    border-radius: 5px;
    // border: 1px solid red;
    height: auto;
    label {
      font-size: 24px;
    }
    font-size: 18px;
  }
}
</style>