feat: 生产 shape

miniprogram/components/shape-picker/shape-picker.ts

@@ -10,13 +10,9 @@ Component({
             type: Boolean,
             value: false,
         },
-        selectedShape: {
-            type: String,
-            value: '',
-        },
-        currentShapeKey: {
-            type: String,
-            value: '',
+        singleMode: {
+            type: Boolean,
+            value: false,
         },
     },
     /**
@@ -24,7 +20,7 @@ Component({
      */
     data: {
         shapes: [] as (ShapeCard & { svgDataUrl: string })[],
-        selectedShapes: [] as string[], // 多选模式下选中的形状数组
+        totalSelected: 0,
     },
     lifetimes: {
         attached() {
@@ -37,7 +33,6 @@ Component({
                     svgDataUrl: svgDataUri
                 };
             });
-            console.log('shapesWithDataUrl---:', shapesWithDataUrl);
             this.setData({
                 shapes: shapesWithDataUrl
             });
@@ -53,28 +48,26 @@ Component({
 
         onSelectShape(e: WechatMiniprogram.TouchEvent) {
             const { index } = e.currentTarget.dataset;
-            const { currentShapeKey, shapes } = this.data;
-
-            if (currentShapeKey) {
+            const { singleMode, shapes } = this.data;
+            let newShapes = [];
 
+            if (singleMode) {
                 // 单选模式：currentShapeKey 不为空时，只能选中一个形状
-                this.setData({
-                    shapes: shapes.map((item, i) => ({
-                        ...item,
-                        checked: i === index
-                    }))
-                });
+                newShapes = shapes.map((item, i) => ({
+                    ...item,
+                    checked: i === index
+                }));
             } else {
                 // 多选模式：currentShapeKey 为空时，支持多选，最多可选6个
-                let shapesCopy = this.data.shapes.map(item => ({ ...item }));
+                newShapes = this.data.shapes.map(item => ({ ...item }));
                 const targetIndex = index;
 
                 // 统计当前已选中的数量
-                const checkedCount = shapesCopy.filter(item => item.checked).length;
+                const checkedCount = newShapes.filter(item => item.checked).length;
 
-                if (shapesCopy[targetIndex].checked) {
+                if (newShapes[targetIndex].checked) {
                     // 如果已选中，则取消选中
-                    shapesCopy[targetIndex].checked = false;
+                    newShapes[targetIndex].checked = false;
                 } else {
                     if (checkedCount >= 6) {
                         wx.showToast({
@@ -85,38 +78,20 @@ Component({
                         return;
                     }
                     // 如果未选中，则添加到选中列表
-                    shapesCopy[targetIndex].checked = true;
+                    newShapes[targetIndex].checked = true;
                 }
-
-                this.setData({
-                    shapes: shapesCopy,
-                });
             }
+            const totalSelected = newShapes.filter(item => item.checked).length;
+            this.setData({
+                shapes: newShapes,
+                totalSelected,
+            });
         },
 
         onChange() {
-            const { selectedShape, selectedShapes, currentShapeKey } = this.data;
-
-            if (currentShapeKey) {
-                // 单选模式：返回单个选中的形状
-                this.triggerEvent('onChange', { shape: selectedShape, currentShapeKey });
-            } else {
-                // 多选模式：返回选中的形状数组
-                this.triggerEvent('onChange', { shapes: selectedShapes });
-            }
-        },
-
-        // 获取选中状态的 CSS 类名
-        getShapeClass(shapeId: string): string {
-            const { currentShapeKey, selectedShapes } = this.data;
-
-            if (currentShapeKey) {
-                // 单选模式：检查是否等于当前选中的形状
-                return shapeId === currentShapeKey ? 'selected single-mode' : '';
-            } else {
-                // 多选模式：检查是否在选中列表中
-                return selectedShapes.includes(shapeId) ? 'selected multi-mode' : '';
-            }
+            const { shapes } = this.data;
+            const selectedShapes = shapes.filter(item => item.checked);
+            this.triggerEvent('onChange', { shapes: selectedShapes, singleMode: this.data.singleMode });
         },
     },
 });