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

137 lines
4.6 KiB
JavaScript

"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