feat: 涂色识字完善、找字涂色完成

2026-05-09 09:56:16 +08:00
parent b85afde7c0
commit c21ac9e935
27 changed files with 328 additions and 1135 deletions
@@ -0,0 +1,105 @@
+import { WORDS } from '../../core/data/words';
+
+Component({
+    options: {},
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        show: {
+            type: Boolean,
+            value: false,
+        },
+        cardList: {
+            type: Array,
+            value: [],
+        },
+        currentTab: {
+            type: Number,
+            value: 0,
+        },
+        selectedWords: {
+            type: Array,
+            value: [],
+        },
+        max: {
+            type: Number,
+            value: 6,
+        },
+    },
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        wordList: WORDS,
+    },
+    lifetimes: {
+        ready() {
+            // 初始化同步一次 selectedWords，避免首次传入时未触发 observers 的情况
+            const list = (this.data as any).cardList || [];
+            if (Array.isArray(list) && list.length > 0) {
+                const selectedWords = list.map((item: any) => item.word);
+                this.setData({ selectedWords });
+            }
+        },
+    },
+    observers: {
+        cardList(newVal: CardList) {
+            const selectedWords = newVal.map((item) => item.word);
+            this.setData({ selectedWords });
+        },
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        onClose() {
+            this.triggerEvent('onClose');
+        },
+
+        onClear() {
+            this.setData({
+                selectedWords: [],
+            });
+        },
+
+        onChange() {
+            this.triggerEvent('onChange', {
+                selectedWords: this.data.selectedWords,
+            });
+        },
+
+        onTabChange(e: WechatMiniprogram.CustomEvent) {
+            const index =
+                typeof e.detail === 'object' ? e.detail.index : e.detail;
+            this.setData({ currentTab: index });
+        },
+
+        onWordClick(e: WechatMiniprogram.TouchEvent) {
+            const { word } = e.currentTarget.dataset;
+            const { selectedWords, max } = this.data;
+            let newSelectedWords = selectedWords as string[];
+
+            // 如果是已选中的文字,直接取消选中
+            if (newSelectedWords.includes(word)) {
+                newSelectedWords = newSelectedWords.filter(
+                    (item) => item !== word,
+                );
+            } else {
+                // 如果是未选中的文字,先判断是否已选满6个
+                if (newSelectedWords.length >= max) {
+                    wx.showToast({
+                        title: `最多选择 ${max} 个字`,
+                        icon: 'none',
+                    });
+                    return;
+                }
+                newSelectedWords = [...newSelectedWords, word];
+            }
+
+            this.setData({
+                selectedWords: newSelectedWords,
+            });
+        },
+    },
+});