wxhuanart/miniprogram/components/goods-card/goods-card.ts

Component<
  {
    goods: WxCateAlbumItemDto
    independentID: string
    isValidityLinePrice: boolean
  },
  {
    id: ComponentPropertyStringType
    data: ComponentPropertyObjectType
    currency: ComponentPropertyStringType
    thresholds: ComponentPropertyArrayType
    lite: ComponentPropertyBooleanType
  },
  {
    init(): void
    clear(): void
    clickHandle(): void
    clickThumbHandle(): void
    addCartHandle(e: WechatMiniprogram.CustomEvent): void
    genIndependentID(id: string): void
    createIntersectionObserverHandle(): void
    clearIntersectionObserverHandle(): void
    intersectionObserverCallback(
      e: WechatMiniprogram.IntersectionObserverObserveCallbackResult,
    ): void
  },
  {
    intersectionObserverContext: WechatMiniprogram.IntersectionObserver
  }
>({
  options: {
    addGlobalClass: true,
  },

  properties: {
    id: {
      type: String,
      value: '',
      observer(id: string) {
        this.genIndependentID(id)
        if (this.properties.thresholds?.length) {
          this.createIntersectionObserverHandle()
        }
      },
    },
    data: {
      type: Object,
      observer(data: Record<string, any>) {
        if (!data) {
          return
        }
        let isValidityLinePrice = true
        if (data.originPrice && data.price && data.originPrice < data.price) {
          isValidityLinePrice = false
        }
        this.setData({ goods: data as WxCateAlbumItemDto, isValidityLinePrice })
      },
    },
    currency: {
      type: String,
      value: '¥',
    },
    lite: {
      type: Boolean,
      value: false,
    },
    thresholds: {
      type: Array,
      value: [],
      observer(thresholds) {
        if (thresholds && thresholds.length) {
          this.createIntersectionObserverHandle()
        } else {
          this.clearIntersectionObserverHandle()
        }
      },
    },
  },

  data: {
    independentID: '',
    goods: { id: -1 } as any,
    isValidityLinePrice: false,
  },

  lifetimes: {
    ready() {
      this.init()
    },
    detached() {
      this.clear()
    },
  },

  methods: {
    clickHandle() {
      this.triggerEvent('click', { goods: this.data.goods })
    },

    clickThumbHandle() {
      this.triggerEvent('thumb', { goods: this.data.goods })
    },

    addCartHandle(e) {
      const { id } = e.currentTarget
      const { id: cardID } = e.currentTarget.dataset
      this.triggerEvent('add-cart', {
        ...e.detail,
        id,
        cardID,
        goods: this.data.goods,
      })
    },

    genIndependentID(id) {
      let independentID
      if (id) {
        independentID = id
      } else {
        independentID = `goods-card-${~~(Math.random() * 10 ** 8)}`
      }
      this.setData({ independentID })
    },

    init() {
      const { thresholds, id } = this.properties
      this.genIndependentID(id)
      if (thresholds && thresholds.length) {
        this.createIntersectionObserverHandle()
      }
    },

    clear() {
      this.clearIntersectionObserverHandle()
    },

    createIntersectionObserverHandle() {
      console.log('init', this.intersectionObserverContext, this.data.independentID)

      if (this.intersectionObserverContext || !this.data.independentID) {
        return
      }

      this.intersectionObserverContext = this.createIntersectionObserver({
        thresholds: this.properties.thresholds,
      }).relativeToViewport()

      console.log(this.intersectionObserverContext)

      this.intersectionObserverContext.observe(`#${this.data.independentID}`, (res) => {
        console.log('call')
        this.intersectionObserverCallback(res)
      })
    },

    intersectionObserverCallback(_res) {
      console.log('rr', this.data.independentID, _res)
      this.triggerEvent('ob', {
        goods: this.data.goods,
        context: this.intersectionObserverContext,
      })
    },

    clearIntersectionObserverHandle() {
      if (this.intersectionObserverContext) {
        try {
          this.intersectionObserverContext.disconnect()
        } catch (e) {}
        this.intersectionObserverContext = null as any
      }
    },
  },
})