feat:完成生成打印纸的步骤

miniprogram/pages/index/index.wxml

@@ -1,19 +1,47 @@
-<scroll-view class="page-container" scroll-y type="list">
+<view class="page-container">
     <view class="wrapper">
-        <text class="wrapper-title">设置文字和颜色</text>
-        <word-input />
+        <text class="wrapper-title">设置文字和颜色12</text>
+        <word-input bind:onConfirm="onConfirmInput" />
         <view class="word-card-box">
-            <view class="word-card-list">
-                <word-card />
-                <word-card />
-            </view>
-            <view class="word-card-list">
-                <word-card />
-                <word-card />
-            </view>
+            <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" />
+                    <word-card
+                        wx:if="{{cardList[index + 1]}}"
+                        key="{{index + 1}}"
+                        word="{{cardList[index + 1].word}}"
+                        color="{{cardList[index + 1].color}}"
+                        bind:onDelete="deleteWordCard" />
+                </view>
+            </block>
         </view>
     </view>
-    <view class="wrapper">
+    <view
+        id="previewWrapper"
+        class="wrapper {{cardList.length > 0 ? '' : 'hidden'}}">
         <text class="wrapper-title">预览打印效果</text>
+        <view id="canvasWrapper" class="canvas-wrapper">
+            <canvas
+                type="2d"
+                id="canvasContent"
+                class="canvas-content"
+                style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
+        </view>
     </view>
-</scroll-view>
+    <view class="empty"></view>
+</view>
+<view class="btn-area">
+    <button
+        class="btn btn-primary"
+        bindtap="onPrint"
+        wx:if="{{cardList.length > 0}}">
+        打印
+    </button>
+</view>