feat:完成颜色选择器和button组件

miniprogram/pages/index/index.ts

@@ -10,6 +10,10 @@ Page({
 
     data: {
         cardList: [] as Array<{ color: string; word: string }>,
+        showColorPopup: false,
+        currentKey: 0,
+        currentColor: '',
+        WATER_COLORS: WATER_COLORS,
     },
 
     onReady() {
@@ -126,7 +130,7 @@ Page({
     /** 下载打印 */
     exportToPrint() {
         console.log('this.canvas:', this.canvas);
-        if (this.canvas) {
+        if (this.canvas && this.data.cardList.length > 0) {
             wx.canvasToTempFilePath({
                 canvas: this.canvas,
                 fileType: 'png',
@@ -150,4 +154,34 @@ Page({
             return;
         }
     },
+
+    onColorTap(e: WechatMiniprogram.CustomEvent) {
+        const { key, word, color } = e.detail;
+        console.log('onColorTap key:', key, 'word:', word, 'color:', color);
+        this.setData({
+            showColorPopup: true,
+            currentKey: key,
+            currentColor: color,
+        });
+        // const { cardList } = this.data;
+        // const updatedCardList = cardList.map((item, index) =>
+        //     index === key ? { ...item, color } : item,
+        // );
+        // this.setData({ cardList: updatedCardList });
+        // wx.showToast({
+        //     title: `已更改 "${word}" 的颜色`,
+        //     icon: 'none',
+        //     duration: 2000,
+        // });
+        // // this.renderCanvas();
+        // this.textDrawService?.draw(updatedCardList);
+    },
+
+    onCloseColorPopup() {
+        this.setData({
+            showColorPopup: false,
+            currentKey: 0,
+            currentColor: '',
+        });
+    },
 });