返乡登记

src/apps/AppEpidemicSituation/BackUserList.vue

@@ -27,20 +27,21 @@
           <u-icon name="arrow-down" color="#666" size="28" style="margin-left: 4px" />
         </AiAreaPicker>
       </div>
-      <u-search v-model="keyword" :clearabled="true" placeholder="请输入姓名" :show-action="false" bg-color="#F5F5F5" search-icon-color="#999" color="#999" height="58" @search="handerSearch" @clear="handerClear"></u-search>
+      <u-search v-model="name" :clearabled="true" placeholder="请输入姓名" :show-action="false" bg-color="#F5F5F5" search-icon-color="#999" color="#999" height="58" @search="handerSearch" @clear="handerClear"></u-search>
     </div>
     <div class="tab-select">
-      <div class="item active">返乡人员<span></span></div>
-      <div class="item">异常人员<span></span></div>
+      <div class="item" :class="!tabIndex ? 'active' : ''" @click="tabClick(0)">返乡人员<span></span></div>
+      <div class="item" :class="tabIndex ? 'active' : ''" @click="tabClick(1)">异常人员<span></span></div>
     </div>
     <div class="user-list">
-      <div class="item" @click="toUser">
-        <h2 class="name">林益丰<span class="status">有异常</span></h2>
-        <p class="color-999">420107********3274</p>
-        <p><img src="./components/img/blue-icon.png" alt="">湖北省武汉市洪山区</p>
-        <p><img src="./components/img/org-icon.png" alt="">重庆市荣昌区</p>
-        <p><img src="./components/img/time-icon.png" alt="">2021-12-06 13:23</p>
+      <div class="item" @click="toUser(item)" v-for="(item,index) in list" :key="index">
+        <h2 class="name">{{item.name}}<span class="status" v-if="item.status == 0">有异常</span></h2>
+        <p class="color-999">{{item.idNumber}}</p>
+        <p><img src="./components/img/blue-icon.png" alt="">{{item.startAreaName}}</p>
+        <p><img src="./components/img/org-icon.png" alt="">{{item.arriveAreaName}}</p>
+        <p><img src="./components/img/time-icon.png" alt="">{{item.checkTime}}</p>
       </div>
+      <AiEmpty v-if="!list.length"></AiEmpty>
     </div>
   </div>
 </template>
@@ -52,19 +53,52 @@ export default {
   data() {
     return {
       areaId: '',
-      areaName: ''
+      areaName: '',
+      tabIndex: 0,
+      current: 1,
+      list: [],
+      name: '',
     }
   },
   computed: { ...mapState(['user']) },
-  onShow() {},
+  onShow() {
+    this.areaId = this.user.areaId
+    document.title = '疫情防控'
+    this.getList()
+  },
   methods: {
     areaSelect() {
-
+      this.getListInit()
     },
-    toUser() {
-      uni.navigateTo({url: './ErrorDetail'})
+    tabClick(index) {
+      this.tabIndex = index
+      this.getListInit()
+    },
+    getListInit() {
+      this.current = 1
+      this.list = []
+      this.getList()
+    },
+    getList() {
+      var status = ''
+      if(this.tabIndex == 1) {
+        status = 0
+      }
+      this.$http.post(`/app/appepidemicbackhomerecord/list?current=${this.current}&size=10&status=${status}&name=${this.name}`)
+      .then((res) => {
+        if (res.code == 0) {
+          this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
+        }
+      })
+    },
+    toUser(row) {
+      uni.navigateTo({url: `./UserInfo?id=${row.id}`})
     }
   },
+  onReachBottom() {
+    this.current ++
+    this.getList()
+  }
 }
 </script>
 
@@ -133,8 +167,9 @@ export default {
       span{
         position: absolute;
         bottom: 0;
-        left: 92px;
+        left: 50%;
         width: 192px;
+        margin-left: -96px;
         border-bottom: 4px solid #135AB8;
       }
     }