详情新增报名功能

src/pages/match/details/index.vue

@@ -12,13 +12,18 @@
             <div class="content-wrap">
                 <el-card shadow="hover" style="margin: 24px 0">
                     <div class="flex-between">
-                        <el-page-header @back="goBack" :content="'赛事详情'"></el-page-header>
+                        <el-page-header @back="goBack"></el-page-header>
                     </div>
                 </el-card>
                 <el-card shadow="hover">
                     <div class="content">
                         <h6 class="title">{{title}}</h6>
                         <div class="meta">最近编辑时间：{{gmtModified}}</div>
+                        <div class="right">
+                            <p class="status"
+                               :class="{wait: status == 0 || status == 4,signing: status == 2,signed: status == 1,finish: status == 3 || status == 5}"
+                               @click.stop="signup">{{ statusList[status] }}</p>
+                        </div>
                         <div class="texts ql-editor" v-html="description" v-if="curType == 1"></div>
                         <div v-else>
                             <ul class="progress" v-if="progress.length">
@@ -37,12 +42,6 @@
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex'
-import { Loading } from 'element-ui';
-import 'quill/dist/quill.core.css';
-import 'quill/dist/quill.snow.css';
-import 'quill/dist/quill.bubble.css';
-import bus from '@/libs/bus'
 export default {
     name: 'matchdetail',
     data() {
@@ -51,7 +50,6 @@ export default {
             showSignup: this.$store.state.match.matchSignupStatus,
             coverUrl: '',
             title: '',
-            time: '',
             curType: 1,
             typeList: [
                 {
@@ -68,113 +66,47 @@ export default {
             description: '',
             gmtModified: '',
             progress: [],
-            end: '',
+            status: this.$route.query.status,
-            status: 0,
+            statusList: ["等待报名", "已报名", "立即报名", "报名截止", "比赛中", "已结束"],
-            statusList: ['准备报名','正在报名','准备竞赛','竞赛中','竞赛结束'],
-            endList: ['报名开始','报名截止','竞赛开始','竞赛结束',''],
-            loadIns: null
         };
     },
-    computed: {
-        ...mapState([
-            'userId',
-            'name',
-            'account',
-            'phone',
-            'schoolName',
-        ]),
-    },
     mounted() {
-        bus.$emit('setBg','match')
         this.getData()
         this.getProgress()
     },
     methods: {
-        ...mapActions("match", [
+        goBack() { // 返回
-            "setMatchId", "setMatchSignupStatus"
-        ]),
-        goBack() {
             this.$router.back();
         },
-        getData() {
+        getData() { // 获取竞赛信息
-            this.loadIns = Loading.service()
+            this.$get(this.api.getContest + '/' + this.id).then(res => {
-            this.$get(this.api.getContest + '/' + this.id)
-                .then(res => {
                 let data = res.contest
                 this.coverUrl = data.carouselUrl
                 this.description = data.description
                 this.title = data.name
                 this.gmtModified = data.gmtModified
-
+            }).catch(err => {});
-                    let time = 60 * 60 * 1000 * 24
-                    let now = new Date().getTime()
-                    // 每个字段的含义请看match.vue
-                    let signUpStartTime = new Date(data.signUpStartTime).getTime()
-                    let signUpEndTime = new Date(data.signUpEndTime).getTime()
-                    let playStartTime = new Date(data.playStartTime).getTime()
-                    let playEndTime = new Date(data.playEndTime).getTime()
-                    if(now < signUpStartTime){
-                        this.status = 0
-                        this.end = Math.floor((signUpStartTime - now) / time)
-                        this.time = `报名开始时间：${data.signUpStartTime}`
-                    }else if(now > signUpStartTime && now < signUpEndTime){
-                        this.status = 1
-                        this.end = Math.floor((signUpEndTime - now) / time)
-                        this.time = `报名结束时间：${data.signUpEndTime}`
-                    }else if(now > signUpEndTime && now < playStartTime){
-                        this.status = 2
-                        this.end = Math.floor((playStartTime - now) / time)
-                        this.time = `竞赛开始时间：${data.playStartTime}`
-                    }else if(now > playStartTime && now < playEndTime){
-                        this.status = 3
-                        this.end = Math.floor((playEndTime - now) / time)
-                        this.time = `竞赛结束时间：${data.playEndTime}`
-                    }else if(now > playEndTime){
-                        this.status = 4
-                        this.time = '竞赛结束'
-                    }
-                    this.loadIns.close()
-                })
-                .catch(err => {
-                    this.loadIns.close()
-                });
         },
-        getProgress() {
+        getProgress() { // 获取竞赛进展
-            this.$get(this.api.getContestProgress + '/' + this.id)
+            this.$get(this.api.getContestProgress + '/' + this.id).then(res => {
-                .then(res => {
                 this.progress = res.contestProgressList
-                })
+            }).catch(err => {});
-                .catch(err => {
-
-                });
         },
-        toArticle(id){
+        tabChange(index){ // 切换菜单
-            this.$router.push('article?id=' + id)
-        },
-        tabChange(index){
             this.curType = index
         },
-        signup(){
+        signup(){ // 立即报名
+            if (this.status == 2) {
                 let data = {
-                contestId: this.id,
+                    contestId: this.id
-                account: this.account,
-                phone: this.phone,
-                school: this.schoolName,
-                userId: this.userId,
-                userName: this.name
                 }
                 this.$post(this.api.addApplicant,data).then(res => {
-                if(res.success){
                     this.$message.success('报名成功')
-                    this.setMatchId(this.id);
+                    this.status = 1;
-                    this.setMatchSignupStatus(false);
-                    this.showSignup = false
-                }else{
-                    this.$message.error(res.message)
-                }
                 }).catch(res => {})
             }
         }
+    }
 };
 </script>
 
@@ -227,6 +159,10 @@ export default {
             width: 700px;
         }
 
+        /deep/.el-page-header__left::after{
+            width: 0;
+        }
+
         .content{
             position: relative;
             padding: 20px 40px;
@@ -241,11 +177,44 @@ export default {
                 color: rgba(0, 0, 0, 0.85);
             }
             .meta{
-                padding: 16px 0 32px;
+                padding: 16px 0;
                 font-size: 12px;
                 color: rgba(0, 0, 0, 0.45);
                 text-align: center;
+            }
+            .right{
+                padding: 16px 0 32px;
                 border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: flex-end;
+                flex: 1;
+                .status {
+                    padding: 0 15px;
+                    line-height: 32px;
+                    font-size: 12px;
+                    color: #fff;
+                    background-color: #52C41A;
+                    border-radius: 4px;
+                    cursor: pointer;
+
+                    &.wait {
+                        background-color: #FAAD14;
+                    }
+
+                    &.signing {
+                        background-color: #9076FF;
+                    }
+
+                    &.signed {
+                        background-color: #52C41A;
+                    }
+
+                    &.finish {
+                        background-color: rgba(0, 0, 0, .45);
+                    }
+                }
             }
             .texts{
                 margin: 20px 0 50px;

src/pages/match/list/index.vue

@@ -88,7 +88,7 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapActions } from "vuex";
 import { Loading } from "element-ui";
 import bus from "@/libs/bus";
 
@@ -126,15 +126,6 @@ export default {
             timerList: []
         };
     },
-    computed: {
-        ...mapState([
-            "userId",
-            "name",
-            "account",
-            "phone",
-            "schoolName"
-        ])
-    },
     directives: {
         countdown: {
             bind: function(el, binding, vnode) {
@@ -233,8 +224,7 @@ export default {
         getData() {
             let data = {
                 name: this.keyword,
-                way: this.way,
+                way: this.way
-                userId: this.userId
             };
             this.loadIns = Loading.service();
             this.$get(`${this.api.onlineContestQuery}/${this.pageNo}/${this.pageSize}`, data).then(res => {
@@ -302,10 +292,11 @@ export default {
             }
         },
         toDetail(item) {
+            // console.log(item.status);
             let status = item.status == 1 ? (item.signup ? true : false) : "hide";
             this.setMatchId(item.id);
             this.setMatchSignupStatus(status);
-            this.$router.push(`/match/details`);
+            this.$router.push(`/match/details?status=${item.status}`);
         },
         handleCurrentChange(val) {
             this.pageNo = val;
@@ -315,19 +306,10 @@ export default {
             if (item.status == 2 && item.signup) {
                 let data = {
                     contestId: item.id,
-                    account: this.account,
-                    phone: this.phone,
-                    school: this.schoolName,
-                    userId: this.userId,
-                    username: this.name
                 };
                 this.$post(this.api.addApplicant, data).then(res => {
-                    if (res.success) {
                     this.$message.success("报名成功");
                     this.getData();
-                    } else {
-                        this.$message.error(res.message);
-                    }
                 }).catch(res => {
                 });
             }