crm-mobile/pages_oa/concat/concatItem.vue

<template>
  <view class="concat-item" @click="handleToUser">
    <view class="concat-item-body">
      <wk-avatar :name="concatData.realname" :avatar="concatData.img" class="avatar" />
      <view class="box">
        <view class="name">
          {{ concatData.realname }}
        </view>
        <view class="position">
          {{ concatData.post || '--' }}
        </view>
      </view>
      <button class="call" @click.stop="makePhoneCall(concatData.mobile)">
        <image
          :src="$static('images/icon/call_voice.png')"
          alt=""
          class="phone-icon" />
      </button>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'ConcatItem',
    props: {
      concatData: {
        type: Object,
        default: () => {}
      }
    },
    methods: {
      makePhoneCall(mobile) {
        if (this.$isEmpty(mobile)) {
          this.$toast('暂无电话！')
          return
        }
        uni.makePhoneCall({
          phoneNumber: mobile
        })
      },
      handleToUser() {
        this.$Router.navigateTo({
          url: '/pages_personal/user',
          query: {
            id: this.concatData.userId
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
.concat-item {
  background-color: white;
  padding: 0 50rpx;

  .concat-item-body {
    width: 100%;
    padding: 23rpx 0;
    border-bottom: 1rpx solid $border-color;
    @include left;
    .avatar {
      width: 70rpx;
      height: 70rpx;
      margin-right: 26rpx;
    }
    .box {
      flex: 1;
      .name {
        font-size: 32rpx;
        line-height: 42rpx;
        color: $dark;
      }
      .position {
        font-size: 26rpx;
        line-height: 32rpx;
        color: $light;
        margin-top: 12rpx;
      }
    }
    .call {
      padding: 10rpx 20rpx;
      @include center;
      .phone-icon {
        width: 46rpx;
        height: 46rpx;
      }
    }
  }
}
</style>