feat: dev click, group list, swiper button

2025-04-12 23:43:36 +08:00 · 2025-04-12 23:43:36 +08:00 · f86b4481d8
commit f86b4481d8
parent c26c1c92fe
4 changed files with 51 additions and 49 deletions
--- a/src/fragments/profile/view/index.tsx
+++ b/src/fragments/profile/view/index.tsx
@ -1,4 +1,4 @@
-import { BaseEventOrig, Image, Swiper, SwiperItem, SwiperProps } from "@tarojs/components";
+import { BaseEventOrig, Image, Swiper, SwiperItem, SwiperProps } from '@tarojs/components';
 import Taro from '@tarojs/taro';

 import classNames from 'classnames';
@ -138,28 +138,24 @@ export default function ProfileViewFragment(props: IProps) {
  }, []);

  const videoLength = videos.length ? videos.length : 0;
+  const showSwiperButton = videoLength > 1 && isDesktop;

-  const handleChange = useCallback((e: BaseEventOrig<onChangeEventDetail>)=> {
-    setCoverIndex(e.detail.current)
-  }, [])
+  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]);
+    setCoverIndex(coverIndex === videoLength - 1 ? 0 : coverIndex + 1);
+  }, [coverIndex, videoLength]);

  return (
    <div className={PREFIX}>
      <div className={`${PREFIX}__header`}>
-        <Swiper
-          className={`${PREFIX}__header__swiper`}
-          current={coverIndex}
-          onChange={handleChange}
-          circular
-        >
+        <Swiper className={`${PREFIX}__header__swiper`} current={coverIndex} onChange={handleChange} circular>
          {videos.map((cover, index) => (
            <SwiperItem key={cover.coverUrl}>
              <div className={`${PREFIX}__header__swiper-item`}>
@ -181,22 +177,24 @@ export default function ProfileViewFragment(props: IProps) {
            </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>)}
+        {showSwiperButton && (
+          <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>
+        )}
+        {showSwiperButton && (
+          <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}>
            编辑录屏
@ -227,7 +225,11 @@ export default function ProfileViewFragment(props: IProps) {
        {dataGroup.map((data, index: number) => (
          <div className={`${PREFIX}__info-group`} key={data.type}>
            <div className={`${PREFIX}__info-group__header`}>
-              <div className={`${PREFIX}__info-group__header__title`}>{data.title}</div>
+              {index ? (
+                <div className={`${PREFIX}__info-group__header__title`}>{data.title}</div>
+              ) : (
+                <DevDiv className={`${PREFIX}__info-group__header__title`} OnDev={onDev}>{data.title}</DevDiv>
+              )}
              {editable && (
                <div className={`${PREFIX}__info-group__header__edit`} onClick={() => handleEditGroupItem(data.type)}>
                  编辑
--- a/src/pages/group-v2/index.tsx
+++ b/src/pages/group-v2/index.tsx
@ -29,28 +29,28 @@ 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/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/kfcb119c94575e91262' },
-  { title: '【青岛】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfce8d7a68190f6a1d2' },
-  { 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/kfc4189e68429cf07f8' },
  { title: '【郑州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd1c53b7bf8ecdb97' },
+  { 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/kfcf2aebcbf3d46d9cd' },
+  { title: '【武汉】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc047c94f8c709b395' },
+  { title: '【厦门】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc2007a895cb48464b' },
  { title: '【西安】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc34768971b7354220' },
+  { title: '【合肥】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc41c9785cc2035277' },
+  { title: '【南京】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc6dc8d0a9692b70e' },
+  { title: '【青岛】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfce8d7a68190f6a1d2' },
+  { 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/kfc4642f90a6e3528ff' },
+  { 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/kfcb0ea5f197a18b335' },
+  { title: '【天津】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcda46c23dade6f6a3' },
+  { title: '【昆明】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcf2aebcbf3d46d9cd' },
  { title: '【全国】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc60ac7b6420787a8' },
 ];

--- a/src/pages/user-info/index.tsx
+++ b/src/pages/user-info/index.tsx
@ -19,7 +19,7 @@ export default function UserInfo() {
  const userInfo = useUserInfo();
  const nameRef = useRef(userInfo.nickName);

-  const handleChooseAvatar = useCallback(async (e: BaseEventOrig) => {
+  const handleChooseAvatar = useCallback(async () => {
    // const { avatarUrl } = e.detail;
    // log('handleChooseAvatar', avatarUrl, e.detail);
    // const { url } = await uploadVideo(avatarUrl, 'image', commonUploadProgress, 'user-avatar');
@ -32,8 +32,8 @@ export default function UserInfo() {
        log('handleChooseAvatar', tempFiles[0]);
        const { url } = await uploadVideo(tempFiles[0].tempFilePath, 'image', commonUploadProgress, 'user-avatar');
        url && updateUserInfo({ avatarUrl: url });
-      }
-    })
+      },
+    });
  }, []);

  const handleInput = useCallback((e: BaseEventOrig<InputProps.inputValueEventDetail>) => {
@ -55,7 +55,7 @@ export default function UserInfo() {
    <div className={PREFIX}>
      <Cell className={`${PREFIX}__avatar-cell`} title="头像" align="center" isLink>
        <Image
-          mode="aspectFit"
+          mode="aspectFill"
          className={`${PREFIX}__avatar`}
          src={userInfo.avatarUrl || require('@/statics/png/default_avatar.png')}
        />
--- a/src/pages/user/index.tsx
+++ b/src/pages/user/index.tsx
@ -47,7 +47,7 @@ export default function User() {
      <div className={PREFIX}>
        <div className={`${PREFIX}__header`}>
          <Image
-            mode="aspectFit"
+            mode="aspectFill"
            className={`${PREFIX}__header__avatar`}
            src={userInfo.avatarUrl || require('@/statics/png/default_avatar.png')}
          />