发布球局

2025-08-23 15:14:37 +08:00
parent e5176f4f5f
commit fb150617c6
34 changed files with 679 additions and 602 deletions
--- a/src/components/ImageUpload/ImageUpload.tsx
+++ b/src/components/ImageUpload/ImageUpload.tsx
@@ -0,0 +1,91 @@
+import React, { useMemo, useCallback } from 'react'
+import { View, Text, Image, ScrollView } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import './ImageUpload.scss'
+
+export interface CoverImage {
+  id: string
+  url: string
+  tempFilePath?: string
+}
+
+interface ImageUploadProps {
+  images: CoverImage[]
+  onChange: (images: CoverImage[]) => void
+  maxCount?: number
+}
+
+const ImageUpload: React.FC<ImageUploadProps> = ({ 
+  images, 
+  onChange, 
+  maxCount = 9 
+}) => {
+  // 添加封面图片
+  const handleAddCoverImage = useCallback(() => {
+    if (images.length >= maxCount) {
+      Taro.showToast({
+        title: `最多只能上传${maxCount}张图片`,
+        icon: 'none'
+      })
+      return
+    }
+
+    Taro.chooseImage({
+      count: maxCount - images.length,
+      sizeType: ['compressed'],
+      sourceType: ['album', 'camera'],
+      success: (res) => {
+        const newImages = res.tempFilePaths.map((path, index) => ({
+          id: Date.now() + index + '',
+          url: path,
+          tempFilePath: path
+        }))
+        onChange([...images, ...newImages])
+      },
+      fail: (err) => {
+        console.error('选择图片失败:', err)
+      }
+    })
+  }, [images.length, maxCount, onChange])
+
+  // 删除封面图片
+  const handleDeleteCoverImage = useCallback((id: string) => {
+    onChange(images.filter(img => img.id !== id))
+  }, [images, onChange])
+
+  // 判断是否需要居中显示（总项目数不超过3个时居中）
+  const shouldCenter = useMemo(() => (images.length + 1) <= 3, [images.length])
+
+  return (
+    <View className='cover-image-upload'>
+      <ScrollView className='cover-scroll' scrollX>
+        <View className={`cover-list ${shouldCenter ? 'center' : ''}`}>
+          {/* 添加按钮 */}
+          <View className='cover-item add-btn' onClick={handleAddCoverImage}>
+            <View className='add-icon'>+</View>
+            <Text className='add-text'>添加活动封面</Text>
+          </View>
+          
+          {/* 已选择的图片 */}
+          {images.map((image) => (
+            <View key={image.id} className='cover-item image-item'>
+              <Image 
+                className='cover-image' 
+                src={image.url} 
+                mode='aspectFill'
+              />
+              <View 
+                className='delete-btn'
+                onClick={() => handleDeleteCoverImage(image.id)}
+              >
+                ×
+              </View>
+            </View>
+          ))}
+        </View>
+      </ScrollView>
+    </View>
+  )
+}
+
+export default ImageUpload