地区筛选

src/apps/AppVillageDiscuss/AppVillageDiscuss.vue

@@ -1,10 +1,17 @@
 <template>
   <div class="AppVillageDiscuss">
-    <AiTopFixed v-if="tabs.length > 0">
-      <div class="tab-select">
-        <div class="item" :class="{ active: type == item.dictValue }" v-for="item in tabs" :key="item.dictValue" @click="tabClick(item.dictValue)">{{ item.dictName }}<span /></div>
-      </div>
+    <AiTopFixed>
+      <u-tabs :list="tabslist" :is-scroll="false" :current="currentTabs" active-color="#fff" inactive-color="#CDDCF0" bg-color="#3975C6" @change="change"></u-tabs>
     </AiTopFixed>
+
+    <div class="areatop">
+      <u-form label-width="auto">
+        <u-form-item label="区域选择" right-icon="arrow-right" :border-bottom="false" class="addresss">
+          <AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="seachObj" :name.sync="areaName"></AiAreaPicker>
+        </u-form-item>
+      </u-form>
+    </div>
+
     <template v-if="datas.length > 0">
       <AiCard v-for="(item, i) in datas" :ref="item.id" :key="i" @click.native="toAdd(item, 1)">
         <template #custom>
@@ -59,10 +66,24 @@ export default {
       pages: 0,
       deletShow: false,
       deletId: '',
-      type: '0',
       listName: '',
       tabIndex: 0,
       showBackTop: false,
+
+      tabslist: [
+        {
+          name: '进行中',
+        },
+        {
+          name: '公示中',
+        },
+        {
+          name: '已完成',
+        },
+      ],
+      currentTabs: 0,
+      areaName: '',
+      areaId: '',
     }
   },
   computed: {
@@ -77,6 +98,9 @@ export default {
   onLoad(o) {
     this.moduleId = o.moduleId
     this.listName = o.listName
+
+    this.areaName = this.user.areaName
+
     this.getList()
     uni.$on('update', () => {
       this.getList()
@@ -90,26 +114,10 @@ export default {
     this.showBackTop = obj.scrollTop > 0
   },
   methods: {
-    previewImage(images, img) {
-      uni.previewImage({
-        urls: images.map((v) => v.url),
-        current: img,
-      })
-    },
-    tabClick(type) {
-      this.type = type
-      this.current = 1
-      this.getList()
-    },
-    search() {
-      this.current = 1
-      this.getList()
-    },
     getList() {
-      let { current, type } = this
       this.$http
         .post('/app/appvillagediscuss/list', null, {
-          params: { size: 20, current, type },
+          params: { size: 20, current: this.current, status: this.currentTabs, areaId: this.areaId },
         })
         .then((res) => {
           if (res?.data) {
@@ -125,6 +133,37 @@ export default {
         })
     },
 
+    change(e) {
+      console.log(e)
+      this.areaId = ''
+      this.datas = []
+      this.current = 1
+      this.currentTabs = e
+      this.getList()
+    },
+
+    seachObj(e) {
+      this.areaId = e
+      this.current = 1
+      this.getList()
+    },
+
+    previewImage(images, img) {
+      uni.previewImage({
+        urls: images.map((v) => v.url),
+        current: img,
+      })
+    },
+    // tabClick(type) {
+    //   this.type = type
+    //   this.current = 1
+    //   this.getList()
+    // },
+    search() {
+      this.current = 1
+      this.getList()
+    },
+
     toAdd(item, type) {
       if (item?.id) {
         this.$refs?.[item.id]?.[0]?.handleClose()
@@ -172,6 +211,38 @@ export default {
 .AppVillageDiscuss {
   height: 100%;
 
+  .areatop {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+
+    .u-form {
+      width: 100%;
+
+      .addresss {
+        .u-form-item__body {
+          .u-form-item--right {
+            .u-form-item--right__content {
+              .u-form-item--right__content__slot {
+                .AiAreaPicker {
+                  width: 100%;
+                  display: flex;
+                  justify-content: flex-end;
+                  .areaSelector {
+                    .location {
+                      opacity: 0;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
   .avatar {
     height: 64px;
     width: 64px;