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

"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