feat: 选择文字

miniprogram/pages/index/index.json

@@ -11,6 +11,7 @@
         "word-card": "../../components/word-card/word-card",
         "color-picker": "../../components/color-picker/color-picker",
         "introduction-popup": "../../components/introduction-popup/introduction-popup",
-        "toy-button": "../../ui/button/button"
+        "toy-button": "../../ui/button/button",
+        "word-picker": "../../components/word-picker/word-picker"
     }
 }

miniprogram/pages/index/index.less

@@ -12,7 +12,7 @@ page {
     }
 }
 
-.setting-wrapper {
+.wrapper {
     background-color: #ffffff;
     border-radius: 20rpx;
     padding: 24rpx;

miniprogram/pages/index/index.ts

@@ -15,6 +15,8 @@ Page({
         currentKey: 0,
         currentColor: '',
         showIntroductionPopup: false,
+        showSelectWordPopup: false, // 选择文字弹窗
+        selectedWords: [] as string[],
     },
 
     onLoad() {
@@ -287,5 +289,21 @@ Page({
         }));
         console.log('cardList:', cardList);
         this.drawCanvas(cardList);
-    }
+    },
+    openSelectWordPopup() {
+        this.setData({
+            showSelectWordPopup: true,
+        });
+    },
+    closeSelectWordPopup() {
+        this.setData({
+            showSelectWordPopup: false,
+        });
+    },
+    onSelectWord(e: WechatMiniprogram.CustomEvent) {
+        const { words } = e.detail;
+        this.setData({
+            selectedWords: words,
+        });
+    },
 });

miniprogram/pages/index/index.wxml

@@ -1,5 +1,5 @@
 <view class="page-container">
-    <view class="setting-wrapper">
+    <view class="wrapper">
         <text class="wrapper-title">自定义涂鸦卡</text>
         <view class="word-input-box">
             <word-input bind:onConfirm="onConfirmInput" width="420rpx" />
@@ -58,11 +58,11 @@
         class="wrapper {{cardList.length > 0 ? '' : 'hidden'}}">
         <text class="wrapper-title">预览打印效果</text>
         <view id="canvasWrapper" class="canvas-wrapper">
-            <canvas
+            <!-- <canvas
                 type="2d"
                 id="canvasContent"
                 class="canvas-content"
-                style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
+                style="width:{{boxWidth}}px;height:{{boxHeight}}px" /> -->
         </view>
     </view>
     <view class="empty"></view>
@@ -71,6 +71,10 @@
         currentColor="{{currentColor}}"
         bind:onClose="onCloseColorPopup"
         bind:onChange="onChangeColor" />
+    <word-picker
+        show="{{showSelectWordPopup}}"
+        bind:onClose="closeSelectWordPopup"
+        bind:onSelect="onSelectWord" />
 </view>
 <view class="btn-area">
     <toy-button