manHourHousekeeper/fhKeeper/formulahousekeeper/course-pc/src/views/coursemanagement/addVideo.vue

<template>
  <div class="video-list-container">
    <draggable v-model="videoListComputed" handle=".drag-handle" @end="onDragEnd">
      <div
        v-for="(item, index) in videoListComputed"
        :key="index"
        :class="['video-item', item.videoError ? 'error-video' : '']"
        v-loading="item.videoLoading"
        element-loading-text="上传中，请稍后..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        element-loading-customClass="loadingTextClolr"
      >
        <el-row :gutter="20">
          <el-col :span="1">
            <i class="el-icon-rank drag-handle" style="cursor: move; line-height: 32px;"></i>
          </el-col>
          <el-col :span="6">
            <el-input v-model="item.videoName" size="small" placeholder="请输入视频名称"></el-input>
          </el-col>
          <el-col :span="4">
            <el-select v-model="item.videoLecturerId" placeholder="请选择教师" size="small" style="width: 100%">
              <el-option
                v-for="type in videoTypes"
                :key="type.id"
                :label="type.teacherName"
                :value="type.id"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="8" style="display: flex; align-items: center;">
            <div>试看时间（分钟）</div>
            <el-input-number
              size="small"
              v-model="item.videoPreviewTime"
              :min="0"
              :max="600"
              placeholder="试看时间(秒)"
            ></el-input-number>
          </el-col>
          <el-col :span="5">
            <el-button size="small" type="primary" @click="previewingVideoSrc(item)">预览视频</el-button>
            <el-button size="small" type="danger" @click="removeRow(index)">删除</el-button>
          </el-col>
        </el-row>
      </div>
    </draggable>

    <!-- 预览视频 -->
    <el-dialog title="预览视频" append-to-body :visible.sync="previewingVideoVisable" width="900px" top="6.5vh" :before-close="handleClose">
      <div class="previewingVideo">
        <video :src="previewVideoSrc" :poster="require('../../assets/image/yunketang.png')" controls></video>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'VideoListEditor',
  components: {
    draggable
  },
  props: {
    value: {
      type: Array,
      required: true
    }
  },
  computed: {
    videoListComputed: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  data() {
    return {
      videoTypes: [],
      previewVideoSrc: '',
      previewingVideoVisable: false
    }
  },
  methods: {
    previewingVideoSrc(row) {
      console.log(row)
      this.previewVideoSrc = row.videoUrl
      this.previewingVideoVisable = true
    },
    getAllTeachers() {
      this.http.post(`/course-teacher/list`, {}, res => {
        this.videoTypes = res.data || []
      })
    },
    removeRow(index) {
      const list = [...this.videoListComputed]
      const row = list[index]
      this.$confirm(`此操作将删除【${row.videoName}】视频, 是否继续?`, '删除视频', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const { id, videoUrl, coursePreviousUrl } = row
        this.http.post(`/course-sub-info/remove`, {
          id,
          courseUrl: videoUrl,
          coursePreviousUrl: coursePreviousUrl
        }, res => {
          if(res.code === 'ok') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });

            list.splice(index, 1)
            this.videoListComputed = list
          }
        })
      })
    },
    onDragEnd() {
      console.log('排序完成', this.videoListComputed)
    },
    handleClose(done) {
      // 清除 video 的 src，释放资源
      const videoEl = this.$refs.previewVideo
      if (videoEl) {
        videoEl.pause()
        videoEl.removeAttribute('src')
        videoEl.load()
      }
      this.previewingVideoVisable = false
      this.previewVideoSrc = ''
      done()
    }
  },
  mounted() {
    this.getAllTeachers()
  }
}
</script>

<style scoped>
.video-list-container {
  padding: 20px;
}
.video-item {
  margin-bottom: 15px;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
  position: relative;
}
.error-video {
  background: #e6a23c;
}
</style>

<style lang="scss">
.video-list-container {
  .el-loading-spinner i {
    color: #fff !important;
  }
  .el-loading-text {
    color: #fff !important;
  }
}

.previewingVideo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 68vh;
}

.previewingVideo video {
  width: 100%;
  height: 100%;
}
</style>