crm-mobile/components/base/log-item.vue

<template>
  <view class="log-item">
    <!-- eslint-disable-next-line -->
		<view class="address" v-if="logData.content.address">{{ logData.content.address }}</view>
    <view class="content">
      {{ logData.content.content || '' }}
    </view>

    <wk-image-content
      v-if="logData.img && logData.img.length > 0"
      :preview="preview"
      :list="logData.img" />

    <wk-file-content
      v-if="logData.file && logData.file.length > 0"
      :list="logData.file" />

    <relevance-section
      v-if="showRelevance"
      class="relevance-section"
      :relevance-data="relevanceData" />

    <view
      v-if="logData.nextTime"
      class="desc-info">
      <text class="wk wk-time" />下次跟进时间：{{ logData.nextTime }}
    </view>
  </view>
</template>

<script>
  import RelevanceSection from './relevance-section'

  export default {
    name: 'LogItem',
    components: {
      RelevanceSection
    },
    props: {
      logData: {
        type: Object,
        required: true
      },
      preview: {
        type: Boolean,
        default: true
      }
    },
    computed: {
      relevanceData() {
        return {
          customerList: this.logData.customerList || [],
          contactsList: this.logData.contactsList || [],
          businessList: this.logData.businessList || [],
          contractList: this.logData.contractList || [],
        }
      },
      showRelevance() {
        const arr = ['contactsList', 'businessList', 'customerList', 'contractList']
        for (let i = 0; i < arr.length; i++) {
          let key = arr[i]
          if (this.logData.hasOwnProperty(key) && !this.$isEmpty(this.logData[key])) return true
        }
        return false
      }
    },
  }
</script>

<style scoped lang="scss">
  .log-item {
		.address {
			white-space: pre-wrap;
			word-wrap: break-word;
			color: $theme-color;
		}
    .content {
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  }
  .desc-info {
    font-size: 24rpx;
    color: $gray;
    margin-top: 10rpx;
    .wk {
      color: inherit;
      font-size: inherit;
      margin-right: 10rpx;
    }
  }
  .relevance-section {
    margin-bottom: 20rpx;
    ::v-deep .relevance-box-icon {
      height: 60rpx;
    }
    ::v-deep .content-item {
      height: 60rpx;
    }
  }
</style>