fix: 轮播交互修改

packages/base-components/VideoSliderModal/src/demos/demo.tsx

@@ -49,10 +49,18 @@ const Demo = () => {
     },
   ];
 
+  const _JessibucaObj = {
+    operateBtns: {
+      screenshot: false,
+    },
+    loadingText: '视频加载中',
+    decoder: '/JessibucaVideo/decoder.js',
+  };
+
   return (
     <>
       <Button onClick={() => setShowModal(true)}>打开弹窗</Button>
-      <VideoSliderModal modalInfo={modalInfo} videoInfos={videos} />
+      <VideoSliderModal modalInfo={modalInfo} videoInfos={videos} JessibucaObj={_JessibucaObj} />
     </>
   );
 };

packages/base-components/VideoSliderModal/src/index.js

 import VmsVideo from '@wisdom-components/VmsVideo';
-import { Modal, Space } from 'antd';
-import React, { useState } from 'react';
+import { Modal } from 'antd';
+import React from 'react';
 import SwiperCore, { Autoplay, Lazy, Navigation, Pagination, Virtual } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/swiper.min.css';
@@ -10,36 +10,24 @@ SwiperCore.use([Virtual, Navigation, Lazy, Autoplay, Pagination]);
 
 const VideoSliderModal = (props) => {
   const { modalInfo, videoInfos, JessibucaObj } = props;
-  const [swiper, setSwiper] = useState(null);
-  const [activeIndex, setActiveIndex] = useState(0);
 
-  const handleNavigation = (direction) => {
-    if (swiper) {
-      if (direction === 'prev') {
-        swiper.slidePrev();
-      } else if (direction === 'next') {
-        swiper.slideNext();
-      }
+  // 切换轮播页 控制按钮是否显示
+  const handleSlideChange = (swiper) => {
+    const nextButton = document.querySelector('.swiper-button-next');
+    const prevButton = document.querySelector('.swiper-button-prev');
+    if (swiper.isBeginning) {
+      prevButton.style.display = 'none'; // 隐藏左侧按钮
+    } else {
+      prevButton.style.display = 'block'; // 显示左侧按钮
     }
-  };
 
-  const handlePaginationClick = (index) => {
-    setActiveIndex(index);
-    if (swiper) {
-      swiper.slideTo(index);
+    if (swiper.isEnd) {
+      nextButton.style.display = 'none'; // 隐藏右侧按钮
+    } else {
+      nextButton.style.display = 'block'; // 显示右侧按钮
     }
   };
 
-  // 默认配置
-  const _JessibucaObj = {
-    operateBtns: {
-      screenshot: false,
-    },
-    loadingText: '视频加载中',
-    decoder: '/JessibucaVideo/decoder.js',
-    ...JessibucaObj,
-  };
-
   return (
     <Modal
       footer={null}
@@ -51,45 +39,37 @@ const VideoSliderModal = (props) => {
       getContainer={document.body}
       destroyOnClose
     >
-      <Swiper
-        onSwiper={setSwiper}
-        slidesPerView={1}
-        spaceBetween={0}
-        pagination={{
-          clickable: true,
-        }}
-        loop
-        lazy
-        virtual
-        onActiveIndexChange={(e) => {
-          setActiveIndex(e.activeIndex);
-        }}
-        navigation
-      >
-        {videoInfos.map((item, index) => (
-          <SwiperSlide key={index}>
-            <div className={styles['swiper-wrap']}>
-              <div className={styles['swiper-title']}>{item.name}</div>
-              <div className={styles['swiper-content']}>
-                <VmsVideo VideoInfo={item} JessibucaObj={_JessibucaObj} />
-              </div>
-            </div>
-          </SwiperSlide>
-        ))}
-      </Swiper>
-
-      <div className={styles['swiper-dots-wrap']}>
-        <Space size={16}>
-          {videoInfos.map((video, index) => (
-            <div
-              className={styles['swiper-dots']}
-              key={index}
-              onClick={() => handlePaginationClick(index)}
-              style={{ background: activeIndex === index ? '#007aff' : '#919090' }}
-            />
-          ))}
-        </Space>
-      </div>
+      <>
+        {videoInfos.length === 1 ? (
+          videoInfos.map((item, index) => <VmsVideo VideoInfo={item} JessibucaObj={JessibucaObj} />)
+        ) : (
+          <>
+            <Swiper
+              slidesPerView={1}
+              spaceBetween={0}
+              initialSlide={0}
+              pagination={{
+                clickable: true,
+              }}
+              lazy
+              virtual
+              navigation
+              onSlideChange={(swiper) => handleSlideChange(swiper)}
+            >
+              {videoInfos.map((item, index) => (
+                <SwiperSlide key={index}>
+                  <div className={styles['swiper-wrap']}>
+                    <div className={styles['swiper-title']}>{item.name}</div>
+                    <div className={styles['swiper-content']}>
+                      <VmsVideo VideoInfo={item} JessibucaObj={JessibucaObj} />
+                    </div>
+                  </div>
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </>
+        )}
+      </>
     </Modal>
   );
 };

packages/base-components/VideoSliderModal/src/index.less

@@ -29,23 +29,4 @@
       flex: 1;
     }
   }
-
-  .swiper-dots-wrap {
-    position: absolute;
-    bottom: 8px;
-    left: 0;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 22px;
-
-    .swiper-dots {
-      width: 8px;
-      height: 8px;
-      background: #919090;
-      border-radius: 50%;
-    }
-  }
 }