标签

packageA/tags/index.js

@@ -1,105 +1,108 @@
 const _Http = getApp().globalData.http;
 
 Page({
-  data: {
-    ownerid: 0,
-    ownertable: 0,
-    list: [], //全部标签
-    copy: [], //全部标签拷贝 用来模糊搜索
-    forbiddens: [], //相斥禁用
-    actives: [], //选中数组
-  },
-  onLoad(options) {
-    if (options.ownertable) {
-      _Http.basic({
-        "id": 20220929085401,
-        "content": {
-          "ownertable": options.ownertable,
-          "ownerid": options.ownerid
+    data: {
+        ownerid: 0,
+        ownertable: 0,
+        list: [], //全部标签
+        copy: [], //全部标签拷贝 用来模糊搜索
+        forbiddens: [], //相斥禁用
+        actives: [], //选中数组
+    },
+    onLoad(options) {
+        if (options.ownertable) {
+            _Http.basic({
+                "id": 20220929085401,
+                "content": {
+                    "ownertable": options.ownertable,
+                    "ownerid": options.ownerid
+                }
+            }).then(res => {
+                let forbiddens = [];
+                res.data.datatag.filter(value => {
+                    let item = res.data.option.find(v => value == v.tag);
+                    if (!item || item.mutextag.length == 0) return;
+                    forbiddens = forbiddens.concat(item.mutextag)
+                })
+                this.setData({
+                    list: res.data.option, //全部标签
+                    copy: res.data.option, //全部标签拷贝 用来模糊搜索
+                    actives: res.data.datatag, //选中数组
+                    forbiddens
+                })
+            })
+            this.setData({
+                ...options
+            })
         }
-      }).then(res => {
-        let forbiddens = [];
-        res.data.datatag.filter(value => {
-          let item = res.data.option.find(v => value == v.tag);
-          if (!item || item.mutextag.length == 0) return;
-          forbiddens = forbiddens.concat(item.mutextag)
+    },
+    //选中标签
+    onChange(e) {
+        const {
+            tag,
+            mutextag
+        } = e.currentTarget.dataset.item;
+        if (!tag || e.currentTarget.dataset.disabled) return;
+        let actives = this.data.actives,
+            forbiddens = this.data.forbiddens;
+        if (actives.some(v => v == tag)) {
+            //已经选中
+            actives = actives.filter(v => v != tag)
+            if (mutextag.length != 0) mutextag.forEach(v => {
+                let index = forbiddens.findIndex(value => value == v);
+                if (index != -1) forbiddens.splice(index, 1);
+            })
+        } else {
+            //未选中
+            actives.push(tag)
+            if (mutextag.length != 0) forbiddens = forbiddens.concat(mutextag);
+        }
+        this.setData({
+            actives,
+            forbiddens
         })
+    },
+    /* 搜索 */
+    onInput({
+        detail
+    }) {
         this.setData({
-          list: res.data.option, //全部标签
-          copy: res.data.option, //全部标签拷贝 用来模糊搜索
-          actives: res.data.datatag, //选中数组
-          forbiddens
+            list: detail == '' ? this.data.copy : this.data.copy.filter(v => v.tag.includes(detail))
         })
-      })
-      this.setData({
-        ...options
-      })
-    }
-  },
-  //选中标签
-  onChange(e) {
-    const {
-      tag,
-      mutextag
-    } = e.target.dataset.item;
-    if (!tag || e.target.dataset.disabled) return;
-    let actives = this.data.actives,
-      forbiddens = this.data.forbiddens;
-    if (actives.some(v => v == tag)) {
-      //已经选中
-      actives = actives.filter(v => v != tag)
-      if (mutextag.length != 0) mutextag.forEach(v => {
-        let index = forbiddens.findIndex(value => value == v);
-        if (index != -1) forbiddens.splice(index, 1);
-      })
-    } else {
-      //未选中
-      actives.push(tag)
-      if (mutextag.length != 0) forbiddens = forbiddens.concat(mutextag);
-    }
-    this.setData({
-      actives,
-      forbiddens
-    })
-  },
-  /* 搜索 */
-  onInput({
-    detail
-  }) {
-    this.setData({
-      list: detail == '' ? this.data.copy : this.data.copy.filter(v => v.tag.includes(detail))
-    })
-  },
-  /* 提交 */
-  submit() {
-    if (this.data.actives.length == 0) return;
-    _Http.basic({
-      "id": 20220929090901,
-      "content": {
-        "ownertable": this.data.ownertable,
-        "ownerid": this.data.ownerid,
-        "datatag": this.data.actives
-      }
-    }).then(res => {
-      console.log("提交标签", res)
-      if (res.msg != '成功') return wx.showToast({
-        title: res.data,
-        icon: "none"
-      });
-
-      wx.showToast({
-        title: '保存成功!',
-        icon: "none"
-      });
+        //用来搜索的时候初始化选中项
+        setTimeout(() => {
+            this.setData({
+                actives: this.data.actives
+            })
+        }, 100)
+    },
+    /* 提交 */
+    submit() {
+        if (this.data.actives.length == 0) return;
+        _Http.basic({
+            "id": 20220929090901,
+            "content": {
+                "ownertable": this.data.ownertable,
+                "ownerid": this.data.ownerid,
+                "datatag": this.data.actives
+            }
+        }).then(res => {
+            console.log("提交标签", res)
+            if (res.msg != '成功') return wx.showToast({
+                title: res.data,
+                icon: "none"
+            });
 
-      setTimeout(() => {
-        let pages = getCurrentPages();
-        pages[pages.length - 2].getTags();
+            wx.showToast({
+                title: '保存成功!',
+                icon: "none"
+            });
 
-        wx.navigateBack();
-      }, 300)
-
-
-    })
-  },
+            setTimeout(() => {
+                let pages = getCurrentPages();
+                pages[pages.length - 2].getTags();
+                wx.navigateBack();
+            }, 300)
+        })
+    },
 })

packageA/tags/index.scss

@@ -10,29 +10,8 @@
         color: #333333;
     }
 
-    .tags {
-        display: flex;
-        flex-wrap: wrap;
-
-        .basic {
-            height: 72rpx;
-            line-height: 72rpx;
-            background: #FFFFFF;
-            border-radius: 36rpx;
-            border: 1px solid #CCCCCC;
-            padding: 0 20rpx;
-            margin-top: 20rpx;
-            margin-right: 20rpx;
-            font-size: 28rpx;
-            font-family: PingFang SC-Regular, PingFang SC;
-            color: #666666;
-        }
-
-        .active {
-            background: #FFEFD9;
-            border: 1px solid #FA8C16;
-            color: #FA8C16;
-        }
+    .value-class {
+        flex: none !important;
     }
 }
 

packageA/tags/index.wxml

@@ -2,10 +2,21 @@
 
 <view class="content" style="margin-top: 20rpx;">
     <view class="title">请选择添加标签</view>
-    <view class="tags" bindtap="onChange">
-        <van-button custom-class='basic {{active.que(item.tag,actives)?"active":""}}' disabled='{{active.que(item.tag,forbiddens)}}' wx:for="{{list}}" wx:key="item.sys_systemtagdetailid" data-item="{{item}}" data-disabled="{{active.que(item.tag,forbiddens)}}">{{item.tag}}</van-button>
-    </view>
+    <van-checkbox-group value="{{ actives }}">
+        <van-cell-group>
+            <van-cell wx:for="{{ list }}" wx:key="item.sys_systemtagdetailid" title="{{ item.tag }}" label="{{item.helptips}}" value-class="value-class" clickable bind:click="onChange" data-item="{{item}}" data-disabled='{{active.que(item.tag,forbiddens)}}'>
+                <van-checkbox disabled='{{active.que(item.tag,forbiddens)}}' name="{{ item.tag }}" />
+            </van-cell>
+        </van-cell-group>
+    </van-checkbox-group>
 </view>
+
+<!-- bind:change="onChange" -->
+
+<!--  -->
+
+<!-- catch:tap="noop" -->
+
 <My_empty wx:if="{{list.length==0}}" />
 
 <view style="height: 130rpx;" />