<template>
|
<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">
|
报名成功!
|
具体考试时间请等待通知! 请仔细阅读以下提醒!
|
</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 {
|
addApply,
|
cancelApply,
|
getSecurityApplyInfo,
|
} from "@/api/examapi/applyexam";
|
|
export default {
|
data() {
|
return {
|
status: null,
|
id: null,
|
form: {},
|
|
sinUps: false,
|
};
|
},
|
computed: {
|
...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 = "尚未报名";
|
this.sinUps = false;
|
}
|
if (res.data.isApply == 1) {
|
this.status = "已报名";
|
this.sinUps = true;
|
}
|
});
|
},
|
applySubmit() {
|
console.log(123546);
|
addApply({
|
userId: this.userInfo.user_id,
|
}).then(
|
(res) => {
|
if (res.data.data == 201) {
|
this.$message({
|
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);
|
}
|
},
|
(error) => {
|
window.console.log(error);
|
}
|
);
|
},
|
cancelApply() {
|
cancelApply({
|
id: this.id,
|
userId: this.userInfo.user_id,
|
}).then(
|
(res) => {
|
if (res.data.data == 201) {
|
this.$message({
|
type: "warning",
|
message: "尚未报名",
|
});
|
this.sinUps = false;
|
} else {
|
this.$message({
|
type: "success",
|
message: "取消报名成功",
|
});
|
this.sinUps = true;
|
this.getSecurityApplyInfo(null);
|
}
|
},
|
(error) => {
|
window.console.log(error);
|
}
|
);
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.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>
|
