居民列表

src/apps/AppResidentFile/AppResidentFile.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="AppResidentFile">
-    <u-tabbar v-model="currentTabBar" :list="list" @change="changeTab" style="height: 0"></u-tabbar>
+    <u-tabbar v-model="currentTabBar" :list="lists" @change="changeTab" style="height: 0"></u-tabbar>
 
     <div class="currentTabBar0" v-if="currentTabBar == 0">
       <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
@@ -79,7 +79,7 @@
         </div>
 
         <div class="datas" v-if="data.length > 0">
-          <div class="datass" v-for="(item, i) in data" :key="i" @click="toDetailCard(item)">
+          <div class="datass" v-for="(item, iindex) in data" :key="iindex" @click="toDetailCard(item)">
             <div class="left">
               <img :src="item.photo" alt="" v-if="item.photo" />
               <img src="./components/img/4.png" alt="" v-else />
@@ -100,7 +100,33 @@
       </div>
     </div>
 
-    <div class="currentTabBar2" v-if="currentTabBar == 2">2</div>
+    <div class="currentTabBar2" v-if="currentTabBar == 2">
+      <AiTopFixed>
+        <u-search placeholder="请输入群名、群主名" :show-action="false" search-icon-color="#ccc" v-model="search.name" @search=";(page.current = 1), getList()" />
+        <AiCell>
+          <b slot="label" class="title">共<i v-html="page.total || 0" />个居民群</b>
+        </AiCell>
+      </AiTopFixed>
+
+      <div class="mainPane">
+        <AiCell v-for="(item, i) in list" :key="i" @click.native="toGroupList(item)">
+          <template #label>
+            <AiImage :src="item.avatar" preview />
+          </template>
+          <div class="card column start" flex>
+            <div flex class="groupName">
+              <b>{{ item.name || '群聊' }}</b>
+              <div class="personCount" v-if="item.personCount">({{ item.personCount }})</div>
+            </div>
+            <div class="owner" v-html="`群主：${item.ownerName}`" />
+            <div flex class="trends">
+              <div flex v-html="`今日入群：<em>${item.increase || 0}</em>`" />
+              <div flex v-html="`今日退群：<p>${item.decrease || 0}</p>`" />
+            </div>
+          </div>
+        </AiCell>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -115,7 +141,7 @@ export default {
   props: {},
   data() {
     return {
-      list: [
+      lists: [
         {
           iconPath: 'home',
           selectedIconPath: 'home-fill',
@@ -162,6 +188,10 @@ export default {
       current: 1,
       keyword: '',
       data: [],
+
+      page: { current: 1, size: 10, total: 0 },
+      search: { name: '' },
+      list: [],
     }
   },
   computed: {
@@ -176,6 +206,39 @@ export default {
     this.Echarts1 = echarts.init(document.getElementById('echarts1'))
   },
   methods: {
+    getList2() {
+      this.$http
+        .post('/app/wxcp/wxgroup/list', null, {
+          params: { ...this.page, ...this.search },
+        })
+        .then((res) => {
+          if (res?.data) {
+            let meta = res.data.records?.map((e) => ({
+              ...e,
+              avatar: e?.avatar || this.$cdn + 'groupAvatar.png',
+            }))
+            if (this.page.current > 1) {
+              this.list = [...this.list, ...meta]
+            } else this.list = meta
+            this.page.total = res.data.total
+          }
+        })
+    },
+
+    reachBottom() {
+      if (this.page.total > this.list.length) {
+        this.page.current++
+        this.getList2()
+      }
+    },
+
+    toGroupList(item) {
+      console.log(1, item.id)
+      uni.navigateTo({
+        url: `./GroupList?id=${item.id}`,
+      })
+    },
+
     getList() {
       this.$http
         .post('/app/appresident/list', null, {
@@ -325,6 +388,9 @@ export default {
       if (this.currentTabBar == 1) {
         this.getList()
       }
+      if (this.currentTabBar == 2) {
+        this.getList2()
+      }
     },
 
     change(index) {
@@ -479,5 +545,107 @@ uni-page-body {
       }
     }
   }
+
+  .currentTabBar2 {
+    ::v-deep .AiTopFixed {
+      b.title {
+        color: #333;
+        font-size: 32px;
+
+        & > i {
+          color: #267fce;
+          font-style: normal;
+          margin: 0 4px;
+        }
+      }
+    }
+
+    ::v-deep .mainPane {
+      background: #fff;
+      padding: 0 32px;
+
+      .AiCell {
+        align-items: center;
+        height: 230px;
+        justify-content: flex-start;
+
+        .content {
+          flex: 1;
+          min-width: 0;
+          height: 100%;
+          max-width: unset;
+          border-bottom: 1px solid rgba(221, 221, 221, 1);
+        }
+      }
+
+      .card {
+        height: 100%;
+        justify-content: center;
+
+        b {
+          font-size: 36px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .tag {
+          justify-content: center;
+          background: #f3f4f7;
+          border-radius: 4px;
+          padding: 0 16px;
+          font-size: 28px;
+          font-weight: 400;
+          color: #333;
+          margin-left: 16px;
+          height: 56px;
+        }
+
+        .groupName {
+          width: 100%;
+          text-align: left;
+        }
+
+        .owner,
+        .trends {
+          margin-top: 8px;
+          font-size: 28px;
+          font-weight: 400;
+          color: #999;
+        }
+
+        .personCount {
+          flex-shrink: 0;
+          font-size: 30px;
+          font-weight: 400;
+          color: #666;
+        }
+
+        .trends {
+          * + * {
+            margin-left: 24px;
+          }
+
+          em {
+            font-style: normal;
+            color: #5fba95;
+          }
+
+          p {
+            color: #f09535;
+          }
+        }
+      }
+
+      .AiImage {
+        margin-right: 24px;
+
+        image {
+          width: 112px;
+          height: 112px;
+        }
+      }
+    }
+  }
 }
 </style>