yc-ui2 0.1.2-beta24 → 0.1.2-beta26

package/dist/yc-ui2.umd.js

@@ -6359,7 +6359,7 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/YcSlideVerify/index.vue?vue&type=template&id=33a7114a&scoped=true&
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/YcSlideVerify/index.vue?vue&type=template&id=2c1e2525&scoped=true&
 var render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -6397,62 +6397,403 @@ var staticRenderFns = [];
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
 var es_array_push = __webpack_require__(7658);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/YcSlideVerify/index.vue?vue&type=script&lang=js&
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue?vue&type=template&id=b67196d8&scoped=true&
+var slide_verifyvue_type_template_id_b67196d8_scoped_true_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', {
+    staticClass: "slide-verify",
+    style: {
+      width: _vm.w + 'px'
+    },
+    attrs: {
+      "id": "slideVerify",
+      "onselectstart": "return false;"
+    }
+  }, [_c('div', {
+    class: {
+      'slider-verify-loading': _vm.loadBlock
+    }
+  }), _c('canvas', {
+    ref: "canvas",
+    attrs: {
+      "width": _vm.w,
+      "height": _vm.h
+    }
+  }), _vm.show ? _c('div', {
+    staticClass: "slide-verify-refresh-icon",
+    on: {
+      "click": _vm.refresh
+    }
+  }) : _vm._e(), _c('canvas', {
+    ref: "block",
+    staticClass: "slide-verify-block",
+    attrs: {
+      "width": _vm.w,
+      "height": _vm.h
+    }
+  }), _c('div', {
+    staticClass: "slide-verify-slider",
+    class: {
+      'container-active': _vm.containerActive,
+      'container-success': _vm.containerSuccess,
+      'container-fail': _vm.containerFail
+    }
+  }, [_c('div', {
+    staticClass: "slide-verify-slider-mask",
+    style: {
+      width: _vm.sliderMaskWidth
+    }
+  }, [_c('div', {
+    staticClass: "slide-verify-slider-mask-item",
+    style: {
+      left: _vm.sliderLeft
+    },
+    on: {
+      "mousedown": _vm.sliderDown,
+      "touchstart": _vm.touchStartEvent,
+      "touchmove": function ($event) {
+        return _vm.handleMoveEvent($event, 'touch');
+      },
+      "touchend": function ($event) {
+        return _vm.handleMoveEndEvent($event, 'touch');
+      }
+    }
+  }, [_c('div', {
+    staticClass: "slide-verify-slider-mask-item-icon"
+  })])]), _c('span', {
+    staticClass: "slide-verify-slider-text"
+  }, [_vm._v(_vm._s(_vm.sliderText))])])]);
+};
+var slide_verifyvue_type_template_id_b67196d8_scoped_true_staticRenderFns = [];
 
