feat: 产业园列表item

.eslintrc.cjs

@@ -49,7 +49,7 @@ module.exports = {
       'error',
       {
         script: {
-          lang: 'ts',
+          lang: ['ts', 'tsx'],
         },
       },
     ],

components.d.ts

@@ -32,7 +32,10 @@ declare module 'vue' {
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
+    IndustrialParkItem: typeof import('./src/components/list/IndustrialParkItem.vue')['default']
+    ItemStatus: typeof import('./src/components/list/ItemStatus.vue')['default']
     ListIndustryCategory: typeof import('./src/components/list/list-industryCategory.vue')['default']
+    ListInfo: typeof import('./src/components/list/ListInfo.vue')['default']
     ListLand: typeof import('./src/components/list/list-land.vue')['default']
     ListPagination: typeof import('./src/components/list/ListPagination.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/App.vue

 <template>
   <div>
     <ElContainer class="min-h-screen">
-      <CommonHeader :menu-list="menuList" :current-path="currentPath"></CommonHeader>
-      <ElMain>
+      <ElHeader>
+        <CommonHeader :menu-list="menuList" :current-path="currentPath"></CommonHeader>
+      </ElHeader>
+      <ElMain class="mx-auto w-[926px]">
         <RouterView />
       </ElMain>
       <ElFooter>Footer</ElFooter>

src/assets/styles/base.scss

 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  // 列表页，招商方向标签
+  .investment-direction {
+    @apply flex h-[22px] items-center justify-center rounded-sm bg-[#2c68ff14] px-3 text-sm text-[#2C68FF];
+  }
+
+  .status-tag {
+    @apply h-[22px] items-center justify-center rounded-sm px-3 text-sm flex;
+  }
+}

src/assets/styles/main.scss

 @import './base';
+
+* {
+  font-family: "PingFang SC", system-ui, sans-serif;;
+}

src/components/list/IndustrialParkItem.vue

+<template>
+  <div v-if="item">
+    <div class="flex min-h-[156px]">
+      <div>
+        <img class="h-[156px] w-[208px] rounded-sm" :src="item.imgUrl" alt="产业园" />
+      </div>
+      <div class="ml-4 flex-1 py-2">
+        <div class="flex items-center">
+          <div class="text-xl font-semibold leading-6 text-[#1a1a1a]">{{ item.name }}</div>
+          <div v-if="currentStatusTag" class="ml-2">
+            <div :class="['status-tag', currentStatusTag.className]">
+              {{ currentStatusTag.name }}
+            </div>
+          </div>
+        </div>
+        <div class="mt-[17px] font-yahei text-xs leading-5 text-[#4d4d4d]">
+          {{ filterAddress(item) }}
+        </div>
+        <div class="mt-4">
+          <!-- <div class="flex min-w-[99px] justify-center">{{ item.levelName }}</div>
+          <div class="flex min-w-[94px] justify-center">{{ item.planArea }}亩</div> -->
+          <ListInfo :infos="infos"></ListInfo>
+        </div>
+        <div class="mt-[17px] flex flex-wrap gap-[13px]">
+          <div v-for="direction in directions" :key="direction" class="investment-direction">
+            {{ direction }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useItemStatus } from '@/composable/useItemStatus.ts';
+import type { IndustrialParkItem } from '@/types/api/industrialParkList';
+import { filterAddress } from '@/utils/filters.ts';
+import { computed } from 'vue';
+import ListInfo from './ListInfo.vue';
+
+const props = withDefaults(
+  defineProps<{
+    item: IndustrialParkItem;
+  }>(),
+  {},
+);
+
+const { currentStatusTag } = useItemStatus(props.item);
+
+/** 最大展示招商方向数量 */
+const MAX_DIRECTION_COUNT = 3;
+
+const infos = computed(() => {
+  const { levelName, planArea, type } = props.item || {};
+  return [levelName, type, planArea ? `${planArea}亩` : ''];
+});
+
+const directions = computed(() => {
+  return props.item.investmentDirection?.slice?.(0, MAX_DIRECTION_COUNT) || [];
+});
+</script>

src/components/list/ListInfo.vue

+<!-- 竖线隔开的信息 -->
+<script lang="tsx">
+import { haveValue } from '@/utils/filters.ts';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'ListInfo',
+  props: {
+    infos: {
+      type: Array,
+      default: () => [] as string[],
+    },
+  },
+  setup(props) {
+    return () => (
+      <div class="flex items-center space-x-5 text-[#4d4d4d]">
+        {props.infos.filter(haveValue).reduce((pre, info) => {
+          return (
+            <>
+              {pre}
+              {pre ? <div class="text-xs leading-[18px]">|</div> : ''}
+              <div class="font-yahei text-xs leading-5">{info}</div>
+            </>
+          );
+        }, '')}
+      </div>
+    );
+  },
+});
+</script>

