feat: updagte group list & add button to swipers

src/fragments/profile/view/index.less

@@ -3,7 +3,7 @@
 
 .profile-view-fragment {
   padding-bottom: 88rpx;
-  
+
   &__header {
     position: relative;
     width: 100%;
@@ -43,8 +43,8 @@
       text-align: center;
       font-size: 28px;
       font-weight: 400;
-      color: #FFFFFF;
-      background: #0000005C;
+      color: #ffffff;
+      background: #0000005c;
       border-radius: 48px;
     }
 
@@ -59,7 +59,7 @@
       font-size: 32px;
       line-height: 48px;
       font-weight: 500;
-      color: #FFFFFF;
+      color: #ffffff;
       box-sizing: border-box;
       background: linear-gradient(349.14deg, rgba(0, 0, 0, 0.3) 13.62%, rgba(0, 0, 0, 0.195) 126.8%);
     }
@@ -68,6 +68,33 @@
       font-size: 24px;
       font-weight: 400;
     }
+
+    &__swiper-button {
+      &__next,
+      &__prev {
+        width: 88px;
+        height: 88px;
+        border-radius: 50%;
+        background: rgba(0, 0, 0, 0.7);
+
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      &__prev {
+        left: 32px;
+      }
+      &__next {
+        right: 32px;
+      }
+
+      &__image {
+        width: 70px;
+        height: 70px;
+        padding: 9px;
+      }
+    }
   }
 
   &__body {
@@ -76,7 +103,7 @@
     margin-bottom: calc(24px + 24px);
     // margin-bottom: calc(112px + 24px);
     width: calc(100% - 48px);
-    background: #FFFFFF;
+    background: #ffffff;
     border-radius: 16px;
   }
 
@@ -86,7 +113,7 @@
     right: 24px;
     bottom: 0;
     height: 1px;
-    background: #E0E0E0;
+    background: #e0e0e0;
   }
 
   &__basic-info {
@@ -183,7 +210,7 @@
     position: fixed;
     bottom: 0;
     width: 100%;
-    background: #FFFFFF;
+    background: #ffffff;
     padding: 12px 32px;
     box-shadow: 0px -4px 20px 0px #00000014;
     box-sizing: border-box;
@@ -204,6 +231,5 @@
         margin-left: 32px;
       }
     }
-
   }
-}
+}

src/fragments/profile/view/index.tsx

@@ -1,7 +1,6 @@
-import { Image } from '@tarojs/components';
+import { BaseEventOrig, Image, Swiper, SwiperItem, SwiperProps } from "@tarojs/components";
 import Taro from '@tarojs/taro';
 
-import { Swiper } from '@taroify/core';
 import classNames from 'classnames';
 import { useCallback, useState } from 'react';
 
@@ -16,8 +15,8 @@ import { logWithPrefix, isDesktop } from '@/utils/common';
 import { getBasicInfo, sortVideos } from '@/utils/material';
 import { navigateTo } from '@/utils/route';
 
-
 import './index.less';
+import onChangeEventDetail = SwiperProps.onChangeEventDetail;
 
 interface IProps {
   editable: boolean;
@@ -99,22 +98,20 @@ const getDataGroup = (profile: MaterialProfile | null) => {
   ];
 };
 
-
 export default function ProfileViewFragment(props: IProps) {
   const { profile, editable, onDev } = props;
   const [coverIndex, setCoverIndex] = useState(0);
   const dataGroup = getDataGroup(profile);
   const videos = sortVideos(profile?.materialVideoInfoList || []);
 
-
   const handleClickVideo = useCallback(
     (index: number) => {
       log('handleClickVideo', index);
 
       if (isDesktop) {
         navigateTo(PageUrl.MaterialWebview, {
-          source: encodeURIComponent(videos[index].url)
-        })
+          source: encodeURIComponent(videos[index].url),
+        });
       } else {
         Taro.previewMedia({
           sources: videos.map(video => ({ url: video.url, type: video.type })),
@@ -140,12 +137,31 @@ export default function ProfileViewFragment(props: IProps) {
     navigateTo(PageUrl.MaterialEditProfile, { type: groupType });
   }, []);
 
+  const videoLength = videos.length ? videos.length : 0;
+
+  const handleChange = useCallback((e: BaseEventOrig<onChangeEventDetail>)=> {
+    setCoverIndex(e.detail.current)
+  }, [])
+
+  const handlePrev = useCallback(() => {
+    setCoverIndex(coverIndex ? coverIndex - 1 : videoLength - 1);
+  }, [coverIndex, videoLength]);
+
+  const handleNext = useCallback(() => {
+    setCoverIndex(coverIndex === videoLength- 1 ? 0 : coverIndex + 1);
+  }, [coverIndex,videoLength]);
+
   return (
     <div className={PREFIX}>
       <div className={`${PREFIX}__header`}>
-        <Swiper className={`${PREFIX}__header__swiper`} onChange={setCoverIndex} stopPropagation={false} lazyRender>
+        <Swiper
+          className={`${PREFIX}__header__swiper`}
+          current={coverIndex}
+          onChange={handleChange}
+          circular
+        >
           {videos.map((cover, index) => (
-            <Swiper.Item key={cover.coverUrl}>
+            <SwiperItem key={cover.coverUrl}>
               <div className={`${PREFIX}__header__swiper-item`}>
                 <Image
                   mode="aspectFill"
@@ -162,9 +178,25 @@ export default function ProfileViewFragment(props: IProps) {
                   />
                 )}
               </div>
-            </Swiper.Item>
+            </SwiperItem>
           ))}
         </Swiper>
+        {videoLength > 1 &&
+          (<div className={`${PREFIX}__header__swiper-button__prev`} onClick={handlePrev}>
+          <Image
+            className={`${PREFIX}__header__swiper-button__image`}
+            mode="aspectFit"
+            src={require('@/statics/svg/arrow-left-thin.svg')}
+          />
+        </div>)}
+        {videoLength > 1 &&
+          (<div className={`${PREFIX}__header__swiper-button__next`} onClick={handleNext}>
+          <Image
+            className={`${PREFIX}__header__swiper-button__image`}
+            mode="aspectFit"
+            src={require('@/statics/svg/arrow-right-thin.svg')}
+          />
+        </div>)}
         {editable && (
           <div className={`${PREFIX}__header__edit-video`} onClick={handleEditVideo}>
             编辑录屏