"use strict"; const common_vendor = require("../../common/vendor.js"); const pieceSizePx = 50; const tolerance = 20; const _sfc_main = { __name: "huakuai", emits: ["success"], setup(__props, { emit: __emit }) { const emit = __emit; const pieceSize = pieceSizePx * 2; const containerWidth = common_vendor.ref(400); const containerHeight = common_vendor.ref(400); 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); const bgImage = common_vendor.ref(""); const instance = common_vendor.getCurrentInstance(); 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.nextTick$1(() => { if (!instance) { common_vendor.index.__f__("error", "at compontent/public/huakuai.vue:107", "无法获取组件实例"); return; } common_vendor.index.createSelectorQuery().in(instance.proxy).select(".bg-image").boundingClientRect((data) => { if (!data) { common_vendor.index.__f__("error", "at compontent/public/huakuai.vue:115", "无法获取图片尺寸"); return; } 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; if (originX.value > 400) originX.value = 400; originY.value = containerHeight.value / 2; offsetX.value = 0; }).exec(); }); } function onStart(e) { dragging.value = true; startX.value = e.touches[0].clientX * 2; } function onMove(e) { if (!dragging.value) return; const clientX = e.touches[0].clientX * 2; let dx = clientX - startX.value; dx = Math.max(0, Math.min(dx, containerWidth.value - pieceSize)); offsetX.value = dx; } function onEnd() { dragging.value = false; 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 }); } } common_vendor.onMounted(() => { const images = [ "https://www.focusnu.com/media/directive/login/0.png", "https://www.focusnu.com/media/directive/login/1.png", "https://www.focusnu.com/media/directive/login/2.png" // 'https://www.focusnu.com/media/directive/login/3.png' ]; bgImage.value = images[Math.floor(Math.random() * images.length)]; common_vendor.index.__f__("log", "at compontent/public/huakuai.vue:172", "加载图片:", bgImage.value); }); return (_ctx, _cache) => { return { a: bgImage.value, b: common_vendor.o(init), c: originY.value + "rpx", d: originX.value + "rpx", e: pieceSize + "rpx", f: pieceSize + "rpx", g: clipPath, h: originY.value + "rpx", i: offsetX.value + "rpx", j: pieceSize + "rpx", k: pieceSize + "rpx", l: `url(${bgImage.value})`, m: containerWidth.value + "rpx " + containerHeight.value + "rpx", n: `-${originX.value + 30}rpx -${originY.value + 43}rpx`, o: clipPath, p: containerWidth.value + "rpx", q: containerHeight.value + "rpx", r: common_vendor.o(onStart), s: common_vendor.o(onMove), t: common_vendor.o(onEnd), 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