feat: 详情页主图vr

src/components/common/ImageList.vue

@@ -9,7 +9,12 @@
         @slide-change="handleSlideChange"
       >
         <SwiperSlide v-for="(image, index) of imageList" :key="index" class="text-[0px]">
-          <CommonImage class="h-[434px] w-full" :src="image" />
+          <CommonImage
+            class="h-[434px] w-full"
+            :class="{ 'cursor-pointer': image?.href }"
+            :src="image?.url"
+            @click="handleClick(image?.href)"
+          />
         </SwiperSlide>
       </Swiper>
     </div>
@@ -26,7 +31,7 @@
             <CommonImage
               class="h-[92px] w-[130px] cursor-pointer rounded"
               :class="{ 'border border-[#2878ff] p-1': index === currentIndex }"
-              :src="image"
+              :src="image.url"
             />
           </SwiperSlide>
         </Swiper>
@@ -59,7 +64,7 @@ import type { Swiper as SwiperType } from 'swiper/types';
 
 const props = withDefaults(
   defineProps<{
-    images: string[];
+    images: { url: string; href?: string }[];
   }>(),
   {
     images: () => [],
@@ -94,6 +99,11 @@ const setMainSwiper = (swiper: SwiperType) => {
 const handleSlideChange = (swiper: SwiperType) => {
   currentIndex.value = swiper.activeIndex;
 };
+const handleClick = (href?: string) => {
+  if (href) {
+    window.open(href, '_blank');
+  }
+};
 </script>
 
 <style lang="scss">

src/components/detail/DetailMain.vue

@@ -31,7 +31,7 @@
       <!-- main content -->
       <div class="flex">
         <div class="mt-4">
-          <ImageList :images="detail.imgUrlList"></ImageList>
+          <ImageList :images="mainImageList"></ImageList>
         </div>
         <div class="ml-[30px] mt-4 flex flex-col">
           <div>
@@ -118,6 +118,13 @@ export interface HeaderDetail {
   /** 联系电话 */
   contactPhone: string;
   id: number;
+  /** vr列表 */
+  vrUrlList?: {
+    /** vr封面 */
+    vrCover: string;
+    /** vr地址 */
+    vrUrl: string;
+  }[];
 }
 
 const props = withDefaults(
@@ -216,6 +223,15 @@ const breadcrumbs = computed(() => {
     },
   ];
 });
+
+/** 主图 */
+const mainImageList = computed(() => {
+  const { imgUrlList, vrUrlList = [] } = props.detail;
+  return [
+    ...vrUrlList.map(({ vrCover, vrUrl }) => ({ url: vrCover, href: vrUrl })),
+    ...imgUrlList.map((i) => ({ url: i })),
+  ];
+});
 </script>
 <style lang="scss">
 .detail-main {

src/types/api/developZoneDetail.ts

@@ -187,4 +187,11 @@ export interface DevelopZoneDetailResp {
   }[];
   /** 供电类型 */
   powerSupplyType: string;
+  /** vr列表 */
+  vrUrlList: {
+    /** vr封面 */
+    vrCover: string;
+    /** vr地址 */
+    vrUrl: string;
+  }[];
 }

src/types/api/industrialParkDetail.ts

@@ -115,4 +115,11 @@ export interface IndustrialParkDetailResp {
   seeYaosu: boolean;
   /** 产业支持是否有数据 */
   seeResource: boolean;
+  /** vr列表 */
+  vrUrlList: {
+    /** vr封面 */
+    vrCover: string;
+    /** vr地址 */
+    vrUrl: string;
+  }[];
 }

src/utils/filters.ts

@@ -51,6 +51,6 @@ export function formatNumber(v: unknown, n = 2): string {
   if (typeof v === 'number') {
     return v.toFixed(n);
   } else {
-    return v!.toString();
+    return v?.toString() || '';
   }
 }