feat: upload cover not over yet

2025-08-24 23:48:02 +08:00
parent 97e4bb89d7
commit b14985d8dd
26 changed files with 881 additions and 56 deletions
--- a/src/components/UploadCover/upload-source-popup.tsx
+++ b/src/components/UploadCover/upload-source-popup.tsx
@@ -0,0 +1,161 @@
+import React, { useState, useEffect } from 'react'
+import { Image, View, Text, ScrollView, Button } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import img from '../../config/images'
+import publishService from '../../services/publishService'
+import { CommonPopup } from '../'
+import emptyStatus from '../../static/emptyStatus/publish-empty.png'
+
+import './upload-source-popup.scss'
+
+type SourceType = 'history' | 'preset'
+
+type ImageItem = {
+  id: string
+  url: string
+  tempFilePath?: string
+}
+
+interface UploadImageProps {
+  sourceType: SourceType
+  onAdd: (images: ImageItem[]) => void
+  maxCount: number
+}
+
+const sourceMap = new Map<SourceType, string>([
+  ['history', '历史图库'],
+  ['preset', '预设图库']
+])
+
+const checkImageSelected = (images: ImageItem[], image: ImageItem) => {
+  return images.some(item => item.id === image.id)
+}
+
+export default function UploadImage(props: UploadImageProps) {
+  const {
+    sourceType = 'history',
+    onAdd = () => void 0,
+    maxCount = 9,
+  } = props
+  const [visible, setVisible] = useState(false)
+  const [images, setImages] = useState<ImageItem[]>([])
+  const [selectedImages, setSelectedImages] = useState<ImageItem[]>([])
+
+  const handleImageClick = (image: ImageItem) => {
+    if (checkImageSelected(selectedImages, image)) {
+      setSelectedImages(selectedImages.filter(item => item.id !== image.id))
+    } else if (!outOfMax) {
+      setSelectedImages([...selectedImages, image])
+    } else {
+      Taro.showToast({
+        title: `最多选择${maxCount}张图片`,
+        icon: 'none'
+      })
+    }
+  }
+
+  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([])
+    }
+  }, [visible])
+
+  const handleConfirm = () => {
+    if (selectedImages.length > 0) {
+      onAdd(selectedImages)
+      setVisible(false)
+    } else {
+      Taro.showToast({
+        title: '请选择图片',
+        icon: 'none'
+      })
+    }
+  }
+
+  const outOfMax = selectedImages.length >= maxCount
+
+  return (
+    <>
+      <CommonPopup
+        visible={visible}
+        onClose={() => setVisible(false)}
+        round
+        hideFooter
+        position='bottom'
+      >
+        <View className="upload-popup">
+          <View className="upload-popup-title">{sourceMap.get(sourceType)}</View>
+          {/* TODO: 分页 加载更多 */}
+          {/* TODO: 图片加载失败 */}
+          {/* TODO: 图片加载中 */}
+          <ScrollView
+            scrollY
+            className="upload-popup-scroll-view"
+          >
+            {images.length > 0 ? (
+            <View className="upload-popup-image-list">
+              {images.map(item => {
+                const isSelected = checkImageSelected(selectedImages, item)
+                return (
+                  <View className={`upload-popup-image-item ${outOfMax ? 'disabled' : ''} ${isSelected ? 'selected' : ''}`} onClick={() => handleImageClick(item)}>
+                    <Image className="upload-popup-image-item-image" src={item.url} />
+                    <View className={`upload-popup-image-item-select ${isSelected ? 'selected' : ''}`}>
+                      {isSelected ? (
+                        <Image className="select-image-icon" src={img.ICON_CIRCLE_SELECT_ARROW} />
+                      ) : (
+                        <Image className="select-image-icon" src={img.ICON_CIRCLE_UNSELECT} />
+                      )}
+                    </View>
+                  </View>
+                )
+              })}
+            </View>
+            ) : (
+              <View className="upload-popup-image-list-empty">
+                <Image className="upload-popup-image-list-empty-image" src={emptyStatus} />
+                <Text className="upload-popup-image-list-empty-text">暂无内容</Text>
+              </View>
+            )}
+          </ScrollView>
+          {images.length > 0 ? (
+          <View className="upload-popup-footer">
+            <Button className="upload-popup-footer-cancel" onClick={() => setVisible(false)}>取消</Button>
+            <Button className={`upload-popup-footer-confirm ${selectedImages.length > 0 ? 'active' : ''}`} type='primary' onClick={handleConfirm}>完成</Button>
+          </View>
+          ) : (
+            <View className="upload-popup-footer">
+              <Button className="upload-popup-footer-cancel" onClick={() => setVisible(false)}>取消</Button>
+            </View>
+          )}
+        </View>
+      </CommonPopup>
+      <View className="upload-source-popup-text" onClick={() => setVisible(true)}>{sourceMap.get(sourceType)}选取</View>
+    </>
+  );
+};
+