push

lib/component/form/slider/components/slide-verify.vue

@@ -0,0 +1,553 @@
+<!-- @format -->
+
+<template>
+  <div
+    id="slideVerify"
+    class="slide-verify"
+    :style="{ width: w + 'px' }"
+    onselectstart="return false;">
+    <!-- 图片加载遮蔽罩 -->
+    <div :class="{ 'slider-verify-loading': loadBlock }"></div>
+    <canvas ref="canvas" :width="w" :height="h"></canvas>
+    <div
+      v-if="show"
+      class="slide-verify-refresh-icon"
+      @click="refresh"
+      :style="{ pointerEvents: disabled ? 'none' : '' }">
+      <ns-icon name="refreash" size="20" />
+    </div>
+    <canvas ref="block" :width="w" :height="h" class="slide-verify-block"></canvas>
+
+    <div
+      class="slide-verify-slider"
+      :class="{
+        'container-active': containerCls.containerActive,
+        'container-success': containerCls.containerSuccess,
+        'container-fail': containerCls.containerFail,
+      }">
+      <div class="slide-verify-slider-mask" :style="{ width: sliderBox.width }">
+        <!-- slider -->
+        <div
+          class="slide-verify-slider-mask-item"
+          :style="{ left: sliderBox.left }"
+          @mousedown="sliderDown"
+          @touchstart="touchStartEvent"
+          @touchmove="touchMoveEvent"
+          @touchend="touchEndEvent">
+          <i
+            :class="[
+              'slide-verify-slider-mask-item-icon',
+              'iconfont',
+              `icon-${sliderBox.iconCls}`,
+            ]"></i>
+        </div>
+      </div>
+      <span class="slide-verify-slider-text">{{ sliderText }}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  interface frontPictureClass {
+    width: Number;
+    height: Number;
+    src: 'string';
+  }
+
+  import { defineComponent, reactive, ref, onMounted, PropType, onBeforeUnmount, watch } from 'vue';
+
+  import { useSlideAction } from './hooks';
+  import { createImg, draw, getRandomImg, getRandomNumberByRange, throttle } from './util';
+
+  export default defineComponent({
+    name: 'SlideVerify',
+    props: {
+      // block length
+      l: {
+        type: Number,
+        default: 42,
+      },
+      // block radius
+      r: {
+        type: Number,
+        default: 10,
+      },
+      // canvas width
+      w: {
+        type: Number,
+        default: 291,
+      },
+      // canvas height
+      h: {
+        type: Number,
+        default: 360,
+      },
+      sliderText: {
+        type: String,
+        default: 'Slide filled right',
+      },
+      accuracy: {
+        type: Number,
+        default: 5, // 若为 -1 则不进行机器判断
+      },
+      show: {
+        type: Boolean,
+        default: true,
+      },
+      //是否是后端异步验证，而不是纯前端的机器人验证
+      asyncVerify: {
+        type: Boolean,
+        default: true,
+      },
+      imgs: {
+        type: Array as PropType<any[]>,
+        default: () => [],
+      },
+      frontPicture: {
+        type: Object as PropType<frontPictureClass>,
+        default: () => {
+          return {
+            src: '',
+            width: 0,
+            height: 0,
+          };
+        },
+      },
+      interval: {
+        // 节流时长间隔
+        type: Number,
+        default: 50,
+      },
+    },
+    emits: ['success', 'again', 'fail', 'refresh', 'verify'],
+    setup(props, { emit }) {
+      let { imgs, l, r, accuracy, interval, asyncVerify, frontPicture } = props;
+      // 图片加载完关闭遮蔽罩
+      const loadBlock = ref(true);
+      const blockX = ref(0);
+      const blockY = ref(0);
+      let w = ref(props.w);
+      let h = ref(props.h);
+      let disabled = ref(false);
+      // class
+      const containerCls = reactive({
+        containerActive: false, // container active class
+        containerSuccess: false, // container success class
+        containerFail: false, // container fail class
+      });
+      // sliderMaskWidth sliderLeft
+      const sliderBox = reactive({
+        iconCls: 'arrow-right',
+        width: '0',
+        left: '0',
+      });
+
+      const block = ref<HTMLCanvasElement>();
+      const blockCtx = ref<CanvasRenderingContext2D | null>();
+      const canvas = ref<HTMLCanvasElement>();
+      const canvasCtx = ref<CanvasRenderingContext2D | null>();
+      let img: HTMLImageElement;
+      const { success, start, move, end, verify } = useSlideAction();
+      const dealCTx = (canvas, context) => {
+        // context = canvas.getContext('2d');
+        // 2、获取像素比，放大比例为：devicePixelRatio / webkitBackingStorePixelRatio , 以下是兼容的写法
+        let backingStore =
+          context.backingStorePixelRatio ||
+          context.webkitBackingStorePixelRatio ||
+          context.mozBackingStorePixelRatio ||
+          context.msBackingStorePixelRatio ||
+          context.oBackingStorePixelRatio ||
+          context.backingStorePixelRatio ||
+          1;
+        let ratio = (window.devicePixelRatio || 1) / backingStore;
+        // 3、将 Canvas 宽高进行放大，要设置canvas的画布大小，使用的是 canvas.width 和 canvas.height；
+        let oldWidth = canvas.width;
+        let oldHeight = canvas.height;
+        canvas.width = oldWidth * ratio;
+        canvas.height = oldHeight * ratio;
+        // 4、要设置画布的实际渲染大小，使用的 style 属性或CSS设置的 width 和 height，只是简单的对画布进行缩放。
+        canvas.style.width = oldWidth + 'px';
+        canvas.style.height = oldHeight + 'px';
+        // 5、放大倍数：由于 Canvas 放大后，相应的绘制图片时也要放大，可以直接使用 scale 方法
+        context.scale(ratio, ratio);
+      };
+      // event
+      const reset = () => {
+        success.value = false;
+        containerCls.containerActive = false;
+        containerCls.containerSuccess = false;
+        containerCls.containerFail = false;
+        sliderBox.iconCls = 'arrow-right';
+        sliderBox.left = '0';
+        sliderBox.width = '0';
+
+        block.value!.style.left = '0';
+
+        canvasCtx.value?.clearRect(0, 0, w.value, h.value);
+        blockCtx.value?.clearRect(0, 0, w.value, h.value);
+
+        if (!asyncVerify) {
+          block.value!.width = w.value;
+        }
+
+        // generate img
+        img.src = getRandomImg(imgs);
+      };
+      const refresh = () => {
+        reset();
+        emit('refresh');
+      };
+
+      const successFun = (name: string, timestamp?: number) => {
+        if (name === 'success') {
+          containerCls.containerSuccess = true;
+          sliderBox.iconCls = 'success';
+          success.value = true;
+          emit('success', timestamp);
+        }
+        if (name === 'again') {
+          containerCls.containerFail = true;
+          sliderBox.iconCls = 'fail';
+          emit('again');
+        }
+        if (name === 'fail') {
+          containerCls.containerFail = true;
+          sliderBox.iconCls = 'fail';
+          emit('fail');
+          setTimeout(() => {
+            reset();
+          }, 1000);
+        }
+      };
+
+      function moveCb(moveX: number) {
+        sliderBox.left = moveX - 5 + 'px';
+        let blockLeft = ((w.value - 40 - 20) / (w.value - 40)) * moveX;
+        block.value!.style.left = blockLeft + 'px';
+        containerCls.containerActive = true;
+        sliderBox.width = moveX + 'px';
+      }
+
+      function endCb(timestamp: number) {
+        const { spliced, TuringTest } = verify(block.value!.style.left, blockX.value, accuracy);
+        //不做自动校验，改为手动校验规则
+        if (asyncVerify) {
+          emit('verify', block.value!.style.left, timestamp);
+          return;
+        }
+        if (spliced) {
+          if (accuracy === -1) {
+            successFun('success', timestamp);
+            return;
+          }
+          if (TuringTest) {
+            // success
+            successFun('success', timestamp);
+          } else {
+            successFun('again', timestamp);
+          }
+        } else {
+          successFun('fail', timestamp);
+        }
+      }
+
+      const touchMoveEvent = throttle((e: TouchEvent | MouseEvent) => {
+        move(w.value, e, moveCb);
+      }, interval);
+
+      const touchEndEvent = (e: TouchEvent | MouseEvent) => {
+        end(e, endCb);
+      };
+
+      const setwatchFUn = (time?: number) => {
+        !time ? (time = 100) : '';
+        return new Promise((resolve: Function) => {
+          setTimeout(() => {
+            resolve();
+          }, time);
+        });
+      };
+
+      const resetImg = async () => {
+        const _canvasCtx = canvas.value?.getContext('2d');
+        const _blockCtx = block.value?.getContext('2d');
+        canvasCtx.value = _canvasCtx;
+        blockCtx.value = _blockCtx;
+
+        await setwatchFUn(300);
+        if (!imgs.length) {
+          resetImg();
+          return;
+        }
+
+        if (asyncVerify) {
+          img = createImg(imgs, () => {
+            if (_canvasCtx) {
+              _canvasCtx.drawImage(img, 0, 0, props.w, props.h);
+            }
+          });
+
+          setTimeout(() => {
+            let frontImg = createImg([frontPicture.src], () => {
+              if (_blockCtx) {
+                _blockCtx.drawImage(frontImg, 0, 0, frontPicture.width, frontPicture.height);
+              }
+              disabled.value = false;
+            });
+          }, 500);
+        } else {
+          img = createImg(imgs, () => {
+            loadBlock.value = false;
+            const L = l + r * 2 + 3;
+            // draw block
+            blockX.value = getRandomNumberByRange(L + 10, w.value - (L + 10));
+            blockY.value = getRandomNumberByRange(10 + r * 2, h.value - (L + 10));
+            if (_canvasCtx && _blockCtx) {
+              draw(_canvasCtx, blockX.value, blockY.value, l, r, 'fill');
+              draw(_blockCtx, blockX.value, blockY.value, l, r, 'clip');
+              // draw image
+              _canvasCtx.drawImage(img, 0, 0, w.value, h.value);
+              _blockCtx.drawImage(img, 0, 0, w.value, h.value);
+              // getImage
+              const _y = blockY.value - r * 2 - 1;
+              const imgData = _blockCtx.getImageData(blockX.value, _y, L, L);
+              block.value!.width = L;
+              _blockCtx.putImageData(imgData, 0, _y);
+            }
+            disabled.value = false;
+          });
+        }
+
+        // bindEvent
+        document.addEventListener('mousemove', touchMoveEvent);
+        document.addEventListener('mouseup', touchEndEvent);
+      };
+
+      onMounted(async () => {
+        resetImg();
+      });
+
+      // 移除全局事件
+      onBeforeUnmount(() => {
+        document.removeEventListener('mousemove', touchMoveEvent);
+        document.removeEventListener('mouseup', touchEndEvent);
+      });
+
+      watch(
+        () => props.imgs,
+        (val: any[]) => {
+          imgs = val;
+        },
+      );
+      watch(
+        () => props.frontPicture,
+        (val: any) => {
+          frontPicture = val;
+        },
+      );
+      watch(
+        () => props.w,
+        (val: any) => {
+          w.value = val;
+        },
+      );
+      watch(
+        () => props.h,
+        (val: any) => {
+          h.value = val;
+        },
+      );
+
+      return {
+        block,
+        canvas,
+        loadBlock,
+        containerCls,
+        sliderBox,
+        refresh,
+        sliderDown: start,
+        touchStartEvent: start,
+        touchMoveEvent,
+        touchEndEvent,
+        successFun,
+        resetImg,
+        disabled,
+      };
+    },
+  });
+</script>
+
+<style scoped lang="less">
+  @import url('../assets/iconfont.css');
+
+  .slide-verify-refresh-icon {
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    width: 32px;
+    height: 32px;
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+
+  .slide-verify-slider-mask-item-icon {
+    color: rgba(0, 0, 0, 0.4) !important;
+  }
+
+  // .slide-verify-slider-mask-item:hover {
+  //   color: #fff !important;
+  // }
+
+  .container-success .slide-verify-slider-mask .iconfont {
+    color: #fff !important;
+  }
+
+  .container-fail .slide-verify-slider-mask .iconfont {
+    color: #fff !important;
+  }
+
+  // .container-active .slide-verify-slider-mask {
+  //   background-color: #1991fa;
+  // }
+  // .container-active .slide-verify-slider-mask .iconfont {
+  //   color: #fff !important;
+  // }
+
+  .slide-verify-slider-mask-item {
+    width: 38px !important;
+    height: 38px !important;
+    border-radius: 2px;
+  }
+
+  .slide-verify-slider {
+    border-radius: 2px;
+  }
+
+  .slide-verify-refresh-icon .iconfont {
+    font-size: 25px !important;
+    transform: rotate(-30deg);
+  }
+
+  .position() {
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  .slide-verify {
+    position: relative;
+    &-loading {
+      .position();
+      right: 0;
+      bottom: 0;
+      background: rgba(255, 255, 255, 0.9);
+      z-index: 999;
+      animation: loading 1.5s infinite;
+    }
+
+    &-block {
+      .position();
+    }
+
+    &-refresh-icon {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 32px;
+      height: 32px;
+      cursor: pointer;
+      .iconfont {
+        font-size: 34px;
+        color: #fff;
+      }
+    }
+    &-slider {
+      position: relative;
+      text-align: center;
+      width: 100%;
+      height: 40px;
+      line-height: 40px;
+      margin-top: 15px;
+      background: #f7f9fa;
+      color: #45494c;
+      border: 1px solid #e4e7eb;
+      &-mask {
+        .position();
+        height: 40px;
+        border: 0 solid #1991fa;
+        background: #d1e9fe;
+        &-item {
+          .position();
+          width: 40px;
+          height: 40px;
+          background: #fff;
+          box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+          cursor: pointer;
+          transition: background 0.2s linear;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          &-icon {
+            line-height: 1;
+            font-size: 30px;
+            color: #303030;
+          }
+        }
+      }
+    }
+  }
+
+  .container-active .slide-verify-slider-mask {
+    height: 38px;
+    border-width: 1px;
+    &-item {
+      height: 38px;
+      top: -1px;
+      border: 1px solid #1991fa;
+    }
+  }
+
+  .container-success .slide-verify-slider-mask {
+    height: 38px;
+    border: 1px solid #52ccba;
+    background-color: #d2f4ef;
+    &-item {
+      height: 38px;
+      top: -1px;
+      border: 1px solid #52ccba;
+      background-color: #52ccba !important;
+    }
+    .iconfont {
+      color: #fff;
+    }
+  }
+
+  .container-fail .slide-verify-slider-mask {
+    height: 38px;
+    border: 1px solid #f57a7a;
+    background-color: #fce1e1;
+    &-item {
+      height: 38px;
+      top: -1px;
+      border: 1px solid #f57a7a;
+      background-color: #f57a7a !important;
+    }
+    .iconfont {
+      color: #fff;
+    }
+  }
+
+  .container-active .slide-verify-slider-text,
+  .container-success .slide-verify-slider-text,
+  .container-fail .slide-verify-slider-text {
+    display: none;
+  }
+
+  @keyframes loading {
+    0% {
+      opacity: 0.7;
+    }
+    100% {
+      opacity: 9;
+    }
+  }
+</style>