持续集成分支

library/apps/AppDataScreening/userDetail.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="userDetail">
+    <AiTopFixed>
+      <div class="currentLeft-top">
+        <div class="left">
+          <AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="getListInit" :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="getListInit" @clear="handerClear"></u-search>
+      </div>
+    </AiTopFixed>
+    <div class="list">
+      <div class="item" v-for="(item, index) in list" :key="index">
+        <div class="left">
+          <img src="./img/group-icon.jpg" alt="">
+        </div>
+        <div class="right">
+          <p>{{item.groupName || '群聊'}}</p>
+          <div>{{item.personCount}}人 | 群主：{{item.ownerName}}</div>
+        </div>
+      </div>
+    </div>
+    <AiEmpty description="暂无数据" v-if="!list.length"/>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  name: "userDetail",
+  data() {
+    return {
+      areaId: '',
+      current: 1,
+      areaName: '',
+      groupName: '',
+      list: []
+    }
+  },
+  computed: {...mapState(['user'])},
+  created() {
+    this.areaId = this.user.areaId
+    this.areaName = this.user.areaName
+    this.getListInit()
+  },
+  onShow() {
+    document.title = '居民群详情'
+  },
+  methods: {
+    handerClear() {
+      this.groupName = ''
+      this.getListInit()
+    },
+    getListInit() {
+      this.list = []
+      this.current = 1
+      this.getList()
+    },
+    getList() {
+      this.$http.post(`/app/wxcp/wxgroup/allGroupInfo`, null, {
+        params: {
+        areaId: this.areaId,
+        groupName: this.groupName,
+        current: this.current,
+        size: 10
+      }}).then(res => {
+        if (res?.code == 0) {
+          if (this.current > 1) {
+            this.list = [...this.list, ...res.data.records]
+          } else {
+            this.list = res.data.records
+          }
+        } else {
+          uni.hideLoading()
+        }
+      }).catch(() => {
+        uni.hideLoading()
+      })
+    }
+  },
+  onReachBottom() {
+    this.current ++
+    this.getList()
+  }
+}
+</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;
+      box-sizing: border-box;
+      border-bottom: 1px solid #ddd;
+      .left{
+        width: 110px;
+        img{
+          width: 88px;
+          height: 88px;
+          vertical-align: bottom;
+          margin-right: 22px;
+          border-radius: 8px;
+        }
+      }
+      .right{
+        width: calc(100% - 110px);
+        p{
+          line-height: 44px;
+          margin-bottom: 8px;
+          color: #333;
+          font-size: 30px;
+          word-break: break-all;
+        }
+        div{
+          font-size: 28px;
+          color: #999;
+          line-height: 34px;
+        }
+      }
+    }
+  }
+}
+</style>