-/* harmony default export */ var YcSlideVerifyvue_type_script_lang_js_ = ({
-  name: "YcSlideVerify",
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue?vue&type=script&lang=js&
+
+const PI = Math.PI;
+function sum(x, y) {
+  return x + y;
+}
+function square(x) {
+  return x * x;
+}
+/* harmony default export */ var slide_verifyvue_type_script_lang_js_ = ({
+  name: "SlideVerify",
   props: {
-    title: {
+    // block length
+    l: {
+      type: Number,
+      default: 42
+    },
+    // block radius
+    r: {
+      type: Number,
+      default: 10
+    },
+    // canvas width
+    w: {
+      type: Number,
+      default: 310
+    },
+    // canvas height
+    h: {
+      type: Number,
+      default: 155
+    },
+    sliderText: {
       type: String,
-      default: "滑动验证"
+      default: "Slide filled right"
     },
-    isShow: {
+    accuracy: {
+      type: Number,
+      default: 5 // 若为 -1 则不进行机器判断
+    },
+
+    show: {
       type: Boolean,
       default: true
+    },
+    imgs: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
     return {
-      accuracy: 5,
-      sliderText: "拖动完成上方拼图",
-      countDownNum: 120
+      containerActive: false,
+      // container active class
+      containerSuccess: false,
+      // container success class
+      containerFail: false,
+      // container fail class
+      canvasCtx: null,
+      blockCtx: null,
+      block: null,
+      block_x: undefined,
+      // container random position
+      block_y: undefined,
+      L: this.l + this.r * 2 + 3,
+      // block real length
+      img: undefined,
+      originX: undefined,
+      originY: undefined,
+      isMouseDown: false,
+      trail: [],
+      sliderLeft: 0,
+      // block right offset
+      sliderMaskWidth: 0,
+      // mask width,
+      success: false,
+      // Bug Fixes 修复了验证成功后还能滑动
+      loadBlock: true,
+      // Features 图片加载提示，防止图片没加载完就开始验证
+      timestamp: null
     };
   },
-  computed: {
-    imgs() {
-      const list = [];
-      for (let i = 1; i < 9; i++) {
-        list.push(`/cloud-img/${i}.jpg`);
-      }
-      return list;
-    }
-  },
-  watch: {
-    isShow(newVal) {
-      // 这里第三方引用，ref没有渲染完成，reset报错，还不能用？号
-      newVal && this.$refs.slideblock && this.$refs.slideblock.reset && this.$refs.slideblock.reset();
-    }
+  mounted() {
+    this.init();
   },
-  created() {},
   methods: {
-    onSuccess() {
-      this.$emit("success");
+    init() {
+      this.initDom();
+      this.initImg();
+      this.bindEvents();
     },
-    onFail() {},
-    onAgain() {},
-    onRefresh() {},
-    onFulfilled() {},
-    handleClose() {
-      this.$emit("close");
+    initDom() {
+      this.block = this.$refs.block;
+      this.canvasCtx = this.$refs.canvas.getContext("2d");
+      this.blockCtx = this.block.getContext("2d");
+    },
+    initImg() {
+      const img = this.createImg(() => {
+        // 图片加载完关闭遮蔽罩
+        this.loadBlock = false;
+        this.drawBlock();
+        this.canvasCtx.drawImage(img, 0, 0, this.w, this.h);
+        this.blockCtx.drawImage(img, 0, 0, this.w, this.h);
+        let {
+          block_x: x,
+          block_y: y,
+          r,
+          L
+        } = this;
+        let _y = y - r * 2 - 1;
+        let ImageData = this.blockCtx.getImageData(x, _y, L, L);
+        this.block.width = L;
+        this.blockCtx.putImageData(ImageData, 0, _y);
+      });
+      this.img = img;
+    },
+    drawBlock() {
+      this.block_x = this.getRandomNumberByRange(this.L + 10, this.w - (this.L + 10));
+      this.block_y = this.getRandomNumberByRange(10 + this.r * 2, this.h - (this.L + 10));
+      this.draw(this.canvasCtx, this.block_x, this.block_y, "fill");
+      this.draw(this.blockCtx, this.block_x, this.block_y, "clip");
+    },
+    draw(ctx, x, y, operation) {
+      let {
+        l,
+        r
+      } = this;
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+      ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI);
+      ctx.lineTo(x + l, y);
+      ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI);
+      ctx.lineTo(x + l, y + l);
+      ctx.lineTo(x, y + l);
+      ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true);
+      ctx.lineTo(x, y);
+      ctx.lineWidth = 2;
+      ctx.fillStyle = "rgba(255, 255, 255, 0.7)";
+      ctx.strokeStyle = "rgba(255, 255, 255, 0.7)";
+      ctx.stroke();
+      ctx[operation]();
+      // Bug Fixes 修复了火狐和ie显示问题
+      ctx.globalCompositeOperation = "destination-over";
+    },
+    createImg(onload) {
+      const img = document.createElement("img");
+      img.crossOrigin = "Anonymous";
+      img.onload = onload;
+      img.onerror = () => {
+        img.src = this.getRandomImg();
+      };
+      img.src = this.getRandomImg();
+      return img;
+    },
+    // 随机生成img src
+    getRandomImg() {
+      // return require('../assets/img.jpg')
+      const len = this.imgs.length;
+      return len > 0 ? this.imgs[this.getRandomNumberByRange(0, len - 1)] :
+      // "https://bing.ioliu.cn/v1/rand?w=300&h=150";
+      "https://source.unsplash.com/300x150/?book,library";
+      // "https://api.dujin.org/pic/fengjing";
+    },
+
+    getRandomNumberByRange(start, end) {
+      return Math.round(Math.random() * (end - start) + start);
+    },
+    refresh() {
+      this.reset();
+      this.$emit("refresh");
+    },
+    sliderDown(event) {
+      if (this.success) return;
+      this.originX = event.clientX;
+      this.originY = event.clientY;
+      this.isMouseDown = true;
+      this.timestamp = +new Date();
+    },
+    touchStartEvent(e) {
+      if (this.success) return;
+      this.originX = e.changedTouches[0].pageX;
+      this.originY = e.changedTouches[0].pageY;
+      this.isMouseDown = true;
+      this.timestamp = +new Date();
+    },
+    bindEvents() {
+      document.addEventListener("mousemove", this.handleMoveEvent);
+      document.addEventListener("mouseup", this.handleMoveEndEvent);
+    },
+    // 处理函数抽离
+    handleMoveEvent: throttle(function (e, type = "mouse") {
+      if (!this.isMouseDown) return false;
+      const moveX = type === "mouse" ? e.clientX - this.originX : e.changedTouches[0].pageX - this.originX;
+      const moveY = type === "mouse" ? e.clientY - this.originY : e.changedTouches[0].pageY - this.originY;
+      if (moveX < 0 || moveX + 38 >= this.w) return false;
+      this.sliderLeft = moveX + "px";
+      let blockLeft = (this.w - 40 - 20) / (this.w - 40) * moveX;
+      this.block.style.left = blockLeft + "px";
+      this.containerActive = true; // add active
+      this.sliderMaskWidth = moveX + "px";
+      this.trail.push(moveY);
+    }),
+    handleMoveEndEvent(e, type = "mouse") {
+      if (!this.isMouseDown) return false;
+      this.isMouseDown = false;
+      if (type === "mouse" && e.clientX === this.originX || type === "touch" && e.changedTouches[0].pageX === this.originX) return false;
+      this.containerActive = false; // remove active
+      this.timestamp = +new Date() - this.timestamp;
+      const {
+        spliced,
+        TuringTest
+      } = this.verify();
+      if (spliced) {
+        if (this.accuracy === -1) {
+          this.containerSuccess = true;
+          this.success = true;
+          this.$emit("success", this.timestamp);
+          return;
+        }
+        if (TuringTest) {
+          // succ
+          this.containerSuccess = true;
+          this.success = true;
+          this.$emit("success", this.timestamp);
+        } else {
+          this.containerFail = true;
+          this.$emit("again");
+        }
+      } else {
+        this.containerFail = true;
+        this.$emit("fail");
+        setTimeout(() => {
+          this.reset();
+        }, 1000);
+      }
+    },
+    verify() {
+      const arr = this.trail; // drag y move distance
+      const average = arr.reduce(sum) / arr.length; // average
+      const deviations = arr.map(x => x - average); // deviation array
+      const stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length); // standard deviation
+      const left = parseInt(this.block.style.left);
+      const accuracy = this.accuracy <= 1 ? 1 : this.accuracy > 10 ? 10 : this.accuracy;
+      return {
+        spliced: Math.abs(left - this.block_x) <= accuracy,
+        TuringTest: average !== stddev // equal => not person operate
+      };
+    },
+
+    reset() {
+      this.success = false;
+      this.containerActive = false;
+      this.containerSuccess = false;
+      this.containerFail = false;
+      this.sliderLeft = 0;
+      this.block.style.left = 0;
+      this.sliderMaskWidth = 0;
+      // canvas
+      let {
+        w,
+        h
+      } = this;
+      this.canvasCtx.clearRect(0, 0, w, h);
+      this.blockCtx.clearRect(0, 0, w, h);
+      this.block.width = w;
+
+      // generate img
+      this.img.src = this.getRandomImg();
+      this.$emit("fulfilled");
     }
+  },
+  destroyed() {
+    document.removeEventListener("mousemove", this.handleMoveEvent);
+    document.removeEventListener("mouseup", this.handleMoveEndEvent);
   }
 });
-;// CONCATENATED MODULE: ./src/components/YcSlideVerify/index.vue?vue&type=script&lang=js&
- /* harmony default export */ var components_YcSlideVerifyvue_type_script_lang_js_ = (YcSlideVerifyvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-64.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-64.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-64.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-64.use[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/YcSlideVerify/index.vue?vue&type=style&index=0&id=33a7114a&prod&lang=scss&scoped=true&
+function throttle(fn, interval = 50, options = {
+  leading: true,
+  trailing: true
+}) {
+  const {
+    leading,
+    trailing,
+    resultCallback
+  } = options;
+  let lastTime = 0;
+  let timer = null;
+  const _throttle = function (...args) {
+    return new Promise((resolve, reject) => {
+      const nowTime = new Date().getTime();
+      if (!lastTime && !leading) lastTime = nowTime;
+      const remainTime = interval - (nowTime - lastTime);
+      if (remainTime <= 0) {
+        if (timer) {
+          clearTimeout(timer);
+          timer = null;
+        }
+        const result = fn.apply(this, args);
+        if (resultCallback) resultCallback(result);
+        resolve(result);
+        lastTime = nowTime;
+        return;
+      }
+      if (trailing && !timer) {
+        timer = setTimeout(() => {
+          timer = null;
+          lastTime = !leading ? 0 : new Date().getTime();
+          const result = fn.apply(this, args);
+          if (resultCallback) resultCallback(result);
+          resolve(result);
+        }, remainTime);
+      }
+    });
+  };
+  _throttle.cancel = function () {
+    if (timer) clearTimeout(timer);
+    timer = null;
+    lastTime = 0;
+  };
+  return _throttle;
+}
+;// CONCATENATED MODULE: ./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue?vue&type=script&lang=js&
+ /* harmony default export */ var lib_slide_verifyvue_type_script_lang_js_ = (slide_verifyvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-54.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-54.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue?vue&type=style&index=0&id=b67196d8&prod&scoped=true&lang=css&
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/YcSlideVerify/index.vue?vue&type=style&index=0&id=33a7114a&prod&lang=scss&scoped=true&
+;// CONCATENATED MODULE: ./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue?vue&type=style&index=0&id=b67196d8&prod&scoped=true&lang=css&
 
 ;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
 /* globals __VUE_SSR_CONTEXT__ */
@@ -6552,7 +6893,7 @@ function normalizeComponent(
   }
 }
 
-;// CONCATENATED MODULE: ./src/components/YcSlideVerify/index.vue
+;// CONCATENATED MODULE: ./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue
 
 
 
@@ -6562,17 +6903,99 @@ function normalizeComponent(
 /* normalize component */
 
 var component = normalizeComponent(
+  lib_slide_verifyvue_type_script_lang_js_,
+  slide_verifyvue_type_template_id_b67196d8_scoped_true_render,
+  slide_verifyvue_type_template_id_b67196d8_scoped_true_staticRenderFns,
+  false,
+  null,
+  "b67196d8",
+  null
+  
+)
+
+/* harmony default export */ var slide_verify = (component.exports);
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/YcSlideVerify/index.vue?vue&type=script&lang=js&
+
+
+/* harmony default export */ var YcSlideVerifyvue_type_script_lang_js_ = ({
+  name: "YcSlideVerify",
+  components: {
+    SlideVerify: slide_verify
+  },
+  props: {
+    title: {
+      type: String,
+      default: "滑动验证"
+    },
+    isShow: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      accuracy: 5,
+      sliderText: "拖动完成上方拼图",
+      countDownNum: 120
+    };
+  },
+  computed: {
+    imgs() {
+      const list = [];
+      for (let i = 1; i < 9; i++) {
+        list.push(`/cloud-img/${i}.jpg`);
+      }
+      return list;
+    }
+  },
+  watch: {
+    isShow(newVal) {
+      // 这里第三方引用，ref没有渲染完成，reset报错，还不能用？号
+      newVal && this.$refs.slideblock && this.$refs.slideblock.reset && this.$refs.slideblock.reset();
+    }
+  },
+  created() {},
+  methods: {
+    onSuccess() {
+      this.$emit("success");
+    },
+    onFail() {},
+    onAgain() {},
+    onRefresh() {},
+    onFulfilled() {},
+    handleClose() {
+      this.$emit("close");
+    }
+  }
+});
+;// CONCATENATED MODULE: ./src/components/YcSlideVerify/index.vue?vue&type=script&lang=js&
+ /* harmony default export */ var components_YcSlideVerifyvue_type_script_lang_js_ = (YcSlideVerifyvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-64.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-64.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-64.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-64.use[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/YcSlideVerify/index.vue?vue&type=style&index=0&id=2c1e2525&prod&lang=scss&scoped=true&
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./src/components/YcSlideVerify/index.vue?vue&type=style&index=0&id=2c1e2525&prod&lang=scss&scoped=true&
+
+;// CONCATENATED MODULE: ./src/components/YcSlideVerify/index.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var YcSlideVerify_component = normalizeComponent(
   components_YcSlideVerifyvue_type_script_lang_js_,
   render,
   staticRenderFns,
   false,
   null,
-  "33a7114a",
+  "2c1e2525",
   null
   
 )
 
-/* harmony default export */ var YcSlideVerify = (component.exports);
+/* harmony default export */ var YcSlideVerify = (YcSlideVerify_component.exports);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/YcCustomerService/index.vue?vue&type=template&id=849349a0&scoped=true&
 var YcCustomerServicevue_type_template_id_849349a0_scoped_true_render = function render() {
   var _vm = this,