src/components/list/ListPagination.vue

 <template>
   <div>
     <ElPagination
+      class="justify-center"
       layout="prev, pager, next"
       :current-page="currentPage"
       :page-size="pageSize"

src/composable/useItemStatus.ts

+import type { DevelopZoneItem } from '@/types/api/developZoneList';
+import type { IndustrialParkItem } from '@/types/api/industrialParkList';
+import { computed } from 'vue';
+
+export interface StatusConfig {
+  [index: number]: {
+    className: string;
+  };
+}
+/**
+ * 产业园、开发区状态
+ */
+export function useItemStatus(item: Partial<IndustrialParkItem & DevelopZoneItem>) {
+  const statusConfig: StatusConfig = {
+    3: {
+      className: 'text-[#0bdba8] bg-[#0bdba814]',
+    },
+  };
+  /** 星级园区配置 */
+  const superStarConfig = {
+    className: 'text-[#ffb540] bg-[#ffb54014]',
+  };
+
+  /** 当前状态标签 */
+  const currentStatusTag = computed(() => {
+    return item.status ? { ...statusConfig[item.status], name: item.statusName } : null;
+  });
+
+  /** 星级开发区标签 */
+  const superTag = computed(() => {
+    return item.isSuper === 1
+      ? {
+          ...superStarConfig,
+          name: item.isSuperName,
+        }
+      : null;
+  });
+
+  return {
+    currentStatusTag,
+    superTag,
+  };
+}

src/types/api/IndustrialParkList.ts

@@ -49,7 +49,8 @@ export interface IndustrialParkItem {
   /** 城市 */
   cityName: string;
   /** 占地面积（单位：亩） */
-  coverArea: number;
+  // coverArea: number;
+  planArea: number;
   /** 主键id */
   id: number;
   /** 图片链接 */
@@ -74,4 +75,5 @@ export interface IndustrialParkItem {
   status: number;
   /** 认证状态（1-未认证；2-认证中；3-已认证；4-未通过；5-待认证；9-已作废） */
   statusName: string;
+  type: string;
 }

src/types/api/developZoneList.ts

@@ -58,4 +58,8 @@ export interface DevelopZoneItem {
   statusName: string;
   /** 开发区类型 */
   type: string;
+  /** 星级开发区标识： 1-是 */
+  isSuper: number;
+  /** 星级开发区标识： 1-是 */
+  isSuperName: number;
 }

src/utils/filters.ts

+type AddressItem = {
+  provinceName?: string;
+  cityName?: string;
+  regionName?: string;
+  [index: string]: any;
+};
+
+/**
+ * 有值不为空
+ */
+export function haveValue(i: unknown) {
+  return i === 0 || !!i;
+}
+
+/**
+ * 地址展示
+ */
+export function filterAddress(item: AddressItem) {
+  const { provinceName, cityName, regionName } = item;
+
+  return [provinceName, cityName, regionName].filter(haveValue).join('-');
+}

src/views/industrial-park/IndustrialParkList.vue

@@ -2,17 +2,19 @@
 <template>
   <div>
     <div>
-      <div
-        v-for="item in datas"
-        :key="item.id"
-        @click="handleDetail(RouteName.industrialParkDetail, item)"
-      >
-        <div>{{ item.name }}</div>
+      <div class="space-y-5">
+        <ParkItem
+          v-for="item in datas"
+          :key="item.id"
+          :item="item"
+          @click="handleDetail(RouteName.industrialParkDetail, item)"
+        ></ParkItem>
       </div>
 
       <ListPagination
         v-model:current-page="pageNum"
         v-model:page-size="pageSize"
+        class="mt-8"
         :total="totalCount"
       ></ListPagination>
     </div>
@@ -24,6 +26,7 @@ import { useListView } from '@/composable/useListView.ts';
 import { RouteName } from '@/router/router.ts';
 import { RequestUrl } from '@/types/api.ts';
 import ListPagination from '@/components/list/ListPagination.vue';
+import ParkItem from '@/components/list/IndustrialParkItem.vue';
 import type {
   IndustrialParkItem,
   IndustrialParkListCondition,

tailwind.config.cjs

+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        yahei: '"Microsoft YaHei", system-ui, sans-serif',
+      },
+    },
+  },
 };