任务状态

src/views/task_details/TaskTop.vue

@@ -4,9 +4,20 @@
       <span class="title-name">{{ itemInfo.course_name }}</span>
       <span class="title-time">{{ itemInfo.cs_item_time }}</span>
     </div>
-    <div class="cs_item_name">
-      {{ itemInfo.cs_item_name }}
+    <div class="cs-item-box">
+      <div class="cs_item_name">
+        {{ itemInfo.cs_item_name }}
+      </div>
+      <div
+        class="cs-status"
+        :style="{ color: statusColor[itemInfo.finish_status].color }"
+        v-if="itemInfo.finish_status || itemInfo.finish_status === 0"
+      >
+        <span class="cs-status-bg" :style="{ background: statusColor[itemInfo.finish_status].color }"></span>
+        <span>{{ statusColor[itemInfo.finish_status].text }}</span>
+      </div>
     </div>
+
     <div class="courseware-list">
       <template v-if="type === 'teacher'">
         <div class="task-name">{{ itemInfo.name }}</div>
@@ -100,6 +111,12 @@ const emits = defineEmits(['viewFile']);
 function emitViewFile(fileName, fileId) {
   emits('viewFile', fileName, fileId);
 }
+
+const statusColor = {
+  0: { color: '#FF9900', text: '未开始' },
+  1: { color: '#3ACB85', text: '进行中' },
+  2: { color: '#FF1111', text: '已结束' }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -124,7 +141,29 @@ function emitViewFile(fileName, fileId) {
     }
   }
 
+  .cs-item-box {
+    display: flex;
+    align-items: start;
+
+    .cs-status {
+      display: flex;
+      column-gap: 8px;
+      align-items: center;
+      margin-top: 8px;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+
+      &-bg {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+      }
+    }
+  }
+
   .cs_item_name {
+    flex: 1;
     margin: 8px 0 24px;
     font-size: 16px;
     font-weight: 400;

src/views/task_details/teacher/index.vue

@@ -308,7 +308,8 @@ GetTaskInfo({
       is_enable_message: isMessage,
       content,
       cs_item_begin_time,
-      cs_item_end_time
+      cs_item_end_time,
+      finish_status
     }) => {
       itemInfo.value = {
         name,
@@ -318,7 +319,8 @@ GetTaskInfo({
         cs_item_learning_material_list,
         courseware_list,
         content,
-        cs_item_time: `${cs_item_begin_time} ~ ${cs_item_end_time}`
+        cs_item_time: `${cs_item_begin_time} ~ ${cs_item_end_time}`,
+        finish_status
       };
       teachingType.value = teaching_type;
       accessory_list.value = accList;