feat: 完成文字涂色卡功能

miniprogram/components/word-card/word-card.less

@@ -13,7 +13,7 @@
         height: 60rpx;
         border-radius: 50%;
         background-color: #ff0000;
-        margin-left: 20rpx;
+        margin-left: 24rpx;
         border: 1rpx solid #141414;
 
         position: relative;
@@ -34,7 +34,7 @@
     }
 
     .word-box {
-        margin: 0 4rpx 0 24rpx;
+        margin: 0 16rpx 0 36rpx;
         display: flex;
         justify-content: center;
         align-items: center;

miniprogram/components/word-input/word-input.json

@@ -2,6 +2,7 @@
     "component": true,
     "styleIsolation": "apply-shared",
     "usingComponents": {
-        "van-icon": "@vant/weapp/icon/index"
+        "van-icon": "@vant/weapp/icon/index",
+        "toy-button": "/ui/button/button"
     }
 }

miniprogram/components/word-input/word-input.less

@@ -19,4 +19,22 @@
         font-size: 28rpx;
         line-height: 92rpx;
     }
+
+    .btn-word-add {
+        box-sizing: border-box;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: 72rpx;
+        padding: 0 24rpx;
+        background: rgba(255, 215, 25, 1);
+        border-radius: 20rpx;
+        font-size: 28rpx;
+        color: #fff;
+        margin-right: 10rpx;
+
+        &.active {
+            background-color: rgba(255, 215, 25, 0.8);
+        }
+    }
 }

miniprogram/components/word-input/word-input.ts

@@ -18,20 +18,28 @@ Component({
     /**
      * 组件的初始数据
      */
-    data: {},
+    data: {
+    },
     lifetimes: {
         attached() {
-            (this as any).words = '';
+            (this as any).value = '';
         },
     },
     /**
      * 组件的方法列表
      */
     methods: {
-        onConfirm(e: WechatMiniprogram.Input) {
+        onInput(e: WechatMiniprogram.Input) {
             let { value } = e.detail;
-            // (this as any).words = value;
-            value = value.replace(' ', '');
+            value = value.replace(/\s/g, '');
+            if (value.length > 0) {
+                (this as any).value = value;
+            }
+        },
+
+        onConfirm() {
+            const value = (this as any).value;
+
             if (value.length > 0) {
                 this.triggerEvent('onConfirm', { value });
             }

miniprogram/components/word-input/word-input.wxml

@@ -1,3 +1,5 @@
+<wxs module="wxs" src="./word-input.wxs"></wxs>
+
 <view
     class="word-input-container"
     style="{{width ? 'width:' + width + ';' : ''}}">
@@ -10,5 +12,13 @@
         class="word-input"
         type="text"
         placeholder="{{placeholder}}"
+        bindinput="onInput"
         bindconfirm="onConfirm" />
+    <view
+        class="btn-word-add"
+        bind:tap="onConfirm"
+        bind:touchstart="{{wxs.touchStart}}"
+        bind:touchend="{{wxs.touchEnd}}">
+        添加
+    </view>
 </view>

miniprogram/components/word-input/word-input.wxs

@@ -0,0 +1,23 @@
+module.exports = {
+    touchStart: function (event, ownerInstance) {
+        var instance = event.instance;
+        var dataSet = instance.getDataset();
+        var disabled = dataSet.disabled;
+        var loading = dataSet.loading;
+
+        if (instance && !disabled && !loading) {
+            instance.addClass('active');
+        }
+    },
+
+    touchEnd: function (event, ownerInstance) {
+        var instance = event.instance;
+        var dataSet = instance.getDataset();
+        var disabled = dataSet.disabled;
+        var loading = dataSet.loading;
+
+        if (instance && !disabled && !loading) {
+            instance.removeClass('active');
+        }
+    },
+};

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

@@ -86,6 +86,7 @@
         display: flex;
         justify-content: space-between;
         margin-bottom: 96rpx;
+        padding: 0 28rpx;
     }
 
 }

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

@@ -27,7 +27,6 @@ Component({
     },
     lifetimes: {
         ready() {
-            console.log('selectedWords', this.data.selectedWords);
         },
     },
     /**
@@ -38,6 +37,12 @@ Component({
             this.triggerEvent('onClose');
         },
 
+        onClear() {
+            this.setData({
+                selectedWords: [],
+            });
+        },
+
         onChange() {
             this.triggerEvent('onChange', { selectedWords: this.data.selectedWords });
         },

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

@@ -4,13 +4,15 @@
     show="{{ show }}"
     bind:close="onClose"
     round
-    close-on-click-overlay="{{false}}"
+    closeable="{{true}}"
+    close-on-click-overlay="{{true}}"
     safe-area-inset-bottom="{{true}}"
     position="bottom"
     custom-style="height: 70%"
     custom-class="word-picker">
     <view class="word-picker-title">请选择文字</view>
     <van-tabs
+        wx:if="{{show}}"
         id="tabs"
         animated
         color="#93d333"
@@ -54,15 +56,16 @@
         >
     </view>
     <view class="btn-area">
-        <toy-button
-            type="primary"
-            bind:click="onChange"
-            width="420rpx"
-            disabled="{{selectedWords.length <= 0}}">
+        <toy-button type="primary" bind:click="onChange" width="400rpx">
             （已选{{selectedWords.length}}个） 确定
         </toy-button>
-        <toy-button type="white" bind:click="onClose" width="220rpx">
-            取消
+        <toy-button
+            type="white"
+            bind:click="onClear"
+            width="210rpx"
+            icon="clear"
+            icon-class-prefix="toy-icon">
+            清空
         </toy-button>
     </view>
 </van-popup>