From 591c9c96005659494dcdb91f6d5add9d1a70620c Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Tue, 17 Aug 2021 19:51:00 +0800
Subject: [PATCH] 考试报名页面修改
---
src/views/securityApply/index.vue | 253 ++++++++++++++++++++++++++++++++++++--------------
1 files changed, 183 insertions(+), 70 deletions(-)
diff --git a/src/views/securityApply/index.vue b/src/views/securityApply/index.vue
index 5092399..6367e7f 100644
--- a/src/views/securityApply/index.vue
+++ b/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">
+ 报名成功!
+ 具体考试时间请等待通知! 请仔细阅读以下提醒!
+ </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>
--
Gitblit v1.9.3