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_name">
      {{ itemInfo.cs_item_name }}
    </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">
          <span>任务说明</span>
          <!-- eslint-disable-next-line vue/no-v-html -->
          <span v-html="contentUrl"></span>
        </div>
      </template>
      <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>
    </div>
    <div class="learning-material">
      <div class="learning-material-title">
        {{ $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 {
  props: {
    itemInfo: {
      type: Object,
      required: true
    },
    type: {
      type: String,
      required: true
    }
  },
  computed: {
    contentUrl() {
      const content = this.itemInfo.content;
      if (!content) return '';
      return content.replace(
        new RegExp(/(https?:\/\/[\w-]+\.[\w-]+\.[\w-,@?^=%&:/~\\+#]+)/, 'g'),
        '<a href="$1" target="_blank">$1</a>'
      );
    }
  },
  methods: {
    emitViewFile(fileName, fileId) {
      this.$emit('viewFile', fileName, fileId);
    }
  }
};
</script>

<style lang="scss" scoped>
.task-detail-top {
  padding: 24px 32px;
  background-color: #fff;
  border-radius: 8px;

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

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

    &-time {
      color: #737373;
    }
  }

  .cs_item_name {
    margin: 8px 0 24px;
  }

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

    &-title {
      margin-bottom: 16px;
      font-size: 18px;
    }
  }

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

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

    .task-time {
      margin-bottom: 16px;
      color: #969696;
    }

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

      ::v-deep a {
        color: #18a0fb;
      }

      :first-child {
        min-width: 70px;
      }

      :last-child {
        word-break: break-all;
      }
    }

    &-title {
      margin-bottom: 16px;
      font-size: 18px;
    }

    .el-tag {
      cursor: pointer;

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

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