cnhis-design-vue 2.1.78 → 2.1.79

package/packages/big-table/src/components/player-vod/video-list.vue

@@ -1,265 +1,265 @@
-<template>
-  <div class="vod-list">
-    <!-- 展示列表 -->
-    <div class="show-list">
-      <template>
-        <div v-for="(item, index) in showFileList" :key="index" class="vod-wrap">
-          <!-- 上传完成 -->
-          <div class="vod-def-bg">
-            <img :src="getvideoCover(item)" class="vod-cover-img" />
-          </div>
-          <div class="icon-wrap">
-            <a-icon type="caret-right" class="icon-play" @click="palyerVod(item, index)" />
-          </div>
-        </div>
-      </template>
-    </div>
-
-    <!-- 弹窗播放视频 -->
-    <video-modal v-if="videoVisible" :visible.sync="videoVisible" :fileList="fileList" :palyerIndex="palyerIndex"></video-modal>
-  </div>
-</template>
-
-<script>
-import videoModal from './video-modal';
-import { Icon } from 'ant-design-vue';
-import vexutils from '@/utils/vexutils';
-export default {
-  name: 'videoList',
-  data() {
-    return {
-      videoVisible: false,
-      fileList: [],
-
-      palyerIndex: 0,
-      default_cover: require('../../assets/img/video_default_cover.png')
-    };
-  },
-  props: {
-    propsList: {
-      type: [Array, String],
-      default: () => []
-    },
-    columnName: {
-      type: String,
-      default: ''
-    },
-    stlist: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    showFileList() {
-      let val = this.stlist || this.propsList;
-      return this.initFileList(val) || [];
-    }
-  },
-  watch: {
-    // stlist: {
-    //   deep: true,
-    //   handler() {
-    //     if (this.stlist) {
-    //       this.initFileList(this.stlist);
-    //     }
-    //   }
-    // },
-    // propsList: {
-    //   deep: true,
-    //   immediate: true,
-    //   handler() {
-    //     if (this.propsList && this.propsList.length) {
-    //       this.initFileList(this.propsList);
-    //     }
-    //   }
-    // }
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  activated() {},
-  methods: {
-    initFileList(val) {
-      let fileList = val;
-      let resList = [];
-      if (Array.isArray(fileList)) {
-        resList = JSON.parse(JSON.stringify(fileList));
-      }
-      if (typeof fileList === 'string') {
-        resList = this.handleGetJsonStr(fileList);
-      }
-      resList.forEach(v => {
-        v.vodCoverUrl = v.vodCoverUrl || undefined;
-        let vodUrl = v.url || v.videoUrl;
-        let strList = vodUrl.split('.');
-        let last = strList[strList.length - 1];
-        let type = `video/${last}`;
-        v.playerOptions = {
-          sources: [
-            {
-              type,
-              src: vodUrl
-            }
-          ]
-        };
-      });
-      this.$set(this, 'fileList', resList || []);
-      return resList;
-    },
-
-    handleGetJsonStr(str) {
-      // [], {type: 'jsonb', value: "[]"}
-      let resList = [];
-      if (vexutils.isJSON(str)) {
-        resList = JSON.parse(str);
-      } else {
-        resList = typeof str === 'string' ? [] : str;
-      }
-      if (resList && resList.type === 'jsonb') {
-        if (vexutils.isJSON(resList.value)) {
-          resList = JSON.parse(resList.value);
-          // loop
-          if (resList.type === 'jsonb') {
-            resList = this.handleGetJsonStr(resList);
-          }
-        }
-      }
-      return resList;
-    },
-
-    /** 播放视频 */
-    palyerVod(data, index) {
-      this.palyerIndex = index;
-      let vodUrl = data.url || data.videoUrl;
-      let strList = vodUrl.split('.');
-      let last = strList[strList.length - 1];
-      let type = `video/${last}`;
-      this.playerOptions = {
-        sources: [
-          {
-            type,
-            src: vodUrl
-          }
-        ]
-      };
-      this.videoVisible = true;
-    },
-
-    /**
-     * 面图图加载报错
-     */
-    coverImgOnError(e) {
-      let oldUrl = e.target.src;
-      let randomKeys = new Date().getTime().toString();
-      e.target.src = oldUrl + `?randomKeys=${randomKeys}`;
-    },
-
-    /**
-     * 拼接封面图
-     */
-    handleGetCoverUrl(vodUrl) {
-      if (typeof vodUrl === 'string') {
-        let strList = vodUrl.split('/');
-        let len = strList.length;
-        strList.splice(len - 1, 1, 'cover/Cover0.jpg');
-        let imgUrl = strList.join('/');
-        return imgUrl;
-      }
-      return '';
-    },
-
-    getvideoCover(item) {
-      return item.vodCoverUrl || this.default_cover;
-    }
-  },
-  components: {
-    videoModal,
-    [Icon.name]: Icon
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.vod-list {
-  height: 100%;
-}
-.show-list {
-  height: 100%;
-  display: flex;
-  padding: 3px 0;
-}
-.vod-wrap {
-  position: relative;
-  display: inline-block;
-  background-color: #fff;
-  height: 100%;
-  // height: 70px;
-  // width: 125px;
-  width: fit-content;
-  // min-width: 36px;
-  // min-height: 36px;
-  // padding: 0 10px;
-  margin-right: 5px;
-  overflow: hidden;
-  // border: 1px solid #eeeeee;
-
-  .vod-def-bg {
-    width: 100%;
-    height: 100%;
-    // background-color: #4e4e4e;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(50, 50, 51, 0.3);
-
-    .vod-cover-img {
-      // height: 100%;
-      height: 130px;
-      width: 210px;
-      object-fit: cover;
-    }
-  }
-
-  .icon-wrap {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .icon-play {
-    // position: absolute;
-    // top: 50%;
-    // left: 50%;
-    // z-index: 1;
-    // display: block;
-    // width: 20px;
-    // height: 20px;
-    // margin: -10px 0 0 -10px;
-    // font-size: 18px;
-    color: #fff;
-    opacity: 0.8;
-    transform: scale3d(2, 2, 2);
-    transition: all 0.25s ease-out;
-  }
-}
-
-.player-wrap {
-  padding: 100px 0;
-  height: 100%;
-  width: 100%;
-  // display: flex;
-  // justify-content: center;
-  // align-items: center;
-}
-</style>
+<template>
+  <div class="vod-list">
+    <!-- 展示列表 -->
+    <div class="show-list">
+      <template>
+        <div v-for="(item, index) in showFileList" :key="index" class="vod-wrap">
+          <!-- 上传完成 -->
+          <div class="vod-def-bg">
+            <img :src="getvideoCover(item)" class="vod-cover-img" />
+          </div>
+          <div class="icon-wrap">
+            <a-icon type="caret-right" class="icon-play" @click="palyerVod(item, index)" />
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <!-- 弹窗播放视频 -->
+    <video-modal v-if="videoVisible" :visible.sync="videoVisible" :fileList="fileList" :palyerIndex="palyerIndex"></video-modal>
+  </div>
+</template>
+
+<script>
+import videoModal from './video-modal';
+import { Icon } from 'ant-design-vue';
+import vexutils from '@/utils/vexutils';
+export default {
+  name: 'videoList',
+  data() {
+    return {
+      videoVisible: false,
+      fileList: [],
+
+      palyerIndex: 0,
+      default_cover: require('../../assets/img/video_default_cover.png')
+    };
+  },
+  props: {
+    propsList: {
+      type: [Array, String],
+      default: () => []
+    },
+    columnName: {
+      type: String,
+      default: ''
+    },
+    stlist: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    showFileList() {
+      let val = this.stlist || this.propsList;
+      return this.initFileList(val) || [];
+    }
+  },
+  watch: {
+    // stlist: {
+    //   deep: true,
+    //   handler() {
+    //     if (this.stlist) {
+    //       this.initFileList(this.stlist);
+    //     }
+    //   }
+    // },
+    // propsList: {
+    //   deep: true,
+    //   immediate: true,
+    //   handler() {
+    //     if (this.propsList && this.propsList.length) {
+    //       this.initFileList(this.propsList);
+    //     }
+    //   }
+    // }
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  activated() {},
+  methods: {
+    initFileList(val) {
+      let fileList = val;
+      let resList = [];
+      if (Array.isArray(fileList)) {
+        resList = JSON.parse(JSON.stringify(fileList));
+      }
+      if (typeof fileList === 'string') {
+        resList = this.handleGetJsonStr(fileList);
+      }
+      resList.forEach(v => {
+        v.vodCoverUrl = v.vodCoverUrl || undefined;
+        let vodUrl = v.url || v.videoUrl;
+        let strList = vodUrl.split('.');
+        let last = strList[strList.length - 1];
+        let type = `video/${last}`;
+        v.playerOptions = {
+          sources: [
+            {
+              type,
+              src: vodUrl
+            }
+          ]
+        };
+      });
+      this.$set(this, 'fileList', resList || []);
+      return resList;
+    },
+
+    handleGetJsonStr(str) {
+      // [], {type: 'jsonb', value: "[]"}
+      let resList = [];
+      if (vexutils.isJSON(str)) {
+        resList = JSON.parse(str);
+      } else {
+        resList = typeof str === 'string' ? [] : str;
+      }
+      if (resList && resList.type === 'jsonb') {
+        if (vexutils.isJSON(resList.value)) {
+          resList = JSON.parse(resList.value);
+          // loop
+          if (resList.type === 'jsonb') {
+            resList = this.handleGetJsonStr(resList);
+          }
+        }
+      }
+      return resList;
+    },
+
+    /** 播放视频 */
+    palyerVod(data, index) {
+      this.palyerIndex = index;
+      let vodUrl = data.url || data.videoUrl;
+      let strList = vodUrl.split('.');
+      let last = strList[strList.length - 1];
+      let type = `video/${last}`;
+      this.playerOptions = {
+        sources: [
+          {
+            type,
+            src: vodUrl
+          }
+        ]
+      };
+      this.videoVisible = true;
+    },
+
+    /**
+     * 面图图加载报错
+     */
+    coverImgOnError(e) {
+      let oldUrl = e.target.src;
+      let randomKeys = new Date().getTime().toString();
+      e.target.src = oldUrl + `?randomKeys=${randomKeys}`;
+    },
+
+    /**
+     * 拼接封面图
+     */
+    handleGetCoverUrl(vodUrl) {
+      if (typeof vodUrl === 'string') {
+        let strList = vodUrl.split('/');
+        let len = strList.length;
+        strList.splice(len - 1, 1, 'cover/Cover0.jpg');
+        let imgUrl = strList.join('/');
+        return imgUrl;
+      }
+      return '';
+    },
+
+    getvideoCover(item) {
+      return item.vodCoverUrl || this.default_cover;
+    }
+  },
+  components: {
+    videoModal,
+    [Icon.name]: Icon
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.vod-list {
+  height: 100%;
+}
+.show-list {
+  height: 100%;
+  display: flex;
+  padding: 3px 0;
+}
+.vod-wrap {
+  position: relative;
+  display: inline-block;
+  background-color: #fff;
+  height: 100%;
+  // height: 70px;
+  // width: 125px;
+  width: fit-content;
+  // min-width: 36px;
+  // min-height: 36px;
+  // padding: 0 10px;
+  margin-right: 5px;
+  overflow: hidden;
+  // border: 1px solid #eeeeee;
+
+  .vod-def-bg {
+    width: 100%;
+    height: 100%;
+    // background-color: #4e4e4e;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(50, 50, 51, 0.3);
+
+    .vod-cover-img {
+      // height: 100%;
+      height: 130px;
+      width: 210px;
+      object-fit: cover;
+    }
+  }
+
+  .icon-wrap {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .icon-play {
+    // position: absolute;
+    // top: 50%;
+    // left: 50%;
+    // z-index: 1;
+    // display: block;
+    // width: 20px;
+    // height: 20px;
+    // margin: -10px 0 0 -10px;
+    // font-size: 18px;
+    color: #fff;
+    opacity: 0.8;
+    transform: scale3d(2, 2, 2);
+    transition: all 0.25s ease-out;
+  }
+}
+
+.player-wrap {
+  padding: 100px 0;
+  height: 100%;
+  width: 100%;
+  // display: flex;
+  // justify-content: center;
+  // align-items: center;
+}
+</style>