tav-ui/lib/packages/components/verify/src/rotate2.js

Tav UI

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var useTimeout = require('../../../hooks/core/useTimeout2.js');
var domUtils = require('../../../utils/domUtils2.js');
var verify = require('./verify2.js');
var types = require('./types2.js');

var Rotate = vue.defineComponent({
  name: "TaVerifyRotate",
  inheritAttrs: false,
  props: types.verifyRotateProps,
  emits: ["success", "change", "update:value"],
  setup(props, {
    emit,
    attrs,
    expose
  }) {
    const basicRef = vue.ref(null);
    const state = vue.reactive({
      showTip: false,
      isPassing: false,
      imgStyle: {},
      randomRotate: 0,
      currentRotate: 0,
      toOrigin: false,
      startTime: 0,
      endTime: 0,
      draged: false
    });
    vue.watch(() => state.isPassing, (isPassing) => {
      if (isPassing) {
        const {
          startTime,
          endTime
        } = state;
        const time = (endTime - startTime) / 1e3;
        emit("success", {
          isPassing,
          time: time.toFixed(1)
        });
        emit("change", isPassing);
        emit("update:value", isPassing);
      }
    });
    const getImgWrapStyleRef = vue.computed(() => {
      const {
        imgWrapStyle,
        imgWidth
      } = props;
      return {
        width: `${imgWidth}px`,
        height: `${imgWidth}px`,
        ...imgWrapStyle
      };
    });
    const getFactorRef = vue.computed(() => {
      const {
        minDegree,
        maxDegree
      } = props;
      if (minDegree === maxDegree) {
        return Math.floor(1 + Math.random() * 1) / 10 + 1;
      }
      return 1;
    });
    function handleStart() {
      state.startTime = new Date().getTime();
    }
    function handleDragBarMove(data) {
      state.draged = true;
      const {
        imgWidth,
        height,
        maxDegree
      } = props;
      const {
        moveX
      } = data;
      const currentRotate = Math.ceil(moveX / (imgWidth - parseInt(height)) * maxDegree * vue.unref(getFactorRef));
      state.currentRotate = currentRotate;
      state.imgStyle = domUtils.hackCss("transform", `rotateZ(${state.randomRotate - currentRotate}deg)`);
    }
    function handleImgOnLoad() {
      const {
        minDegree,
        maxDegree
      } = props;
      const ranRotate = Math.floor(minDegree + Math.random() * (maxDegree - minDegree));
      state.randomRotate = ranRotate;
      state.imgStyle = domUtils.hackCss("transform", `rotateZ(${ranRotate}deg)`);
    }
    function handleDragEnd() {
      const {
        randomRotate,
        currentRotate
      } = state;
      const {
        diffDegree
      } = props;
      if (Math.abs(randomRotate - currentRotate) >= (diffDegree || 20)) {
        state.imgStyle = domUtils.hackCss("transform", `rotateZ(${randomRotate}deg)`);
        state.toOrigin = true;
        useTimeout.useTimeoutFn(() => {
          state.toOrigin = false;
          state.showTip = true;
        }, 300);
      } else {
        checkPass();
      }
      state.showTip = true;
    }
    function checkPass() {
      state.isPassing = true;
      state.endTime = new Date().getTime();
    }
    function resume() {
      state.showTip = false;
      const basicEl = vue.unref(basicRef);
      if (!basicEl) {
        return;
      }
      state.isPassing = false;
      basicEl.resume();
      handleImgOnLoad();
    }
    expose({
      resume
    });
    return () => {
      const {
        src
      } = props;
      const {
        toOrigin,
        isPassing,
        startTime,
        endTime
      } = state;
      const imgCls = [];
      if (toOrigin) {
        imgCls.push("to-origin");
      }
      const time = (endTime - startTime) / 1e3;
      return vue.createVNode("div", {
        "class": "ir-dv"
      }, [vue.createVNode("div", {
        "class": `ir-dv-img__wrap`,
        "style": vue.unref(getImgWrapStyleRef)
      }, [vue.createVNode("img", {
        "src": src,
        "onLoad": handleImgOnLoad,
        "width": parseInt(props.width),
        "class": imgCls,
        "style": state.imgStyle,
        "onClick": () => {
          resume();
        },
        "alt": "verify"
      }, null), state.showTip && vue.createVNode("span", {
        "class": [`ir-dv-img__tip`, state.isPassing ? "success" : "error"]
      }, [state.isPassing ? `\u9A8C\u8BC1\u6821\u9A8C\u6210\u529F\uFF0C\u8017\u65F6${time.toFixed(1)}\u79D2` : "\u9A8C\u8BC1\u5931\u8D25\uFF01"]), !state.showTip && !state.draged && vue.createVNode("span", {
        "class": [`ir-dv-img__tip`, "normal"]
      }, ["\u70B9\u51FB\u56FE\u7247\u53EF\u5237\u65B0"])]), vue.createVNode(verify["default"], vue.mergeProps({
        "class": `ir-dv-drag__bar`,
        "onMove": handleDragBarMove,
        "onEnd": handleDragEnd,
        "onStart": handleStart,
        "ref": basicRef
      }, {
        ...attrs,
        ...props
      }, {
        "value": isPassing,
        "isSlot": true
      }), null)]);
    };
  }
});

exports["default"] = Rotate;
//# sourceMappingURL=rotate2.js.map