feat: 载体、土地详情入驻要求

src/composable/useJoinRequired.ts

 import type { Infos } from '@/components/detail/DetailInfo.vue';
-import type { DevelopZoneDetailResp } from '@/types/api/developZoneDetail';
-import type { IndustrialParkDetailResp } from '@/types/api/industrialParkDetail';
-import { computed, type Ref } from 'vue';
+import { computed, type ComputedRef } from 'vue';
 
-type Detail = (IndustrialParkDetailResp | DevelopZoneDetailResp) & {
+export interface JoinRequiredParams {
+  [index: string]: any;
   // 开发区产业园名称不一样
+  /** 禁限目录 */
   prohibitedDirectory?: string;
+  /** 禁限目录 */
   prohibitDirectory?: string;
-};
+  /** 环评要求 */
+  environmentalEquirements?: string;
+  /** 总投资额 */
+  investmentAmountTotal: number;
+  /** 亩均投资强度 */
+  investmentStrength: string;
+  /** 亩均税收 */
+  taxationStrength: string;
+  /** 能评要求 */
+  valueAddedEnergy: string;
+  /** 亩均年产值 */
+  averageOutputValue: string;
+  /** 建设周期 */
+  buildingPeriod: number;
+}
 
 /**
- * 详情页入驻要求, 开发区、产业园
+ * 详情页入驻要求, 开发区、产业园, 土地，载体
+ * @param {boolean} isFilter 是否过滤环评要求和禁限目录（土地、载体）
  */
