选择标签

src/project/saas/AppCooperationPropaganda/tagsList.vue

@@ -3,11 +3,12 @@
     <div class="tags-group">
       <div class="tags-list" v-for="items in subTags" :key="items.id">
         <div class="tag_title">{{ items.name }}</div>
+        <!--   -->
         <div class="item"
-             v-for="(item, index) in items.tagList"
+          v-for="(item, index) in items.tagList"
-             :class="[checked.includes(item.id) ? 'active' : '']"
+          :class="[checked.includes(item.id) ? 'active' : '']"
-             :key="index"
+          :key="index"
-             @click="onClick(item.id)">
+          @click="onClick(item.id)">
           {{ item.name }}
         </div>
       </div>
@@ -23,7 +24,54 @@ export default {
   name: "tagsList",
   data() {
     return {
-      subTags: []
+      subTags: [
+        {
+          id: "1",
+          name: "第一组",
+          tagList: [
+            {
+              id: "1.1",
+              name: "介绍的",
+            },
+            {
+              id: "1.2",
+              name: "介绍的啊塑胶地板",
+            },
+            {
+              id: "1.3",
+              name: "介绍的",
+            },
+            {
+              id: "1.4",
+              name: "介绍的啊啊啊啊啊啊啊啊",
+            },
+            {
+              id: "1.5",
+              name: "介绍的啊啊啊",
+            },
+            {
+              id: "1.6",
+              name: "介绍的红红火火恍恍惚惚或或或或或或或或或或或或红红火火恍恍惚惚或或或或或或或",
+            },
+            {
+              id: "1.7",
+              name: "介绍的红红火火恍恍惚惚或或或或或或或或或或或或红红火火恍恍惚惚或或或或或或或",
+            },
+          ]
+			  },
+        {
+          id: "2",
+          name: "第二组",
+          tagList: [
+            {
+              id: "2.2",
+              name: "的范德萨发",
+            }
+          ]
+			  }
+      ],
+      checked: [],
+      list: []
     }
   },
   methods: {
@@ -40,6 +88,28 @@ export default {
         }
       })
     },
+    onClick(id) {
+      const index = this.checked.indexOf(id)
+
+      if (index === -1) {
+        this.checked.push(id)
+      } else {
+        this.checked.splice(index, 1)
+      }
+    },
+    submit() {
+      if (!this.checked.length) {
+        return this.$u.toast('请选择标签')
+      }
+
+      const list = this.list.filter(v => {
+        return this.checked.includes(v.id)
+      })
+
+      uni.$emit('onChecked', list)
+
+      uni.navigateBack()
+    }
   },
   onShow() {
     this.getTags()
@@ -52,22 +122,27 @@ export default {
 
 <style lang="scss" scoped>
 .tagsList {
+  padding-bottom: 120px;
+  box-sizing: border-box;
+
   .tags-group {
     margin-bottom: 16px;
-    padding: 0 32px 16px;
-    background: #fff;
-
-    & > h2 {
-      height: 108px;
-      line-height: 108px;
-      color: #333333;
-      font-size: 32px;
-    }
-
     .tags-list {
       display: flex;
       flex-wrap: wrap;
       line-height: 1;
+      padding: 0 32px;
+      box-sizing: border-box;
+      background: #FFF;
+      margin-bottom: 16px;
+
+      .tag_title {
+        width: 100%;
+        height: 108px;
+        line-height: 108px;
+        color: #333333;
+        font-size: 32px;
+      }
 
       .item {
         height: 64px;
@@ -77,7 +152,7 @@ export default {
         color: #333333;
         font-size: 28px;
         background: #F3F4F7;
-        border-radius: 4px;
+        border-radius: 8px;
         max-width: 100%;
         text-overflow: ellipsis;
         overflow: hidden;
@@ -89,23 +164,27 @@ export default {
         }
       }
     }
-    .btn {
+  }
-      position: fixed;
+  .btn {
-      bottom: 0;
+    position: fixed;
-      left: 0;
+    bottom: 0;
-      z-index: 999;
+    left: 0;
-      width: 100%;
+    background: #FFF;
-      height: 112px;
+    display: flex;
-      line-height: 112px;
+    width: 100%;
-      background: #3975C6;
+    height: 128px;
-      font-size: 32px;
+    padding: 24px 32px;
-      font-family: PingFangSC-Medium, PingFang SC;
+    box-sizing: border-box;
-      font-weight: 500;
-      color: #FFF;
 
-      div {
+    div {
-        text-align: center;
+      flex: 1;
-      }
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      border-radius: 8px;
+      border: 2px solid #CCCCCC;
+      background: #1365DD;
+      color: #FFF;
     }
   }
 }