cnhis-design-vue 0.2.64-beta → 0.3.2-beta

package/packages/upload/chunk-upload/vod-upload-modal.vue

@@ -1,100 +0,0 @@
-<template>
-  <a-modal
-    v-if="chunkUploadVisible"
-    class="upload-modal upload-modal1 standard-modal standard-modal-white"
-    destroyOnClose
-    :bodyStyle="{
-      height: '644px',
-      overflowY: 'auto',
-      paddingBottom: '12px'
-    }"
-    :visible="chunkUploadVisible"
-    :maskClosable="false"
-    :closable="false"
-    width="860px"
-    centered
-  >
-    <template #title>
-      <div>
-        {{ modalTitle }}
-      </div>
-      <div class="svg-wrap"> </div>
-    </template>
-    <template #footer>
-      <div>
-        <a-button @click="cancel">取消</a-button>
-        <a-button type="primary" @click="confirm">确定</a-button>
-      </div>
-    </template>
-    <a-spin :spinning="spinning">
-      <chunk-upload-com
-        ref="chunkUploadCom"
-        v-bind="$attrs"
-        v-on="$listeners"
-        :propsVisible.sync="chunkUploadVisible"
-        uploaderType="video"
-      ></chunk-upload-com>
-    </a-spin>
-  </a-modal>
-</template>
-
-<script>
-import chunkUploadCom from "./chunk-upload-new";
-import { Modal, Spin, Button } from 'ant-design-vue'
-export default {
-  name: "vod-upload-modal",
-  data() {
-    return {
-      spinning: false
-    };
-  },
-  props: {
-    modalTitle: {
-      type: String,
-      default: "上传"
-    },
-    value: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    chunkUploadVisible: {
-      set(v) {
-        this.$emit("input", v);
-      },
-      get() {
-        return this.value;
-      }
-    }
-  },
-  watch: {},
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  activated() {},
-  methods: {
-    confirm() {
-      this.$refs.chunkUploadCom?.confirm();
-      // this.chunkUploadVisible = false;
-    },
-    cancel() {
-      this.chunkUploadVisible = false;
-      this.$refs.chunkUploadCom?.cancel();
-    }
-  },
-  components: {
-    chunkUploadCom,
-    AModal: Modal,
-    [Spin.name]: Spin,
-    [Button.name]: Button
-  }
-};
-</script>
-
-<style lang="less" scoped></style>

package/packages/upload/index.js

@@ -1,12 +0,0 @@
-// 导入组件
-import Base from '../base';
-import Upload from './src/Upload';
-
-// 为组件提供 install 安装方法，供按需引入
-Upload.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Upload.name, Upload);
-};
-
-// 默认导出组件
-export default Upload;

package/packages/upload/src/Upload.jsx

@@ -1,11 +0,0 @@
-/**
- * @author pengpeng
- * @desc 全继承antd组件，后期再扩展
- * @time 2021-05-13
- */
-import { Upload } from 'ant-design-vue';
-import create from '@/core/create';
-export default create({
-  name: 'upload',
-  extends: Upload
-});

package/packages/verification-code/SlideVerify.vue

