GCLS_Page_Learn/src/views/teacher/cs_item_detail/index.vue

<template>
  <div class="cs-item-detail-container">
    <div>
      <span>讲次详情</span>
      <div class="cs-item-info">
        <el-row>
          <el-col :span="21">
            {{ CSItemInfoBox.date_stamp }} {{ CSItemInfoBox.minute_space }}
          </el-col>
          <el-col :span="3" class="col_right">
            任务{{
              CSItemInfoBox.finish_status === 0
                ? '未开始'
                : CSItemInfoBox.finish_status === 1
                ? '已开始'
                : '已结束'
            }}
          </el-col>
        </el-row>
        <el-row class="cs-item-name">
          <el-col>{{ CSItemInfoBox.name }}</el-col>
        </el-row>
        <el-row class="cs-item-class-name">
          <el-col :span="20">{{ CSItemInfoBox.class_name }}</el-col>
          <el-col :span="4">
            <el-button plain @click.prevent="jumpLiveRoom">进入直播教室</el-button></el-col
          >
        </el-row>
      </div>
    </div>
    <classroom-task
      :pre-task-list="CSItemInfoBox.pre_task_list"
      :mid-task-list="CSItemInfoBox.mid_task_list"
      :after-task-list="CSItemInfoBox.after_task_list"
    />
    <!--学习资料-->
    <div class="learning-material">
      <div class="learning-material-title">学习资料</div>
      <div>
        <el-row>
          <el-col class="learning-material-upload" :span="24">
            <el-upload action="/"><el-button>上传文件</el-button></el-upload>
          </el-col>
        </el-row>
        <el-tag
          class="learning-material-tag"
          v-for="(list, i) in CSItemInfoBox.learning_material_list"
          :key="i"
          type="info"
          ><a href="list.file_url" target="_blank">{{ list.file_url }}</a></el-tag
        >
      </div>
    </div>
  </div>
</template>

<script>
import { getCSItemInfoBox } from '@/api/table';
import { createEnterLiveRoomLink } from '@/api/live';
import ClassroomTask from './ClassroomTask';

export default {
  data() {
    return {
      id: this.$route.params.id,
      CSItemInfoBox: {
        class_name: '',
        date_stamp: '',
        finish_status: 0,
        minute_space: '',
        name: '',
        pre_task_list: [],
        mid_task_list: [],
        after_task_list: [],
        learning_material_list: []
      }
    };
  },
  components: {
    ClassroomTask
  },
  mounted() {
    getCSItemInfoBox({ id: this.id }).then(response => {
      this.CSItemInfoBox = Object.assign(this.CSItemInfoBox, response);
    });
  },
  methods: {
    jumpLiveRoom() {
      createEnterLiveRoomLink({ cs_item_id: this.id }).then(response => {
        window.open(response.live_room_url, '_blank');
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';

.cs-item-detail-container {
  @include contanier;

  .cs-item-info {
    width: 100%;
    height: 122px;
    padding: 15px 28px 20px 45px;
    margin-top: 11px;
    background-color: #eee;
    .col_right {
      text-align: right;
    }
    .cs-item-name {
      padding: 16px 0;
    }
    .cs-item-class-name {
      color: #a4a4a4;
      .el-button {
        position: relative;
        top: -24px;
        right: -32px;
      }
    }
  }
}

.learning-material {
  &-title {
    padding-top: 12px;
  }
  &-tag {
    @include el-tag;

    margin-top: 16px;
    height: 40px;
    line-height: 40px;
  }
  &-upload {
    padding-top: 27px;
  }
}
</style>