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

<template>
  <view class="costumer-card">
    <view class="left">
      <view class="h-tag" v-if="data.type == '101'">销售</view>
      <view class="h-tag" v-if="data.type == '102'">原材料</view>
      <!-- <view class="h-tag" v-if="data.type == '103'">倒料</view> -->
      <!-- <view class="h-tag" v-if="data.type == '104'">材料</view> -->
      <!-- <view class="name">{{data.companyContact || ''}}</view> -->
    </view>
    <view class="right">
      <view class="company">{{data.name || ''}}</view>
      <!-- <view class="phone">{{data.companyContactPhone || ''}}</view> -->
    </view>
    <view class="icon" @click="toEdit(data.id)">
      <u-icon name="edit-pen-fill" color="#a6a6a6" size="24"/>
    </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>
  .costumer-card{
    padding: 32rpx;
    // margin-bottom: 32rpx;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    display: flex;
    .left{
      width: 180rpx;
      .h-tag{
        background-color: #f7f8fa;
        width: 128rpx;
        color: #3A34D6;
        line-height: 48rpx;
        height: 48rpx;
        font-size: 24rpx;
        border-radius: 48rpx;
        text-align: center;
      }
      .name{
        text-align: center;
        font-size: 28rpx;
        line-height: 28rpx;
        width: 128rpx;
        color: #a6a6a6;
        margin-top:24rpx ;
      }
    }
    .right{
      flex: 1;
      .company{
        line-height: 48rpx;
        color: #000;
      }
      .phone{
        font-size: 28rpx;
        line-height: 28rpx;
        color: #a6a6a6;
        margin-top:24rpx ;
      }
    }
    .icon{
      width: 48rpx;
      height: 48rpx;
      padding: 24rpx;
    }
  }
</style>