防返贫

src/apps/AppHelpEffect/AppHelpEffect.vue

@@ -1,8 +1,40 @@
 <template>
   <div class="AppHelpEffect">
-    <AiFixedBtn>
-      <div class="addBtn iconfont iconfont-iconfangda" @tap="toAddLog(0)"></div>
-    </AiFixedBtn>
+    <AiTopFixed>
+      <div class="search"><u-search placeholder="请输入姓名、身份证号" v-model="name" :show-action="false"></u-search></div>
+      <div class="select">
+        <div class="left">
+          <AiSelect v-model="declareReason" :list="areaList" @data="areaSelect">
+            <span v-if="!declareReason" style="color: #999;">地区筛选</span>
+            <span v-else>{{ $dict.getLabel('helpDeclarationReason', declareReason) }}</span>
+            <u-icon name="arrow-down" color="#999" size="24" style="margin-left: 4px;width: 14px;display:inline-block;"></u-icon>
+          </AiSelect>
+        </div>
+        <div class="right">
+          <AiSelect v-model="declareReason" :list="typeList" @data="typeSelect">
+            <span v-if="!declareReason" style="color: #999;">户型类型</span>
+            <span v-else>{{ $dict.getLabel('helpDeclarationReason', declareReason) }}</span>
+            <u-icon name="arrow-down" color="#999" size="24" style="margin-left: 4px;width: 14px;display:inline-block;"></u-icon>
+          </AiSelect>
+        </div>
+      </div>
+    </AiTopFixed>
+
+    <div class="cardList">
+      <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('', item.houseType) }}</span>
+        </p>
+        <div class="idCard">{{ item.idNumber.replace(/(.{6}).*(.{4})/, '$1********$2') }}</div>
+        <div class="tel" @click="callPhone()"><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>
+
+    
   </div>
 </template>
 
@@ -11,31 +43,102 @@ export default {
   name: "AppHelpEffect",
   appName: '帮扶成效',
   data() {
-    return {}
+    return {
+      name: "",
+      current: 1,
+      declareReason: "",
+      areaList: [],
+      typeList: [],
+      houseType: 1,
+      provertyStatus: 0,
+      list: [],
+    }
+  },
+  methods: {
+    areaSelect() {},
+    typeSelect() {},
+    callPhone(phone) {
+      uni.makePhoneCall({phoneNumber: phone})
+    },
+    getList() {
+      this.$http.post('/app/appgirdmemberpoverty/listByGirdMember', null, {
+        params: {
+          current: this.current,
+          provertyStatus: this.provertyStatus,
+          name: this.name,
+        },
+      }).then((res) => {
+        if (res?.data) {
+          this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
+        }
+      })
+    },
+    toDetail(id) {
+      uni.navigateTo({url: `./helpDetail?id=${id}`})
+    },
+    onReachBottom() {
+      this.current ++
+      this.getList()
+    }
   },
-  methods: {},
   onShow() {
     document.title = '帮扶成效'
+    this.getList()
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .AppHelpEffect {
-
-
-  .addBtn {
-    width: 96px;
-    height: 96px;
-    flex-shrink: 0;
-    background: $uni-color-primary;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-    font-size: 48px;
-    color: #fff;
-    border-radius: 50%;
-    justify-content: center;
-    align-items: center;
-    display: flex;
+  .search {
+    height: 100px;
+    line-height: 100px;
   }
+  .select {
+    width: 100%;
+    display: flex;
+    height: 60px;
+    line-height: 60px;
+
+    ::v-deep .AiSelect .display {
+      justify-content: center;
+    }
+
+    .left,
+    .right {
+      width: 50%;
+    }
+  }
+  .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);
+      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 {
+          width: 28px;
+          height: 28px;
+        }
+      }
+    }
+  }
+
 }
 </style>