123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214 |
- import baseComponent from '../helpers/baseComponent'
- import classNames from '../helpers/libs/classNames'
- import styleToCssString from '../helpers/libs/styleToCssString'
- import eventsMixin from '../helpers/mixins/eventsMixin'
- import { useNativeRoute } from '../helpers/hooks/useNativeRoute'
- import { useRect } from '../helpers/hooks/useDOM'
- const defaultEvents = {
- onClick() {},
- onError() {},
- }
- baseComponent({
- behaviors: [eventsMixin({ defaultEvents })],
- relations: {
- '../cell-group/index': {
- type: 'ancestor',
- },
- '../picker/index': {
- type: 'parent',
- },
- '../date-picker/index': {
- type: 'parent',
- },
- '../popup-select/index': {
- type: 'parent',
- },
- },
- properties: {
- prefixCls: {
- type: String,
- value: 'wux-cell',
- },
- disabled: {
- type: Boolean,
- value: false,
- },
- hoverClass: {
- type: String,
- value: 'default',
- },
- hoverStopPropagation: {
- type: Boolean,
- value: false,
- },
- hoverStartTime: {
- type: Number,
- value: 20,
- },
- hoverStayTime: {
- type: Number,
- value: 70,
- },
- lang: {
- type: String,
- value: 'en',
- },
- sessionFrom: {
- type: String,
- value: '',
- },
- sendMessageTitle: {
- type: String,
- value: '',
- },
- sendMessagePath: {
- type: String,
- value: '',
- },
- sendMessageImg: {
- type: String,
- value: '',
- },
- showMessageCard: {
- type: Boolean,
- value: false,
- },
- appParameter: {
- type: String,
- value: '',
- },
- thumb: {
- type: String,
- value: '',
- },
- title: {
- type: String,
- value: '',
- },
- label: {
- type: String,
- value: '',
- },
- extra: {
- type: String,
- value: '',
- },
- hasLine: {
- type: Boolean,
- value: true,
- },
- isLink: {
- type: Boolean,
- value: false,
- },
- openType: {
- type: String,
- value: 'navigateTo',
- },
- url: {
- type: String,
- value: '',
- },
- delta: {
- type: Number,
- value: 1,
- },
- wrapStyle: {
- type: [String, Object],
- value: '',
- observer(newVal) {
- this.setData({
- extStyle: styleToCssString(newVal),
- })
- },
- },
- align: {
- type: String,
- value: 'center',
- },
- },
- data: {
- isLast: false,
- extStyle: '',
- },
- computed: {
- classes: ['prefixCls, hoverClass, isLast, hasLine, isLink, disabled, align', function(prefixCls, hoverClass, isLast, hasLine, isLink, disabled, align) {
- const wrap = classNames(prefixCls, {
- [`${prefixCls}--last`]: isLast,
- [`${prefixCls}--has-line`]: hasLine,
- [`${prefixCls}--access`]: isLink,
- [`${prefixCls}--disabled`]: disabled,
- [`${prefixCls}--align-${align}`]: align,
- })
- const hd = `${prefixCls}__hd`
- const thumb = `${prefixCls}__thumb`
- const bd = `${prefixCls}__bd`
- const text = `${prefixCls}__text`
- const desc = `${prefixCls}__desc`
- const ft = `${prefixCls}__ft`
- const arrow = `${prefixCls}__arrow`
- const hover = hoverClass && hoverClass !== 'default' ? hoverClass : `${prefixCls}--hover`
- return {
- wrap,
- hd,
- thumb,
- bd,
- text,
- desc,
- ft,
- arrow,
- hover,
- }
- }],
- },
- methods: {
- onTap() {
- const { disabled, url, isLink, openType, delta } = this.data
- if (!disabled) {
- this.triggerEvent('click')
- if (isLink && url) {
- useNativeRoute({
- url,
- openType,
- delta,
- }, this)
- }
- }
- },
- bindgetuserinfo(e) {
- this.triggerEvent('getuserinfo', e.detail)
- },
- bindcontact(e) {
- this.triggerEvent('contact', e.detail)
- },
- bindgetphonenumber(e) {
- this.triggerEvent('getphonenumber', e.detail)
- },
- bindopensetting(e) {
- this.triggerEvent('opensetting', e.detail)
- },
- bindlaunchapp(e) {
- this.triggerEvent('launchapp', e.detail)
- },
- bindchooseavatar(e) {
- this.triggerEvent('chooseavatar', e.detail)
- },
- onError(e) {
- this.triggerEvent('error', e.detail)
- },
- updateIsLastElement(isLast) {
- if(isLast === this.data.isLast) return;
- this.setData({ isLast })
- },
- getBoundingClientRect(callback) {
- useRect(`.${this.data.prefixCls}`, this)
- .then((rect) => {
- if (!rect) return
- callback.call(this, rect.height, rect)
- })
- },
- },
- })
|