修改赛事详情

src/views/detail/matchDetail.vue

@@ -6,12 +6,21 @@
           <h3 class="name">{{ info.name || '暂无' }}</h3>
           <p class="brief">{{ info.industry || '暂无' }}</p>
           <p class="money" v-if="info.money">{{ info.money || '暂无' }}</p>
-          <p class="type" v-if="info.match_type">{{ getDict(info.match_type, 'type') || '暂无' }}</p>
+          <div class="other" v-if="info.match_type">
+            <span>活动类型：</span>
+            <span class="type">{{ getDict(info.match_type, 'type') || '暂无' }}</span>
+          </div>
+          <div class="other" v-if="info.match_status">
+            <span>赛事状态：</span>
+            <span class="status" :class="[info.match_status == '0' ? 'status0' : info.match_status == '1' ? 'status1' : 'status2']">
+              {{ getDict(info.match_status, 'status') || '暂无' }}
+            </span>
+          </div>
           <div class="time">
             <el-image class="image" :src="time" fit="fill"></el-image>
             <span>{{ info.start_time || '暂无' }} ~ {{ info.end_time || '暂无' }}</span>
           </div>
-          <div class="button" @click="toSign">活动报名</div>
+          <div class="button" @click="toSign" v-if="info.match_status == '1'">活动报名</div>
         </div>
         <div class="info_2">
           <div class="title">活动介绍</div>
@@ -102,7 +111,7 @@
                 <div v-html="info.rules.rules12"></div>
               </div>
             </div>
-            <div class="button" @click="toSign">活动报名</div>
+            <div class="button" v-if="info.match_status == '1'" @click="toSign">活动报名</div>
           </div>
         </div>
       </div>
@@ -138,6 +147,7 @@ const info = ref({})
 // 弹框
 const cardTypeList = ref([])
 const typeList = ref([])
+const statusList = ref([])
 const ruleFormRef = ref()
 const form = ref({})
 const validatePhoneNumber = (rule, value, callback) => {
@@ -183,6 +193,9 @@ const searchOther = async () => {
   // 赛事类型
   result = await dictDataStore.query({ code: 'activeType', is_use: '0' })
   if ($checkRes(result)) typeList.value = result.data
+  // 赛事状态
+  result = await dictDataStore.query({ code: 'matchStatus', is_use: '0' })
+  if ($checkRes(result)) statusList.value = result.data
 }
 const search = async () => {
   let id = route.query.id
@@ -196,6 +209,7 @@ const getDict = (data, model) => {
   if (data) {
     let res
     if (model == 'type') res = typeList.value.find((f) => f.value == data)
+    else if (model == 'status') res = statusList.value.find((f) => f.value == data)
     return get(res, 'label')
   }
 }
@@ -261,20 +275,51 @@ provide('submitForm', submitForm)
         margin-top: 25px;
         color: #000;
       }
-      .type {
-        font-size: $global-font-size-12;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        width: 70px;
-        height: 25px;
-        border-radius: 4px;
-        text-align: center;
-        line-height: 25px;
-        font-weight: 700;
-        color: #2a78ff;
-        background: #eaf1ff;
+      .other {
+        display: flex;
+        align-items: center;
+        margin: 10px 0;
+        font-size: $global-font-size-18;
+        .type {
+          font-size: $global-font-size-12;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 70px;
+          height: 25px;
+          border-radius: 4px;
+          text-align: center;
+          line-height: 25px;
+          font-weight: 700;
+          color: #2a78ff;
+          background: #eaf1ff;
+        }
+        .status {
+          font-size: $global-font-size-12;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 70px;
+          height: 25px;
+          border-radius: 4px;
+          text-align: center;
+          line-height: 25px;
+          font-weight: 700;
+        }
+        .status0 {
+          color: #ff9407;
+          background-color: #fff2e1;
+        }
+        .status1 {
+          color: #2a78ff;
+          background: #eaf1ff;
+        }
+        .status2 {
+          color: #4f5050;
+          background: #dcdcdd;
+        }
       }
+
       .time {
         display: flex;
         margin-top: 60px !important;