feat(exam): 考试卡片显示距离时间精确到分钟 (#29)

* fix(quick-view): fix exam and library quick view style feat(exam): support display exam time fix(library): fix wrong inline css property * feat(exam): support display rest hours or minutes before an exam fix(util): fix algorithm error fix(exam): adjust flex style
zjutjh · Feb 9, 2023 · 2211f9a · 2211f9a
1 parent 7372647
commit 2211f9a
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 18 deletions.
diff --git a/src/components/ExamQuickView/index.scss b/src/components/ExamQuickView/index.scss
@@ -25,14 +25,22 @@
     }
 
     .exam-name {
-      font-size: 1.2rem;
-      border-bottom: 1Px solid var(--wjh-color-week);
+      font-size: 1.1rem;
+      border-bottom: 1.5Px solid var(--wjh-color-week);
       padding-bottom: 6Px;
       padding-right: .5rem;
     }
 
     .exam-time {
       font-size: 0.9rem;
+      display: flex;
+      gap: 8Px;
+      flex: none;
+    }
+
+    .exam-state {
+      font-size: 0.9rem;
+      flex: none;
     }
   }
 

diff --git a/src/components/ExamQuickView/index.vue b/src/components/ExamQuickView/index.vue
@@ -14,21 +14,37 @@
     </card>
     <card v-else v-for="item in filteredExamItems" :key=item.id class="exam-card">
       <view style="display: flex; flex-direction: column; gap: 10Px; align-items: flex-start;">
-        <view :class="['exam-name', examState(item.examTime)]"> {{ item.lessonName }} </view>
+        <view class="text-wrapper">
+          <view :class="['exam-name', examState(item.examTime)]"> {{ item.lessonName }} </view>
+          <view class="exam-time">
+            <text> {{ dayjs(getExamTime(item.examTime).date).format("MM/DD") }} </text>
+            <text> {{ getExamTime(item.examTime).start }} </text>
+          </view>
+        </view>
         <view class="text-wrapper">
           <text class="exam-place">
             {{ `${item.examPlace} - 座位号：${item.seatNum}` }}
           </text>
-          <view class="exam-time">
+          <view class="exam-state">
             <text class="taking" v-if="examState(item.examTime) === 'taking'">
               正在考试
             </text>
             <text v-else-if="examState(item.examTime) === 'after'">
               考试已结束
             </text>
-            <text v-else-if="examState(item.examTime) === 'before'">
-              还有 {{ timeUtils.getDayInterval(item.examTime) }} 天开始
-            </text>
+            <template v-else-if="examState(item.examTime) === 'before'">
+              <text v-if="timeUtils.getDayInterval(getExamTime(item.examTime).date) > 0">
+                还有 {{ timeUtils.getDayInterval(item.examTime) }} 天开始
+              </text>
+              <template v-else>
+                <text v-if="minuteInterval(getExamTime(item.examTime).start) >= 60">
+                  还有 {{ Math.floor(minuteInterval(getExamTime(item.examTime).start) / 60) }} 小时开始
+                </text>
+                <text v-else>
+                  还有 {{ minuteInterval(getExamTime(item.examTime).start) }} 分钟开始
+                </text>
+              </template>
+            </template>
           </view>
         </view>
       </view>
@@ -63,7 +79,7 @@ const updateTimeString = computed( () => {
 /**
  * 筛选近期考试
  *
- * 未来2日，过去1日
+ * 未来3日
  */
 const filteredExamItems = computed(() => {
   let list: Exam[] = [];
@@ -76,12 +92,16 @@ const filteredExamItems = computed(() => {
       const resDay = timeUtils.getDayInterval(
         new Date(date + " " + start + ":00")
       );
-      return (resDay <= 3 && resDay >= -1);
+      return (resDay <= 3 && resDay >= 0 && examState(item.examTime) !== "after");
     });
   } catch (e) {
     console.log(e);
   }
-  return list;
+  return list.sort((a, b) => {
+    const { date: dateA, start: timeA } = getExamTime(a.examTime);
+    const { date: dateB, start: timeB } = getExamTime(b.examTime);
+    return dayjs(`${dateA}-${timeA}`) < dayjs(`${dateB}-${timeB}`) ? 1: -1;
+  });
 });
 
 const updateTime = computed(() => {
@@ -115,6 +135,12 @@ function getExamTime(examTimeString: string) {
   };
 }
 
+const minuteInterval = (clock: string) => {
+  const [ hour, minute ] = clock.split(":").map(item => parseInt(item));
+  const { hours, minutes } = timeUtils.getHMInterval({ hour, minute });
+  return hours * 60 + minutes;
+};
+
 /**
  * 考试状态
  * @param examTimeString

diff --git a/src/components/LibraryQuickView/index.vue b/src/components/LibraryQuickView/index.vue
@@ -42,11 +42,7 @@ const current = computed(() => {
 
 const bookCardBackgroundColor = (index: number): CSSProperties => {
   return {
-    backgroundColor: `
-      var(--wjh-color-
-      ${index % 2 ? "yellow" : "orange"}
-      -light)`
-  };
+    backgroundColor: ` var(--wjh-color-${index % 2 ? "yellow" : "orange"}-light)` };
 };
 
 function nav() {

diff --git a/src/utils/time.ts b/src/utils/time.ts
@@ -22,13 +22,13 @@ export const getDayInterval = (
  */
 export const getHMInterval = (
   timeBefore: { hour: number; minute: number },
-  timeAfter: { hour: number; minute: number }
+  timeAfter?: { hour: number; minute: number }
 ) => {
   const minutesCount = {
     before: timeBefore.hour * 60 + timeBefore.minute,
-    after: timeAfter.hour * 60 + timeAfter.minute
+    after: timeAfter?.hour || new Date().getHours() * 60 + (timeAfter?.minute || new Date().getMinutes())
   };
-  const restHours = Math.floor(minutesCount.before - minutesCount.after ) / 60;
+  const restHours = Math.floor((minutesCount.before - minutesCount.after) / 60);
   const restMinutes = minutesCount.before - minutesCount.after - restHours * 60;
   return {
     hours: restHours,