消息发送

src/project/police/AppMessageNotification/SelectUser.vue

@@ -3,32 +3,28 @@
 
     <div class="select-content">
       <div class="area-flex">
-        <p class="title">地区</p>
-        <AiAreaPicker v-model="areaId" :name.sync="areaName">
-          <div flex>
-            <AiMore v-model="areaName" icon="arrow-down"/>
-          </div>
+        <p class="title"><span class="tips">*</span>地区</p>
+        <AiAreaPicker v-model="areaList" multiple>
+          <span class="label" v-if="areaList.length">已选择</span>
+          <span v-else style="color:#999;">请选择</span>
+          <u-icon name="arrow-down" color="#666" size="24"/>
         </AiAreaPicker>
       </div>
       <div class="type-content">
-        <p class="title">选择标签</p>
+        <p class="title"><span class="tips">*</span>选择标签</p>
         <div class="type-list">
-          <p>重点人群</p>
-          <div class="list">
-            <div class="item active">残疾人</div>
-            <div class="item">务工人员</div>
-          </div>
-          <p>重点人群</p>
-          <div class="list">
-            <div class="item active">残疾人</div>
-            <div class="item">务工人员</div>
+          <div v-for="(item, index) in tagList" :key="index">
+            <p>{{item.name}}</p>
+            <div class="list">
+              <div class="item" :class="items.isCheck ? 'active' : ''" v-for="(items, indexs) in item.tagList" :key="indexs" @click="typeClick(index, indexs)">{{items.name}}</div>
+            </div>
           </div>
         </div>
       </div>
     </div>
     <div class="bg-144"></div>
     <div class="footer">
-      <div class="confirm">确定</div>
+      <div class="confirm" @click="confirm">确定</div>
     </div>
   </section>
 </template>
@@ -41,19 +37,65 @@ export default {
     return {
       value: '',
       areaId: '',
-      areaName: ''
+      areaName: '',
+      areaList: [],
+      tagList: [],
+      tagIdList: []
     }
   },
   computed: {...mapState(['user'])},
   methods: {
-   
+    getTagList() {
+      this.$http.post("/app/wxcp/wxcorptag/listAll?size=100").then(res => {
+        if (res?.code == 0) {
+          res.data.records.map((item) => {
+            item.tagList.map((items) => {
+              items.isCheck = false
+              if(this.tagIdList.includes(items.id)) {
+                items.isCheck = true
+              }
+            })
+          })
+          this.tagList = res.data.records
+        }
+      })
+    },
+    typeClick(index, indexs) {
+      this.tagList[index].tagList[indexs].isCheck = !this.tagList[index].tagList[indexs].isCheck
+    },
+    confirm() {
+      if(!this.areaList.length) {
+        return this.$u.toast('请选择地区')
+      }
+      this.tagIdList = []
+      this.tagList.map((item) => {
+        item.tagList.map((items) => {
+          if(items.isCheck) {
+            this.tagIdList.push(items.id)
+          }
+        })
+      })
+      if(!this.tagIdList.length) {
+        return this.$u.toast('请选择标签')
+      }
+      uni.$emit('selectTag', {
+        areaIdList: this.areaList,
+        tagIdList: this.tagIdList
+      })
+      uni.navigateBack({})
+    }
   },
   onShow() {
     document.title = '人员选择'
   },
-  created() {
+  onLoad(option) {
     this.areaId = this.user.areaId
     this.areaName = this.user.areaName
+    if(option.areaList) {
+      this.areaList = option.areaList.split(',')
+      this.tagIdList =  option.tagIdList.split(',')
+    }
+    this.getTagList()
   },
 }
 </script>
@@ -64,15 +106,30 @@ export default {
     .area-flex{
       display: flex;
       justify-content: space-between;
-      padding: 34px 32px;
+      padding: 34px 32px 0;
       line-height: 44px;
+    }
+    .area-content{
+      padding: 16px 32px 32px;
       border-bottom: 1px solid #ddd;
+      .area-item{
+        display: inline-block;
+        margin-right: 16px;
+        .u-icon{
+          margin-left: 4px;
+        }
+      }
     }
     .title{
       line-height: 44px;
       margin-bottom: 16px;
       font-size: 32px;
       color: #666;
+      .tips{
+        font-size: 34px;
+        color: #f46;
+        vertical-align: middle;
+      }
     }
     .local-icon{
       width: 32px;