officialAccount/unpackage/dist/dev/mp-weixin/compontent/public/huakuai.js

"use strict";
const common_vendor = require("../../common/vendor.js");
const common_assets = require("../../common/assets.js");
const pieceSizePx = 50;
const tolerance = 20;
const containerWidthPx = 200;
const containerHeightPx = 300;
const _sfc_main = {
  __name: "huakuai",
  emits: ["success"],
  setup(__props, { emit: __emit }) {
    const emit = __emit;
    const pieceSize = pieceSizePx * 2;
    const container = common_vendor.ref(null);
    common_vendor.ref(null);
    const containerWidth = common_vendor.ref(containerWidthPx * 2);
    const containerHeight = common_vendor.ref(containerHeightPx * 2);
    const originX = common_vendor.ref(0);
    const originY = common_vendor.ref(0);
    const offsetX = common_vendor.ref(0);
    const dragging = common_vendor.ref(false);
    const startX = common_vendor.ref(0);
    function getPuzzlePiecePath(size) {
      const s = size;
      return `
    M${10 * 2} 0
    h${s / 3 - 10 * 2}
    a${10 * 2} ${10 * 2} 0 0 1 0 ${20 * 2}
    h${s / 3}
    a${10 * 2} ${10 * 2} 0 0 0 0 -${20 * 2}
    h${s / 3 - 10 * 2}
    v${s / 3 - 10 * 2}
    a${10 * 2} ${10 * 2} 0 0 1 -${20 * 2} 0
    v${s / 3}
    a${10 * 2} ${10 * 2} 0 0 0 ${20 * 2} 0
    v${s / 3 - 10 * 2}
    h-${s / 3 - 10 * 2}
    a${10 * 2} ${10 * 2} 0 0 1 0 -${20 * 2}
    h-${s / 3}
    a${10 * 2} ${10 * 2} 0 0 0 0 ${20 * 2}
    h-${s / 3 - 10 * 2}
    z
  `;
    }
    const clipPath = `path('${getPuzzlePiecePath(pieceSize)}')`;
    function init() {
      common_vendor.index.createSelectorQuery().in(container.value).select(".bg-image").boundingClientRect((data) => {
        if (!data) {
          common_vendor.index.__f__("error", "at compontent/public/huakuai.vue:109", "无法获取.bg-image尺寸");
          return;
        }
        common_vendor.index.__f__("log", "at compontent/public/huakuai.vue:112", "图片宽高：", data.width, data.height);
        containerWidth.value = data.width * 2;
        containerHeight.value = data.height * 2;
        originX.value = Math.random() * (containerWidth.value - pieceSize * 2) + pieceSize;
        if (originX.value < 100) {
          originX.value = 100;
        }
        originY.value = containerHeight.value / 2;
        offsetX.value = 0;
        common_vendor.index.__f__("log", "at compontent/public/huakuai.vue:125", "originX:", originX.value, "originY:", originY.value);
      }).exec();
    }
    function onStart(e) {
      dragging.value = true;
      startX.value = e.touches ? e.touches[0].clientX * 2 : e.clientX * 2;
      window.addEventListener("mousemove", onMove);
      window.addEventListener("mouseup", onEnd);
      window.addEventListener("touchmove", onMove);
      window.addEventListener("touchend", onEnd);
    }
    function onMove(e) {
      if (!dragging.value)
        return;
      const clientX = e.touches ? e.touches[0].clientX * 2 : e.clientX * 2;
      let dx = clientX - startX.value;
      dx = Math.max(0, Math.min(dx, containerWidth.value - pieceSize));
      offsetX.value = dx;
    }
    common_vendor.ref(null);
    function onEnd() {
      dragging.value = false;
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("mouseup", onEnd);
      window.removeEventListener("touchmove", onMove);
      window.removeEventListener("touchend", onEnd);
      if (Math.abs(offsetX.value - originX.value) < tolerance) {
        common_vendor.index.showToast({
          title: "验证成功",
          icon: "none",
          // 不显示图标（提示信息）
          duration: 2e3
          // 显示时长（毫秒）
        });
        emit("success");
      } else {
        offsetX.value = 0;
        common_vendor.index.showToast({
          title: "验证失败",
          icon: "none",
          // 不显示图标（提示信息）
          duration: 2e3
          // 显示时长（毫秒）
        });
      }
    }
    const bgImage = common_vendor.ref("");
    common_vendor.onLoad(() => {
      let randomInt = Math.floor(Math.random() * 4);
      const bgImageMap = [common_assets.img0, common_assets.img1, common_assets.img2, common_assets.img3];
      bgImage.value = bgImageMap[randomInt];
    });
    common_vendor.onBeforeUnmount(() => {
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("mouseup", onEnd);
      window.removeEventListener("touchmove", onMove);
      window.removeEventListener("touchend", onEnd);
    });
    return (_ctx, _cache) => {
      return {
        a: bgImage.value,
        b: common_vendor.o(init),
        c: originY.value + "rpx",
        d: originX.value + 50 + "rpx",
        e: pieceSize + "rpx",
        f: pieceSize + "rpx",
        g: clipPath,
        h: originY.value + "rpx",
        i: offsetX.value + 50 + "rpx",
        j: pieceSize + "rpx",
        k: pieceSize + "rpx",
        l: `url(${bgImage.value})`,
        m: containerWidth.value + "rpx " + containerHeight.value + "rpx",
        n: `-${originX.value + 10}rpx -${originY.value - 20}rpx`,
        o: clipPath,
        p: containerWidth.value + "rpx",
        q: containerHeight.value + "rpx",
        r: common_assets._imports_0$8,
        s: common_vendor.o(onStart),
        t: common_vendor.o(onStart),
        v: offsetX.value + "rpx",
        w: containerWidth.value - pieceSize + "rpx"
      };
    };
  }
};
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-2ca77e4c"]]);
wx.createComponent(Component);
//# sourceMappingURL=../../../.sourcemap/mp-weixin/compontent/public/huakuai.js.map