feat:形状

miniprogram/pages/shape/index.json

@@ -9,6 +9,7 @@
         "van-icon": "@vant/weapp/icon/index",
         "van-popup": "@vant/weapp/popup/index",
         "toy-button": "../../ui/button/button",
-        "shape-card": "../../components/shape-card/shape-card"
+        "shape-card": "../../components/shape-card/shape-card",
+        "shape-picker": "../../components/shape-picker/shape-picker"
     }
 }

miniprogram/pages/shape/index.ts

@@ -1,11 +1,99 @@
-import { SHAPES } from '../../constants/shapes';
+import { SHAPES, ShapeCard } from '../../constants/shapes';
+import { WATER_COLORS, PAPER_SIZE } from '../../constants/colors';
+
+
 
 Page({
     data: {
-        shapeList: SHAPES,
+        shapeList: [] as ShapeCard[],
+        showSelectShapePopup: false,
+        currentShapeKey: '',
     },
 
     onLoad() {
 
     },
+
+    openSelectShapePopup(e: any) {
+        const { key } = e.detail;
+        this.setData({
+            showSelectShapePopup: true,
+            currentShapeKey: key
+        });
+    },
+
+    closeSelectShapePopup() {
+        this.setData({
+            showSelectShapePopup: false,
+            currentShapeKey: ''
+        });
+    },
+
+    onChangeShape(e: any) {
+        const { shape, currentShapeKey, shapes } = e.detail;
+        console.log('shape', shape);
+        console.log('shapes', shapes);
+        if (currentShapeKey) {
+            this.setData({
+                showSelectShapePopup: false,
+                currentShapeKey: '',
+                shapeList: this.data.shapeList.map(item => {
+                    if (item.id === currentShapeKey) {
+                        return { ...item, fillColor: item.fillColor };
+                    }
+                    return item;
+                })
+            });
+        } else {
+            // 随机从 WATER_COLORS.basic12 中获取不重复的颜色
+            const colorList = WATER_COLORS.basic12.map(item => item.hex);
+            const colorsCopy = [...colorList];
+            for (let i = colorsCopy.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [colorsCopy[i], colorsCopy[j]] = [colorsCopy[j], colorsCopy[i]];
+            }
+            const selectedColors = colorsCopy.slice(0, shapes.length);
+
+            this.setData({
+                showSelectShapePopup: false,
+                currentShapeKey: '',
+                shapeList: shapes.map((item: ShapeCard, idx: number) => ({
+                    ...item,
+                    fillColor: selectedColors[idx] || item.fillColor
+                }))
+            });
+        }
+    },
+    /**
+     * 随机生成6个图形
+     */
+    refreshShapeCard() {
+        // 随机取6个图形
+        const shapesCopy = [...SHAPES];
+        for (let i = shapesCopy.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [shapesCopy[i], shapesCopy[j]] = [shapesCopy[j], shapesCopy[i]];
+        }
+        const selectedShapes = shapesCopy.slice(0, 6);
+
+        // 随机取6个颜色
+        const colorList = WATER_COLORS.basic12.map(item => item.hex);
+        const colorsCopy = [...colorList];
+        for (let i = colorsCopy.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [colorsCopy[i], colorsCopy[j]] = [colorsCopy[j], colorsCopy[i]];
+        }
+        const selectedColors = colorsCopy.slice(0, 6);
+
+        // 分配颜色到图形
+        const shapeList = selectedShapes.map((shape, idx) => ({
+            ...shape,
+            fillColor: selectedColors[idx]
+        }));
+
+        // 更新数据
+        this.setData({
+            shapeList
+        });
+    }
 });

miniprogram/pages/shape/index.wxml

@@ -26,9 +26,15 @@
                 wx:key="{{index}}"
                 key="{{index}}"
                 svg="{{ item.svg }}"
-                color="{{ item.color }}"
+                fillColor="{{ item.fillColor }}"
+                bind:onShapeTap="openSelectShapePopup"
                 bind:onDelete="onDelete"
                 bind:onColorTap="onColorTap" />
         </view>
     </view>
+    <shape-picker
+        show="{{showSelectShapePopup}}"
+        currentShapeKey="{{currentShapeKey}}"
+        bind:onClose="closeSelectShapePopup"
+        bind:onChange="onChangeShape" />
 </view>