feat:选择文字

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>