feat: 选择文字

miniprogram/components/word-picker/word-picker.less

@@ -1,5 +1,6 @@
 .word-picker {
     padding: 28rpx;
+    background-color: #ffffff;
 
     .word-picker-title {
         font-size: 32rpx;
@@ -9,4 +10,70 @@
         margin-bottom: 28rpx;
     }
 
+    .nav-class {
+        // background-color: red;
+        // width: 890rpx;
+    }
+
+    .tab-class {
+        // width: 220rpx;
+        // flex-basis: auto !important;
+        // display: inline-block;
+    }
+
+    .tab-active-class {
+        color: #93d333;
+    }
+
+    .wrap-class {
+        margin-bottom: 28rpx;
+        // background-color: blue;
+    }
+
+    .word-list-wrapper {
+        padding: 28rpx 0;
+        overflow-y: auto;
+        height: 500rpx;
+
+        .word-list {
+            display: grid;
+            grid-template-columns: repeat(7, 72rpx);
+            grid-template-rows: repeat(20, 72rpx);
+            gap: 24rpx;
+            justify-content: center;
+            // box-shadow: 0 0 -10rpx rgba(0, 0, 0, 0.2);
+            // align-items: flex-start;
+
+            .word-item {
+                width: 72rpx;
+                height: 72rpx;
+                border-radius: 16rpx;
+                background: rgba(240, 240, 240, 1);
+                box-shadow: 3.9px 3.9px 5.2px rgba(0, 0, 0, 0.15);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 28rpx;
+                color: #141414;
+            }
+        }
+
+        .word-item-empty {
+            height: 28rpx;
+            width: 100%;
+        }
+    }
+
+
+    .selected-words {
+        padding: 28rpx;
+        font-size: 28rpx;
+        color: #141414;
+
+        .selected-words-text {
+            font-weight: bold;
+            color: #93d333;
+        }
+    }
+
 }

miniprogram/components/word-picker/word-picker.ts

@@ -23,7 +23,12 @@ Component({
         selectedWords: [],
     },
     lifetimes: {
-        attached() { },
+        ready() {
+            // setTimeout(() => {
+            //     console.log('111');
+            //     this.selectComponent('#tabs').resize();
+            // }, 1000);
+        },
     },
     /**
      * 组件的方法列表

miniprogram/components/word-picker/word-picker.wxml

@@ -3,15 +3,20 @@
     bind:close="onClose"
     round
     position="bottom"
-    custom-style="height: 60%"
+    custom-style="height: 65%"
     custom-class="word-picker">
     <view class="word-picker-title">请选择文字</view>
     <van-tabs
+        id="tabs"
         animated
-        color="#ff1a34"
+        color="#93d333"
+        ellipsis="{{false}}"
+        line-width="90rpx"
         nav-class="nav-class"
+        tab-class="tab-class"
         wrap-class="wrap-class"
-        swipeable
+        tab-active-class="tab-active-class"
+        swipeable="{{true}}"
         active="{{currentTab}}"
         bind:change="onTabChange">
         <van-tab
@@ -19,20 +24,24 @@
             wx:for-index="wordIndex"
             wx:key="wordIndex"
             title="{{wordList[wordIndex].categoryName}}">
-            <view class="word-list">
+            <view class="word-list-wrapper">
-                <view
+                <view class="word-list">
-                    class="word-item"
+                    <view
-                    wx:for="{{wordList[wordIndex].words}}"
+                        class="word-item"
-                    wx:key="index"
+                        wx:for="{{wordList[wordIndex].words}}"
-                    bind:tap="onWordClick">
+                        wx:key="index"
-                    <text class="word-item-text">{{item}}</text>
+                        data-word="{{item}}"
-                    <!-- <text class="word-item-icon icon-success"></text> -->
+                        bind:tap="onWordClick">
+                        <text class="word-item-text">{{item}}</text>
+                        <!-- <text class="word-item-icon icon-success"></text> -->
+                    </view>
                 </view>
+                <view class="word-item-empty"></view>
             </view>
         </van-tab>
     </van-tabs>
     <view class="selected-words">
-        <text class="selected-words-title">已选文字：</text>
+        已选文字：
         <text
             class="selected-word-text"
             wx:for="{{selectedWords}}"

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

miniprogram/ui/button/button.less

@@ -42,7 +42,7 @@ wx-button:not([size=mini]) {
     }
 
     &--green {
-        background: rgb(147, 211, 51);
+        background: #93d333;
         box-shadow: 0px 10rpx 4rpx rgba(121, 185, 21, 1);
 
         &.disabled {