@@ -1,306 +0,0 @@
-<template>
-  <div class="slide">
-    <div v-if="title" class="verify-title">
-      <span>{{ title }}</span>
-      <div class="right-icon" @click="cancelVerify">
-        <a-icon type="close" />
-      </div>
-    </div>
-    <div class="verify-div">
-      <div class="verify-container">
-        <div class="slide-verify">
-          <div class="bg-wrap">
-            <img class="bg-img" :src="resource.resourceImg" alt="" :style="resourceStyle" />
-          </div>
-          <a-icon type="redo" class="slide-verify-refresh-icon" @click="refresh" />
-          <img
-            ref="block"
-            class="slide-verify-block"
-            :src="resource.puzzleImg"
-            draggable="false"
-            @mousedown="sliderDown"
-            :style="puzzleStyle"
-          />
-          <div
-            class="slide-verify-slider"
-            :class="{
-              'container-active': containerActive,
-              'container-success': containerSuccess,
-              'container-fail': containerFail
-            }"
-            :style="{ width: resourceStyle.width }"
-          >
-            <div class="slide-verify-slider-mask" :style="{ width: sliderMaskWidth }">
-              <!-- slider -->
-              <div
-                @mousedown="sliderDown"
-                class="slide-verify-slider-mask-item"
-                :style="{ left: sliderLeft }"
-              >
-                <a-icon
-                  class="slide-verify-slider-mask-item-icon"
-                  :type="containerSuccess ? 'check' : containerFail ? 'close' : 'arrow-right'"
-                />
-              </div>
-            </div>
-            <span class="slide-verify-slider-text">{{ sliderText }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { Icon } from "ant-design-vue";
-
-const _uzzleWidth = 40;
-const _puzzleHeight = 40;
-const _puzzleYAxis = 0;
-const _resourceWidth = 420;
-const _resourceHeight = 300;
-import create from '@/core/create';
-export default create({
-  name: "slide-verify",
-  props: {
-    title: {
-      type: String,
-      default: "请完成安全验证"
-    },
-    resource: {
-      type: Object,
-      required: true
-    }
-  },
-  components: {
-    [Icon.name]: Icon
-  },
-  computed: {},
-  watch: {},
-  data() {
-    return {
-      resourceStyle: {},
-      puzzleStyle: {},
-      containerActive: false, // container active class
-      containerSuccess: false, // container success class
-      containerFail: false, // container fail class
-      sliderText: "向右拖动滑块填充拼图",
-      sliderMaskWidth: 0,
-      sliderLeft: 0,
-      isMouseDown: false,
-      originX: undefined,
-      originY: undefined,
-      block: null
-    };
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.init();
-    });
-  },
-  methods: {
-    init() {
-      this.block = this.$refs.block;
-      const {
-        resourceWidth,
-        resourceHeight,
-        puzzleWidth,
-        puzzleHeight,
-        puzzleYAxis
-      } = this.resource;
-      this.resourceStyle = {
-        width: resourceWidth ? `${resourceWidth}px` : `${_resourceWidth}px`,
-        height: resourceHeight ? `${resourceHeight}px` : `${_resourceHeight}px`
-      };
-      this.puzzleStyle = {
-        width: puzzleWidth ? `${puzzleWidth}px` : `${_uzzleWidth}px`,
-        height: puzzleHeight ? `${puzzleHeight}px` : `${_puzzleHeight}px`,
-        top: puzzleYAxis ? `${puzzleYAxis}px` : `${_puzzleYAxis}px`
-      };
-      document.addEventListener("mousemove", this.mousemoveEvent);
-      document.addEventListener("mouseup", this.mouseupEvent);
-    },
-    mousemoveEvent(e) {
-      if (!this.isMouseDown) return false;
-      const moveX = e.clientX - this.originX;
-      const puzzleWidth = this.resource.puzzleWidth || _uzzleWidth;
-      const resourceWidth = this.resource.resourceWidth || _resourceWidth;
-      if (moveX < 0 || moveX + 38 >= resourceWidth) return false;
-      this.sliderLeft = moveX + "px";
-      let blockLeft = ((resourceWidth - puzzleWidth) / (resourceWidth - 38)) * moveX;
-
-      this.block.style.left = blockLeft + "px";
-      this.containerActive = true; // add active
-      this.sliderMaskWidth = moveX + "px";
-    },
-    mouseupEvent(e) {
-      if (!this.isMouseDown) return false;
-      this.isMouseDown = false;
-      if (e.clientX === this.originX) return false;
-      const left = parseInt(this.block.style.left);
-      this.$emit("curLeft", { left });
-    },
-    sliderDown(event) {
-      this.originX = event.clientX;
-      this.originY = event.clientY;
-      this.isMouseDown = true;
-    },
-    cancelVerify() {
-      this.$emit("cancelVerify");
-    },
-    refresh() {
-      this.$emit("refresh");
-      this.reset();
-    },
-    reset() {
-      this.containerActive = false;
-      this.containerSuccess = false;
-      this.containerFail = false;
-      this.sliderLeft = 0;
-      this.block && (this.block.style.left = 0);
-      this.sliderMaskWidth = 0;
-    }
-  },
-  beforeDestroy() {
-    document.removeEventListener("mousemove", this.mousemoveEvent);
-    document.removeEventListener("mouseup", this.mouseupEvent);
-  }
-});
-</script>
-
-<style lang="less" scoped>
-.slide {
-  width: fit-content;
-  margin: auto;
-}
-.verify-title {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 52px;
-  padding: 10px 20px;
-  color: #828894;
-  font-size: 16px;
-  text-align: left;
-  border-bottom: 1px solid #ccc;
-  span {
-    color: #212121;
-  }
-  .right-icon {
-    cursor: pointer;
-  }
-}
-.verify-div {
-  padding: 0 20px 20px 20px;
-}
-.verify-container {
-  display: inline-block;
-  padding: 16px;
-  margin: 20px auto;
-  border: 1px solid #e7ecf1;
-  box-shadow: 0 0 10px #dadada;
-}
-.slide-verify {
-  display: inline-block;
-  position: relative;
-  .slide-verify-refresh-icon {
-    position: absolute;
-    right: 4px;
-    top: 4px;
-    font-size: 20px;
-    color: #ccc;
-    cursor: pointer;
-    &:hover {
-      transform: scale(1.05);
-      color: #fff;
-    }
-  }
-  .slide-verify-block {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 40px;
-    height: 40px;
-    cursor: pointer;
-  }
-  .slide-verify-slider {
-    position: relative;
-    text-align: center;
-    width: 420px;
-    height: 40px;
-    line-height: 40px;
-    margin-top: 15px;
-    background: #f7f9fa;
-    color: #45494c;
-    border: 1px solid #e4e7eb;
-  }
-  .slide-verify-slider-mask {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 40px;
-    border: 0px solid #1991fa;
-    background: #d1e9fe;
-    .slide-verify-slider-mask-item {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 38px;
-      height: 38px;
-      background: #fff;
-      box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
-      cursor: pointer;
-      transition: background 0.2s linear;
-    }
-    .slide-verify-slider-mask-item:hover {
-      background: #1991fa;
-      .slide-verify-slider-mask-item-icon {
-        color: #fff;
-      }
-    }
-  }
-}
-.container-active {
-  .slide-verify-slider-mask {
-    height: 38px;
-    border-width: 1px;
-    .slide-verify-slider-mask-item {
-      height: 38px;
-      top: -1px;
-      border: 1px solid #1991fa;
-    }
-  }
-}
-.container-success {
-  .slide-verify-slider-mask {
-    height: 38px;
-    border: 1px solid #52ccba;
-    background-color: #d2f4ef;
-    .slide-verify-slider-mask-item {
-      height: 38px;
-      top: -1px;
-      border: 1px solid #52ccba;
-      background-color: #52ccba !important;
-    }
-  }
-}
-.container-fail {
-  .slide-verify-slider-mask {
-    height: 38px;
-    border: 1px solid #f57a7a;
-    background-color: #fce1e1;
-    .slide-verify-slider-mask-item {
-      height: 38px;
-      top: -1px;
-      border: 1px solid #f57a7a;
-      background-color: #f57a7a !important;
-    }
-  }
-}
-.container-active .slide-verify-slider-text,
-.container-success .slide-verify-slider-text,
-.container-fail .slide-verify-slider-text {
-  display: none;
-}
-</style>

