修改典藏轮播图滑动切换

src/views/collection/collectDetail.vue

@@ -4,30 +4,45 @@
     <div class="top-navigation">
       <!-- 返回按钮 -->
       <div v-if="isFrom !== 'weixin'" class="back-button" @click="goBack">
-        <img src="@/assets/indexPage/icon_back.png" alt="返回">
+        <img src="@/assets/indexPage/icon_back.png" alt="返回" />
       </div>
       <!-- 自定义标签页导航 -->
       <div class="custom-tabs">
-        <div class="tab-item" :class="{ active: activeTab === 'model' }" @click="switchTab('model')">
+        <div
+          class="tab-item"
+          :class="{ active: activeTab === 'model' }"
+          @click="switchTab('model')"
+        >
           模型
         </div>
-        <div class="tab-item" :class="{ active: activeTab === 'video' }" @click="switchTab('video')">
+        <div
+          class="tab-item"
+          :class="{ active: activeTab === 'video' }"
+          @click="switchTab('video')"
+        >
           视频
         </div>
-        <div class="tab-item" :class="{ active: activeTab === 'image' }" @click="switchTab('image')">
+        <div
+          class="tab-item"
+          :class="{ active: activeTab === 'image' }"
+          @click="switchTab('image')"
+        >
           图片
         </div>
       </div>
     </div>
 
     <!-- 内容展示区域 -->
-    <div class="content-display" :class="{ 'zoomed': isZoomed }">
+    <div class="content-display" :class="{ zoomed: isZoomed }">
       <!-- 模型展示 -->
       <div v-if="activeTab === 'model'" class="model-viewer">
         <div class="model-container">
-          <iframe id="ifr" v-if="getFieldValue(artifactData, 'modelFile')"
+          <iframe
+            id="ifr"
+            v-if="getFieldValue(artifactData, 'modelFile')"
             :src="`https://sit-kelamayi.4dage.com/model.html?m=${getFieldValue(artifactData, 'modelFile')}`"
-            frameborder="0"></iframe>
+            frameborder="0"
+          ></iframe>
           <div v-else class="no-video">
             <div class="no-video-text">暂无模型</div>
           </div>
@@ -44,9 +59,16 @@
       <!-- 视频展示 -->
       <div v-if="activeTab === 'video'" class="video-viewer">
         <div class="video-container">
-          <video width="320" height="240" v-if="getFieldValue(artifactData, 'videoFile')" controls
-            x5-video-player-type="h5" playsinline webkit-playsinline>
-            <source :src="getFieldValue(artifactData, 'videoFile')" type="video/mp4">
+          <video
+            width="320"
+            height="240"
+            v-if="getFieldValue(artifactData, 'videoFile')"
+            controls
+            x5-video-player-type="h5"
+            playsinline
+            webkit-playsinline
+          >
+            <source :src="getFieldValue(artifactData, 'videoFile')" type="video/mp4" />
             您的浏览器不支持视频播放。
           </video>
           <div v-else class="no-video">
@@ -59,10 +81,23 @@
       <div v-if="activeTab === 'image'" class="image-viewer">
         <div class="image-container">
           <el-carousel
-            v-if="getFieldValue(artifactData, 'imageFiles') && getFieldValue(artifactData, 'imageFiles').length > 0"
-            height="90%" arrow="hover" ref="slideCarousel" @change="setActiveItem">
-            <el-carousel-item v-for="(image, index) in getFieldValue(artifactData, 'imageFiles')" :key="index">
-              <img :src="image" :alt="`文物图片${index + 1}`" class="carousel-image">
+            v-if="
+              getFieldValue(artifactData, 'imageFiles') &&
+              getFieldValue(artifactData, 'imageFiles').length > 0
+            "
+            height="90%"
+            arrow="hover"
+            ref="slideCarousel"
+            @change="setActiveItem"
+            :autoplay="autoplayEnabled"
+            :interval="4000"
+            :pause-on-hover="false"
+          >
+            <el-carousel-item
+              v-for="(image, index) in getFieldValue(artifactData, 'imageFiles')"
+              :key="index"
+            >
+              <img :src="image" :alt="`文物图片${index + 1}`" class="carousel-image" />
             </el-carousel-item>
           </el-carousel>
           <div v-else class="no-video">
@@ -73,17 +108,21 @@
     </div>
 
     <!-- 底部固定信息卡片 -->
