Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

litian

3 天以前 2ca7f1e9d3ff3c54ec5d10688a33c628ec296f8b

 src/books/cognitiveLanDevEduAges0to3/components/checkVideo/index.vue

New file
@@ -0,0 +1,244 @@
<template>
  <div class="video-box">
    <div class="video-title">
      <img class="bg-img" :src="type == 'video'? videoBgIcon : audioBgIcon" alt="" />
      <p class="video-title-name" v-if="type == 'video'">
        <img @click="isDisplay = !isDisplay" :src="videoIcon" alt="" />
        <span>视频资料</span>
      </p>
      <p class="video-title-name" v-else>
        <img @click="isDisplay = !isDisplay" :src="audioIcon" alt="" />
        <span>音频资料</span>
      </p>
      <p class="video-title-img" v-if="type == 'video'">
        <span> {{ videoName }}</span>
        <el-tooltip
          class="item"
          effect="dark"
          :content="localIsCollectVideo ? '点击取消' : '点击收藏'"
          placement="top-start"
        >
          <img
            :src="
              collectResourceList.findIndex((item) => item.id == videoPath) > -1
                ? collectCheck
                : collectImg
            "
            alt=""
            class="collect-btn"
            @click="handleCollect()"
          />
        </el-tooltip>
      </p>
      <p class="video-title-img" v-if="type == 'audio'">
        <span> {{ videoName }}</span>
      </p>
    </div>
    <div class="video-main" v-if="isDisplay">
      <video
        :src="videoPathSrc"
        webkit-playsinline="true"
        x-webkit-airplay="true"
        playsinline="true"
        x5-video-orientation="h5"
        x5-video-player-fullscreen="true"
        x5-playsinline=""
        controls
        controlslist="nodownload"
        class="w100 video"
        v-if="type == 'video'"
      ></video>
      <audio
        :src="videoPathSrc"
        controls
        controlslist="nodownload"
        class="w100 video"
        v-else
      ></audio>
    </div>
  </div>
</template>

<script>
import { getResourcePath } from "@/assets/methods/resources";
import {
  getCollectResource,
  setCollectResource,
} from "@/assets/methods/resources";
export default {
  data() {
    return {
      videoBgIcon: require("../../assets/images/0028-02.png"),
      audioBgIcon: require("../../assets/images/0028-01.png"),
      videoIcon: require("@/assets/images/videoLogo.png"),
      audioIcon: require("@/assets/images/audioLogo.svg"),
      collectCheck: require("@/assets/images/heart-check.png"),
      collectImg: require("@/assets/images/heart.png"),
      videoPathSrc: "",
      collectResourceList: [],
      localIsCollectVideo: this.isCollectVideo,
      isDisplay: true,
    };
  },
  props: {
    videoPath: {
      type: String,
      required: "",
    },
    videoName: {
      type: String,
      required: "", // 默认值
    },
    type: {
      type: String,
      required: "video", // 默认值
    },
    BookId: {
      type: String,
      required: "", // 默认值
    },
    isCollectVideo: {
      type: Boolean,
      required: false, // 默认值
    },
  },
  computed: {
    // currentQuestion() {
    //     return this.questions[this.currentIndex];
    // },
    // setHoverStyles() {
    //     return {
    //         "--hover-bg-color": this.hoverBackgroundColor,
    //         "--hover-color": this.hoverColor,
    //     };
    // },
    // mergedStyles() {
    //     // 合并直接样式和计算属性样式
    //     return {
    //         borderColor: this.primaryColor,
    //         ...this.setHoverStyles,
    //     };
    // },
  },
  async mounted() {
    this.getVidoePath();
    this.collectResourceList = await getCollectResource(this.BookId);
  },
  methods: {
    async getVidoePath() {
      this.videoPathSrc = await getResourcePath(this.videoPath);
      debugger;
    },

    handleCollect() {
      this.handleCollectResource(
        this.videoPath,
        this.videoPath,
        "",
        "视频",
        "bits",
        "视频：" + this.videoName
      );
      this.localIsCollectVideo = !this.localIsCollectVideo;
    },
    //资源收藏事件
    // resourcePath  文件路径，
    // resourceType  文件类型
    // source        文件来源
    handleCollectResource(
      id,
      md5,
      resourcePath,
      resourceType,
      source,
      resourceName
    ) {
      let list = this.collectResourceList;
      if (list.findIndex((item) => item.id == id) > -1) {
        list = list.filter((item) => item.id != id);
      } else {
        list.push({
          id,
          md5,
          resourcePath,
          resourceType,
          source,
          resourceName,
        });
      }
      this.collectResourceList = list;
      setCollectResource(this.BookId, this.collectResourceList);
    },
  },
};
</script>

<style lang="less" scoped>
.video-box {
  margin: 35px 0 20px 0;
  border: 1px solid #078fb9;
}

.video-title {
  display: flex;
  justify-content: space-between;
  background-color: #e1f4fc;
  border-bottom: 1px solid #078fb9;
  min-height: 25px;
  position: relative;

  .bg-img {
    width: 12%;
    position: absolute;
    top: -29px;
  }
}

.video-title-name {
  padding: 0 2%;
  display: flex;
  align-items: center;
  text-indent: 0em;
  margin: 0 !important;
  border-right: 1px solid #078fb9;

  img {
    cursor: pointer;
    margin-right: 10px;
  }
}

.video-title-img {
  width: 75%;
  padding-right: 2%;
  text-indent: 0em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;

  span {
    overflow: hidden;
  }

  img {
    cursor: pointer;
  }
}

.video-main {
  margin: 5% 5%;
}

.collect-btn {
  cursor: pointer;
  width: 20px;
  height: 20px;
  margin-left: 10px;
  margin-top: 0.3%;
}

.w100 {
  width: 100%;
}
</style>