"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", setup(__props) { 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:102", "无法获取.bg-image尺寸"); return; } common_vendor.index.__f__("log", "at compontent/public/huakuai.vue:105", "图片宽高:", data.width, data.height); containerWidth.value = data.width * 2; containerHeight.value = data.height * 2; originX.value = Math.random() * (containerWidth.value - pieceSize * 2) + pieceSize; originY.value = containerHeight.value / 2; offsetX.value = 0; common_vendor.index.__f__("log", "at compontent/public/huakuai.vue:114", "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.__f__("log", "at compontent/public/huakuai.vue:146", "验证成功"); } 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 + "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 - 45}rpx`, o: clipPath, p: containerWidth.value + "rpx", q: containerHeight.value + "rpx", r: common_vendor.o(onStart), s: common_vendor.o(onStart), t: offsetX.value + "rpx", v: 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