feat: fix CommonPopup nesting use and fix some style problem

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']}>

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;

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)}>

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> */}
     </>
   );
-};
-
+});