"use strict"; const common_vendor = require("../../common/vendor.js"); const imageSpacing = 220; const _sfc_main = { __name: "photohuadong", emits: ["updateCenterIndex"], setup(__props, { emit: __emit }) { const emit = __emit; const images = common_vendor.ref([ "/static/index/three/0.png", "/static/index/three/1.png", "/static/index/three/2.png" ]); const imageName = common_vendor.ref([ "长者入住", "机构加盟", "员工入驻" ]); const len = images.value.length; const startX = common_vendor.ref(0); const position = common_vendor.ref(0); const isDragging = common_vendor.ref(false); const enableTransition = common_vendor.ref(false); const dragDirection = common_vendor.ref(0); const centerIndex = common_vendor.computed(() => { return mod(Math.floor(position.value), len); }); const leftIndex = common_vendor.computed(() => mod(centerIndex.value - 1, len)); const rightIndex = common_vendor.computed(() => mod(centerIndex.value + 1, len)); const visibleImages = common_vendor.computed(() => [ images.value[leftIndex.value], images.value[centerIndex.value], images.value[rightIndex.value] ]); const leftCopyImage = common_vendor.computed(() => images.value[leftIndex.value]); const rightCopyImage = common_vendor.computed(() => images.value[rightIndex.value]); function mod(n, m) { return (n % m + m) % m; } function onTouchStart(e) { if (enableTransition.value) enableTransition.value = false; isDragging.value = true; startX.value = e.touches[0].clientX; dragDirection.value = 0; } function onTouchMove(e) { if (!isDragging.value) return; const currentX = e.touches[0].clientX; const delta = currentX - startX.value; dragDirection.value = delta > 0 ? 1 : -1; position.value -= delta / imageSpacing; startX.value = currentX; } function onTouchEnd() { if (!isDragging.value) return; isDragging.value = false; enableTransition.value = true; position.value = Math.round(position.value); } function itemStyle(i) { const floorPos = Math.floor(position.value); const offset = position.value - floorPos; const absOff = Math.abs(offset); const baseX = (i - 1) * imageSpacing; const translateX = baseX - offset * imageSpacing; let opacity = 0.5; let zIndex = 1; if (i === 1) { opacity = 1 - 0.5 * absOff; zIndex = 3; } else if (i === 2 && offset >= 0 || i === 0 && offset < 0) { opacity = 0.5 + 0.5 * absOff; zIndex = 2; } let scale = 0.8; if (i === 1) { scale = 1.1 - 0.3 * absOff; } else if (i === 2 && offset >= 0 || i === 0 && offset < 0) { scale = 0.8 + 0.3 * absOff; } return { transform: `translate(-50%, -50%) translateX(${translateX}rpx) scale(${scale})`, opacity, zIndex, transition: enableTransition.value ? "transform 0.3s ease, opacity 0.3s ease" : "none" }; } const leftCopyStyle = common_vendor.computed(() => { const show = dragDirection.value === 1; const floorPos = Math.floor(position.value); const offset = position.value - floorPos; const translateX = 2.2 * imageSpacing - offset * imageSpacing; let scale = 0.8; let opacity = 0.5; let zIndex = 2; if (offset < 0) { const posOffset = -offset; scale = 0.8 + 0.5 * posOffset; opacity = 0.5 + 0.5 * posOffset; } return { transform: `translate(-50%, -50%) translateX(${translateX}rpx) scale(${scale})`, opacity, zIndex, pointerEvents: "none", position: "absolute", top: "40%", left: "50%", opacity: show ? 0.5 : 0, willChange: "transform, opacity", transition: enableTransition.value ? "transform 0.3s ease, opacity 0.3s ease" : "none" }; }); const rightCopyStyle = common_vendor.computed(() => { const show = dragDirection.value === 1; const floorPos = Math.floor(position.value); const offset = position.value - floorPos; const translateX = -2.2 * imageSpacing - offset * imageSpacing; let scale = 0.8; let opacity = 0.5; let zIndex = 2; if (offset >= 0) { scale = 0.8 + 0.5 * offset; opacity = 0.5 + 0.5 * offset; } return { transform: `translate(-50%, -50%) translateX(${translateX}rpx) scale(${scale})`, opacity, zIndex, pointerEvents: "none", position: "absolute", top: "40%", left: "50%", opacity: show ? 0.5 : 0, willChange: "transform, opacity", transition: enableTransition.value ? "transform 0.3s ease, opacity 0.3s ease" : "none" }; }); common_vendor.watch(centerIndex, (newIdx) => { emit("updateCenterIndex", newIdx); }); return (_ctx, _cache) => { return { a: common_vendor.f(visibleImages.value, (img, i, i0) => { return { a: img, b: common_vendor.t(img.includes("0") ? imageName.value[0] : img.includes("1") ? imageName.value[1] : imageName.value[2]), c: common_vendor.s(i == 1 ? { fontWeight: 600 } : {}), d: img, e: common_vendor.s(itemStyle(i)) }; }), b: leftCopyImage.value, c: common_vendor.s(leftCopyStyle.value), d: rightCopyImage.value, e: common_vendor.s(rightCopyStyle.value), f: common_vendor.o(onTouchStart), g: common_vendor.o(onTouchMove), h: common_vendor.o(onTouchEnd) }; }; } }; const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-1f083dc5"]]); wx.createComponent(Component); //# sourceMappingURL=../../../.sourcemap/mp-weixin/compontent/public/photohuadong.js.map