crm-mobile/components/base/relevance-section.vue

<template>
  <view class="relevance">
    <view v-if="!isAdd" class="relevance-title">
      关联业务
    </view>
    <template v-for="key in optionsKeys">
      <view
        v-if="relevanceData[key] && relevanceData[key].length > 0"
        :key="key"
        class="relevance-content">
        <view
          v-for="(item, index) in relevanceData[key]"
          :key="index"
          class="relevance-box"
          @click.stop="handlerTo(key, item)">
          <image
            :src="options[key].icon"
            alt=""
            class="type-icon" />
          <text class="text">
            {{ options[key].label }} - {{ item[options[key].key] || item.name || '' }}
          </text>
          <text
            v-if="isAdd"
            class="wk wk-close delete-icon"
            @click.stop="$emit('delete', options[key].type, index)" />
        </view>
      </view>
    </template>
  </view>
</template>

<script>
  export default {
    name: 'RelevanceSection',
    props: {
      relevanceData: {
        type: Object,
        default: () => {}
      },
      isAdd: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        options: {
          customerList: {
            label: '客户',
            type: 'customer',
            key: 'customerName',
            icon: this.$static('images/relevance/customer.png')
          },
          contactsList: {
            label: '联系人',
            type: 'contacts',
            key: 'contactsName',
            icon: this.$static('images/relevance/contacts.png')
          },
          businessList: {
            label: '商机',
            type: 'business',
            key: 'businessName',
            icon: this.$static('images/relevance/business.png')
          },
          contractList: {
            label: '合同',
            type: 'contract',
            key: 'name',
            icon: this.$static('images/relevance/customer.png')
          },
        }
      }
    },
    computed: {
      optionsKeys() {
        return Object.keys(this.options)
      }
    },
    methods: {
      handlerTo(key, item) {
        const map = {
          customerList: {url: '/pages_crm/customer/detail', key: 'customerId'},
          contactsList: {url: '/pages_crm/contacts/detail', key: 'contactsId'},
          businessList: {url: '/pages_crm/business/detail', key: 'businessId'},
          contractList: {url: '/pages_crm/contract/detail', key: 'contractId'},
        }
        let obj = map[key]
        this.$Router.navigateTo({
          url: obj.url,
          query: {
            id: item[obj.key] || item.id
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .relevance {
    margin: 30rpx 0;
    .relevance-title {
      font-size: 26rpx;
      color: $dark;
      margin-bottom: 10rpx;
    }
		
		.relevance-content {
			margin-bottom: 30rpx;
			.relevance-box {
				width: 100%;
				background-color: #F5F5F5;
				border-radius: 5rpx;
				display: flex;
				padding: 10rpx 20rpx;
				margin-bottom: 15rpx;
				@include left;
				.type-icon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 15rpx;
				}
				.text {
					flex: 1;
					font-size: $wk-font-sm;
					color: $theme-color;
					@include ellipsis;
				}
				.delete-icon {
					font-size: $wk-font-base;
					font-weight: bold;
					color: $light;
				}
			}
		}
  }
</style>