feat: 星级开发区， 轮播图

src/components/common/CommonVideo.vue

+<template>
+  <div ref="rootRef" class="h-full">
+    <video
+      ref="videoRef"
+      class="h-full w-full"
+      :width="width"
+      :height="height"
+      :src="src"
+      controls
+      controlslist="nodownload"
+    ></video>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+withDefaults(
+  defineProps<{
+    src: string;
+    width: number;
+    height: number;
+  }>(),
+  {},
+);
+const rootRef = ref<HTMLDivElement | null>(null);
+const videoRef = ref<HTMLVideoElement | null>(null);
+
+onMounted(() => {
+  rootRef.value!.addEventListener('contextmenu', (e) => {
+    e.preventDefault();
+  });
+});
+
+const stop = () => {
+  videoRef.value!.pause();
+};
+
+defineExpose({
+  stop,
+});
+</script>

src/components/detail/StarDetail.vue

@@ -17,12 +17,7 @@
           </div>
         </div>
         <div class="mt-[25px] pb-[40px] pt-[33px]">
-          <div class="flex flex-col">
-            <div class="text-[0px]">
-              <CommonImage class="h-[286px] w-[388px]"></CommonImage>
-            </div>
-            <div class="bg-white p-[10px] font-yahei text-xs leading-5 text-[#4D4D4D]">舒城县</div>
-          </div>
+          <VideoList :video-urls="detail.videoUrlList" :image-urls="detail.imgUrlList"></VideoList>
         </div>
       </div>
     </div>
@@ -89,7 +84,8 @@
 <script setup lang="ts">
 import type { DevelopZoneDetailResp, StarInfo } from '@/types/api/developZoneDetail';
 import { computed, ref } from 'vue';
-import CommonImage from '../common/CommonImage.vue';
+// import CommonImage from '../common/CommonImage.vue';
+import VideoList from './VideoList.vue';
 import StarIconCell from './StarIconCell.vue';
 import DetailInfoCell from './DetailInfoCell.vue';
 import StarInfoCell from './StarInfoCell.vue';

src/components/detail/VideoList.vue

+<template>
+  <div class="flex flex-col">
+    <div class="relative h-[286px] w-[388px] text-[0px]">
+      <Swiper
+        class="h-full w-full"
+        :modules="[Autoplay]"
+        :loop="isPictureType"
+        :autoplay="
+          isPictureType
+            ? {
+                disableOnInteraction: false,
+                delay: 3000,
+              }
+            : false
+        "
+        @swiper="setMainSwiper"
+        @slide-change="handleSlideChange"
+      >
+        <SwiperSlide v-for="item of currentList" :key="item.videourl" class="h-full w-full">
+          <CommonVideo
+            v-if="isVideType"
+            ref="videoRef"
+            :width="286"
+            :height="388"
+            :src="item.videourl"
+          ></CommonVideo>
+          <CommonImage v-else class="h-full w-full" :src="item.videourl"></CommonImage>
+        </SwiperSlide>
+      </Swiper>
+      <div
+        class="h-20px absolute bottom-[14px] right-[14px] z-10 flex w-[70px] cursor-pointer items-center rounded-[50px] bg-[#808080] font-yahei text-xs leading-[18px] text-white"
+      >
+        <div
+          class="flex flex-1 items-center justify-center rounded-[50px]"
+          :class="{ 'bg-white text-[#C0322B]': isVideType }"
+          @click="changeListType(ListType.video)"
+        >
+          视频
+        </div>
+        <div
+          class="flex flex-1 items-center justify-center rounded-[50px]"
+          :class="{ 'bg-white text-[#C0322B]': isPictureType }"
+          @click="changeListType(ListType.picture)"
+        >
+          图片
+        </div>
+      </div>
+    </div>
+    <div>
+      <div class="bg-white p-[10px] font-yahei text-xs leading-5 text-[#4D4D4D]">舒城县</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import 'swiper/css';
+import 'swiper/css/autoplay';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import type { Swiper as SwiperType } from 'swiper/types';
+import { Autoplay } from 'swiper/modules';
+import { computed, ref, nextTick } from 'vue';
+import CommonVideo from '../common/CommonVideo.vue';
+import CommonImage from '../common/CommonImage.vue';
+
+/** 轮播类型 */
+enum ListType {
+  /** 视频 */
+  video = 'video',
+  /** 图片 */
+  picture = 'picture',
+}
+
+const props = withDefaults(
+  defineProps<{
+    videoUrls: {
+      videoCover: string;
+      videourl: string;
+    }[];
+    imageUrls: string[];
+  }>(),
+  {
+    videoUrls: () => [],
+    imageUrls: () => [],
+  },
+);
+
+const mainSwiper = ref<null | SwiperType>(null);
+const videoRef = ref<any>(null);
+const currentType = ref<ListType>(ListType.video);
+
+const isVideType = computed(() => {
+  return currentType.value === ListType.video;
+});
+
+const currentList = computed(() => {
+  if (isVideType.value) {
+    return props.videoUrls;
+  } else {
+    return props.imageUrls.map((img) => {
+      return {
+        videourl: img,
+      };
+    });
+  }
+});
+
+const isPictureType = computed(() => {
+  return currentType.value === ListType.picture;
+});
+
+const setMainSwiper = (swiper: SwiperType) => {
+  mainSwiper.value = swiper;
+};
+
+const handleSlideChange = () => {
+  if (isVideType.value) {
+    videoRef.value.forEach((item: any) => {
+      item.stop();
+    });
+  }
+};
+
+/**
+ * 修改当前类型
+ */
+const changeListType = (type: ListType) => {
+  if (type !== currentType.value) {
+    currentType.value = type;
+    nextTick(() => {
+      mainSwiper.value?.update();
+      if (isPictureType.value) {
+        mainSwiper.value?.autoplay.start();
+      } else {
+        mainSwiper.value?.autoplay.stop();
+      }
+    });
+  }
+};
+</script>

src/types/api/developZoneDetail.ts

@@ -178,4 +178,11 @@ export interface DevelopZoneDetailResp {
   };
   /** 星级开发区数据 */
   starObjectExtensionInfoMap?: Record<string, StarInfo[]>;
+  /** 轮播视频 */
+  videoUrlList: {
+    /** */
+    videoCover: string;
+    /** */
+    videourl: string;
+  }[];
 }