list

src/apps/AppHandSnapshot/List.vue

@@ -3,14 +3,19 @@
     <AiTopFixed>
       <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
       <div class="select-top">
-        <div class="tab-item">
+        <div class="tab-item" @click="toGirdList">
           <span class="color-666">所属网格</span>
-          <img src="./components/img/down-icon.png" alt="">
+          <img src="./components/img/down-icon.png" alt="" />
         </div>
-        <div class="tab-item">
+
+        <u-select v-model="show" :list="myGirdList" @confirm="confirm"></u-select>
+
+        <div class="tab-item" @click="showType = true">
           <span class="color-666">办件状态</span>
-          <img src="./components/img/down-icon.png" alt="">
+          <img src="./components/img/down-icon.png" alt="" />
         </div>
+
+        <u-select v-model="showType" :list="listType" value-name="dictValue" label-name="dictName" @confirm="confirm"></u-select>
       </div>
     </AiTopFixed>
 
@@ -18,22 +23,24 @@
       <AiCard v-for="(item, i) in datas" :key="i" @click.native="goDetail(item, 1)">
         <template #custom>
           <div class="card-top">
-            <div class="titles">世纪花园南区一号楼前面因没有排水渠道，多世纪花园南区一号楼前面因没有排水渠道，多世纪花园南区一号楼前面因没有排水渠道，多</div>
+            <div class="titles">{{ item.groupName }}</div>
 
             <div class="types">
               <span>事件类型</span>
-              <span class="types-right">矛盾纠纷</span>
+              <span class="types-right">{{ item.groupName }}</span>
             </div>
 
             <div class="gards">
               <span>所属网格</span>
-              <span class="gards-right">04号网格</span>
+              <span class="gards-right">{{ item.girdName }}</span>
             </div>
           </div>
 
-          <div class="status status0">
+          <div class="status" :class="item.eventStatus == 0 ? 'status0' : item.eventStatus == 1 ? 'status1' : item.eventStatus == 2 ? 'status2' : 'status3'" v-if="item.eventStatus">
             <span class="icon"></span>
-            <span>待处理</span>
+            <span>
+              {{ $dict.getLabel('clapEventStatus', item.eventStatus) }}
+            </span>
           </div>
         </template>
       </AiCard>
@@ -72,6 +79,14 @@ export default {
       current: 1,
       size: 10,
       pages: 0,
+
+      show: false,
+      myGirdList: [],
+      girdId: '',
+
+      showType: false,
+      listType: [],
+      eventStatus: '',
     }
   },
   computed: {
@@ -80,43 +95,91 @@ export default {
     },
   },
   mounted() {
-    console.log(12)
+    this.$dict.load('clapEventStatus').then(() => {
+      this.getList()
+      this.listType = this.$dict.getDict('clapEventStatus')
+    })
+
     this.current = 1
     this.getList()
     uni.$on('nextList', () => {
-      this.current ++
+      this.current++
       this.getList()
     })
   },
   methods: {
     getList() {
       this.$http
-        .post('/app/appvisitvondolence/list', null, {
+        .post(`/app/appclapeventinfo/listByGirdMember`, null, {
           params: {
             size: 10,
             current: this.current,
-            createUserId: this.currentTabs == 1 ? this.user.id : '',
+            searchType: this.currentTabs == 1 ? '1' : '0',
+            eventStatus: this.eventStatus,
           },
         })
         .then((res) => {
           if (res.code == 0) {
-            this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
-            this.pages = res.data.pages
+            console.log(res.data)
+            // this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
+            // this.pages = res.data.pages
           }
         })
     },
 
+    toGirdList() {
+      this.show = true
+      this.girdList()
+    },
+
+    girdList() {
+      this.$http
+        .post(`/app/appgirdmemberinfo/queryMyGirdList`, null, {
+          params: {
+            size: 9999,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            console.log(res.data)
+            this.myGirdList = res.data
+          }
+        })
+    },
+
+    confirm(e) {
+      if (this.show) {
+        if (e[0].value) {
+          console.log(e)
+
+          this.girdId = e[0].value
+          this.current = 1
+          this.getList()
+        }
+      }
+      if (this.showType) {
+        console.log(e)
+
+        this.eventStatus = e[0].value
+        this.current = 1
+        this.getList()
+      }
+    },
+
     goDetail(item) {
       uni.navigateTo({ url: `./Detail?id=${item.id}` })
     },
 
     change(index) {
+      this.current = 1
+      this.datas = []
       this.currentTabs = index
       this.getList()
     },
+
     linkTo(url) {
-      uni.navigateTo({url})
-    }
+      uni.navigateTo({ url })
+    },
   },
   onReachBottom() {
     this.current = this.current + 1
@@ -135,14 +198,14 @@ uni-page-body {
     background: #fff;
     display: flex;
     padding: 24px 0;
-    .tab-item{
+    .tab-item {
       flex: 1;
       text-align: center;
       line-height: 48px;
       font-size: 26px;
       font-family: PingFangSC-Regular, PingFang SC;
       color: #666;
-      img{
+      img {
         width: 32px;
         height: 32px;
         margin-left: 8px;
@@ -153,7 +216,7 @@ uni-page-body {
       border-right: 1px solid #eee;
     }
   }
-  ::v-deep .AiTopFixed .content{
+  ::v-deep .AiTopFixed .content {
     padding: 0;
   }
   ::v-deep .AiCard {
@@ -233,7 +296,7 @@ uni-page-body {
   // ::v-deep .AiCard:last-child {
   //   padding-bottom: 24px;
   // }
-  .pad-b120{
+  .pad-b120 {
     background-color: #f3f6f9;
     padding-bottom: 120px;
   }