feat: 详情页图片右侧信息展示

.vscode/extensions.json

@@ -4,7 +4,6 @@
     "Vue.vscode-typescript-vue-plugin",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "stylelint.vscode-stylelint",
     "EditorConfig.EditorConfig",
     "bradlc.vscode-tailwindcss"
   ],

components.d.ts

@@ -12,24 +12,17 @@ declare module 'vue' {
     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']
-    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
-    ElCol: (typeof import('element-plus/es'))['ElCol']
+    DetailMainInfo: typeof import('./src/components/detail/DetailMainInfo.vue')['default']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePicker: (typeof import('element-plus/es'))['ElDatePicker']
     ElFooter: typeof import('element-plus/es')['ElFooter']
     ElForm: (typeof import('element-plus/es'))['ElForm']
     ElFormItem: (typeof import('element-plus/es'))['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
-    ElInput: typeof import('element-plus/es')['ElInput']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
-    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
-    ElOption: (typeof import('element-plus/es'))['ElOption']
-    ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRadio: (typeof import('element-plus/es'))['ElRadio']
-    ElRadioGroup: (typeof import('element-plus/es'))['ElRadioGroup']
     ElSelect: (typeof import('element-plus/es'))['ElSelect']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     Filter: (typeof import('./src/components/filter/filter.vue'))['default']

src/components/common/ImageList.vue

 <template>
-  <div v-if="images.length" class="w-[455px]">
+  <div class="min-h-[427px] w-[455px]">
     <div class="w-full">
       <Swiper
         centered-slides
@@ -8,8 +8,8 @@
         @swiper="setMainSwiper"
         @slide-change="handleSlideChange"
       >
-        <SwiperSlide v-for="(image, index) of images" :key="index">
-          <img class="h-[342px] w-full" :src="image" />
+        <SwiperSlide v-for="(image, index) of imageList" :key="index">
+          <ElImage class="h-[342px] w-full" :src="image" />
         </SwiperSlide>
       </Swiper>
     </div>
@@ -53,10 +53,10 @@ import 'swiper/css';
 import 'swiper/css/thumbs';
 import { Thumbs } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/vue';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import type { Swiper as SwiperType } from 'swiper/types';
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     images: string[];
   }>(),
@@ -69,6 +69,13 @@ const thumbsSwiper = ref<null | SwiperType>(null);
 const mainSwiper = ref<null | SwiperType>(null);
 const currentIndex = ref(0);
 
+/**
+ * 如果图片为空，加一张图展示占位图
+ */
+const imageList = computed(() => {
+  return props.images.length > 0 ? props.images : [''];
+});
+
 const changeCurrent = (index: number) => {
   if (index > 0) {
     mainSwiper.value?.slideNext();

src/components/detail/DetailMain.vue

@@ -48,8 +48,8 @@
         <div class="mt-4">
           <ImageList :images="detail.imgUrlList"></ImageList>
         </div>
-        <div class="ml-4">
-          <div>
+        <div class="ml-4 mt-4">
+          <div class="flex items-center space-x-[30px] font-yahei">
             <slot></slot>
           </div>
           <div class="mt-3">

src/components/detail/DetailMainInfo.vue

+<!-- 主图右侧顶部信息 -->
+<template>
+  <div
+    v-if="value"
+    class="flex h-[60px] w-[117px] flex-col items-center justify-center bg-[#FAFAFC]"
+  >
+    <div class="text-base font-bold leading-5 text-[#1A1A1A]">{{ value + unit }}</div>
+    <div class="mt-1 text-xs leading-5 text-[#4D4D4D]">{{ name }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    name: string;
+    value: string | number;
+    unit?: string;
+  }>(),
+  {
+    name: '',
+    value: '',
+    unit: '',
+  },
+);
+</script>

src/views/carrier/CarrierDetail.vue

@@ -7,7 +7,11 @@
         <DetailMain
           :type="DetailType.carrier"
           :detail="{ ...detail.carrierParkVo, ...detail, imgUrlList: detail.imgUrls }"
-        ></DetailMain>
+        >
+          <DetailMainInfo :value="detail.type" name="载体类型"></DetailMainInfo>
+          <DetailMainInfo :value="detail.area" unit="㎡" name="建筑面积"></DetailMainInfo>
+          <DetailMainInfo :value="detail.structure" name="建筑结构"></DetailMainInfo>
+        </DetailMain>
       </DetailInfoCell>
       <DetailInfoCell title="载体详情">
         <DetailInfo :infos="carrierInfo"></DetailInfo>
@@ -31,6 +35,7 @@
 import DetailInfo, { type Infos } from '@/components/detail/DetailInfo.vue';
 import DetailInfoCell from '@/components/detail/DetailInfoCell.vue';
 import DetailMain from '@/components/detail/DetailMain.vue';
+import DetailMainInfo from '@/components/detail/DetailMainInfo.vue';
 import ParkItem from '@/components/list/ParkItem.vue';
 import { useDetail } from '@/composable/useDetail.ts';
 import { useJoinRequired } from '@/composable/useJoinRequired.ts';

src/views/develop/DevelopZoneDetail.vue

@@ -4,7 +4,15 @@
     <div>{{ detail.name }}</div>
     <div class="space-y-4">
       <DetailInfoCell>
-        <DetailMain :type="DetailType.develop" :detail="detail"></DetailMain>
+        <DetailMain :type="DetailType.develop" :detail="detail">
+          <DetailMainInfo :value="detail.levelName" name="开发区级别"></DetailMainInfo>
+          <DetailMainInfo :value="detail.type" name="开发区类型"></DetailMainInfo>
+          <DetailMainInfo
+            :value="detail.planArea"
+            unit="平方公里"
+            name="开发区面积"
+          ></DetailMainInfo>
+        </DetailMain>
       </DetailInfoCell>
       <DetailInfoCell title="开发区简介">
         <div class="font-yahei text-xs leading-5 text-[#1A1A1A]">
@@ -84,6 +92,7 @@ import MiniListItem from '@/components/detail/MiniListItem.vue';
 import { useJump } from '@/composable/useJump.ts';
 import { RouteName } from '@/router/router.ts';
 import { DetailType } from '@/types/enum.ts';
+import DetailMainInfo from '@/components/detail/DetailMainInfo.vue';
 
 const { detail, initDetail } = useDetail<DevelopZoneDetailResp>(RequestUrl.developZoneDetail);
 const { joinRequired } = useJoinRequired<DevelopZoneDetailResp>(computed(() => detail.value));

src/views/industrial-park/IndustrialParkDetail.vue

@@ -3,7 +3,10 @@
   <div v-if="detail" class="main-width mx-auto py-5">
     <div class="space-y-4">
       <DetailInfoCell>
-        <DetailMain :type="DetailType.industrial" :detail="detail"></DetailMain>
+        <DetailMain :type="DetailType.industrial" :detail="detail">
+          <DetailMainInfo :value="detail.levelName" name="产业园级别"></DetailMainInfo>
+          <DetailMainInfo :value="detail.coverArea" unit="亩" name="占地面积"></DetailMainInfo>
+        </DetailMain>
       </DetailInfoCell>
       <DetailInfoCell title="产业园简介">
         <div class="font-yahei text-xs leading-5 text-[#1A1A1A]">
@@ -95,6 +98,7 @@ import { haveValue } from '@/utils/filters.ts';
 import { useJump } from '@/composable/useJump.ts';
 import { RouteName } from '@/router/router.ts';
 import { DetailType } from '@/types/enum.ts';
+import DetailMainInfo from '@/components/detail/DetailMainInfo.vue';
 
 const { detail, initDetail } = useDetail<IndustrialParkDetailResp>(RequestUrl.industrialParkDetal);
 

src/views/land/LandDetail.vue

@@ -4,10 +4,11 @@
     <div>{{ detail.name }}</div>
     <div class="space-y-4">
       <DetailInfoCell>
-        <DetailMain
-          :type="DetailType.land"
-          :detail="{ ...detail, imgUrlList: detail.imgUrls }"
-        ></DetailMain>
+        <DetailMain :type="DetailType.land" :detail="{ ...detail, imgUrlList: detail.imgUrls }">
+          <DetailMainInfo :value="detail.price" unit="万/亩" name="土地价格"></DetailMainInfo>
+          <DetailMainInfo :value="detail.typeName" name="土地用地"></DetailMainInfo>
+          <DetailMainInfo :value="detail.area" unit="亩" name="占地面积"></DetailMainInfo>
+        </DetailMain>
       </DetailInfoCell>
       <DetailInfoCell title="土地现状">
         <div class="font-yahei text-xs leading-5 text-[#1A1A1A]">
@@ -44,6 +45,7 @@ import { computed } from 'vue';
 import { DetailType, ParkItemType } from '@/types/enum.ts';
 import { useJump } from '@/composable/useJump.ts';
 import { RouteName } from '@/router/router.ts';
+import DetailMainInfo from '@/components/detail/DetailMainInfo.vue';
 
 const { detail, initDetail } = useDetail<LandDetailResp>(RequestUrl.landDetail);