组件优化

zhongshujie

3 天以前 d41648827f2d21c7884ac8d00e8d8a9ac1cd2715

 src/components/bookVideo/index.vue

@@ -1,30 +1,29 @@
<template>
    <div class="knowledgeExpansion" style="">
        <div class="questionBank-video">
            <svgIcon icon-file-name="sanJiao" :color="logoColor"></svgIcon>
            <span :style="{ color: logoColor }">视频</span>
        </div>

        <div class="knowledgeExpansion-video">
            <p class="center text td-0">
                <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"></video>
            </p>
            <p class="center videoname">
                <span>{{ videoName }}</span>
                <el-tooltip class="item" effect="dark" :content="localIsCollectVideo ? '点击取消' : '点击收藏'"
                    placement="top-start">
                    <svgIcon class="collect-btn " :icon-file-name="collectResourceList.findIndex(
   <div class="knowledgeExpansion theme-color">
      <div class="questionBank-video">
         <svgIcon icon-file-name="sanJiao"></svgIcon>
         <span>视频</span>
      </div>
      <div class="knowledgeExpansion-video">
         <p class="center text td-0">
            <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"></video>
         </p>
         <p class="center videoname">
            <span>{{ videoName }}</span>
            <el-tooltip class="item" effect="dark" :content="localIsCollectVideo ? '点击取消' : '点击收藏'"
               placement="top-start">
               <svgIcon class="collect-btn " :icon-file-name="collectResourceList.findIndex(
                        (item) => item.id == videoPath
                    ) > -1
                        ? collectCheck
                        : collectImg
                        " :color="logoColor" @click="handleCollect()"></svgIcon>
                </el-tooltip>
            </p>
        </div>
    </div>
                        " @click="handleCollect()"></svgIcon>
            </el-tooltip>
         </p>
      </div>
   </div>
</template>

<script>
@@ -32,131 +31,124 @@
import { getCollectResource, setCollectResource } from "@/assets/methods/resources";
import svgIcon from "@/components/svgIcon";
export default {
    components: {
        svgIcon
    },
    data() {
        return {
            collectImg: "heart",
            collectCheck: "heart-check",
            videoPathSrc: "",
            collectResourceList: [],
            localIsCollectVideo: false,
            isDisplay: true,
        };
    },
    props: {
        videoPath: {
            type: String,
            required: "",
        },
        videoName: {
            type: String,
            required: "",// 默认值
        },
        BookId: {
            type: String,
            required: "",// 默认值
        },
        logoColor: {
            type: String,
            required: "#00918e",// 默认值
        },
    },
    async mounted() {
        await this.getVidoePath();
        this.collectResourceList = await getCollectResource(
            this.BookId
        );
        console.log(this.collectResourceList,"this.collectResourceList");
        
    },
    methods: {
        async getVidoePath() {
            this.videoPathSrc = await getResourcePath(
                this.videoPath
            );
        },
   components: {
      svgIcon
   },
   data() {
      return {
         collectImg: "heart",
         collectCheck: "heart-check",
         videoPathSrc: "",
         collectResourceList: [],
         localIsCollectVideo: false,
         isDisplay: true,
         videoName: this.videoInfo.resourceName
      };
   },
   props: {
      videoInfo: {
         type: Object,
      },
      BookId: {
         type: String,
         required: "",// 默认值
      },
   },
   async mounted() {
      await this.getVidoePath();
      this.collectResourceList = await getCollectResource(
         this.BookId
      );
   },
   methods: {
      async getVidoePath() {
         console.log(this.videoInfo, "this.videoInfo.md5");
         this.videoPathSrc = await getResourcePath(
            this.videoInfo.md5
         );
      },

        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
            );
        },
    },
      handleCollect() {
         debugger
         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>
.knowledgeExpansionVideo {
    margin: 30px 0;
    padding: 10px 0;
    /* 使用新的 --logo-color-rgb 变量 */
    border-top: 10px solid rgba(var(--logo-color-rgb), 0.6);
    border-bottom: 10px solid rgba(var(--logo-color-rgb), 0.6);
    position: relative;
   margin: 30px 0;
   padding: 10px 0;
   /* 使用新的 --logo-color-rgb 变量 */
   border-top: 10px solid rgba(var(--logo-color-rgb), 0.6);
   border-bottom: 10px solid rgba(var(--logo-color-rgb), 0.6);
   position: relative;
}



.questionBank-video {
    position: relative;
    line-height: 0px;
    display: flex;
    align-items: center;
    top: -29px;
    left: 30px;
   position: relative;
   line-height: 0px;
   display: flex;
   align-items: center;
   top: -29px;
   left: 30px;

    svgIcon {
        width: 13px;
    }
   svgIcon {
      width: 13px;
   }

    span {
        font-size: 14px;
        font-weight: 600;
        margin-left: 1px;
    }
   span {
      font-size: 14px;
      font-weight: 600;
      margin-left: 1px;
   }

}

.knowledgeExpansion-video {
    padding: 0 8%;
   padding: 0 8%;
}
</style>
</style>