package/packages/verification-code/index.js

@@ -1,17 +0,0 @@
-// 导入组件
-import Verification from './verification-code';
-
-import SlideVerify from './SlideVerify'
-
-// 为组件提供 install 安装方法，供按需引入
-Verification.install = function(Vue) {
-  Vue.component(Verification.name, Verification);
-  Vue.component(SlideVerify.name, SlideVerify);
-};
-
-Object.assign(Verification, {
-  SlideVerify
-});
-
-// 默认导出组件
-export default Verification;

package/packages/verification-code/verification-code.vue

@@ -1,147 +0,0 @@
-<template>
-  <div class="verification-code-container">
-    <a-input v-bind="$attrs" v-on="$listeners" v-model="verifyCode" @change="verifyCodeChange">
-      <template slot="addonAfter">
-        <span class="captcha-wrap">
-          <span :class="['get-code', { disabled: count }]" @click="sendVerify">
-            {{ getText }}
-          </span>
-        </span>
-      </template>
-    </a-input>
-  </div>
-</template>
-
-<script>
-import { Button, Input } from "ant-design-vue";
-import create from '@/core/create';
-export default create({
-  name: "verification-code",
-  data() {
-    return {
-      verifyCode: this.value || "",
-      count: 0,
-      timer: null,
-      firstSend: true
-    };
-  },
-  model: {
-    prop: "value",
-    event: "change_value"
-  },
-  props: {
-    countNumber: {
-      type: Number,
-      default: 60
-    },
-
-    sendText: {
-      type: String,
-      default: "发送验证码"
-    },
-
-    resendText: {
-      type: String,
-      default: "发送验证码"
-    },
-
-    sendBefore: Function,
-
-    value: [String, Number]
-  },
-  computed: {
-    getText({ firstSend, count }) {
-      if (count) return `00${count}`.slice(-2) + " s";
-      if (firstSend && !count) return this.sendText;
-      if (!firstSend && !count) return this.resendText;
-      return this.sendText;
-    }
-  },
-  filters: {},
-  watch: {
-    value(val) {
-      this.verifyCode = val;
-    }
-  },
-  beforeCreate() {
-    this.countNum = 60;
-  },
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  beforeDestroy() {
-    this.timer && clearInterval(this.timer);
-  },
-  destroyed() {},
-  activated() {},
-  methods: {
-    sendVerify() {
-      if(this.count){
-        return;
-      }
-      this.$emit("sendVerify");
-    },
-
-    handleCountDown() {
-      // const value = this.type === "phone" ? this.formData.phone : this.formData.email;
-      // if (!value.replace(/\s+/g, "")) {
-      //   this.$refs[this.type].focus();
-      //   return false;
-      // }
-      this.firstSend = false;
-      this.count = this.countNumber || 60;
-      this.timer && clearInterval(this.timer);
-      this.timer = setInterval(() => {
-        this.count--;
-        this.count === 0 && clearInterval(this.timer);
-      }, 1000);
-      // this.$emit("sendCode", { value });
-    },
-
-    verifyCodeChange(e) {
-      this.$emit("change_value", e.target.value);
-      this.$emit("input", e);
-      this.$emit("change", e);
-    }
-  },
-  components: {
-    [Button.name]: Button,
-    [Input.name]: Input
-  }
-});
-</script>
-
-<style lang="less" scoped>
-.verification-code-container {
-  // /deep/ .ant-input {
-  //   width: 100%;
-  // }
-
-  /deep/.ant-input-group-addon {
-    border-color: #d9d9d9;
-    color: #5585f5;
-    cursor: pointer;
-  }
-
-  .captcha-wrap {
-    .get-code {
-      // position: absolute;
-      // right: 0;
-      // top: 50%;
-      line-height: 25px;
-      // padding: 0 18px 0 12px;
-      // border-left: 1px solid #cfcfcf;
-      font-size: 14px;
-      color: #2379f9;
-      cursor: pointer;
-      transform: translateY(-50%);
-      &.disabled {
-        cursor: default;
-        color: #ccc;
-      }
-    }
-  }
-}
-</style>

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

@@ -1,57 +0,0 @@
-<template>
-  <div class="video-container cp" @contextmenu.prevent>
-    <player :options="playerOptions"></player>
-  </div>
-</template>
-
-<script>
-import player from "./player";
-export default {
-  name: "playerVod",
-  data() {
-    return {
-      textplayerOptions: {
-        autoplay: true, // 如果true,浏览器准备好时开始播放。
-        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
-        sources: [
-          {
-            type: "video/mp4",
-            src:
-              "https://2483-cn-north-4.cdn-vod.huaweicloud.com/asset/342c34d391612f9e26c1be4877bdd0f9/c8b7bdceb56eab1e123d20c4268d1e60.mp4" // url地址
-          }
-        ]
-      }
-    };
-  },
-  props: {
-    playerOptions: {
-      type: Object,
-      default: () => ({
-        sources: [
-          {
-            type: "video/mp4",
-            src: ""
-          }
-        ]
-      })
-    }
-  },
-  computed: {},
-  watch: {},
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  activated() {},
-  methods: {},
-  components: {
-    player
-  }
-};
-</script>
-
-<style lang="less" scoped></style>