GCLS_Page_Learn/src/views/task_details/TaskTop.vue

<template>
  <div class="task-detail-top">
    <div class="title">
      <span class="title-name">{{ itemInfo.course_name }}</span>
      <span class="title-time">{{ itemInfo.cs_item_time }}</span>
    </div>
    <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>
        <div class="task-time">{{ itemInfo.time_space_view_txt }}</div>
        <div class="task-content" v-if="contentUrl">
          <span>{{ $t('Key371') }}</span>
          <!-- eslint-disable-next-line vue/no-v-html -->
          <span v-html="contentUrl"></span>
        </div>
      </template>
      <template v-if="!isExercises && itemInfo.courseware_list && itemInfo.courseware_list.length > 0">
        <div class="courseware-list-title">
          {{ $t('Key309') }}
        </div>
        <el-tag
          v-for="item in itemInfo.courseware_list"
          :key="item.courseware_id"
          color="#fff"
          :title="item.courseware_name"
        >
          <div class="courseware">
            <svg-icon icon-class="courseware" />
            <router-link
              target="_blank"
              :to="{
                path: `/task_detail/show_courseware/${item.courseware_id}?group_id_selected_info=${
                  item.group_id_selected_info ? item.group_id_selected_info : '[]'
                }`
              }"
              class="courseware_name nowrap-ellipsis"
            >
              {{ item.courseware_name }}
            </router-link>
          </div>
        </el-tag>
      </template>
    </div>
    <div
      class="learning-material"
      v-if="itemInfo.cs_item_learning_material_list && itemInfo.cs_item_learning_material_list.length > 0"
    >
      <div class="learning-material-title">
        {{ isExercises && type === 'teacher' ? '练习任务' : $t('Key274') }}
      </div>
      <el-tag
        v-for="item in itemInfo.cs_item_learning_material_list"
        :key="item.file_id"
        color="#fff"
        :title="item.file_name"
      >
        <span @click="emitViewFile(item.file_name, item.file_id)">{{ item.file_name }}</span>
      </el-tag>
    </div>
  </div>
</template>

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

<script setup>
import { computed } from 'vue';

const props = defineProps({
  itemInfo: {
    type: Object,
    required: true
  },
  type: {
    type: String,
    required: true
  },
  isExercises: {
    type: Boolean,
    required: true
  }
});

let contentUrl = computed(() => {
  const content = props.itemInfo.content;
  if (!content) return '';
  return content.replace(
    new RegExp(/(https?:\/\/[\w-]+\.[\w-]+\.[\w-,@?^=%&:/~\\+#]+)/, 'g'),
    '<a href="$1" target="_blank">$1</a>'
  );
});

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>
.task-detail-top {
  padding: 24px 40px;
  background-color: #fff;
  border-radius: 8px;

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-name {
      font-size: 24px;
      font-weight: 700;
      line-height: 36px;
    }

    &-time {
      color: #737373;
    }
  }

  .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;
    line-height: 24px;
    color: rgba(0, 0, 0, 50%);
  }

  .learning-material {
    margin-bottom: 16px;

    &-title {
      margin-bottom: 16px;
      font-size: 16px;
      font-weight: 400;
      line-height: 32px; /* 200% */
      color: #2c2c2c;
    }
  }

  .courseware-list {
    padding-top: 24px;
    margin-bottom: 16px;
    border-top: 1px solid #d9d9d9;

    .task-name {
      margin-bottom: 16px;
      font-size: 20px;
      font-weight: bold;
      line-height: 30px;
    }

    .task-time {
      margin-bottom: 16px;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px; /* 150% */
      color: #2c2c2c;
      opacity: 0.5;
    }

    .task-content {
      display: flex;
      column-gap: 38px;
      margin-bottom: 16px;
      white-space: pre-wrap;

      :deep a {
        color: #18a0fb;
      }

      :first-child {
        min-width: 70px;
        font-size: 16px;
        font-weight: 400;
        line-height: 32px; /* 200% */
        color: #000;
      }

      :last-child {
        font-size: 16px;
        font-weight: 400;
        line-height: 32px; /* 200% */
        color: #000;
        word-break: break-all;
      }
    }

    &-title {
      margin-bottom: 16px;
      font-size: 16px;
      font-weight: 400;
      line-height: 32px; /* 200% */
      color: #2c2c2c;
    }

    .el-tag {
      cursor: pointer;

      .courseware {
        .svg-icon {
          margin-right: 12px;
          font-size: 18px;
          vertical-align: super;
        }

        &_name {
          display: inline-block;
          max-width: 120px;
        }
      }
    }
  }
}
</style>