dy-admin-manager/src/views/afterSchoolManager/modal/homework-detail.vue

<template>
  <div class="studentWroks">
    <template v-if="listMusic.length > 0">
      <el-alert title="练习曲目" :closable="false" style="width: 99%;margin-bottom: 8px;"></el-alert>
      <el-table
        max-height="300px"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        :data="listMusic"
        style="margin-bottom: 20px;"
      >
        <el-table-column prop="musicScoreName" width="260px" align="left" label="名称">
        </el-table-column>
        <el-table-column prop="subjectName" align="left" label="级别">
          <template slot-scope="scope">
            <div v-if="scope.row.heardLevel">{{ scope.row.heardLevel | palyLevelFilter }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="finishFlag" align="left" label="分数">
          <template slot-scope="scope"
            ><span
                    :class="
                      scope.row.trainingScore >= scope.row.standardScore ? '' : 'red'
                    "
                    >{{ scope.row.trainingScore }}</span
                  >
                  / {{ scope.row.standardScore }} 分</template
          >
        </el-table-column>
        <el-table-column prop="finishFlag" align="right" label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.fileJson && scope.row.fileJson.length > 0" @click="onDetail(scope.row)" type="text">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <template v-if="listVideo.length > 0">
      <el-alert title="练习视频" :closable="false" style="width: 99%;margin-bottom: 8px;"></el-alert>
      <el-table
        max-height="300px"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        :data="listVideo"
      >
        <el-table-column prop="musicScoreName" align="left" label="名称">
          </el-table-column>
          <el-table-column prop="subjectName" align="left" label="级别">
            <template slot-scope="scope">
              <div v-if="scope.row.heardLevel">{{ scope.row.heardLevel | palyLevelFilter }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="finishFlag" align="left" label="分数">
            <template slot-scope="scope"
              ><span
                      :class="
                        scope.row.trainingScore >= scope.row.standardScore ? '' : 'red'
                      "
                      >{{ scope.row.trainingScore }}</span
                    >
                    / {{ scope.row.standardScore }} 分</template
            >
          </el-table-column>
          <el-table-column prop="finishFlag" align="right" label="操作">
          <template slot-scope="scope">
            <el-button  @click="onDetail(scope.row)" type="text">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <template v-if="listTxt.length > 0">
      <el-alert title="练习" :closable="false" style="width: 99%;margin-bottom: 8px;"></el-alert>
      <el-table
        max-height="300px"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        :data="listTxt"
      >
        <el-table-column prop="desc" align="left" label="练习内容">
        </el-table-column>
        <el-table-column prop="finishFlag" align="right" label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.fileJson && scope.row.fileJson.length > 0" @click="onDetail(scope.row)" type="text">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-dialog
      title="查看"
      width="680px"
      append-to-body
      :visible.sync="videoVisible"
      v-if="videoVisible"
    >
      <div class="activeVideoWrap">
        <videoTcplayer v-if="selectItem.fileType === 'VIDEO'" class="ql-video" :src="selectItem.filePath" />
        <audio
          id="audio"
          controls
          v-if="selectItem.fileType === 'SOUND'"
          style="width: 100%"
          :src="selectItem.filePath"
        >
          您的浏览器不支持视频播放
        </audio>
        <el-image 
          v-if="selectItem.fileType === 'IMG'"
          fit="contain"
          style="width: 100%; height: 350px"
          :src="selectItem.filePath" 
          :preview-src-list="[selectItem.filePath]">
        </el-image>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import videoTcplayer from "@/components/video-tcplayer";
export default {
  props: ["list", "groupType"],
  components: { videoTcplayer },
  data() {
    return {
      videoVisible: false,
      listMusic: [],
      listVideo: [],
      listTxt: [],
      selectItem: {}
    };
  },
  mounted() {
    this.__init()
  },
  methods: {
    __init() {
      const list = this.list || []
      const tempMusic = []
      const tempVideo = []
      const tempTxt = []
      list.forEach(item => {
        if(item.homeworkType === "MUSIC_SCORE") {
          tempMusic.push(item)
        } else if(item.homeworkType === "VIDEO") {
          tempVideo.push(item)
        } else {
          tempTxt.push(item)
        }
      })
      
      this.listMusic = tempMusic
      this.listVideo = tempVideo
      this.listTxt = tempTxt
      console.log(this.listMusic, this.listVideo, this.listTxt, 'text')
    },
    onDetail(row) {
      this.selectItem = row.fileJson && row.fileJson.length > 0 ? row.fileJson[0] : {}
      console.log(this.selectItem, 'this.selectItem')
      if(this.selectItem.expireFlag) {
        this.$message.error('文件已过期')
        return
      }
      this.videoVisible = true
    }
  }
};
</script>

<style lang="scss" scoped>
.activeVideoWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/deep/.video-js {
  height: 360px;
}
.red {
    color: #f44743;
  }
</style>