132 lines
4.3 KiB
JavaScript
132 lines
4.3 KiB
JavaScript
"use strict";
|
|
const common_vendor = require("../../common/vendor.js");
|
|
const pieceSize = 50;
|
|
const tolerance = 20;
|
|
const _sfc_main = {
|
|
__name: "huakuai",
|
|
emits: ["success"],
|
|
setup(__props, { emit: __emit }) {
|
|
const emit = __emit;
|
|
const containerWidth = common_vendor.ref(0);
|
|
const containerHeight = common_vendor.ref(0);
|
|
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} 0
|
|
h${s / 3 - 10}
|
|
a${10} ${10} 0 0 1 0 ${20}
|
|
h${s / 3}
|
|
a${10} ${10} 0 0 0 0 -${20}
|
|
h${s / 3 - 10}
|
|
v${s / 3 - 10}
|
|
a${10} ${10} 0 0 1 -${20} 0
|
|
v${s / 3}
|
|
a${10} ${10} 0 0 0 ${20} 0
|
|
v${s / 3 - 10}
|
|
h-${s / 3 - 10}
|
|
a${10} ${10} 0 0 1 0 -${20}
|
|
h-${s / 3}
|
|
a${10} ${10} 0 0 0 0 ${20}
|
|
h-${s / 3 - 10}
|
|
z
|
|
`;
|
|
}
|
|
const clipPath = `path('${getPuzzlePiecePath(pieceSize)}')`;
|
|
function init() {
|
|
common_vendor.nextTick$1(() => {
|
|
if (!instance) {
|
|
common_vendor.index.__f__("error", "at compontent/public/huakuai.vue:106", "无法获取组件实例");
|
|
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:114", "无法获取图片尺寸");
|
|
return;
|
|
}
|
|
containerWidth.value = data.width;
|
|
containerHeight.value = data.height;
|
|
originX.value = Math.random() * (containerWidth.value - pieceSize) + pieceSize / 2;
|
|
originX.value = Math.max(pieceSize / 2, Math.min(originX.value, containerWidth.value - pieceSize / 2));
|
|
originY.value = containerHeight.value / 2;
|
|
offsetX.value = 0;
|
|
}).exec();
|
|
});
|
|
}
|
|
function onStart(e) {
|
|
dragging.value = true;
|
|
startX.value = e.touches[0].clientX;
|
|
}
|
|
function onMove(e) {
|
|
if (!dragging.value)
|
|
return;
|
|
const clientX = e.touches[0].clientX;
|
|
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)];
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return {
|
|
a: bgImage.value,
|
|
b: common_vendor.o(init),
|
|
c: originY.value + "px",
|
|
d: originX.value + "px",
|
|
e: pieceSize + "px",
|
|
f: pieceSize + "px",
|
|
g: clipPath,
|
|
h: originY.value + "px",
|
|
i: offsetX.value + "px",
|
|
j: pieceSize + "px",
|
|
k: pieceSize + "px",
|
|
l: `url(${bgImage.value})`,
|
|
m: containerWidth.value + "px " + containerHeight.value + "px",
|
|
n: `-${originX.value}px -${originY.value}px`,
|
|
o: clipPath,
|
|
p: containerWidth.value + "px",
|
|
q: containerHeight.value + "px",
|
|
r: common_vendor.o(onStart),
|
|
s: common_vendor.o(onMove),
|
|
t: common_vendor.o(onEnd),
|
|
v: offsetX.value + "px",
|
|
w: containerWidth.value - pieceSize + "px"
|
|
};
|
|
};
|
|
}
|
|
};
|
|
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
|