crm-mobile/pages_crm/contacts/components/contactsItem.vue

<template>
  <view class="contacts-item" @click="handleDetail">
    <view class="cell">
      <view class="left">
        {{ iconText }}
      </view>

      <view class="center">
        <view class="name">
          {{ itemData.name || ' ' }}
        </view>
        <view class="text-info">
          最后跟进时间：{{ itemData.lastTime | formatTime }}
        </view>
      </view>

      <view class="right" @click.stop="ringUp(itemData.mobile)">
        <image
          :src="$static('images/icon/call.png')"
          class="call" />
      </view>
    </view>
  </view>
</template>

<script>
  import moment from 'moment'

  export default {
    name: 'ContactsItem',
    filters: {
      formatTime(val) {
        if (!val) return '--'
        return moment(val).format('YYYY-MM-DD')
      }
    },
    props: {
      itemData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        auth: 'crm.contacts.read'
      }
    },
    computed: {
      iconText() {
        const reg = /[\u4e00-\u9fa5]+/
        let str = this.itemData.name.slice(0, 1) || ''
        if (reg.test(str)) {
          return this.itemData.name.slice(0, 1)
        }
        return this.itemData.name.slice(0, 2)
      }
    },
    methods: {
      /**
       * 联系人详情跳转
       */
      handleDetail() {
        if (!this.$auth(this.auth)) {
          this.$toast('权限不足')
          return
        }
        this.$Router.navigateTo({
          url: '/pages_crm/contacts/detail',
          query: {
            id: this.itemData.contactsId
          }
        })
      },

      /**
       * 拨打电话
       * @param {string} tel
       */
      ringUp(tel) {
        console.log('tel: ', tel)
        if (!tel) {
          this.$toast('暂无电话')
          return
        }
        uni.makePhoneCall({
          phoneNumber: tel
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../style/listItem";

	.contacts-item {
		border-bottom: 1rpx solid $border-color;
		background-color: white;
		padding: 20rpx 32rpx;

		.cell {
			.left {
				width: 80rpx;
				height: 80rpx;
				font-size: 36rpx;
				color: white;
				text-align: center;
				line-height: 80rpx;
				border-radius: 50%;
				background-color: $theme-color;
				margin-right: 25rpx;
			}

			.center {
				flex: 1;
				text-align: left;
				.name {
					font-size: 32rpx;
					color: #212121;
					@include ellipsis;
				}
				.text-info {
					font-size: 26rpx;
					color: $gray;
				}
			}

			.right {
				padding: 15rpx 0 15rpx 20rpx;
				@include center;
			}
		}
	}
</style>