storevisit-ui-mobile/src/views/clew/complaintDetail/infoDetail.vue

<template>
  <div class="cardclewContent infoDetail">
    <div class="info">姓名：{{ infoData.name }}</div>
    <div class="info">
      手机号：<a
        style="color: #0057ba; font-weight: bold; text-decoration: underline"
        :href="'tel:' + infoData.phone"
        >{{ infoData.phone }}<van-icon name="phone"
      /></a>
    </div>
    <div class="info">区域：{{ infoData.companyName }}</div>
    <div class="info">省：{{ infoData.provinceName }}</div>
    <div class="info">市：{{ infoData.cityName }}</div>
    <div class="info">区/县：{{ infoData.countryName }}</div>
    <div class="info">
      分类：
      <span v-if="customerClassify.length">{{ filterClassify(infoData.customerClassify) }}</span>
    </div>
    <div class="info">详细地址：{{ infoData.detailAddress }}</div>
    <div class="info">商店授权号：{{ infoData.storeCode }}</div>
    <div class="info">商店地址：{{ infoData.storeAddr }}</div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'infoDetail',
  props: {
    infoData: {
      type: Object,
      default: {},
    },
    source: {
      // assignPage 拥有家装分配权限
      type: String,
    },
    customerClassify: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  methods: {
    filterClassify(customerClassify) {
      if (!customerClassify) return '';
      let item = this.customerClassify.find((val) => val.dictValue == customerClassify);
      return item.dictLabel || '';
    },
  },
};
</script>
<style scoped lang="scss">
.cardclewContentCell {
  margin: 0 10px;
}
.cardclewContent {
  background: #fff;
  box-sizing: border-box;
  padding: 10px 16px;
  margin: 6px 10px 10px;
}
.cardclewContent .info {
  font-size: 14px;
  color: #444;
  line-height: 28px;
}
.cardclewContent .title p {
  padding: 0;
  margin: 0;
}
.cardclewContent .title .textLeft {
  display: inline-block;
  padding-bottom: 10px;
}
</style>