分页

project/sanjianxi/AppNeighborLinkage/AppNeighborLinkage.vue

@@ -2,20 +2,20 @@
   <div class="AppNeighborLinkage">
     <div class="header">
       <div class="search">
-        <u-search placeholder="请输入需要搜索的内容" v-model="keyword" :show-action="false"></u-search>
+        <u-search placeholder="请输入需要搜索的内容" v-model="keyword" :show-action="false" @search="search"></u-search>
       </div>
       <div class="select">
-        <div class="item" @click="typeSelect">
-          <AiSelect class="right" v-model="type" dict="yesOrNo">
-            <span v-if="!type">全部状态</span>
-            <span v-else>{{ type }}</span>
+        <div class="item" >
+          <AiSelect class="right" v-model="status" dict="partyFourLinkageStatus" @data="typeSelect">
+            <span v-if="!status">全部状态</span>
+            <span v-else>{{ $dict.getLabel('partyFourLinkageStatus',status) }}</span>
             <u-icon name="arrow-down-fill" color="#666666" size="28"></u-icon>
           </AiSelect>
         </div>
         
         <div class="item" @click="isShowDate = true">
-          <span v-if="!checkTime">时间选择</span>
-          <span v-else>{{ checkTime }}</span>
+          <span v-if="!linksageDate">时间选择</span>
+          <span v-else>{{ linksageDate }}</span>
           <u-icon name="arrow-down-fill" color="#666666" size="28"></u-icon>
         </div>
         <u-picker mode="time" :params="params" v-model="isShowDate" @confirm="onDateChange"></u-picker>
@@ -23,14 +23,17 @@
     </div>
     
     <div class="section" v-if="list.length">
-      <div class="card" @click="$linkTo('./neighborDetail')">
+      <div class="card" v-for="(item,index) in list" :key="index" @click="$linkTo(`./neighborDetail?id=${item.id}`)">
         <div class="info">
-          <p>帮助赵顺伟咨询户口迁移问题帮助赵顺伟咨询</p>
-          <div><span>事件日期</span><span>2022-04-15</span></div>
-          <div><span>四邻对象</span><span>李白</span></div>
+          <p>{{ item.description }}</p>
+          <div><span>事件日期</span><span>{{ item.linksageDate }}</span></div>
+          <div><span>四邻对象</span><span>{{ item.residentName }}</span></div>
         </div>
         <div class="status">
-          <span></span><span>待审核</span>
+          <span :style="{background: item.status==0? '#FF883C': item.status==1? '#42D784': '#FF4466'}"></span>
+          <span :style="{color: item.status==0? '#FF883C': item.status==1? '#42D784': '#FF4466'}">
+            {{ $dict.getLabel('partyFourLinkageStatus',item.status) }}
+          </span>
         </div>
       </div>
     </div>
@@ -51,8 +54,8 @@ export default {
   data() {
     return {
       keyword:'',
-      type: '',
-      checkTime: '',
+      status: '',
+      linksageDate: '',
       isShowDate: false,
       params: {
         year: true,
@@ -64,18 +67,42 @@ export default {
     }
   },
   onShow() {
-    this.$dict.load('yesOrNo')
+    this.$dict.load('partyFourLinkageStatus')
     this.getList()
   },
   methods: {
+    search(e) {
+      this.keyword = e
+    },
+    typeSelect(e) {
+      this.list = []
+      this.status = e.value
+      this.current = 1
+      this.getList()
+    },
     onDateChange(e) {
-      this.checkTime = `${e.year}-${e.month}-${e.day}`
+      this.list = []
+      this.linksageDate = `${e.year}-${e.month}-${e.day}`
+      this.current = 1
+      this.getList()
     },
     getList() {
-      // this.$instance.post('/app/apppartyfourresident/listFourResident').then(res=>{
-      //   console.log(res);
-      // })
+      this.$instance.post('/app/apppartyfourlinkage/listByApplet',null,{
+        params: {
+          current: this.current,
+          status: this.status,
+          linksageDate: this.linksageDate,
+        }
+      }).then(res=>{
+        if (res?.data) {
+          this.list = this.current==1? res.data.records : [...this.list, ...res.data.records]
+        }
+      })
     }
+  },
+  onReachBottom() {
+    this.current ++,
+    this.getList()
   }
 }
 </script>
@@ -118,6 +145,8 @@ export default {
         box-sizing: border-box;
         border-bottom: 1px solid #DDDDDD;
         p {
+          font-size: 32px;
+          font-weight: 600;
           overflow:hidden; 
           text-overflow:ellipsis;
           display:-webkit-box;