cnhis-design-vue 0.2.63-beta → 0.3.1-beta

package/src/component/player-vod/player.vue

@@ -1,188 +0,0 @@
-<template>
-  <video
-    ref="video"
-    controls
-    @contextmenu.prevent
-    class="video-js vjs-default-skin vjs-big-play-centered"
-    webkit-playsinline="true"
-    playsinline
-  ></video>
-  <!-- src="https://2483-cn-north-4.cdn-vod.huaweicloud.com/asset/342c34d391612f9e26c1be4877bdd0f9/c8b7bdceb56eab1e123d20c4268d1e60.mp4" -->
-  <!-- class="video-js vjs-default-skin vjs-big-play-centered" -->
-</template>
-
-<script>
-import Video from "video.js";
-import "video.js/dist/video-js.css";
-export default {
-  name: "player",
-  data: () => ({
-    player: null,
-    defaultOptions: {
-      playbackRates: [0.5, 1.0, 1.5, 2.0], // 播放速度
-      autoplay: true, // 如果true,浏览器准备好时开始播放。 enlarge > -1
-      muted: false, // 默认情况下将会消除任何音频。
-      loop: false, // 导致视频一结束就重新开始。
-      preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
-      // language: 'zh-CN',
-      // aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
-      // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
-      // sources: [
-      //   {
-      //     type: "video/mp4",
-      //     src: "" //url地址
-      //   }
-      // ],
-      src: "",
-      poster: "", // 你的封面地址
-      // height: "600px",
-      height: 600,
-      // width: 750,
-      // width: 750,
-      width: parseInt(document.documentElement.clientWidth * 0.6),
-      controls: true,
-      notSupportedMessage: "此视频暂无法播放", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
-      suppressNotSupportedError: true, // 不支持的类型是否马上展示报错信息
-      controlBar: {
-        timeDivider: true,
-        durationDisplay: true,
-        currentTimeDisplay: true,
-        remainingTimeDisplay: false,
-        pictureInPictureToggle: false, // 画中画
-        volumePanel: {
-          inline: false // 默认是true,横着的
-        }
-        // timeDivider: true,
-        // durationDisplay: true,
-        // chaptersButton: true,
-        // fullscreenToggle: true  //全屏按钮
-      },
-      errorDisplay: true,
-      posterImage: false,
-      bigPlayButton: true,
-      textTrackDisplay: false
-    }
-  }),
-  props: {
-    options: {
-      type: Object,
-      required: true
-    }
-  },
-  methods: {
-    error(e) {
-      // 如果视频下载出错 则初始化视频至已缓冲时间的前3秒
-      let err = e.error();
-      if (err.code === 2) {
-        // 判断是否是网络加载问题
-        let buffTime = e.bufferedEnd() - 6;
-        e.load(this.playerOptions.sources[0].src);
-        e.currentTime(buffTime);
-        e.play();
-      } else {
-        this.alert.err(err.message);
-      }
-    }
-  },
-  watch: {
-    /* options: {
-                handler() {
-                    console.log('观测到options已发生变化:');
-                },
-                deep: true
-            },*/
-    src() {
-      // 侦听视频路径, 当视频路径发生改变时, 重新渲染video路径
-      this.player.src(this.src);
-      if (this.play) this.player.play();
-    },
-    play() {
-      // 侦听该属性, 当options的autoplay变为true时 直接播放视频
-      if (this.play) this.player.play();
-    }
-  },
-  computed: {
-    /* option() {
-                console.log('已计算');
-                console.log(this.options.sources[0].src);
-                // console.log(this.options.sources[0].hasOwnProperty('src'));
-                if (this.options.sources[0].src) {
-                    return this.options;
-                } else {
-                    return this.options;
-                }
-
-            },*/
-    src() {
-      return this.options.sources[0].src;
-    },
-    video() {
-      return this.$store.state.video;
-    },
-    play() {
-      return this.options.autoplay;
-    }
-  },
-  mounted() {
-    const vm = this;
-    this.player = Video(
-      this.$refs.video,
-      Object.assign(this.defaultOptions, this.options),
-      function() {
-        // this.tech_.off("dblclick");
-        this.on("play", () => {
-          // this.volume(vm.video.volume);
-        });
-
-        this.on("volumechange", () => {
-          // vm.video.volume = this.volume();
-          // window.localStorage.volume = this.volume();
-        });
-
-        this.on("error", () => {
-          let err = this.error();
-          if (err.code === 2) {
-            // 判断是否是网络加载问题
-            let buffTime = this.bufferedEnd() - 6;
-            this.load(vm.src);
-            this.currentTime(buffTime);
-            this.play();
-          } else {
-            console.log(err.message);
-          }
-        });
-      }
-    );
-  }
-};
-</script>
-<style lang="less">
-// scoped
-// 进度显示当前播放时间
-.video-js {
-  .vjs-time-control {
-    display: block;
-  }
-  // .vjs-remaining-time {
-  //   display: none;
-  // }
-  .vjs-current-time.vjs-time-control {
-    display: block;
-  }
-  .vjs-duration.vjs-time-control {
-    display: block;
-  }
-}
-
-// .video-js
-// 暂停时显示播放按钮
-.vjs-paused .vjs-big-play-button,
-.vjs-paused.vjs-has-started .vjs-big-play-button {
-  display: block;
-}
-
-// 点击屏幕播放/暂停
-.video-js.vjs-playing .vjs-tech {
-  pointer-events: auto;
-}
-</style>

