crm-mobile/pages_crm/components/tabAbout/aboutContacts.vue

<template>
  <view class="section about-contacts">
    <view class="section-title">
      <image :src="$static('images/crm_about/contacts.png')" class="icon" />
      <text class="title">
        联系人
      </text>
      <view
        v-if="!config.isSeas"
        class="add-btn"
        @click="handleAdd">
        <text class="wk wk-plus icon-add" />
        <text>新建</text>
      </view>
    </view>

    <view class="section-body">
      <template v-if="list.length > 0">
        <view class="contacts-list">
          <view
            v-for="(item, index) in list"
            :key="index"
            class="contacts-list-item"
            @click="handleTo(item.contactsId)">
            <view class="contacts-list-item-info">
              <text class="name">
                {{ item.name || '&nbsp;' }}
              </text>
              <text class="phone">
                {{ item.mobile || '&nbsp;' }}
              </text>
            </view>
            <image
              :src="$static('images/icon/call.png')"
              class="contacts-list-item-icon"
              alt=""
              @click.stop="ringUp(item.mobile)" />
          </view>
        </view>
      </template>
      <template v-else>
        <view class="no-data">
          暂无数据
        </view>
      </template>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'AboutContacts',
    props: {
      list: {
        type: Array,
        required: true
      },
      config: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {}
    },
    methods: {
      handleAdd() {
        const checkRes = this.$auth('crm.contacts.save')
        if (!checkRes) {
          this.$toast('权限不足！')
          return
        }
        if (!this.config.detail) return

        getApp().globalData.formBridge = {
          default: {
            customerId: [{
              customerId: this.config.detail.customerId,
              customerName: this.config.detail.customerName
            }]
          }
        }
        this.$Router.navigateTo({
          url: '/pages_crm/contacts/create'
        })
      },

      handleTo(id) {
        const checkRes = this.$auth('crm.contacts.read')
        if (!checkRes) {
          this.$toast('权限不足！')
          return
        }
        this.$Router.navigateTo({
          url: '/pages_crm/contacts/detail',
          query: {
            id: id
          }
        })
      },

      /**
       * 拨打电话
       * @param {string} tel
       */
      ringUp(tel) {
        console.log('tel: ')
        uni.makePhoneCall({
          phoneNumber: tel
        })
      }
    }
  }
</script>

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

.contacts-list {
  width: 100%;
  background-color: white;
  padding: 0 32rpx;

  &-item {
    border-bottom: 1rpx solid $border-color;
    @include padding;
    @include left;
    &-info {
      flex: 1;
      flex-direction: column;
      display: flex;
      .name {
        font-size: 30rpx;
        color: $dark;
      }
      .phone {
        font-size: 26rpx;
        color: $gray;
        line-height: 2;
      }
    }
    &-icon {
      width: 52rpx;
      height: 52rpx;
    }
    &:last-child {
      border: 0 none;
    }
  }
}
</style>