feat: 完成文字涂色卡功能

miniprogram/pages/index/index.less

@@ -24,7 +24,7 @@ page {
     .wrapper-title {
         font-size: 32rpx;
         color: #141414;
-        margin-bottom: 30rpx;
+        margin-bottom: 24rpx;
         font-weight: bold;
         text-align: center;
     }
@@ -34,13 +34,23 @@ page {
     }
 
     .word-card-box {
-        margin-top: 30rpx;
+        padding: 34rpx 0;
+
+        .word-list-empty {
+            text-align: center;
+            font-size: 28rpx;
+            color: #999;
+        }
 
         .word-card-list {
             display: flex;
             flex-direction: row;
             justify-content: space-between;
             margin-bottom: 24rpx;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
         }
     }
 
@@ -66,9 +76,7 @@ page {
 
 
 .canvas-wrapper {
-    margin-top: 20rpx;
     width: 100%;
-    // border: 1rpx solid #141414;
     background-color: #fff;
     box-sizing: border-box;
 }

miniprogram/pages/index/index.ts

@@ -49,7 +49,9 @@ Page({
 
                     this.boxHeight = boxHeight;
                     this.boxWidth = boxWidth;
-                    this.initCanvas(boxWidth, boxHeight);
+                    setTimeout(() => {
+                        this.initCanvas(boxWidth, boxHeight);
+                    }, 500);
                 }
             })
             .exec();
@@ -176,7 +178,6 @@ Page({
 
     /** 下载打印 */
     exportToPrint() {
-        console.log('this.canvas:', this.canvas);
         if (this.canvas && this.data.cardList.length > 0) {
             wx.canvasToTempFilePath({
                 canvas: this.canvas,
@@ -259,7 +260,7 @@ Page({
     // 随机生成
     refreshCardList() {
         // 获取前4个分类的所有文字
-        const allWords = WORDS.slice(0, 4).reduce((acc, category) => {
+        const allWords = WORDS.slice(0, 2).reduce((acc, category) => {
             return acc.concat(category.words);
         }, [] as string[]);
 
@@ -286,7 +287,6 @@ Page({
             color: selectedColors[index],
             word
         }));
-        console.log('cardList:', cardList);
         this.drawCanvas(cardList);
     },
     openSelectWordPopup() {
@@ -303,7 +303,6 @@ Page({
 
     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) => ({

miniprogram/pages/index/index.wxml

@@ -12,24 +12,31 @@
         </view>
 
         <view class="word-card-box">
-            <block
-                wx:for="{{cardList}}"
-                wx:for-item="item"
-                wx:for-index="index">
-                <view class="word-card-list" wx:if="{{index % 2 === 0}}">
-                    <word-card
-                        key="{{index}}"
-                        word="{{item.word}}"
-                        color="{{item.color}}"
-                        bind:onDelete="deleteWordCard"
-                        bind:onColorTap="onColorTap" />
-                    <word-card
-                        wx:if="{{cardList[index + 1]}}"
-                        key="{{index + 1}}"
-                        word="{{cardList[index + 1].word}}"
-                        color="{{cardList[index + 1].color}}"
-                        bind:onDelete="deleteWordCard"
-                        bind:onColorTap="onColorTap" />
+            <block wx:if="{{cardList.length > 0}}">
+                <block
+                    wx:for="{{cardList}}"
+                    wx:for-item="item"
+                    wx:for-index="index">
+                    <view class="word-card-list" wx:if="{{index % 2 === 0}}">
+                        <word-card
+                            key="{{index}}"
+                            word="{{item.word}}"
+                            color="{{item.color}}"
+                            bind:onDelete="deleteWordCard"
+                            bind:onColorTap="onColorTap" />
+                        <word-card
+                            wx:if="{{cardList[index + 1]}}"
+                            key="{{index + 1}}"
+                            word="{{cardList[index + 1].word}}"
+                            color="{{cardList[index + 1].color}}"
+                            bind:onDelete="deleteWordCard"
+                            bind:onColorTap="onColorTap" />
+                    </view>
+                </block>
+            </block>
+            <block wx:if="{{!cardList.length}}">
+                <view class="word-list-empty">
+                    请选择或输入文字，生成涂鸦卡
                 </view>
             </block>
         </view>
@@ -53,16 +60,14 @@
             </toy-button>
         </view>
     </view>
-    <view
-        id="previewWrapper"
-        class="wrapper {{cardList.length > 0 ? '' : 'hidden'}}">
+    <view id="previewWrapper" class="wrapper">
         <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>