居民标签

src/project/saas/AppResidentDocument/Add.vue

@@ -94,6 +94,16 @@
         </span>
       </div>
     </div>
+    <div class="item">
+      <span class="tips">*</span>
+      <div class="border">
+        <span class="label">居民标签</span>
+        <span class="value" @click="toChooseTags">
+          <span class="color-999">请选择</span>
+          <img src="./components/img/right-icon.png" alt="">
+        </span>
+      </div>
+    </div>
     <div class="item mar-b0">
       <span class="tips"></span>
       <div class="border not-border">
@@ -230,6 +240,11 @@ export default {
       })
 
     },
+
+    toChooseTags () {
+      uni.navigateTo({url: `./Tags`})
+    },
+
     confirmSelect(e) {
       this.form[this.formName] = e[0].value
     },

src/project/saas/AppResidentDocument/Tags.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="tags">
+    <div class="tags-group" v-for="(label, i) in 2" :key="i">
+      <h2>年龄段</h2>
+      <div class="tags-list">
+        <div class="item" v-for="(item, index) in 20" :class="[currIndex === index ? 'active' : '']" :key="index">婴儿</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    appName: '居民标签',
+
+    data () {
+      return {
+        currIndex: 0
+      }
+    },
+
+    onLoad () {
+
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tags {
+    padding: 16px 0;
+
+    * {
+      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;
+
+        .item {
+          height: 64px;
+          line-height: 64px;
+          margin: 0 16px 16px 0;
+          padding: 0 32px;
+          color: #333333;
+          font-size: 28px;
+          background: #F3F4F7;
+          border-radius: 4px;
+
+          &.active {
+            color: #fff;
+            background: #1365DD;
+          }
+        }
+      }
+    }
+  }
+</style>