count-pass-app/subpages/customer/card.vue

<template>
  <view class="customer-card">
    <view class="card-title"  @click="toEdit(data.id)">
      <view class="customer">
        {{data.name}}
        <view class="tag">{{data.types[0] == '102'?'销售':(data.types[0] == '104'?'采购':'其他')}}</view>
      </view>
      <u-icon name="edit-pen" color="#666" size="20"/>
    </view>
    <view class="link-phone">
      <view class="phone">联系人:{{data.companyContact}}</view>
      <view class="phone">手机:{{data.companyContactPhone}}</view>
    </view>
    <view class="link-phone">
      <view class="phone">地址:{{data.address}}</view>
    </view>
  </view>
</template>

<script>
export default {
  props:{
    data:{
      type:Object,
      default:{},
    },
    path:{
      type:String,
      default:'customer'
    }
  },
  methods:{
    toEdit(id){
      uni.navigateTo({ url: `/subpages/${this.path}/add-edit?id=${id}`})
    }
  }
}
</script>

<style lang="less" scoped>
  .customer-card{
    padding: 32rpx;
    // margin-bottom: 32rpx;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    .card-title{
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 44rpx;
      margin-bottom: 10rpx;
      .customer{
        display: flex;
        font-weight: 600;
        .tag{
          margin-left: 20rpx;
          padding:0 10rpx;
          line-height: 40rpx;
          font-size: 24rpx;
          color: #fff;
          background-color: #4680F9;
          border-radius: 6rpx;
          font-weight: normal;
        }
      }
    }
    .link-phone{
      display: flex;
      line-height: 72rpx;
      font-size: 24rpx;
      color: #aaa;
      .phone{
        flex: 1;
      }
    }
  }
</style>