index.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. import baseComponent from '../helpers/baseComponent'
  2. import classNames from '../helpers/libs/classNames'
  3. import styleToCssString from '../helpers/libs/styleToCssString'
  4. import eventsMixin from '../helpers/mixins/eventsMixin'
  5. import { useNativeRoute } from '../helpers/hooks/useNativeRoute'
  6. import { useRect } from '../helpers/hooks/useDOM'
  7. const defaultEvents = {
  8. onClick() {},
  9. onError() {},
  10. }
  11. baseComponent({
  12. behaviors: [eventsMixin({ defaultEvents })],
  13. relations: {
  14. '../cell-group/index': {
  15. type: 'ancestor',
  16. },
  17. '../picker/index': {
  18. type: 'parent',
  19. },
  20. '../date-picker/index': {
  21. type: 'parent',
  22. },
  23. '../popup-select/index': {
  24. type: 'parent',
  25. },
  26. },
  27. properties: {
  28. prefixCls: {
  29. type: String,
  30. value: 'wux-cell',
  31. },
  32. disabled: {
  33. type: Boolean,
  34. value: false,
  35. },
  36. hoverClass: {
  37. type: String,
  38. value: 'default',
  39. },
  40. hoverStopPropagation: {
  41. type: Boolean,
  42. value: false,
  43. },
  44. hoverStartTime: {
  45. type: Number,
  46. value: 20,
  47. },
  48. hoverStayTime: {
  49. type: Number,
  50. value: 70,
  51. },
  52. lang: {
  53. type: String,
  54. value: 'en',
  55. },
  56. sessionFrom: {
  57. type: String,
  58. value: '',
  59. },
  60. sendMessageTitle: {
  61. type: String,
  62. value: '',
  63. },
  64. sendMessagePath: {
  65. type: String,
  66. value: '',
  67. },
  68. sendMessageImg: {
  69. type: String,
  70. value: '',
  71. },
  72. showMessageCard: {
  73. type: Boolean,
  74. value: false,
  75. },
  76. appParameter: {
  77. type: String,
  78. value: '',
  79. },
  80. thumb: {
  81. type: String,
  82. value: '',
  83. },
  84. title: {
  85. type: String,
  86. value: '',
  87. },
  88. label: {
  89. type: String,
  90. value: '',
  91. },
  92. extra: {
  93. type: String,
  94. value: '',
  95. },
  96. hasLine: {
  97. type: Boolean,
  98. value: true,
  99. },
  100. isLink: {
  101. type: Boolean,
  102. value: false,
  103. },
  104. openType: {
  105. type: String,
  106. value: 'navigateTo',
  107. },
  108. url: {
  109. type: String,
  110. value: '',
  111. },
  112. delta: {
  113. type: Number,
  114. value: 1,
  115. },
  116. wrapStyle: {
  117. type: [String, Object],
  118. value: '',
  119. observer(newVal) {
  120. this.setData({
  121. extStyle: styleToCssString(newVal),
  122. })
  123. },
  124. },
  125. align: {
  126. type: String,
  127. value: 'center',
  128. },
  129. },
  130. data: {
  131. isLast: false,
  132. extStyle: '',
  133. },
  134. computed: {
  135. classes: ['prefixCls, hoverClass, isLast, hasLine, isLink, disabled, align', function(prefixCls, hoverClass, isLast, hasLine, isLink, disabled, align) {
  136. const wrap = classNames(prefixCls, {
  137. [`${prefixCls}--last`]: isLast,
  138. [`${prefixCls}--has-line`]: hasLine,
  139. [`${prefixCls}--access`]: isLink,
  140. [`${prefixCls}--disabled`]: disabled,
  141. [`${prefixCls}--align-${align}`]: align,
  142. })
  143. const hd = `${prefixCls}__hd`
  144. const thumb = `${prefixCls}__thumb`
  145. const bd = `${prefixCls}__bd`
  146. const text = `${prefixCls}__text`
  147. const desc = `${prefixCls}__desc`
  148. const ft = `${prefixCls}__ft`
  149. const arrow = `${prefixCls}__arrow`
  150. const hover = hoverClass && hoverClass !== 'default' ? hoverClass : `${prefixCls}--hover`
  151. return {
  152. wrap,
  153. hd,
  154. thumb,
  155. bd,
  156. text,
  157. desc,
  158. ft,
  159. arrow,
  160. hover,
  161. }
  162. }],
  163. },
  164. methods: {
  165. onTap() {
  166. const { disabled, url, isLink, openType, delta } = this.data
  167. if (!disabled) {
  168. this.triggerEvent('click')
  169. if (isLink && url) {
  170. useNativeRoute({
  171. url,
  172. openType,
  173. delta,
  174. }, this)
  175. }
  176. }
  177. },
  178. bindgetuserinfo(e) {
  179. this.triggerEvent('getuserinfo', e.detail)
  180. },
  181. bindcontact(e) {
  182. this.triggerEvent('contact', e.detail)
  183. },
  184. bindgetphonenumber(e) {
  185. this.triggerEvent('getphonenumber', e.detail)
  186. },
  187. bindopensetting(e) {
  188. this.triggerEvent('opensetting', e.detail)
  189. },
  190. bindlaunchapp(e) {
  191. this.triggerEvent('launchapp', e.detail)
  192. },
  193. bindchooseavatar(e) {
  194. this.triggerEvent('chooseavatar', e.detail)
  195. },
  196. onError(e) {
  197. this.triggerEvent('error', e.detail)
  198. },
  199. updateIsLastElement(isLast) {
  200. if(isLast === this.data.isLast) return;
  201. this.setData({ isLast })
  202. },
  203. getBoundingClientRect(callback) {
  204. useRect(`.${this.data.prefixCls}`, this)
  205. .then((rect) => {
  206. if (!rect) return
  207. callback.call(this, rect.height, rect)
  208. })
  209. },
  210. },
  211. })