package/src/component/player-vod/video-list.vue

@@ -1,262 +0,0 @@
-<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';
-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 (this.$utils.isJSON(str)) {
-        resList = JSON.parse(str);
-      } else {
-        resList = typeof str === 'string' ? [] : str;
-      }
-      if (resList && resList.type === 'jsonb') {
-        if (this.$utils.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
-  }
-};
-</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>

package/src/component/player-vod/video-modal.vue

@@ -1,128 +0,0 @@
-<template>
-  <a-modal
-    :visible="previewVisible"
-    :footer="null"
-    @cancel="handleCancel"
-    wrapClassName="image-modal"
-    width="65vw"
-    :bodyStyle="{
-      height: '600px',
-      overflowY: 'auto'
-    }"
-  >
-    <div class="preview-wrap">
-      <div class="preview">
-        <playerVod
-          :playerOptions="playerOptions"
-          v-if="fileList && fileList.length === 0"
-        ></playerVod>
-        <a-carousel v-else arrows :initialSlide="palyerIndex">
-          <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
-            <a-icon type="left-circle" />
-          </div>
-          <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
-            <a-icon type="right-circle" />
-          </div>
-          <template v-for="(v, i) in fileList">
-            <playerVod :playerOptions="v.playerOptions" :key="i"></playerVod>
-          </template>
-        </a-carousel>
-      </div>
-    </div>
-  </a-modal>
-</template>
-
-<script>
-import { Modal, Carousel } from 'ant-design-vue'
-import playerVod from "./index";
-export default {
-  name: "videoModal",
-  data() {
-    return {
-      previewVisible: this.visible
-    };
-  },
-  props: {
-    visible: Boolean,
-    playerOptions: {
-      type: Object,
-      default: () => ({
-        sources: [
-          {
-            type: "video/mp4",
-            src: ""
-          }
-        ]
-      })
-    },
-    fileList: {
-      type: Array,
-      default: () => []
-    },
-    palyerIndex: {
-      type: Number,
-      default: 0
-    }
-  },
-  computed: {},
-  watch: {
-    visible(value) {
-      this.previewVisible = value;
-    }
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  activated() {},
-  methods: {
-    handleCancel() {
-      this.$emit("update:visible", false);
-      this.previewVisible = false;
-    }
-  },
-  components: {
-    playerVod,
-    AModal: Modal,
-    [Carousel.name]: Carousel
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.preview-wrap {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  .preview {
-    padding: 20px 0;
-    width: 60vw;
-    height: 100%;
-    // height: 60vh;
-    // display: flex;
-    // justify-content: center;
-    // align-items: center;
-  }
-}
-.ant-carousel /deep/ .custom-slick-arrow {
-  width: 25px;
-  height: 25px;
-  font-size: 25px;
-  color: #fff;
-  background-color: rgba(31, 45, 61, 0.11);
-  opacity: 0.5;
-}
-.ant-carousel /deep/ .custom-slick-arrow:before {
-  display: none;
-}
-.ant-carousel /deep/ .custom-slick-arrow:hover {
-  opacity: 0.5;
-  color: #fff;
-}
-</style>

package/src/component/select-pages/index.vue

@@ -1,72 +0,0 @@
-<template functional>
-  <div class="form-select-btn" @mousedown="e => e.preventDefault()">
-    <a-button
-      :disabled="props.searchPageConfig.page <= 1"
-      type="dashed"
-      block
-      @click.self.stop="props.handleSearchChangePage('prev')"
-    >
-      <a-icon type="left" /> 上一页
-    </a-button>
-    <a-button
-      :disabled="props.searchPageConfig.total ? props.searchPageConfig.page >= props.searchPageConfig.total : !props.searchPageConfig.hasNextPage"
-      type="dashed"
-      block
-      @click.self.stop="props.handleSearchChangePage('next')"
-    >
-      下一页 <a-icon type="right" />
-    </a-button>
-  </div>
-</template>
-
-<script>
-import {Button,Icon} from 'ant-design-vue'
-export default {
-  name: "selectPages",
-  components:{
-    [Button.name]:Button,
-    [Icon.name]:Icon
-  },
-  props: {
-    searchPageConfig: {
-      type: Object,
-      default: () => ({
-        page: 1,
-        total: 0,
-        hasNextPage: false
-      })
-    },
-    handleSearchChangePage: {
-      type: Function,
-      default: () => {}
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.form-select-btn {
-  width: 100%;
-  overflow: hidden;
-  display: flex;
-  justify-content: space-around;
-  border-top: 1px solid #d5d5d5;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-  /deep/ .ant-btn {
-    border: none;
-    border-radius: 0 0 4px 4px;
-    &:hover {
-      opacity: 0.7;
-    }
-  }
-  /deep/ .ant-btn-dashed[disabled] {
-    background-color: #fff !important;
-  }
-
-  .ant-btn + .ant-btn {
-    border-left: 1px solid #d5d5d5;
-    border-bottom-left-radius: 0;
-  }
-}
-</style>

package/src/component/svg/index.vue

@@ -1,59 +0,0 @@
-<!--
- * @Descripttion: ''
- * @version: ''
- * @Author: dengqian
- * @Date: 2019-10-24 10:54:49
- * @LastEditors: dengqian
- * @LastEditTime: 2019-10-24 11:34:07
- -->
-<template>
-  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
-    <title v-if="title">{{ title }}</title>
-    <use :xlink:href="iconName" />
-  </svg>
-</template>
-
-<script>
-// svg图标组件 使用方式
-// 将svg图片放入 /assets/icons/svg/图片名称.svg
-// vue页面中 <svg-icon icon-class="图片名称"></svg-icon>
-export default {
-  name: "SvgIcon",
-  props: {
-    iconClass: {
-      default: "",
-      required: true
-    },
-    title: {
-      type: String,
-      default: ""
-    },
-    className: {
-      type: String,
-      default: ""
-    }
-  },
-  computed: {
-    iconName() {
-      return `#icon-${this.iconClass}`;
-    },
-    svgClass() {
-      if (this.className) {
-        return "svg-icon " + this.className;
-      } else {
-        return "svg-icon";
-      }
-    }
-  }
-};
-</script>
-
-<style scoped>
-.svg-icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-</style>

package/src/core/create.js

@@ -1,6 +0,0 @@
-import { KEY_COMPONENT_NAME } from '@/global/variable';
-export default function(vm) {
-  vm.name = KEY_COMPONENT_NAME + (vm.name || '');
-  vm.mixins = vm.mixins || [];
-  return vm;
-}