-export function useJoinRequired<T extends Detail>(detail: Ref<T | null>) {
+export function useJoinRequired<T extends JoinRequiredParams>(
+  detail: ComputedRef<T | null>,
+  isFilter = false,
+) {
   /** 入驻要求 */
   const joinRequired = computed(() => {
     if (detail.value) {
@@ -64,20 +83,24 @@ export function useJoinRequired<T extends Detail>(detail: Ref<T | null>) {
             unit: 'tce/万元',
           },
         ],
-        [
-          {
-            name: '环评要求',
-            value: environmentalEquirements,
-            oneline: true,
-          },
-        ],
-        [
-          {
-            name: '禁限目录',
-            value: prohibitedDirectory || prohibitDirectory || '',
-            oneline: true,
-          },
-        ],
+        ...(isFilter
+          ? []
+          : [
+              [
+                {
+                  name: '环评要求',
+                  value: environmentalEquirements || '',
+                  oneline: true,
+                },
+              ],
+              [
+                {
+                  name: '禁限目录',
+                  value: prohibitedDirectory || prohibitDirectory || '',
+                  oneline: true,
+                },
+              ],
+            ]),
       ];
 
       return result;

src/router/router.ts

@@ -31,6 +31,8 @@ const IndustrialParkDetail = () => import('@/views/industrial-park/IndustrialPar
 const DevelopZoneDetail = () => import('@/views/develop/DevelopZoneDetail.vue');
 /** 土地详情 */
 const LandDetail = () => import('@/views/land/LandDetail.vue');
+/** 载体详情 */
+const CarrierDetail = () => import('@/views/carrier/CarrierDetail.vue');
 
 export const enum RouteName {
   home = 'home',
@@ -62,6 +64,8 @@ export const enum RouteName {
   developZoneDetail = 'develop-zone-detail',
   /** 土地详情 */
   landDetail = 'land-detail',
+  /** 载体详情 */
+  carrierDetail = 'carrier-detail',
 }
 
 function gen(name: RouteName) {
@@ -175,6 +179,11 @@ const routes: readonly RouteRecordRaw[] = [
     ...gen(RouteName.landDetail),
     component: LandDetail,
   },
+  {
+    // 开发区详情
+    ...gen(RouteName.carrierDetail),
+    component: CarrierDetail,
+  },
   {
     path: '/:pathMatch(.*)*',
     redirect: '/',

src/types/api.ts

@@ -15,4 +15,6 @@ export enum RequestUrl {
   landList = '/lyy/api/land/v1.0/page',
   /** 土地详情 */
   landDetail = '/lyy/api/land/v1.0/detail',
+  /** 载体详情 */
+  carrierDetail = '/lyy/api/carrier/v1.0/detail/',
 }

src/types/api/carrierDetail.ts

+/**
+ * 载体详情
+ */
+export interface CarrierDetailResp {
+  /** 建筑面积 */
+  area: number;
+  /** 产业园信息 / 入住要求 */
+  carrierParkVo: {
+    /** 详细地址 */
+    address: string;
+    /** 亩均产值（单位：万/亩） */
+    averageOutputValue: string;
+    /** 建设周期（月） */
+    buildingPeriod: number;
+    /** 城市code */
+    cityCode: string;
+    /** 城市 */
+    cityName: string;
+    /** 联系人 */
+    contactPerson: string;
+    /** 占地面积（单位：亩） */
+    coverArea: number;
+    /** 主键id */
+    id: number;
+    /** 图片 */
+    imgUrl: string;
+    /** 总投资额（亿元） */
+    investmentAmountTotal: number;
+    /** 招商方向 */
+    investmentDetails: string[];
+    /** 投资强度（单位：万/亩） */
+    investmentStrength: string;
+    /** 纬度（坐标系gcj02） */
+    latitude: number;
+    /** 园区级别名称 */
+    levelName: string;
+    /** 经度（坐标系gcj02） */
+    longitude: number;
+    /** 载体名称 */
+    name: string;
+    /** 省份code */
+    provinceCode: string;
+    /** 省份 */
+    provinceName: string;
+    /** 区/县code */
+    regionCode: string;
+    /** 区/县 */
+    regionName: string;
+    /** 税收强度（单位：万/亩） */
+    taxationStrength: string;
+    /** 能评要求（单位：tce/万元） */
+    valueAddedEnergy: string;
+  };
+  /** 柱距（m） */
+  distance: number;
+  /** 电梯类型   */
+  elevatorType: string;
+  /** 消防等级 */
+  fireProtectionLevel: string;
+  /** 耐火等级 */
+  fireResistant: string;
+  /** 层高(m) */
+  floorHigh: number;
+  /** 层数 */
+  floorNumber: number;
+  /** 主键id */
+  id: number;
+  /** 轮播图 */
+  imgUrls: string[];
+  /** 招商信息 */
+  investmentDetails: {
+    /** 招商类型 */
+    code: number;
+    /** 招商类型名称 */
+    codeName: string;
+    /** 招商详情 */
+    details: string;
+  }[];
+  /** 用户解锁额度剩余次数 */
+  limitNum: number;
+  /** 载体名称 */
+  name: string;
+  /** 单层面积（㎡） */
+  singleArea: number;
+  /** 建筑结构 */
+  structure: string;
+  /** 类型 */
+  type: string;
+  /** 轮播视频 */
+  videoUrlList: {
+    /** */
+    videoCover: string;
+    /** */
+    videourl: string;
+  }[];
+  /** 承重（单位：kg/㎡） */
+  weight: number;
+}

src/views/carrier/CarrierDetail.vue

+<!-- 载体 -->
+<template>
+  <div v-if="detail" class="main-width mx-auto py-5">
+    <div>{{ detail.name }}</div>
+    <div class="space-y-4">
+      <DetailInfoCell>
+        <DetailMain></DetailMain>
+      </DetailInfoCell>
+      <DetailInfoCell title="载体详情">
+        <!-- <DetailInfo :infos="industryBase"></DetailInfo> -->
+      </DetailInfoCell>
+      <DetailInfoCell title="入驻要求">
+        <DetailInfo :infos="joinRequired"></DetailInfo>
+      </DetailInfoCell>
+      <DetailInfoCell title="配套设施"></DetailInfoCell>
+      <DetailInfoCell title="所属产业园"></DetailInfoCell>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import DetailInfo from '@/components/detail/DetailInfo.vue';
+import DetailInfoCell from '@/components/detail/DetailInfoCell.vue';
+import DetailMain from '@/components/detail/DetailMain.vue';
+import { useDetail } from '@/composable/useDetail.ts';
+import { useJoinRequired } from '@/composable/useJoinRequired.ts';
+import { RequestUrl } from '@/types/api.ts';
+import type { CarrierDetailResp } from '@/types/api/carrierDetail';
+import { computed } from 'vue';
+
+const { detail, initDetail } = useDetail<CarrierDetailResp>(RequestUrl.industrialParkDetal);
+
+const { joinRequired } = useJoinRequired(
+  computed(() => {
+    if (detail.value) {
+      return {
+        ...detail.value,
+        ...detail.value.carrierParkVo,
+      };
+    } else {
+      return null;
+    }
+  }),
+);
+
+initDetail();
+</script>

src/views/develop/DevelopZoneDetail.vue

@@ -51,7 +51,7 @@ import type { Enterprise, Policy } from '@/types/common';
 import { useJoinRequired } from '@/composable/useJoinRequired.ts';
 
 const { detail, initDetail } = useDetail<DevelopZoneDetailResp>(RequestUrl.developZoneDetail);
-const { joinRequired } = useJoinRequired<DevelopZoneDetailResp>(detail);
+const { joinRequired } = useJoinRequired<DevelopZoneDetailResp>(computed(() => detail.value));
 
 /** 重点企业 */
 const [importantEnterpriseIndex, importantEnterpriseTabs, importantEnterprise] =

src/views/industrial-park/IndustrialParkDetail.vue

@@ -77,12 +77,9 @@ import type { Policy } from '@/types/common';
 import { computed } from 'vue';
 import DetailInfoTab from '@/components/detail/DetailInfoTab.vue';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const { detail, detailId, initDetail } = useDetail<IndustrialParkDetailResp>(
-  RequestUrl.industrialParkDetal,
-);
+const { detail, initDetail } = useDetail<IndustrialParkDetailResp>(RequestUrl.industrialParkDetal);
 
-const { joinRequired } = useJoinRequired<IndustrialParkDetailResp>(detail);
+const { joinRequired } = useJoinRequired<IndustrialParkDetailResp>(computed(() => detail.value));
 /** 产业政策 */
 const [industryPolicyIndex, industryPolicyTabs, industryPolicy] = useInfoTab<Policy>(
   ({ name, content }) => {

src/views/land/LandDetail.vue

 <!-- 土地详情 -->
 <template>
-  <div v-if="detail">
+  <div v-if="detail" class="main-width mx-auto py-5">
     <div>{{ detail.name }}</div>
     <div class="space-y-4">
       <DetailInfoCell>
         <DetailMain></DetailMain>
       </DetailInfoCell>
-      <DetailInfoCell title="土地现状"></DetailInfoCell>
+      <DetailInfoCell title="土地现状">
+        <div class="font-yahei text-xs leading-5 text-[#1A1A1A]">
+          {{ detail.landStatus }}
+        </div>
+      </DetailInfoCell>
       <DetailInfoCell title="地块信息"></DetailInfoCell>
-      <DetailInfoCell title="入驻要求"></DetailInfoCell>
-      <DetailInfoCell title="周边配套"></DetailInfoCell>
+      <DetailInfoCell title="入驻要求">
+        <DetailInfo :infos="joinRequired"></DetailInfo>
+      </DetailInfoCell>
       <DetailInfoCell title="周边配套"></DetailInfoCell>
       <DetailInfoCell title="所属开发区"></DetailInfoCell>
     </div>
@@ -18,13 +23,28 @@
 
 <script lang="ts" setup>
 import DetailInfoCell from '@/components/detail/DetailInfoCell.vue';
+import DetailInfo from '@/components/detail/DetailInfo.vue';
 import DetailMain from '@/components/detail/DetailMain.vue';
 import { useDetail } from '@/composable/useDetail.ts';
+import { useJoinRequired } from '@/composable/useJoinRequired.ts';
 import { RequestUrl } from '@/types/api.ts';
 import type { LandDetailResp } from '@/types/api/landDetail';
+import { computed } from 'vue';
+
+const { detail, initDetail } = useDetail<LandDetailResp>(RequestUrl.landDetail);
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const { detail, detailId, initDetail } = useDetail<LandDetailResp>(RequestUrl.landDetail);
+const { joinRequired } = useJoinRequired(
+  computed(() => {
+    if (detail.value) {
+      return {
+        ...detail.value,
+        ...detail.value.development,
+      } as any;
+    } else {
+      return null;
+    }
+  }),
+);
 
 initDetail();
 </script>