-    <div class="artifact-info-card" :class="{ 'hidden': isZoomed }">
+    <div class="artifact-info-card" :class="{ hidden: isZoomed }">
       <div class="card-content">
         <div class="artifact-title">{{ getFieldValue(artifactData, 'title') || '文物名称' }}</div>
         <div class="artifact-meta">
           <span class="year">{{ getFieldValue(artifactData, 'era') }}</span>
           <span class="source">{{ getFieldValue(artifactData, 'texture') }}</span>
-          <span class="level">{{ getFieldValue(artifactData, 'level') || '等级不详'
-          }}</span>
+          <span class="level">{{ getFieldValue(artifactData, 'level') || '等级不详' }}</span>
+        </div>
+        <div class="artifact-size">
+          {{
+            getFieldValue(artifactData, 'size') ||
+            getFieldValue(artifactData, 'dimensions') ||
+            '尺寸不详'
+          }}
         </div>
-        <div class="artifact-size">{{ getFieldValue(artifactData, 'size') || getFieldValue(artifactData, 'dimensions')
-          || '尺寸不详' }}</div>
         <div class="divider"></div>
         <div class="artifact-description">
           {{ getFieldValue(artifactData, 'remark') }}
@@ -110,6 +149,7 @@ const loading = ref(false)
 const artifactData = ref({})
 const isZoomed = ref(false)
 const isFrom = ref('')
+const autoplayEnabled = ref(true)
 
 // 检查是否为预览模式
 const isPreviewMode = computed(() => {
@@ -191,6 +231,15 @@ const setActiveItem = (index) => {
   console.log('轮播图切换到:', index)
 }
 
+// 重新启动自动播放
+const restartAutoplay = () => {
+  // 通过动态控制autoplay属性来重新启动自动播放
+  autoplayEnabled.value = false
+  nextTick(() => {
+    autoplayEnabled.value = true
+  })
+}
+
 // 滑动切换
 const slideBanner = () => {
   // 等待DOM更新后再添加事件监听
@@ -215,7 +264,7 @@ const slideBanner = () => {
         resetPoint()
         return
       }
-      console.log(slideCarousel.value, 999)
+
       if (slideCarousel.value) {
         if (startPoint - stopPoint > 0) {
           // 向左滑动，下一张
@@ -249,8 +298,10 @@ const slideBanner = () => {
     }
 
     // 手指抬起
-    function handleTouchEnd(e) {
+    function handleTouchEnd() {
       handleSlideChange()
+      // 重新启动自动播放
+      restartAutoplay()
     }
 
     // === 鼠标事件处理 ===
@@ -272,17 +323,21 @@ const slideBanner = () => {
     }
 
     // 鼠标抬起
-    function handleMouseUp(e) {
+    function handleMouseUp() {
       if (!isDragging) return
       box.style.cursor = 'grab'
       handleSlideChange()
+      // 重新启动自动播放
+      restartAutoplay()
     }
 
     // 鼠标离开容器
-    function handleMouseLeave(e) {
+    function handleMouseLeave() {
       if (!isDragging) return
       box.style.cursor = 'grab'
       handleSlideChange()
+      // 重新启动自动播放
+      restartAutoplay()
     }
 
     // 添加触摸事件监听器
@@ -301,7 +356,6 @@ const slideBanner = () => {
   })
 }
 
-
 // 初始化
 onMounted(() => {
   getArtifactDetail()
@@ -360,7 +414,7 @@ onMounted(() => {
   .tab-item {
     width: 72px;
     text-align: center;
-    color: #FFFFFF;
+    color: #ffffff;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.3s ease;
@@ -368,9 +422,9 @@ onMounted(() => {
     border-bottom: 2px solid transparent;
 
     &.active {
-      color: #FFFFFF;
+      color: #ffffff;
       font-weight: bold;
-      border-bottom-color: #F3B200;
+      border-bottom-color: #f3b200;
     }
 
     &:hover:not(.active) {
@@ -500,7 +554,9 @@ onMounted(() => {
   padding: 20px;
   margin: 20px 0;
   overflow: auto;
-  transition: opacity 0.3s ease, visibility 0.3s ease;
+  transition:
+    opacity 0.3s ease,
+    visibility 0.3s ease;
 
   &.hidden {
     opacity: 0;
@@ -558,7 +614,8 @@ onMounted(() => {
 }
 
 @media (max-width: 480px) {
-  .collect-detail-container {}
+  .collect-detail-container {
+  }
 
   .tab-navigation {
     max-width: 280px;
@@ -593,4 +650,4 @@ onMounted(() => {
     color: #fff;
   }
 }
-</style>
+</style>