add: queue and region

src/api/challenge.js

@@ -133,3 +133,13 @@ export const getChallengeHomeDetail = () =>
       isToken: false,
     },
   });
+
+// 查询已参加的比赛
+export const getParticipatedChallenge = () =>
+  service({
+    method: 'get',
+    url: `/api/participants/participant_teams/user`,
+    headers: {
+      noMessage: true,
+    },
+  });

src/api/index.js

@@ -80,6 +80,7 @@ service.interceptors.response.use(
   (error) => {
     let { message, response } = error;
     let isShowMessage = true;
+    let messageType = 'error';
     if (message == 'Network Error') {
       message = i18n.global.t('interfaceException');
     } else if (response.config?.headers?.noMessage) {
@@ -118,6 +119,7 @@ service.interceptors.response.use(
     } else if (response.status == 401 && response.data?.detail) {
       message = getErrMsg(response.data.detail);
       if (response.data.detail === 'Invalid token' || response.data.detail === 'Token has expired') {
+        messageType = 'info';
         store.dispatch('logOut').then(() => {
           location.href = '/';
         });
@@ -137,7 +139,7 @@ service.interceptors.response.use(
       message = i18n.global.t('systemInterface') + ' ' + message.substr(message.length - 3) + ' ' + i18n.global.t('exception');
     }
     if (isShowMessage) {
-      ElMessage({ message: message, grouping: true, type: 'error', duration: 5 * 1000 });
+      ElMessage({ message: message, grouping: true, type: messageType });
     }
     return Promise.reject(error);
   }

src/assets/iconfont/iconfont.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4279683 */
-  src: url('iconfont.woff2?t=1703643028412') format('woff2'),
-       url('iconfont.woff?t=1703643028412') format('woff'),
-       url('iconfont.ttf?t=1703643028412') format('truetype'),
-       url('iconfont.svg?t=1703643028412#iconfont') format('svg');
+  src: url('iconfont.woff2?t=1705396800455') format('woff2'),
+       url('iconfont.woff?t=1705396800455') format('woff'),
+       url('iconfont.ttf?t=1705396800455') format('truetype'),
+       url('iconfont.svg?t=1705396800455#iconfont') format('svg');
 }
 
 .iconfont {
@@ -14,6 +14,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-zhushi:before {
+  content: "\e6f5";
+}
+
+.icon-host:before {
+  content: "\e6f2";
+}
+
+.icon-Participant:before {
+  content: "\e6f1";
+}
+
 .icon-camera:before {
   content: "\e6f0";
 }

src/assets/iconfont/iconfont.json

@@ -5,6 +5,27 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "38977502",
+      "name": "zhushi",
+      "font_class": "zhushi",
+      "unicode": "e6f5",
+      "unicode_decimal": 59125
+    },
+    {
+      "icon_id": "38957207",
+      "name": "host",
+      "font_class": "host",
+      "unicode": "e6f2",
+      "unicode_decimal": 59122
+    },
+    {
+      "icon_id": "38925356",
+      "name": "Participant",
+      "font_class": "Participant",
+      "unicode": "e6f1",
+      "unicode_decimal": 59121
+    },
     {
       "icon_id": "38733881",
       "name": "camera",

src/directives/copyText.js

@@ -4,7 +4,7 @@
  */
 
 export default {
-  beforeMount(el, { value, arg }) {
+  mounted(el, { value }) {
     el.$copyValue = value.txt;
     el.$resMessage = value.msg;
     const handler = () => {
@@ -14,6 +14,11 @@ export default {
     el.addEventListener('click', handler);
     el.$destroyCopy = () => el.removeEventListener('click', handler);
   },
+  // 在绑定元素的父组件及他自己的所有子节点都更新后调用
+  updated(el, { value }) {
+    el.$copyValue = value.txt;
+    el.$resMessage = value.msg;
+  },
 };
 
 function copyTextToClipboard(input, { target = document.body } = {}) {

src/lang/en.js

@@ -107,6 +107,7 @@ export default {
     please: 'Please',
     login: 'log in',
     partiChall: 'to participate in this challenge.',
+    participated: 'Participated',
   },
   team: {
     team: 'Team',
@@ -209,6 +210,7 @@ export default {
     continue: 'Continue',
     accept_text: 'Please read and accept the rules and conditions.',
     accept_label: 'I accept the terms and conditions.',
+    note: 'Be sure to read it carefully and completely.',
   },
   submission: {
     guidelines: 'Submission Guidelines',
@@ -256,6 +258,7 @@ export default {
     cancelSuccess: 'Submission cancelled successfully!',
     rerun: 'Rerun',
     resume: 'Resume',
+    submissionId: 'Submission ID',
   },
   leaderboard: {
     team: 'Participant team',
@@ -291,9 +294,12 @@ export default {
     lbDesc: 'Leaderboard description',
     startDate: 'Start date',
     endDate: 'End date',
+    queue: 'Queue',
+    queueAwsRegion: 'Queue aws region',
     published: 'Published',
     createSuccess: 'Contest creation success',
     updateSuccess: 'Challenge updated successfully!',
+    publishNote: 'When this switch is turned on, the competition will be open to the public in the corresponding time period',
   },
   addPhase: {
     createPhase: 'Create Phase',
@@ -309,7 +315,7 @@ export default {
     maxSubmiPerDay: 'Max submissions perday',
     maxSubmiPerMonth: 'Max submissions per month',
     maxSubmissions: 'Max submissions',
-    isRestrictedToSelectOneSubmission: 'Is restricted to select onesubmission',
+    isRestrictedToSelectOneSubmission: 'Is restricted to select one submission',
     isPartialSubmissionEvaluationEnabled: 'Is partial submission evaluation enabled',
     allowedSubmissionFileTypes: 'Allowed submission file types',
     createSuccess: 'Phase creation successfully!',

src/lang/zh.js

@@ -107,6 +107,7 @@ export default {
     please: '请',
     login: '登录',
     partiChall: '参与比赛。',
+    participated: '已参加',
   },
   team: {
     team: '团队',
@@ -207,6 +208,7 @@ export default {
     continue: '继续',
     accept_text: '请阅读并接受规则和条件。',
     accept_label: '我接受条款和条件',
+    note: '一定要仔细完整地阅读。',
   },
   submission: {
     guidelines: '投稿须知',
@@ -254,6 +256,7 @@ export default {
     cancelSuccess: '提交成功取消!',
     rerun: '重新执行',
     resume: '恢复',
+    submissionId: '提交ID',
   },
   leaderboard: {
     team: '团队',
@@ -289,9 +292,12 @@ export default {
     lbDesc: '排行榜说明',
     startDate: '开始日期',
     endDate: '结束日期',
+    queue: '队列',
+    queueAwsRegion: '队列区域',
     published: '公开',
     createSuccess: '比赛创建成功',
     updateSuccess: '比赛更新成功',
+    publishNote: '此开关打开，比赛将在对应的时间区段对外开放',
   },
   addPhase: {
     createPhase: '创建阶段',

src/views/challenge/Challenge.vue

@@ -9,6 +9,12 @@
       <div class="flex-center">
         <div class="custom-tag">{{ $t('challenge.ongoing') }}</div>
         <div class="custom-tag">{{ formatTime(item.start_date) }} -- {{ formatTime(item.end_date) }}</div>
+        <div class="participant-tag" v-if="participantIds.includes(item.id)">
+          <svg class="icon mr8" aria-hidden="true" style="font-size: 24px">
+            <use xlink:href="#icon-Participant"></use>
+          </svg>
+          {{ $t('challenge.participated') }}
+        </div>
       </div>
     </div>
     <div class="right-con" :style="{ backgroundImage: item.image ? 'url(' + item.image + ')' : 'url(' + racePng + ')' }"></div>
@@ -25,6 +31,7 @@
 import { onMounted, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { getAllChallenges } from '@/api/host';
+import { getParticipatedChallenge } from '@/api/challenge';
 import { formatTime } from '@/utils/tool';
 import racePng from '../../assets/images/banner.png';
 
@@ -47,16 +54,28 @@ const pager = reactive({
   pageSize: 10,
 });
 const getChallenges = () => {
+  const loading = ElLoading.service();
   getAllChallenges('present', 'approved', 'public', {
     page: pager.pageNum,
-  }).then((res) => {
-    pager.total = res.count;
-    let result = res.results || [];
-    challengeList.value = pager.pageNum === 1 ? result : challengeList.value.concat(result);
+  })
+    .then((res) => {
+      pager.total = res.count;
+      let result = res.results || [];
+      challengeList.value = pager.pageNum === 1 ? result : challengeList.value.concat(result);
+    })
+    .finally((res) => {
+      loading.close();
+    });
+};
+const participantIds = ref([]);
+const getParticipatedIds = () => {
+  getParticipatedChallenge().then((res) => {
+    participantIds.value = res || [];
   });
 };
 onMounted(() => {
   getChallenges();
+  getParticipatedIds();
 });
 
 const loadMore = () => {
@@ -80,6 +99,15 @@ const loadMore = () => {
       line-height: 28px;
       min-height: 84px;
     }
+    .participant-tag {
+      height: 32px;
+      background: rgba(69, 98, 227, 0.5);
+      border-radius: 2px 2px 2px 2px;
+      display: flex;
+      align-items: center;
+      padding: 0 8px 0 4px;
+      margin-left: 16px;
+    }
   }
   .right-con {
     width: 439px;

src/views/challenge/Leaderboard.vue

@@ -18,7 +18,7 @@
   <el-table :data="leaderboardList" stripe style="width: 100%" header-cell-class-name="thBg">
     <el-table-column fixed prop="rank" :label="$t('leaderboard.rank')" width="80" />
     <el-table-column fixed sortable prop="submission__participant_team__team_name" :label="$t('leaderboard.team')" width="250" />
-    <el-table-column sortable :label="label" v-for="(label, i) in labels" :key="label" width="280">
+    <el-table-column sortable :label="label" v-for="(label, i) in labels" :key="label" width="290">
       <template #default="{ row }">
         {{ row.result[i] }}
       </template>

src/views/challenge/Participate.vue

@@ -15,7 +15,7 @@
         @size-change="getTeams"
         @current-change="getTeams"
         class="mt24 oa-pagination" />
-      <el-button type="primary" size="large" class="long-button mt24" :disabled="!activeId" @click="participate">
+      <el-button type="primary" size="large" class="long-button mt24" :disabled="!activeId" @click="handleContinue">
         {{ $t('participate.continue') }}
       </el-button>
     </div>
@@ -58,16 +58,23 @@
     <div class="accept-title mb24">
       {{ $t('participate.accept_text') }}
     </div>
-    <div class="accept-con small-scrollbar">
+    <div class="accept-con small-scrollbar" v-scroll-bottom="handleScrollBottom">
       <div v-html="termsConditions" class="editor-content-view"></div>
     </div>
     <el-checkbox v-model="acceptDialog.accept" :label="$t('participate.accept_label')" size="small" />
     <template #footer>
-      <div class="between">
-        <div></div>
+      <div class="flex-between">
+        <div class="note">
+          <svg class="icon mr8" aria-hidden="true" style="font-size: 12px">
+            <use xlink:href="#icon-zhushi"></use>
+          </svg>
+          {{ $t('participate.note') }}
+        </div>
         <div>
           <el-button @click="acceptDialog.visible = false" text bg>{{ $t('cancel') }}</el-button>
-          <el-button type="primary" :disabled="!acceptDialog.accept" @click="confirmParticipate"> {{ $t('challenge.participate') }} </el-button>
+          <el-button type="primary" :disabled="!acceptDialog.accept || !acceptDialog.isReadingFinished" @click="confirmParticipate">
+            {{ $t('challenge.participate') }}
+          </el-button>
         </div>
       </div>
     </template>
@@ -141,11 +148,35 @@ const saveTeam = () => {
 const acceptDialog = reactive({
   visible: false,
   accept: false,
+  isReadingFinished: false,
 });
-const participate = () => {
+const handleContinue = () => {
   acceptDialog.visible = true;
   acceptDialog.accept = false;
 };
+const handleScrollBottom = () => {
+  acceptDialog.isReadingFinished = true;
+};
+const vScrollBottom = {
+  mounted(el, binding) {
+    setTimeout(() => {
+      if (el.clientHeight === el.scrollHeight) {
+        binding.value();
+      }
+    });
+
+    el.addEventListener('scroll', () => {
+      const scrollTop = el.scrollTop; // 滚动条距离容器顶部的距离
+      const scrollHeight = el.scrollHeight; // 容器内容的总高度
+      const clientHeight = el.clientHeight; // 容器可见区域的高度
+
+      if (scrollTop + clientHeight >= scrollHeight) {
+        // 滚动条已经到达底部
+        binding.value(); // 调用绑定的方法
+      }
+    });
+  },
+};
 
 const confirmParticipate = () => {
   partChallenge(props.challengeId, activeId.value).then((res) => {
@@ -261,6 +292,12 @@ const goLogin = () => {
   padding: 16px;
   margin-bottom: 20px;
 }
+.note {
+  color: #7f889a;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+}
 .el-checkbox :deep(.el-checkbox__label) {
   color: #7f889a;
   font-size: 12px;