feat:选择文字

miniprogram/pages/index/index.ts

@@ -16,7 +16,6 @@ Page({
         currentColor: '',
         showIntroductionPopup: false,
         showSelectWordPopup: false, // 选择文字弹窗
-        selectedWords: [] as string[],
     },
 
     onLoad() {
@@ -295,15 +294,23 @@ Page({
             showSelectWordPopup: true,
         });
     },
+
     closeSelectWordPopup() {
         this.setData({
             showSelectWordPopup: false,
         });
     },
-    onSelectWord(e: WechatMiniprogram.CustomEvent) {
-        const { words } = e.detail;
-        this.setData({
-            selectedWords: words,
-        });
+
+    onChangeWord(e: WechatMiniprogram.CustomEvent) {
+        const selectedWords = e.detail.selectedWords as string[];
+        console.log('selectedWords:', selectedWords);
+
+        const colors = [...WATER_COLORS.basic12];
+        const cardList = selectedWords.map((word, index) => ({
+            color: colors[index].hex,
+            word,
+        }));
+        this.setData({ showSelectWordPopup: false });
+        this.drawCanvas(cardList);
     },
 });

miniprogram/pages/index/index.wxml

@@ -44,7 +44,7 @@
             </toy-button>
             <toy-button
                 disabled="{{cardList.length <= 0}}"
-                type="green"
+                type="white"
                 bind:click="clearCardList"
                 width="220rpx"
                 icon="clear"
@@ -73,8 +73,9 @@
         bind:onChange="onChangeColor" />
     <word-picker
         show="{{showSelectWordPopup}}"
+        selectedWords="{{selectedWords}}"
         bind:onClose="closeSelectWordPopup"
-        bind:onSelect="onSelectWord" />
+        bind:onChange="onChangeWord" />
 </view>
 <view class="btn-area">
     <toy-button