feat: 开发区详情，重点企业、产业政策

components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
     CommonHeader: typeof import('./src/components/common/CommonHeader.vue')['default']
     DetailInfo: typeof import('./src/components/detail/DetailInfo.vue')['default']
     DetailInfoCell: typeof import('./src/components/detail/DetailInfoCell.vue')['default']
+    DetailInfoTab: typeof import('./src/components/detail/DetailInfoTab.vue')['default']
     DetailMain: typeof import('./src/components/detail/DetailMain.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']

src/components/detail/DetailInfo.vue

@@ -37,6 +37,6 @@ withDefaults(
 
 const handleValue = (col: Info) => {
   const { value, unit = '' } = col;
-  return haveValue(value) ? value.toString() + unit : '';
+  return haveValue(value) ? value.toString() + unit : '--';
 };
 </script>

src/components/detail/DetailInfoTab.vue

+<template>
+  <div>
+    <div class="flex items-center space-x-[5px]">
+      <div
+        v-for="(tab, index) of tabs"
+        :key="tab.name"
+        class="flex h-8 cursor-pointer items-center justify-center px-5 text-sm leading-4"
+        :class="{ 'text-[#C0322B]': index === modelValue }"
+        @click="handleTabChange(index)"
+      >
+        <div>{{ tab.name }}</div>
+        <div>（{{ tab.count }}）</div>
+      </div>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface InfoTab {
+  name: string;
+  count: number;
+}
+withDefaults(
+  defineProps<{
+    tabs: InfoTab[];
+    modelValue: number;
+  }>(),
+  {
+    tabs: () => [],
+    modelValue: 0,
+  },
+);
+
+const emit = defineEmits(['update:modelValue']);
+
+const handleTabChange = (index: number) => {
+  emit('update:modelValue', index);
+};
+</script>

src/composable/useInfoTab.ts

+import type { Info, Infos } from '@/components/detail/DetailInfo.vue';
+import type { InfoTab } from '@/components/detail/DetailInfoTab.vue';
+import type { ListInfo } from '@/types/common';
+import { computed, ref, type ComputedRef } from 'vue';
+
+/**
+ * 带tab的详情信息块
+ */
+export function useInfoTab<T>(getInfo: (item: T) => Info[], list: ComputedRef<ListInfo<T>[]>) {
+  const index = ref(0);
+  const tabs = computed<InfoTab[]>(() => {
+    const result =
+      list.value.map(({ type, info }) => {
+        return {
+          count: info.length,
+          name: type,
+        };
+      }) || [];
+    return result;
+  });
+  const infos = computed<Infos[]>(() => {
+    const result =
+      list.value.map(({ info }) => {
+        return info.map(getInfo);
+      }) || [];
+    return result;
+  });
+
+  return [index, tabs, infos] as [typeof index, typeof tabs, typeof infos];
+}

src/types/api/developZoneDetail.ts

+import type { Enterprise, ListInfo, Policy } from '../common';
 import type { AuthStatus } from '../enum';
 
 /**
@@ -21,7 +22,7 @@ export interface DevelopZoneDetailResp {
   /** 开发区简介 */
   description: string;
   /** 重点企业详情 */
-  enterpriseList: string[];
+  enterpriseList: ListInfo<Enterprise>[];
   /** 环评要求 */
   environmentalEquirements: string;
   /** 产业基金 */
@@ -137,7 +138,7 @@ export interface DevelopZoneDetailResp {
   /** 规划面积（平方公里） */
   planArea: number;
   /** 产业政策详情 */
-  policyList: string[];
+  policyList: ListInfo<Policy>[];
   /** 主导产业 */
   primaryIndustry: string;
   /** 禁限目录 */

src/types/common.ts

@@ -45,3 +45,29 @@ export interface CommonListParams<T> {
     property?: string;
   }[];
 }
+
+/**
+ * 列表属性信息如重点企业等
+ */
+export interface ListInfo<T> {
+  type: string;
+  info: T[];
+}
+
+/**
+ * 代表企业
+ */
+export interface Enterprise {
+  enterpriseName: string;
+  industryDirection: string;
+  track: string;
+}
+
+/**
+ * 产业政策
+ */
+export interface Policy {
+  content: string;
+  name: string;
+  type: string;
+}

src/views/develop/DevelopZoneDetail.vue

@@ -12,12 +12,20 @@
         </div>
       </DetailInfoCell>
       <DetailInfoCell title="要素成本">
-        <DetailInfo :infos="requireds"></DetailInfo>
+        <DetailInfo :infos="elementCost"></DetailInfo>
+      </DetailInfoCell>
+      <DetailInfoCell title="重点企业">
+        <DetailInfoTab v-model="importantEnterpriseIndex" :tabs="importantEnterpriseTabs">
+          <DetailInfo :infos="importantEnterprise[importantEnterpriseIndex]"></DetailInfo>
+        </DetailInfoTab>
+      </DetailInfoCell>
+      <DetailInfoCell title="产业政策">
+        <DetailInfoTab v-model="industryPolicyIndex" :tabs="industryPolicyTabs">
+          <DetailInfo :infos="industryPolicy[industryPolicyIndex]"></DetailInfo>
+        </DetailInfoTab>
       </DetailInfoCell>
-      <DetailInfoCell title="入驻要求"></DetailInfoCell>
-      <DetailInfoCell title="重点企业"></DetailInfoCell>
-      <DetailInfoCell title="产业政策"></DetailInfoCell>
       <DetailInfoCell title="产业基金"></DetailInfoCell>
+      <DetailInfoCell title="入驻要求"></DetailInfoCell>
       <DetailInfoCell title="配套设施"></DetailInfoCell>
       <DetailInfoCell title="开发区内产业园" to-list-text="更多产业园"></DetailInfoCell>
       <DetailInfoCell title="开发区内土地" to-list-text="更多土地"></DetailInfoCell>
@@ -31,15 +39,51 @@ import DetailInfo, { type Infos } from '@/components/detail/DetailInfo.vue';
 import DetailMain from '@/components/detail/DetailMain.vue';
 import { useDetail } from '@/composable/useDetail.ts';
 import { RequestUrl } from '@/types/api.ts';
-import type { DevelopZoneDetailResp } from '@/types/api/developZoneDetail';
+import type { DevelopZoneDetailResp } from '@/types/api/developZoneDetail.ts';
 import { computed } from 'vue';
+import DetailInfoTab from '@/components/detail/DetailInfoTab.vue';
+import { useInfoTab } from '@/composable/useInfoTab.ts';
+import type { Enterprise, Policy } from '@/types/common';
+
+const { detail, initDetail } = useDetail<DevelopZoneDetailResp>(RequestUrl.developZoneDetail);
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const { detail, detailId, initDetail } = useDetail<DevelopZoneDetailResp>(
-  RequestUrl.developZoneDetail,
+/** 重点企业 */
+const [importantEnterpriseIndex, importantEnterpriseTabs, importantEnterprise] =
+  useInfoTab<Enterprise>(
+    ({ enterpriseName, track }) => {
+      return [
+        {
+          name: '企业名称',
+          value: enterpriseName,
+        },
+        {
+          name: '所属赛道',
+          value: track,
+        },
+      ];
+    },
+    computed(() => detail.value?.enterpriseList || []),
+  );
+
+/** 产业政策 */
+const [industryPolicyIndex, industryPolicyTabs, industryPolicy] = useInfoTab<Policy>(
+  ({ name, content }) => {
+    return [
+      {
+        name: '政策名称',
+        value: name,
+      },
+      {
+        name: '政策内容',
+        value: content,
+      },
+    ];
+  },
+  computed(() => detail.value?.policyList || []),
 );
 
-const requireds = computed(() => {
+/** 要素成本 */
+const elementCost = computed(() => {
   if (detail.value) {
     const {
       steamPrice,