赛事报名状态

src/pages/match/details/index.vue

@@ -22,24 +22,27 @@
                 距离{{ endList[status] }}还有
                 <em>{{ end }}</em>
               </p>
-              <el-dropdown v-if="playingStages.length > 1"
+              <div class="m-l-20">
-                           class="m-l-10"
+                <p v-if="status && status !== 5"
-                           @command="chooseStage">
+                   :class="['sign-status', {signing: status == 2,signed: status == 1,playing: status == 4}]">{{ form.competitionRegistration ? '已报名' : '未报名' }}</p>
-                <el-button type="primary"
+                <el-dropdown v-if="playingStages.length > 1"
-                           style="background-color: #f96d6d;border: 0;">
+                             @command="chooseStage">
-                  选择竞赛<i class="el-icon-arrow-down el-icon--right"></i>
+                  <el-button type="primary"
-                </el-button>
+                             style="background-color: #f96d6d;border: 0;">
-                <el-dropdown-menu slot="dropdown">
+                    选择竞赛<i class="el-icon-arrow-down el-icon--right"></i>
-                  <el-dropdown-item v-for="(item, i) in playingStages"
+                  </el-button>
-                                    :key="i"
+                  <el-dropdown-menu slot="dropdown">
-                                    :command="item">进入{{ item.stageName }}</el-dropdown-item>
+                    <el-dropdown-item v-for="(item, i) in playingStages"
-                </el-dropdown-menu>
+                                      :key="i"
-              </el-dropdown>
+                                      :command="item">进入{{ item.stageName }}</el-dropdown-item>
-              <a v-else-if="status != 4 || (status == 4 && curStage)"
+                  </el-dropdown-menu>
-                 class="status"
+                </el-dropdown>
-                 :class="{wait: status == 0,signing: status == 2,signed: status == 1,playing: status == 4,finish: status == 3 || status == 5}"
+                <div v-else-if="status != 4 || (status == 4 && curStage)"
-                 :title="statusList[status]"
+                     class="status"
-                 @click.stop="signup">{{ statusList[status] }}</a>
+                     :class="{wait: status == 0,signing: status == 2,signed: status == 1,playing: status == 4,finish: status == 3 || status == 5}"
+                     :title="statusList[status]"
+                     @click.stop="signup">{{ statusList[status] }}</div>
+              </div>
             </div>
           </div>
           <div class="info">
@@ -644,7 +647,6 @@
             </div>
           </div>
         </div>
-        <!-- :http-request="handleRequest" -->
         <div class="flex m-b-20">
           <span class="fs-14">文件上传：</span>
           <el-upload :disabled="uploading"
@@ -1382,7 +1384,8 @@ export default {
       if (!form.teamId) return util.errorMsg('请选择团队')
       if (!form.invitationCode) return util.errorMsg('请输入团队邀请码')
       if (this.form.completeCompetitionSetup.isNeedCode && !form.registrationInvitationCode) return util.errorMsg('请输入大赛邀请码')
-      this.$post(this.api.joinCompetitionTeam, form).then(({ status, data, message }) => {
+      this.$post(this.api.joinCompetitionTeam, form).then(res => {
+        this.status = 1
         this.enterVisible = false
         this.getData()
         util.successMsg('报名成功！')
@@ -1620,6 +1623,7 @@ export default {
             type: 'success'
           }).then(() => {
             this.$post(`${this.api.cancelRegistration}?competitionId=${this.id}`).then(res => {
+              this.status = 2
               this.$message.success('取消报名成功')
               this.getData()
             }).catch(res => { })
@@ -1758,10 +1762,27 @@ export default {
         display: inline-flex;
         align-items: center;
     }
+    .sign-status {
+        margin-bottom: 10px;
+        text-align: center;
+        font-size: 14px;
+        color: $main-color;
+        &.signing {
+            color: $main-color;
+        }
+        &.signed {
+            color: #52c41a;
+        }
+        &.playing {
+            color: #f96d6d;
+        }
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
     .status {
         max-width: 120px;
         padding: 0 16px;
-        margin-left: 20px;
         line-height: 34px;
         font-size: 14px;
         color: #fff;

src/pages/match/list/index.vue

@@ -122,8 +122,9 @@
                     </div>
                   </div>
                   <div class="right">
+                    <p v-if="item.status && item.status !== 5"
+                       :class="['sign-status', {signing: item.status == 2, signed: item.status == 1, playing: item.status == 4 && item.curStage}]">{{ item.whetherToSignUp === 0 ? '已报名' : '未报名' }}</p>
                     <el-dropdown v-if="item.playingStages && item.playingStages.length > 1"
-                                 class="m-l-10"
                                  @click.stop="stageClick"
                                  @command="e => chooseStage(e, item)">
                       <el-button type="primary"
@@ -1192,7 +1193,20 @@ export default {
                 justify-content: center;
                 align-items: flex-end;
                 flex: 1;
-
+                .sign-status {
+                    margin-bottom: 10px;
+                    font-size: 14px;
+                    color: $main-color;
+                    &.signing {
+                        color: $main-color;
+                    }
+                    &.signed {
+                        color: #52c41a;
+                    }
+                    &.playing {
+                        color: #f96d6d;
+                    }
+                }
                 .status {
                     max-width: 120px;
                     padding: 0 23px;
@@ -1206,18 +1220,15 @@ export default {
                     &.wait {
                         background-color: #faad14;
                     }
-
                     &.signing {
                         background-color: $main-color;
                     }
-
                     &.signed {
                         background-color: #52c41a;
                     }
                     &.playing {
                         background-color: #f96d6d;
                     }
-
                     &.finish {
                         background-color: #ccc;
                     }