feat: fix CommonPopup nesting use and fix some style problem

2025-08-26 22:24:36 +08:00
parent 924afbb3cf
commit 425ed50dc5
8 changed files with 123 additions and 51 deletions
--- a/src/components/CommonPopup/CommonPopup.tsx
+++ b/src/components/CommonPopup/CommonPopup.tsx
@@ -54,7 +54,7 @@ const CommonPopup: React.FC<CommonPopupProps> = ({
      closeable={false}
      onClose={onClose}
      className={`${styles['common-popup']} ${className ? className : ''}`}
-      style={{ ...style, zIndex: zIndex ? zIndex : undefined }}
+      style={{ zIndex: zIndex ? zIndex : undefined, ...style }}
    >
      {showHeader && (
        <View className={styles['common-popup__header']}>
--- a/src/components/GuideBar/index.scss
+++ b/src/components/GuideBar/index.scss
@@ -20,6 +20,7 @@
    justify-content: space-between;
    align-items: center;
    display: inline-flex;
+    width: 240px;
    height: 60px;
    padding: 8px 6px;
    box-sizing: border-box;
@@ -34,7 +35,7 @@
      display: flex;
      width: 76px;
      height: 48px;
-      padding: 14px 22px;
+      // padding: 14px 0;
      box-sizing: border-box;
      justify-content: center;
      align-items: center;
@@ -50,7 +51,7 @@
      display: flex;
      width: 76px;
      height: 48px;
-      padding: 14px 22px;
+      // padding: 14px 22px;
      box-sizing: border-box;
      justify-content: center;
      align-items: center;
--- a/src/components/UploadCover/index.tsx
+++ b/src/components/UploadCover/index.tsx
@@ -1,7 +1,7 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 import { Image, View, Text } from '@tarojs/components'
 import img from '../../config/images'
-import UploadSourcePopup from './upload-source-popup'
+import UploadSourcePopup, { sourceMap } from './upload-source-popup'
 import UploadFromWx from './upload-from-wx'
 import { CommonPopup } from '../'

@@ -58,6 +58,9 @@ export default function UploadCover(props: UploadCoverProps) {
  } = props

  const [visible, setVisible] = useState(false)
+  const uploadSourcePopupRef = useRef<{
+    show: (sourceType: sourceType, maxCount: number) => void
+  }>(null)

  const onAdd = useCallback((images: CoverImageValue[]) => {
    // FIXME: prev is not latest value
@@ -86,6 +89,7 @@ export default function UploadCover(props: UploadCoverProps) {
        round
        position="bottom"
        hideFooter
+        zIndex={1000}
      >
        <View className="upload-source-popup-container" style={{ height: source.length * 56 + 52 + 'px' }}>
          {
@@ -96,7 +100,9 @@ export default function UploadCover(props: UploadCoverProps) {
                    item === 'album' ? (
                      <UploadFromWx onAdd={onWxAdd} maxCount={maxCount - value.length} />
                    ) : (
-                      <UploadSourcePopup sourceType={item} onAdd={onAdd} maxCount={maxCount - value.length} />
+                      <View className="upload-source-popup-item-text" onClick={() => uploadSourcePopupRef.current?.show(item, maxCount - value.length)}>
+                        <Text>{sourceMap.get(item)}</Text>
+                      </View>
                    )
                  }
                </View>
@@ -105,6 +111,7 @@ export default function UploadCover(props: UploadCoverProps) {
          }
        </View>
      </CommonPopup>
+      <UploadSourcePopup ref={uploadSourcePopupRef} onAdd={onAdd} />
      <div className={`upload-cover-root ${value.length === 0 && align === 'center' ? 'upload-cover-act-center' : ''}`}>
        {value.length < maxCount && (
          <div className="upload-cover-act" onClick={() => setVisible(true)}>
--- a/src/components/UploadCover/upload-source-popup.tsx
+++ b/src/components/UploadCover/upload-source-popup.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react'
 import { Image, View, Text, ScrollView, Button } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import img from '../../config/images'
@@ -17,12 +17,10 @@ type ImageItem = {
 }

 interface UploadImageProps {
-  sourceType: SourceType
  onAdd: (images: ImageItem[]) => void
-  maxCount: number
 }

-const sourceMap = new Map<SourceType, string>([
+export const sourceMap = new Map<SourceType, string>([
  ['history', '历史图库'],
  ['preset', '预设图库']
 ])
@@ -31,13 +29,13 @@ const checkImageSelected = (images: ImageItem[], image: ImageItem) => {
  return images.some(item => item.id === image.id)
 }

-export default function UploadImage(props: UploadImageProps) {
+export default forwardRef(function UploadImage(props: UploadImageProps, ref) {
  const {
-    sourceType = 'history',
    onAdd = () => void 0,
-    maxCount = 9,
  } = props
  const [visible, setVisible] = useState(false)
+  const [sourceType, setSourceType] = useState<SourceType>('history')
+  const [maxCount, setMaxCount] = useState(9)
  const [images, setImages] = useState<ImageItem[]>([])
  const [selectedImages, setSelectedImages] = useState<ImageItem[]>([])

@@ -54,36 +52,50 @@ export default function UploadImage(props: UploadImageProps) {
    }
  }

-  useEffect(() => {
-    if (visible) {
-      publishService.getPictures({
-        pageOption: {
-          page: 1,
-          pageSize: 100,
-        },
-        seachOption: {
-          tag: '',
-          resource_type: 'image',
-          dateRange: [],
-        },
-      }).then(res => {
-        if (res.success) {
-          setImages(res.data.data.rows.map(item => ({
-            id: Date.now().toString(),
-            url: item.thumbnail_url,
-          })))
-        } else {
-          // TODO: 显示错误信息
-          Taro.showToast({
-            title: res.message,
-            icon: 'none'
-          })
-        }
-      })
-    } else {
-      setSelectedImages([])
+  useImperativeHandle(ref, () => ({
+    show: (sourceType: SourceType, maxCount: number) => {
+      setVisible(true)
+      setSourceType(sourceType)
+      setMaxCount(maxCount)
+      fetchImages()
    }
-  }, [visible])
+  }))
+
+  function fetchImages() {
+    publishService.getPictures({
+      pageOption: {
+        page: 1,
+        pageSize: 100,
+      },
+      seachOption: {
+        tag: '',
+        resource_type: 'image',
+        dateRange: [],
+      },
+    }).then(res => {
+      if (res.success) {
+        let start = 0
+        setImages(res.data.data.rows.map(item => ({
+          id: (Date.now() + start++).toString(),
+          url: item.thumbnail_url,
+        })))
+      } else {
+        // TODO: 显示错误信息
+        Taro.showToast({
+          title: res.message,
+          icon: 'none'
+        })
+      }
+    })
+  }
+
+  function onClose() {
+    setVisible(false)
+    setSelectedImages([])
+    setImages([])
+    setSourceType('history')
+    setMaxCount(9)
+  }

  const handleConfirm = () => {
    if (selectedImages.length > 0) {
@@ -103,10 +115,11 @@ export default function UploadImage(props: UploadImageProps) {
    <>
      <CommonPopup
        visible={visible}
-        onClose={() => setVisible(false)}
+        onClose={onClose}
        round
        hideFooter
        position='bottom'
+        zIndex={1001}
      >
        <View className="upload-popup">
          <View className="upload-popup-title">{sourceMap.get(sourceType)}</View>
@@ -154,8 +167,7 @@ export default function UploadImage(props: UploadImageProps) {
          )}
        </View>
      </CommonPopup>
-      <View className="upload-source-popup-text" onClick={() => setVisible(true)}>{sourceMap.get(sourceType)}选取</View>
+      {/* <View className="upload-source-popup-text" onClick={() => setVisible(true)}>{sourceMap.get(sourceType)}选取</View> */}
    </>
  );
-};
-
+});
--- a/src/pages/detail/index.scss
+++ b/src/pages/detail/index.scss
@@ -124,6 +124,7 @@
      &-tags {
        display: flex;
        align-items: center;
+        flex-wrap: wrap;
        gap: 6px;

        &-tag {
@@ -546,6 +547,7 @@

        &-scroll {
          flex: 0 0 auto;
+          width: calc(100% - 116px);

          &-content {
            display: flex;
@@ -814,7 +816,7 @@
              border-radius: 20px;
              border: 1px solid rgba(33, 178, 0, 0.20);
              background: rgba(255, 255, 255, 0.16);
-              padding: 12px 15px;
+              padding: 12px 0 12px 15px;
              box-sizing: border-box;

              &-title {
--- a/src/pages/detail/index.tsx
+++ b/src/pages/detail/index.tsx
@@ -414,7 +414,7 @@ function Index() {
            </View>
            {/* participants list */}
            <ScrollView className='participants-list-scroll' scrollX>
-              <View className='participants-list-scroll-content' style={{ width: `${(participants.length + 1) * 108 + (participants.length) * 8 - 30}px` }}>
+              <View className='participants-list-scroll-content' style={{ width: `${participants.length * 103 + (participants.length - 1) * 8}px` }}>
                {participants.map((participant) => (
                  <View key={participant.id} className='participants-list-item'>
                    {/* <Avatar className='participants-list-item-avatar' src={participant.user.avatar_url} /> */}
@@ -509,7 +509,7 @@ function Index() {
                      <Avatar className='recommend-games-list-item-addon-avatar' src={game.avatar} />
                      <View className='recommend-games-list-item-addon-message'>
                        <View className='recommend-games-list-item-addon-message-applications'>
-                          <Text>报名人数 {game.checkedApplications} / {game.applications}</Text>
+                          <Text>报名人数 {game.checkedApplications}/{game.applications}</Text>
                        </View>
                        <View className='recommend-games-list-item-addon-message-level-requirements'>
                          <Text>{game.levelRequirements}</Text>
--- a/src/pages/login/index/index.tsx
+++ b/src/pages/login/index/index.tsx
@@ -110,7 +110,7 @@ const LoginPage: React.FC = () => {
      <View className="background_image">
        <Image
          className="bg_img"
-          src={require('../../../static/login/login_bg.png')}
+          src="http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/2e00dea1-8723-42fe-ae42-84fe38e9ac3f.png"
          mode="aspectFill"
        />
        <View className="bg_overlay"></View>
@@ -229,7 +229,7 @@ const LoginPage: React.FC = () => {
              {agree_terms ? '已同意' : '同意并继续'}
            </Button>

-        
+
          </View>
        </View>
      )}