建平需求变更调整完毕

src/apps/AppHelpEffect/AppHelpEffect.vue

@@ -1,128 +1,91 @@
 <template>
   <div class="AppHelpEffect">
     <AiTopFixed>
-      <div class="search"><u-search placeholder="请输入姓名、身份证号" @clear="name='',getList()" clearable v-model="name" :show-action="false" @search="search"></u-search></div>
+      <u-tabs :list="tabs" :is-scroll="false" :current="currentTab" height="96" bar-width="150" @change="v=>{currentTab=v,current=1}"/>
+      <div class="search">
+        <u-search placeholder="请输入姓名、身份证号" @clear="con='',getList()" clearable v-model="con" :show-action="false" @search="search"></u-search>
+      </div>
       <div class="select">
-        <div class="left">
-          <AiAreaPicker v-model="areaId" :area-id="user.areaId" :name.sync="areaName" @select="areaSelect" selectRoot>
-            <div>
-              <u-icon name="map-fill" color="#999" size="24" style="margin-left: 4px;width: 14px;display:inline-block;margin-top:18px"></u-icon>
-              <span v-if="areaId" style="color:#333;fontSize: 14px;" class="areaName">{{ areaName }}</span>
-              <span v-else style="color: #999;fontSize: 14px;" class="areaName">所在地区</span>
-              <u-icon name="arrow-down" color="#999" size="24" style="margin-left: 4px;width: 14px;display:inline-block;margin-top:18px" @select="areaSelect"></u-icon>
-            </div>
-          </AiAreaPicker>
-        </div>
-        <div class="right">
-          <AiSelect v-model="houseType" :list="typeList" @data="typeSelect">
-            <span v-if="!houseType" style="color: #999;">户类型</span>
-            <span v-else>{{ $dict.getLabel('fpHouseType', houseType) }}</span>
-            <u-icon name="arrow-down" color="#999" size="24" style="margin-left: 4px;width: 14px;display:inline-block;"></u-icon>
-          </AiSelect>
-        </div>
+        <AiAreaPicker class="fill" v-model="areaId" :area-id="user.areaId" :name.sync="areaName" @select="areaSelect" selectRoot>
+          <div flex class="center">
+            <u-icon name="map-fill" size="32" color="#999" class="mar-r8"/>
+            <AiMore icon="arrow-down" v-model="areaName" placeholder="所在地区"/>
+          </div>
+        </AiAreaPicker>
+        <AiSelect v-if="currentTab=='0'" class="fill center" flex v-model="houseType" :list="typeList" @data="typeSelect">
+          <AiMore class="fill" icon="arrow-down" v-model="$dict.getLabel('fpHouseType', houseType)" placeholder="户类型"/>
+        </AiSelect>
       </div>
     </AiTopFixed>
-
     <div class="cardList">
-      <div v-if="list.length">
-        <div class="card" v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
-          <p class="user">
-            <span class="name">{{ item.name }}</span>
-            <span :style="{color: item.houseType==1? '#FF6300': '#00D25D'}">{{ $dict.getLabel('fpHouseType', item.houseType) }}</span>
-          </p>
-          <div class="idCard">{{ item.idNumber.replace(/(.{6}).*(.{4})/, '$1********$2') }}</div>
-          <div class="tel"><img src="./images/dh@2x.png" alt="">{{ item.phone}}</div>
-          <div class="address"><img src="./images/dz@2x.png" alt="">
-            {{ item.countyName + item.townName + item.villageName }}{{ item.currentAddress || '' }}
-          </div>
-        </div>
-      </div>
-      <AiEmpty v-else description="暂无数据"></AiEmpty>
+      <component ref="List" :is="currentPage.list" v-bind="{current,search:{areaId,houseType,con}}"/>
     </div>
- 
   </div>
 </template>
 
 <script>
 import {mapState} from 'vuex'
