GCLS_Page_Learn/src/views/main/components/TaskList.vue

<template>
  <div>
    <ul class="task-list">
      <li
        v-for="({ task_list, cs_item_id, cs_item_name, course_id, course_name, task_time_type }, i) in taskGroupList"
        :key="i"
        class="task-item"
      >
        <div class="task-item-top">
          <svg-icon icon-class="arrival" class-name="arrival" :style="getItemIconColor(course_id)" />
          <span class="cs-item-name">
            <span
              :style="getItemIconColor(course_id)"
              @click="$router.push(`/task_view/${cs_item_id}?task_time_type=${task_time_type}`)"
            >
              {{ cs_item_name }}
            </span>
          </span>
          <span class="task-button" :style="{ 'background-color': buttonColorList.get(task_time_type) }">
            {{ $t(getTimeTypeName(task_time_type)) }}{{ $t('Key289') }}
          </span>
        </div>
        <div class="task-item-bottom">
          <div class="course-name" @click="changeTab(menuList[1].tab, course_id)">
            {{ course_name }}
          </div>
          <ul>
            <li v-for="({ id, name, teaching_type, time_space_view_txt, finish_status }, j) in task_list" :key="id">
              <span>{{ j + 1 }}.</span>
              <span>{{ ` ${name} ${liveTeachingType === teaching_type ? time_space_view_txt : ''}` }}</span>
              <template v-if="liveTeachingType === teaching_type">
                <template v-if="finish_status === 1">
                  <span
                    class="enter-live"
                    :style="{ color: finishStatusList[finish_status].color }"
                    @click.stop="taskLink(task_list[0].teaching_type, task_list[0].id)"
                  >
                    {{ $t('Key616') }} >
                  </span>
                </template>
                <template v-else>
                  <span :style="{ color: finishStatusList[finish_status].color }">
                    {{ finishStatusList[finish_status].name }}
                  </span>
                </template>
              </template>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TaskList'
};
</script>

<script setup>
import { inject } from 'vue';
import { useRouter } from 'vue-router/composables';
import { menuList } from '../index';
import { useTaskLink, useTaskItem, getTimeTypeName, buttonColorList } from './TaskList';
import { taskClassify } from '@/views/teacher/create_course/step_three/components/data/constant.js';

defineProps({
  timeUnit: {
    type: undefined,
    required: true
  },
  taskGroupList: {
    type: Array,
    required: true
  }
});

const finishStatusList = [
  {
    value: 0,
    name: '未开始',
    color: '#FEA014'
  },
  {
    value: 1,
    name: '进行中',
    color: '#2A76E8'
  },
  {
    value: 2,
    name: '已结束',
    color: '#E04A4A'
  }
];

const router = useRouter();
const liveTeachingType = taskClassify[4].teaching_type;
let { taskLink } = useTaskLink(router);
let { getItemIconColor } = useTaskItem();

let changeTab = inject('changeTab');
</script>

<style lang="scss" scoped>
.task-list {
  li.date-stamp {
    margin-top: 16px;
    margin-bottom: -8px;
    font-weight: 700;
  }

  .task-item {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    padding: 16px 24px;
    margin-top: 16px;
    cursor: pointer;
    border: 1px solid $border-color;
    border-radius: 8px;

    &-top {
      display: flex;
      align-items: center;

      .arrival {
        width: 20px;
        height: 20px;
      }

      .cs-item-name {
        flex: 1;
        margin-left: 10px;
      }

      .task-button {
        height: 24px;
        padding: 4px 8px;
        font-size: 14px;
        color: #fff;
        border-radius: 8px;
      }
    }

    &-bottom {
      padding-left: 30px;
      font-size: 14px;

      .course-name {
        font-weight: 500;
        color: #000;
      }

      ul > li {
        margin-top: 8px;
        color: #7f7f7f;
        cursor: text;

        .enter-live {
          margin-left: 12px;
          cursor: pointer;
        }
      }

      .time-txt {
        margin-top: 8px;
        color: #808080;
      }
    }
  }
}
</style>