movecar_wx/miniprogram_npm/tdesign-miniprogram/swipe-cell/swipe-cell.js

import { __decorate } from "tslib";
import { SuperComponent, wxComponent } from "../common/src/index";
import config from "../common/config";
import props from "./props";
import { getRect } from "../common/utils";
import { getObserver } from "../common/wechat";

let ARRAY = [];
const { prefix } = config;
const name = `${prefix}-swipe-cell`;
const ContainerClass = `.${name}`;
// 补充滑动阈值常量
const THRESHOLD = 0.5;

let SwiperCell = class extends SuperComponent {
  constructor() {
    super(...arguments);
    this.externalClasses = [`${prefix}-class`];
    this.options = { multipleSlots: true };
    this.properties = props;
    this.data = {
      prefix: prefix,
      wrapperStyle: "",
      closed: true,
      classPrefix: name,
      skipMove: false,
      leftWidth: 0,
      rightWidth: 0,
      // 补充滑动状态管理
      nv_state: {
        nv_direction: "", // vertical/horizontal
        nv_dragging: false,
        nv_startOffset: 0,
        nv_deltaX: 0,
        nv_offset: 0,
        nv_leftWidth: 0,
        nv_rightWidth: 0,
        nv_THRESHOLD: THRESHOLD,
      },
    };
    this.observers = {
      "left, right"() {
        this.setSwipeWidth();
      },
    };
    this.lifetimes = {
      attached() {
        ARRAY.push(this);
      },
      ready() {
        this.setSwipeWidth();
      },
      detached() {
        ARRAY = ARRAY.filter((e) => e !== this);
      },
    };
    // 声明事件处理方法（关键：暴露给模板调用）
    this.methods = {
      // 触摸开始：初始化滑动状态
      nv_touchStart(nv_event) {
        const touch = nv_event.touches[0];
        const { leftWidth, rightWidth } = this.data;
        const nv_state = {
          ...this.data.nv_state,
          nv_direction: "",
          nv_dragging: false,
          nv_startOffset: this.data.nv_state.nv_offset || 0,
          nv_deltaX: 0,
          nv_offset: this.data.nv_state.nv_offset || 0,
          nv_leftWidth: leftWidth,
          nv_rightWidth: rightWidth,
          nv_THRESHOLD: THRESHOLD,
        };
        this.setData({ nv_state });
        this.nv_state = nv_state; // 同步到实例属性
      },
      // 触摸移动：核心滑动逻辑（解决 touchmove 报错）
      nv_touchMove(nv_event) {
        const nv_ownerInstance = this;
        const nv_state = this.nv_state || this.data.nv_state;
        
        // 获取滑动偏移量
        const touch = nv_event.touches[0];
        nv_state.nv_deltaX = touch.clientX - (this.startX || touch.clientX);
        this.startX = touch.clientX;

        // 判断滑动方向
        if (Math.abs(nv_state.nv_deltaX) > Math.abs(touch.clientY - (this.startY || touch.clientY))) {
          nv_state.nv_direction = "horizontal";
        } else {
          nv_state.nv_direction = "vertical";
          nv_ownerInstance.skipMove(); // 垂直滑动跳过
          return;
        }

        // 水平滑动逻辑
        if (nv_state.nv_direction !== "horizontal") return;
        if (!nv_state.nv_dragging) {
          nv_ownerInstance.triggerEvent("dragstart"); // 触发开始拖拽事件
        }
        nv_state.nv_dragging = true;
        // 计算滑动偏移
        const newOffset = nv_state.nv_startOffset + nv_state.nv_deltaX;
        nv_state.nv_offset = newOffset;
        // 限制滑动范围
        this.nv_swipeMove(newOffset);
        this.setData({ nv_state });
        return false;
      },
      // 触摸结束：处理滑动收尾（解决 touchend 报错）
      nv_touchEnd() {
        const nv_ownerInstance = this;
        const nv_state = this.nv_state || this.data.nv_state;
        nv_state.nv_dragging = false;

        // 判断是否打开/关闭
        if (nv_state.nv_rightWidth > 0 && -nv_state.nv_startOffset < nv_state.nv_rightWidth && -nv_state.nv_offset > nv_state.nv_rightWidth * nv_state.nv_THRESHOLD) {
          this.nv_open("right");
        } else if (nv_state.nv_leftWidth > 0 && nv_state.nv_startOffset < nv_state.nv_leftWidth && nv_state.nv_offset > nv_state.nv_leftWidth * nv_state.nv_THRESHOLD) {
          this.nv_open("left");
        } else {
          if (nv_state.nv_startOffset !== nv_state.nv_offset) {
            this.nv_close();
          }
        }
        nv_ownerInstance.triggerEvent("dragend"); // 触发结束拖拽事件
        this.setData({ nv_state });
      },
      // 滑动偏移处理
      nv_swipeMove(offset) {
        const { leftWidth, rightWidth } = this.data;
        // 限制偏移范围：-rightWidth ≤ offset ≤ leftWidth
        const clampedOffset = Math.max(-rightWidth, Math.min(offset, leftWidth));
        this.setData({
          wrapperStyle: `transform: translateX(${clampedOffset}px); transition: none;`,
        });
      },
      // 打开侧滑
      nv_open(direction) {
        const offset = direction === "left" ? this.data.leftWidth : -this.data.rightWidth;
        this.setData({
          wrapperStyle: `transform: translateX(${offset}px); transition: transform 0.3s ease;`,
          nv_state: { ...this.data.nv_state, nv_offset: offset },
          closed: false,
        });
        this.triggerEvent("open", { direction });
      },
      // 关闭侧滑
      nv_close() {
        this.setData({
          wrapperStyle: `transform: translateX(0px); transition: transform 0.3s ease;`,
          nv_state: { ...this.data.nv_state, nv_offset: 0 },
          closed: true,
        });
        this.triggerEvent("close");
      },
      // 原有方法保留
      setSwipeWidth() {
        Promise.all([
          getRect(this, `${ContainerClass}__left`),
          getRect(this, `${ContainerClass}__right`),
        ]).then(([e, t]) => {
          if (e.width === 0 && t.width === 0 && !this._hasObserved) {
            this._hasObserved = true;
            getObserver(this, `.${name}`).then(() => {
              this.setSwipeWidth();
            });
          }
          this.setData({ leftWidth: e.width, rightWidth: t.width });
        });
      },
      skipMove() {
        if (!this.data.skipMove) {
          this.setData({ skipMove: true });
        }
      },
      catchMove() {
        if (this.data.skipMove) {
          this.setData({ skipMove: false });
        }
      },
      open() {
        this.setData({ opened: true });
      },
      close() {
        this.setData({ opened: false });
      },
      closeOther() {
        ARRAY.filter((e) => e !== this).forEach((e) => e.close());
      },
      onTap() {
        this.close();
      },
      onActionTap(e) {
        const {
          currentTarget: {
            dataset: { action: t },
          },
        } = e;
        this.triggerEvent("click", t);
      },
    };
  }
};

SwiperCell = __decorate([wxComponent()], SwiperCell);
export default SwiperCell;