h5-colexiu/src/views/cart/components/address/index.tsx

import { Cell, Icon } from 'vant'
import {
  defineComponent,
  computed,
  PropType
} from 'vue'
import styles from './index.module.less'
import iconAddress from '@views/shop-mall/images/icon-address.png'
import {  addressType } from '../../cart'
import {
  postMessage
} from '@/helpers/native-message'

export default defineComponent({
  name: 'cart-address',
  props: {
    item: {
      type: Object as PropType<addressType>,
      default: {}
    },
    isLink: {
      type: Boolean,
      default: true
    },
    setAddress:{
      type: Function,
      default: (n: any) => {}
    }
  },
  setup(props) {
    const addressInfo = computed(() => {
      return [
        props.item.province,
        props.item.city,
        props.item.region,
        props.item.detailAddress
      ].join('')
    })

    const selectAddress = () => {
      if (!props.isLink) return
      postMessage({
        api: 'setAddress',
        content: {}
      })
    }


    return () => (
      <>
        <Cell
          class={styles.cell}
          is-link={props.isLink}
          onClick={() => selectAddress()}
          v-slots={{
            icon: () => <Icon name={iconAddress} size={19} />,
            title: () => (
              <div>
                <span class={styles.userName}>{props.item.name}</span>
                <span class={styles.phone}>
                  {props.item && props.item.phoneNumber && props.item.phoneNumber.replace(/^(\d{3})\d{4}(\d+)/,"$1****$2") || '去填写收货地址'}
                </span>
              </div>
            ),
            label: () => (
              <span class={styles.addressInfo}>{addressInfo.value}</span>
            )
          }}
        ></Cell>
      </>
    )
  }
})