feat:选择文字

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

@@ -37,9 +37,9 @@
 
         .word-list {
             display: grid;
-            grid-template-columns: repeat(7, 72rpx);
-            grid-template-rows: repeat(20, 72rpx);
-            gap: 24rpx;
+            grid-template-columns: repeat(6, 72rpx);
+            grid-template-rows: repeat(1, 72rpx);
+            gap: 40rpx;
             justify-content: center;
             // box-shadow: 0 0 -10rpx rgba(0, 0, 0, 0.2);
             // align-items: flex-start;
@@ -49,12 +49,18 @@
                 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);
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 font-size: 28rpx;
                 color: #141414;
+
+                &.selected {
+                    background: rgb(147, 211, 51);
+                    color: #ffffff;
+                    box-shadow: 0px 2px 4px rgba(147, 211, 51, 0.15);
+                }
             }
         }
 
@@ -76,4 +82,10 @@
         }
     }
 
+    .btn-area {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 96rpx;
+    }
+
 }

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

@@ -14,20 +14,20 @@ Component({
             type: Number,
             value: 0,
         },
+        selectedWords: {
+            type: Array,
+            value: [],
+        },
     },
     /**
      * 组件的初始数据
      */
     data: {
         wordList: WORDS,
-        selectedWords: [],
     },
     lifetimes: {
         ready() {
-            // setTimeout(() => {
-            //     console.log('111');
-            //     this.selectComponent('#tabs').resize();
-            // }, 1000);
+            console.log('selectedWords', this.data.selectedWords);
         },
     },
     /**
@@ -38,8 +38,37 @@ Component({
             this.triggerEvent('onClose');
         },
 
+        onChange() {
+            this.triggerEvent('onChange', { selectedWords: this.data.selectedWords });
+        },
+
         onTabChange(e: WechatMiniprogram.CustomEvent) {
             this.setData({ currentTab: e.detail });
         },
+
+        onWordClick(e: WechatMiniprogram.TouchEvent) {
+            const { word } = e.currentTarget.dataset;
+            const { selectedWords } = this.data;
+            let newSelectedWords = selectedWords as string[];
+
+            // 如果是已选中的文字,直接取消选中
+            if (newSelectedWords.includes(word)) {
+                newSelectedWords = newSelectedWords.filter((item) => item !== word);
+            } else {
+                // 如果是未选中的文字,先判断是否已选满6个
+                if (newSelectedWords.length >= 6) {
+                    wx.showToast({
+                        title: '最多选择6个字',
+                        icon: 'none',
+                    });
+                    return;
+                }
+                newSelectedWords = [...newSelectedWords, word];
+            }
+
+            this.setData({
+                selectedWords: newSelectedWords,
+            });
+        },
     },
 });

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

@@ -1,9 +1,13 @@
+<wxs module="wxs" src="./word-picker.wxs"></wxs>
+
 <van-popup
     show="{{ show }}"
     bind:close="onClose"
     round
+    close-on-click-overlay="{{false}}"
+    safe-area-inset-bottom="{{true}}"
     position="bottom"
-    custom-style="height: 65%"
+    custom-style="height: 70%"
     custom-class="word-picker">
     <view class="word-picker-title">请选择文字</view>
     <van-tabs
@@ -21,14 +25,14 @@
         bind:change="onTabChange">
         <van-tab
             wx:for="{{wordList}}"
-            wx:for-index="wordIndex"
-            wx:key="wordIndex"
-            title="{{wordList[wordIndex].categoryName}}">
+            wx:for-index="categoryIndex"
+            wx:key="categoryIndex"
+            title="{{wordList[categoryIndex].categoryName}}">
             <view class="word-list-wrapper">
                 <view class="word-list">
                     <view
-                        class="word-item"
-                        wx:for="{{wordList[wordIndex].words}}"
+                        class="word-item {{wxs.isSelected(selectedWords, item) ? 'selected' : ''}}"
+                        wx:for="{{wordList[categoryIndex].words}}"
                         wx:key="index"
                         data-word="{{item}}"
                         bind:tap="onWordClick">
@@ -46,7 +50,19 @@
             class="selected-word-text"
             wx:for="{{selectedWords}}"
             wx:key="index"
-            >{{item}}</text
+            >{{item}}{{index !== selectedWords.length - 1 ? '、' : ''}}</text
         >
     </view>
+    <view class="btn-area">
+        <toy-button
+            type="primary"
+            bind:click="onChange"
+            width="420rpx"
+            disabled="{{selectedWords.length <= 0}}">
+            （已选{{selectedWords.length}}个） 确定
+        </toy-button>
+        <toy-button type="white" bind:click="onClose" width="220rpx">
+            取消
+        </toy-button>
+    </view>
 </van-popup>

miniprogram/components/word-picker/word-picker.wxs

@@ -0,0 +1,8 @@
+module.exports = {
+    isSelected: function (selectedWords, word) {
+        if (selectedWords && selectedWords.length > 0) {
+            return selectedWords.indexOf(word) !== -1;
+        }
+        return false;
+    },
+};