feat: upload cover not over yet

src/components/UploadCover/index.tsx

@@ -1,22 +1,128 @@
-import React, { useState } from 'react'
-import { Popup } from "@nutui/nutui-react-taro";
+import React, { useCallback, useState } from 'react'
+import { Image, View, Text } from '@tarojs/components'
+import img from '../../config/images'
+import UploadSourcePopup from './upload-source-popup'
+import UploadFromWx from './upload-from-wx'
+import { CommonPopup } from '../'
 
 import './index.scss'
+import { uploadFileResponseData } from '@/services/uploadFiles'
 
-export default function UploadCover(props) {
-  const { value = [], onChange = () => {} } = props
+export type sourceType = 'album' | 'history' | 'preset'
+
+export type source = sourceType[]
+
+export type CoverImageValue = {
+  id: string
+  url: string
+  tempFilePath?: string
+}
+
+export interface UploadCoverProps {
+  value: CoverImageValue[]
+  onChange: (value: CoverImageValue[] | ((prev: CoverImageValue[]) => CoverImageValue[])
+) => void
+  source: source
+  maxCount: number
+}
+
+// const values = [
+//   'http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/1a35ebbf-2361-44da-b338-7608561d0b31.png',
+//   'http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/cf5a82ba-90af-4138-a1b3-9119adcde9e0.png',
+//   'http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/49d7cdf0-b03c-4a0f-91c6-e7778080cfcd.png'
+// ]
+
+const mergeCoverImages = (value: CoverImageValue[], images: CoverImageValue[]) => {
+  console.log(value, images, 11111)
+  // 根据id来更新url, 如果id不存在，则添加到value中
+  const newImages = images
+  const updatedValue = value.map(item => {
+    const index = images.findIndex(image => image.id === item.id)
+    if (index !== -1) {
+      newImages.splice(index, 1)
+      return { ...item, url: images[index].url }
+    }
+    return item
+  })
+  return [...updatedValue, ...newImages]
+}
+
+export default function UploadCover(props: UploadCoverProps) {
+  const {
+    value = [],
+    onChange = () => void 0,
+    source = ['album', 'history', 'preset'],
+    maxCount = 9,
+  } = props
   const [visible, setVisible] = useState(false)
 
+  const onAdd = useCallback((images: CoverImageValue[]) => {
+    onChange(prev => mergeCoverImages(prev, images))
+    setVisible(false)
+  }, [value])
+
+  const onWxAdd = useCallback((images: CoverImageValue[], onFileUploaded: Promise<{ id: string, data: uploadFileResponseData }[]>) => {
+    onAdd(images)
+    onFileUploaded.then(res => {
+      console.log(res, 11111)
+      onAdd(res.map(item => ({
+        id: item.id,
+        url: item.data.file_path,
+      })))
+    })
+  }, [onAdd])
+  const onDelete = (image: CoverImageValue) => {
+    onChange(value.filter(item => item.id !== image.id))
+  }
+
   return (
     <>
-      <Popup
+      <CommonPopup
         visible={visible}
         onClose={() => setVisible(false)}
         round
-        closeable
+        position="bottom"
+        hideFooter
       >
-      <div className="upload-cover-popup" onClick={}>
-        <div className="upload-cover-popup-title">上传封面</div>
+        <View className="upload-source-popup-container" style={{ height: source.length * 56 + 52 + 'px' }}>
+          {
+            source.map((item) => {
+              return (
+                <View className="upload-source-popup-item" key={item}>
+                  {
+                    item === 'album' ? (
+                      <UploadFromWx onAdd={onWxAdd} maxCount={maxCount - value.length} />
+                    ) : (
+                      <UploadSourcePopup sourceType={item} onAdd={onAdd} maxCount={maxCount - value.length} />
+                    )
+                  }
+                </View>
+              )
+            })
+          }
+        </View>
+      </CommonPopup>
+      <div className={`upload-cover-root ${value.length === 0 ? 'upload-cover-act-center' : ''}`}>
+        {value.length < maxCount && (
+          <div className="upload-cover-act" onClick={() => setVisible(true)}>
+            <Image className='upload-cover-act-icon' src={img.ICON_ADD} />
+            <div className="upload-cover-text">添加活动封面</div>
+          </div>
+        )}
+        <div className={`cover-image-list-container ${value.length === maxCount ? 'full' : ''}`}>
+          <div className="cover-image-list">
+            {
+              value.map((item) => {
+                return (
+                  <View className="cover-image-item" key={item.id}>
+                    <Image className="cover-image-item-image" src={item.url} />
+                    <Image className="cover-image-item-delete" src={img.ICON_REMOVE} onClick={() => onDelete(item)} />
+                  </View>
+                )
+              })
+            }
+          </div>
+        </div>
       </div>
     </>
   );