feat: updagte group list & add button to swipers

.gitignore

@@ -7,3 +7,4 @@ node_modules/
 .swc
 project.private.config.json
 node_test.js
+.idea

package.json

@@ -44,22 +44,22 @@
 		"@babel/runtime": "^7.21.5",
 		"@taroify/core": "^0.3.2-alpha.0",
 		"@taroify/icons": "0.6.4-alpha.0",
-    "@tarojs/components": "3.6.31",
+		"@tarojs/components": "4.0.9",
-    "@tarojs/helper": "3.6.31",
+		"@tarojs/helper": "4.0.9",
-    "@tarojs/plugin-framework-react": "3.6.31",
+		"@tarojs/plugin-framework-react": "4.0.9",
-    "@tarojs/plugin-html": "^3.6.31",
+		"@tarojs/plugin-html": "4.0.9",
-    "@tarojs/plugin-platform-alipay": "3.6.31",
+		"@tarojs/plugin-platform-alipay": "4.0.9",
-    "@tarojs/plugin-platform-h5": "3.6.31",
+		"@tarojs/plugin-platform-h5": "4.0.9",
-    "@tarojs/plugin-platform-harmony-hybrid": "3.6.31",
+		"@tarojs/plugin-platform-harmony-hybrid": "3.6.34",
-    "@tarojs/plugin-platform-jd": "3.6.31",
+		"@tarojs/plugin-platform-jd": "4.0.9",
-    "@tarojs/plugin-platform-qq": "3.6.31",
+		"@tarojs/plugin-platform-qq": "4.0.9",
-    "@tarojs/plugin-platform-swan": "3.6.31",
+		"@tarojs/plugin-platform-swan": "4.0.9",
-    "@tarojs/plugin-platform-tt": "3.6.31",
+		"@tarojs/plugin-platform-tt": "4.0.9",
-    "@tarojs/plugin-platform-weapp": "3.6.31",
+		"@tarojs/plugin-platform-weapp": "4.0.9",
-    "@tarojs/react": "3.6.31",
+		"@tarojs/react": "4.0.9",
-    "@tarojs/runtime": "3.6.31",
+		"@tarojs/runtime": "4.0.9",
-    "@tarojs/shared": "3.6.31",
+		"@tarojs/shared": "4.0.9",
-    "@tarojs/taro": "3.6.31",
+		"@tarojs/taro": "4.0.9",
 		"classnames": "^2.5.1",
 		"dayjs": "^1.11.11",
 		"eslint-config-prettier": "^9.1.0",
@@ -75,11 +75,11 @@
 	"devDependencies": {
 		"@babel/core": "^7.8.0",
 		"@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
-    "@tarojs/cli": "3.6.31",
+		"@tarojs/cli": "4.0.9",
 		"@tarojs/plugin-mock": "^0.0.9",
-    "@tarojs/taro-loader": "3.6.31",
+		"@tarojs/taro-loader": "4.0.9",
 		"@tarojs/test-utils-react": "^0.1.1",
-    "@tarojs/webpack5-runner": "3.6.31",
+		"@tarojs/webpack5-runner": "4.0.9",
 		"@types/jest": "^29.3.1",
 		"@types/node": "^18.15.11",
 		"@types/react": "^18.0.0",
@@ -87,9 +87,9 @@
 		"@typescript-eslint/eslint-plugin": "^7.12.0",
 		"@typescript-eslint/parser": "^7.12.0",
 		"babel-plugin-import": "^1.13.8",
-    "babel-preset-taro": "3.6.31",
+		"babel-preset-taro": "4.0.9",
 		"eslint": "^8.12.0",
-    "eslint-config-taro": "3.6.31",
+		"eslint-config-taro": "4.0.9",
 		"eslint-plugin-import": "^2.12.0",
 		"eslint-plugin-react": "^7.8.2",
 		"eslint-plugin-react-hooks": "^4.2.0",
@@ -104,5 +104,10 @@
 		"typescript": "^5.1.0",
 		"webpack": "5.78.0",
 		"webpack-bundle-analyzer": "^4.10.2"
+	},
+	"pnpm": {
+		"ignoredBuiltDependencies": [
+			"@tarojs/binding"
+		]
 	}
 }

src/fragments/profile/view/index.less

@@ -43,8 +43,8 @@
       text-align: center;
       font-size: 28px;
       font-weight: 400;
-      color: #FFFFFF;
+      color: #ffffff;
-      background: #0000005C;
+      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}>
             编辑录屏

src/pages/group-v2/index.tsx

@@ -28,27 +28,30 @@ const CALC_LIST_PROPS: IUseListHeightProps = {
   },
 };
 const GROUPS: GroupItem[] = [
+  { title: '【杭州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc223f495e159af95e' },
+  { title: '【上海】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4189e68429cf07f8' },
+  { title: '【南京】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc6dc8d0a9692b70e' },
+  { title: '【合肥】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc41c9785cc2035277' },
+  { title: '【苏州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4642f90a6e3528ff' },
+  { title: '【温州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb0ea5f197a18b335' },
   { title: '【广州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb4b88b8abb7a7c8b' },
   { title: '【深圳】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcfe70d8736e14bb64' },
   { title: '【佛山】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcfac1132df386fac8' },
   { title: '【东莞】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb2b0e39026f7dddc' },
-  { title: '【杭州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc223f495e159af95e' },
-  { title: '【温州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb0ea5f197a18b335' },
-  { title: '【上海】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4189e68429cf07f8' },
   { title: '【厦门】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc2007a895cb48464b' },
   { title: '【福州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc126483dedadde82b' },
   { title: '【泉州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4c8c42b1a9337aaf' },
-  { title: '【长沙】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc76be8f2b3f8aa437' },
-  { title: '【成都】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcf75cefbdc62946fa' },
-  { title: '【重庆】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd7008f747d545f83' },
-  { title: '【郑州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd1c53b7bf8ecdb97' },
-  { title: '【西安】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc34768971b7354220' },
-  { title: '【武汉】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc047c94f8c709b395' },
-  { title: '【南京】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc6dc8d0a9692b70e' },
-  { title: '【合肥】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc41c9785cc2035277' },
   { title: '【北京】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb119c94575e91262' },
   { title: '【青岛】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfce8d7a68190f6a1d2' },
-  { title: '【其他】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc60ac7b6420787a8' },
+  { title: '【天津】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcda46c23dade6f6a3' },
+  { title: '【长沙】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc76be8f2b3f8aa437' },
+  { title: '【武汉】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc047c94f8c709b395' },
+  { title: '【郑州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd1c53b7bf8ecdb97' },
+  { title: '【成都】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcf75cefbdc62946fa' },
+  { title: '【重庆】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd7008f747d545f83' },
+  { title: '【昆明】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcf2aebcbf3d46d9cd' },
+  { title: '【西安】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc34768971b7354220' },
+  { title: '【全国】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc60ac7b6420787a8' },
 ];
 
 export default function GroupV2() {

src/statics/svg/arrow-left-thin.svg

@@ -0,0 +1,3 @@
+<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42.6991 53.573L24.1376 35.0115L42.6991 16.4499L45.174 18.9248L29.091 35.0115L45.174 51.0982L42.6991 53.573Z" fill="white"/>
+</svg>

src/statics/svg/arrow-right-thin.svg

@@ -0,0 +1,3 @@
+<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.3009 16.427L45.8625 34.9885L27.3009 53.5501L24.8261 51.0752L40.909 34.9885L24.8261 18.9018L27.3009 16.427Z" fill="white"/>
+</svg>