消息发送

src/apps/AppDataScreening/userDetail.vue

@@ -1,22 +1,25 @@
 <template>
   <div class="userDetail">
-    <div class="list">
-      <div class="item">
+    <AiTopFixed>
+      <div class="currentLeft-top">
         <div class="left">
-          <img src="./img/user-img.png" alt="">
-        </div>
-        <div class="right">
-          <p>群聊</p>
-          <div>3人 | 群主：张三</div>
+          <AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="getList" :name.sync="areaName" selectRoot>
+            <span class="label" v-if="areaName">{{ areaName }}</span>
+            <span v-else>请选择</span>
+            <u-icon name="arrow-down" color="#666" size="24" style="margin-left: 4px" />
+          </AiAreaPicker>
         </div>
+        <u-search v-model="groupName" :clearabled="true" placeholder="请输入群昵称" :show-action="false" bg-color="#F5F5F5" search-icon-color="#ccc" color="#666" height="58" @search="getList" @clear="handerClear"></u-search>
       </div>
-      <div class="item">
+    </AiTopFixed>
+    <div class="list">
+      <div class="item" v-for="(item, index) in list" :key="index">
         <div class="left">
           <img src="./img/user-img.png" alt="">
         </div>
         <div class="right">
-          <p>群聊群聊群聊群聊群聊群聊群聊群聊群聊群聊群聊群聊群聊群聊群聊群聊</p>
-          <div>3人 | 群主：张三</div>
+          <p>{{item.groupName || '群聊'}}</p>
+          <div>{{item.personCount}}人 | 群主：{{item.ownerName}}</div>
         </div>
       </div>
     </div>
@@ -30,26 +33,58 @@ export default {
   name: "userDetail",
   data() {
     return {
-
+      areaId: '',
+      areaName: '',
+      groupName: '',
+      list: []
     }
   },
   computed: {...mapState(['user'])},
   created() {
+    this.areaId = this.user.areaId
+    this.areaName = this.user.areaName
+    this.getList()
   },
   onShow() {
     document.title = '居民群详情'
   },
   methods: {
-    
+    handerClear() {
+      this.groupName = ''
+      this.getList()
+    },
+    getList() {
+      this.$http.post(`/app/wxcp/wxgroup/allGroupInfo?areaId=${this.areaId}&groupName=${this.groupName}`).then(res => {
+        if (res?.code == 0) {
+          this.list = res.data
+        }
+      })
+    }
   },
 }
 </script>
 
 <style lang="scss" scoped>
 .userDetail {
+  .currentLeft-top {
+    display: flex;
+    align-items: center;
+
+    .left {
+      width: 200px;
+      display: flex;
+      align-items: center;
+
+      img {
+        width: 48px;
+        height: 48px;
+      }
+    }
+  }
   .list{
     background-color: #fff;
     padding-left: 32px;
+    margin-top: 16px;
     .item{
       padding: 34px 32px 34px 0;
       display: flex;