+import HelpedResidentList from "./helpedResidentList";
+import NormalFarmerList from "./normalFarmerList";
+
 export default {
   name: "AppHelpEffect",
+  components: {NormalFarmerList, HelpedResidentList},
   appName: '帮扶成效',
   data() {
     return {
-      name: "",
+      con: "",
       current: 1,
-      declareReason: "",
-      areaList: [],
       typeList: [],
-      houseType: 1,
-      list: [],
       areaId: '',
       areaName: '',
       houseType: '',
+      currentTab: '0'
     }
   },
   computed: {
-    ...mapState(['user'])
+    ...mapState(['user']),
+    tabs: () => [
+      {name: "监测对象", list: HelpedResidentList},
+      {name: "一般农户", list: NormalFarmerList}
+    ],
+    currentPage: v => v.tabs[v.currentTab] || {}
   },
-
   methods: {
     areaSelect(e) {
       this.areaId = e
-      this.current = 1
-      this.list = []
-      this.getList()
-    },
-    onLoad() {
-      this.$dict.load('fpHouseType').then(() => {
-        this.typeList = this.$dict.getDict('fpHouseType').map((item) =>{
-          return {
-            label: item.dictName,
-            value: item.dictValue
-          }
-        })
-        this.typeList.unshift({ label: '全部类型', value: ''})
-        this.areaId = this.user.areaId
-        this.getList()
-      })
-      
+      this.refreshList()
     },
     typeSelect(v) {
-      this.current = 1
-      this.list = []
       this.houseType = v?.[0].value
-      this.getList()
+      this.refreshList()
     },
     search(value) {
       this.name = value
-      this.list = []
-      this.current= 1
-      this.getList()
+      this.refreshList()
     },
-    getList() {
-      this.$http.post('/app/apppreventionreturntopoverty/list', null, {
-        params: {
-          current: this.current,
-          con: this.name,
-          areaId: this.areaId,
-          houseType: this.houseType
-        },
-      }).then((res) => {
-        if (res?.data) {
-          this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
+    refreshList() {
+      this.current = 1
+      this.$nextTick(() => this.$refs.List.getList(true))
+    }
+  },
+  onLoad() {
+    this.areaId = this.user.areaId
+    this.$dict.load('fpHouseType').then(() => {
+      this.typeList = this.$dict.getDict('fpHouseType').map((item) => {
+        return {
+          label: item.dictName,
+          value: item.dictValue
         }
       })
-    },
-    toDetail(id) {
-      uni.navigateTo({url: `./helpDetail?id=${id}`})
-    },
-    onReachBottom() {
-      this.current ++
-      this.getList()
-    }
+      this.typeList.unshift({label: '全部类型', value: ''})
+    })
   },
   onShow() {
     document.title = '帮扶成效'
+  },
+  onReachBottom() {
+    this.current++
   }
 }
 </script>
@@ -133,57 +96,60 @@ export default {
     height: 100px;
     line-height: 100px;
   }
+
+  .center {
+    justify-content: center;
+    text-align: center;
+  }
+
   .select {
     width: 100%;
     display: flex;
     height: 86px;
     line-height: 86px;
     text-align: center;
-
-    ::v-deep .AiSelect .display {
-      justify-content: center;
-    }
-
-    .left,
-    .right {
-      flex: 1;
-    }
   }
-  .cardList {
+
+  ::v-deep .cardList {
     padding: 32px;
     box-sizing: border-box;
+
     .card {
       padding: 32px;
       box-sizing: border-box;
       margin-bottom: 32px;
       background: #FFF;
-      box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.0200);
+      box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.0200);
       border-radius: 16px;
+
       .user {
         display: flex;
         justify-content: space-between;
+
         .name {
           font-size: 36px;
           font-weight: 600;
         }
       }
+
       .idCard,
       .tel,
       .address {
         margin-top: 8px;
         color: #999999;
+
         img {
           margin-right: 16px;
           width: 28px;
           height: 28px;
         }
       }
+
       .tel,
       .address {
         color: #333;
       }
     }
   }
-
 }
-</style>
+</style>