goods-card.ts 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. Component<
  2. {
  3. goods: WxCateAlbumItemDto
  4. independentID: string
  5. isValidityLinePrice: boolean
  6. },
  7. {
  8. id: ComponentPropertyStringType
  9. data: ComponentPropertyObjectType
  10. currency: ComponentPropertyStringType
  11. thresholds: ComponentPropertyArrayType
  12. lite: ComponentPropertyBooleanType
  13. },
  14. {
  15. init(): void
  16. clear(): void
  17. clickHandle(): void
  18. clickThumbHandle(): void
  19. addCartHandle(e: WechatMiniprogram.CustomEvent): void
  20. genIndependentID(id: string): void
  21. createIntersectionObserverHandle(): void
  22. clearIntersectionObserverHandle(): void
  23. intersectionObserverCallback(
  24. e: WechatMiniprogram.IntersectionObserverObserveCallbackResult,
  25. ): void
  26. },
  27. {
  28. intersectionObserverContext: WechatMiniprogram.IntersectionObserver
  29. }
  30. >({
  31. options: {
  32. addGlobalClass: true,
  33. },
  34. properties: {
  35. id: {
  36. type: String,
  37. value: '',
  38. observer(id: string) {
  39. this.genIndependentID(id)
  40. if (this.properties.thresholds?.length) {
  41. this.createIntersectionObserverHandle()
  42. }
  43. },
  44. },
  45. data: {
  46. type: Object,
  47. observer(data: Record<string, any>) {
  48. if (!data) {
  49. return
  50. }
  51. let isValidityLinePrice = true
  52. if (data.originPrice && data.price && data.originPrice < data.price) {
  53. isValidityLinePrice = false
  54. }
  55. this.setData({ goods: data as WxCateAlbumItemDto, isValidityLinePrice })
  56. },
  57. },
  58. currency: {
  59. type: String,
  60. value: '¥',
  61. },
  62. lite: {
  63. type: Boolean,
  64. value: false,
  65. },
  66. thresholds: {
  67. type: Array,
  68. value: [],
  69. observer(thresholds) {
  70. if (thresholds && thresholds.length) {
  71. this.createIntersectionObserverHandle()
  72. } else {
  73. this.clearIntersectionObserverHandle()
  74. }
  75. },
  76. },
  77. },
  78. data: {
  79. independentID: '',
  80. goods: { id: -1 } as any,
  81. isValidityLinePrice: false,
  82. },
  83. lifetimes: {
  84. ready() {
  85. this.init()
  86. },
  87. detached() {
  88. this.clear()
  89. },
  90. },
  91. methods: {
  92. clickHandle() {
  93. this.triggerEvent('click', { goods: this.data.goods })
  94. },
  95. clickThumbHandle() {
  96. this.triggerEvent('thumb', { goods: this.data.goods })
  97. },
  98. addCartHandle(e) {
  99. const { id } = e.currentTarget
  100. const { id: cardID } = e.currentTarget.dataset
  101. this.triggerEvent('add-cart', {
  102. ...e.detail,
  103. id,
  104. cardID,
  105. goods: this.data.goods,
  106. })
  107. },
  108. genIndependentID(id) {
  109. let independentID
  110. if (id) {
  111. independentID = id
  112. } else {
  113. independentID = `goods-card-${~~(Math.random() * 10 ** 8)}`
  114. }
  115. this.setData({ independentID })
  116. },
  117. init() {
  118. const { thresholds, id } = this.properties
  119. this.genIndependentID(id)
  120. if (thresholds && thresholds.length) {
  121. this.createIntersectionObserverHandle()
  122. }
  123. },
  124. clear() {
  125. this.clearIntersectionObserverHandle()
  126. },
  127. createIntersectionObserverHandle() {
  128. console.log('init', this.intersectionObserverContext, this.data.independentID)
  129. if (this.intersectionObserverContext || !this.data.independentID) {
  130. return
  131. }
  132. this.intersectionObserverContext = this.createIntersectionObserver({
  133. thresholds: this.properties.thresholds,
  134. }).relativeToViewport()
  135. console.log(this.intersectionObserverContext)
  136. this.intersectionObserverContext.observe(`#${this.data.independentID}`, (res) => {
  137. console.log('call')
  138. this.intersectionObserverCallback(res)
  139. })
  140. },
  141. intersectionObserverCallback(_res) {
  142. console.log('rr', this.data.independentID, _res)
  143. this.triggerEvent('ob', {
  144. goods: this.data.goods,
  145. context: this.intersectionObserverContext,
  146. })
  147. },
  148. clearIntersectionObserverHandle() {
  149. if (this.intersectionObserverContext) {
  150. try {
  151. this.intersectionObserverContext.disconnect()
  152. } catch (e) {}
  153. this.intersectionObserverContext = null as any
  154. }
  155. },
  156. },
  157. })