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

import { SHAPES, ShapeCard } from '../../constants/shapes';

Component({
    options: {},
    /**
     * 组件的属性列表
     */
    properties: {
        show: {
            type: Boolean,
            value: false,
        },
        selectedShapeList: {    // 已选中的shapeList，用于初始化
            type: Array,
            value: [],
        },
        selectedShapeIndex: {
            type: Number,
            value: -1,
        },
    },
    /**
     * 组件的初始数据
     */
    data: {
        shapes: [] as (ShapeCard & { svgDataUrl: string })[],
        singleMode: false,
        totalSelected: 0,
    },
    lifetimes: {
        // attached() {
        //     // 处理 SVG 数据，转换为 data URL
        //     const shapesWithDataUrl = SHAPES.map(shape => {
        //         const completeSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">${shape.svg}</svg>`;
        //         const svgDataUri = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(completeSvg)}`;
        //         return {
        //             ...shape,
        //             svgDataUrl: svgDataUri
        //         };
        //     });
        //     this.setData({
        //         shapes: shapesWithDataUrl
        //     });
        // }
    },
    observers: {
        // selectedShapeIndex(index: number) {
        //     const { shapes } = this.data;
        //     const newShapes = shapes.map((item, i) => ({
        //         ...item,
        //         checked: i === index
        //     }));
        //     this.setData({
        //         singleMode: index !== -1,
        //         totalSelected: index !== -1 ? 1 : 0,
        //         shapes: newShapes
        //     });
        // },
        'selectedShapeList, selectedShapeIndex': function (selectedShapeList: ShapeCard[], index: number) {
            let newShapes = [];

            let checkedIds: string[] = selectedShapeList.map(item => item.id);
            if (index !== -1) { // 单选模式
                let singleShapeId = selectedShapeList[index].id;

                newShapes = SHAPES.map(shape => {
                    const completeSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100"  height="100">${shape.svg}</svg>`;
                    const svgDataUri = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(completeSvg)}`;

                    return {
                        ...shape,
                        svgDataUrl: svgDataUri,
                        checked: singleShapeId === shape.id,
                        checkedDisabled: singleShapeId !== shape.id && checkedIds.includes(shape.id)
                    }
                });
            } else { // 多选模式
                newShapes = SHAPES.map(shape => {
                    const completeSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100"  height="100">${shape.svg}</svg>`;
                    const svgDataUri = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(completeSvg)}`;

                    return {
                        ...shape,
                        svgDataUrl: svgDataUri,
                        checked: checkedIds.includes(shape.id)
                    }
                });
            }

            this.setData({
                shapes: newShapes,
                totalSelected: newShapes.filter(item => item.checked).length,
                singleMode: index !== -1,
            });
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        onClose() {
            this.triggerEvent('onClose');
        },

        onSelectShape(e: WechatMiniprogram.TouchEvent) {
            const { index } = e.currentTarget.dataset;
            const { singleMode, shapes } = this.data;
            let newShapes = [];

            const selectedShape = shapes[index];
            if (selectedShape.checkedDisabled) {
                wx.showToast({
                    title: '当前形状已选中，请勿重复选中',
                    icon: 'none',
                    duration: 1500
                });
                return;
            }

            if (singleMode) {
                // 单选模式：currentShapeKey 不为空时，只能选中一个形状
                newShapes = shapes.map((item, i) => ({
                    ...item,
                    checked: i === index
                }));
            } else {
                // 多选模式：currentShapeKey 为空时，支持多选，最多可选6个
                newShapes = shapes.map(item => ({ ...item }));
                const targetIndex = index;

                // 统计当前已选中的数量
                const checkedCount = newShapes.filter(item => item.checked).length;

                if (newShapes[targetIndex].checked) {
                    // 如果已选中，则取消选中
                    newShapes[targetIndex].checked = false;
                } else {
                    if (checkedCount >= 6) {
                        wx.showToast({
                            title: '最多可选择6个形状',
                            icon: 'none',
                            duration: 1500
                        });
                        return;
                    }
                    // 如果未选中，则添加到选中列表
                    newShapes[targetIndex].checked = true;
                }
            }
            const totalSelected = newShapes.filter(item => item.checked).length;
            this.setData({
                shapes: newShapes,
                totalSelected,
            });
        },

        onChange() {
            const { shapes, selectedShapeIndex, singleMode } = this.data;
            const selectedShapes = shapes.filter(item => item.checked);

            this.triggerEvent('onChange', {
                shapes: selectedShapes,
                singleMode,
                selectedShapeIndex
            });
        },
    },
});