manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/pageComponents/contacts/detail.vue

<template>
  <div class="w-full h-full">
    <van-tabs v-model:active="tabActive">
      <van-tab title="联系人信息" name="联系人信息">
        <ContactsInfo :info="info" />
      </van-tab>
      <van-tab title="相关任务" name="相关任务">
        <RelatedTasks :infoList="relatedTasksList" />
      </van-tab>
      <van-tab title="相关商机" name="相关商机">
        <RelatedBusinessOpportunities :infoList="relatedBusinessOpportunitiesList"  />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, onActivated, watch } from 'vue';
import { useLifecycle } from '@hooks/useCommon.js';
import { GET_CONTACT_DETAILS } from "@hooks/useApi"
import requests from "@common/requests";
import ContactsInfo from './contactsInfo.vue';
import RelatedTasks from '../tasks/relatedTasks.vue';
import RelatedBusinessOpportunities from '../business/relatedBusinessOpportunities.vue';

const props = defineProps({
  info: {
    type: Object,
    required: true,
    default: () => ({})
  }
})
const tabActive = ref('联系人信息');
const relatedBusinessOpportunitiesList = ref([]);
const relatedTasksList = ref([]);

watch(() => props.info, (newValue) => {
  tabActive.value = '联系人信息';
  processingData(newValue.id)
})

function getDetailedData(id) {
  requests.post(GET_CONTACT_DETAILS, { id }).then(({ data }) => {
    props.info = data
    relatedBusinessOpportunitiesList.value = data.businessOpportunityList || []
    relatedTasksList.value = data.taskList || []
  })
}

function processingData(id) {
  getDetailedData(id)
}

useLifecycle({
  init: () => {
    tabActive.value = '联系人信息';
    processingData(props.info.id || props.info.customId)
  }
});
</script>

<style lang='scss' scoped>
/* 样式代码 */
</style>