居民档案

src/project/weiyang/AppPeopleList/AddTag.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="AddTag">
+    <u-navbar back-icon-color="#000" title="居民标签管理" title-color="#000" title-width="300" title-size="32" 
+        :title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44" z-index="999"></u-navbar>
+    <div class="header-content-bg">
+      <img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
+    </div>
+    
+
+
+    
+    <!-- <AiEmpty class="emptyWrap" v-else></AiEmpty> -->
+    <div class="footer">
+      <div class="btn">保存</div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  name: 'AddTag',
+  appName: '居民标签管理',
+  customNavigation: true,
+  data() {
+    return {
+      backgroundNavbar: {
+        background: 'url(https://cdn.sinoecare.com/i/2024/07/12/6690a1309c7d3.png) no-repeat',
+        backgroundSize: 'cover',
+      },
+      current: 1,
+      pages: 2
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  onLoad() {
+    
+  },
+  onShow() {
+    uni.setNavigationBarColor({
+      frontColor: 'black',
+      backgroundColor: '#ffffff'
+    })
+  },
+  methods: {
+    getList() {
+      if(this.current > this.pages) return
+      this.$instance.post('/app/appresident/list', null, {
+        params: {
+          size: 20,
+          current: this.current,
+        },
+      })
+      .then((res) => {
+        if (res.code == 0) {
+          res.data.records.map((item) => {
+            item.isCheck = false
+          })
+          this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
+
+          this.pages = res.data.pages
+        }
+      })
+    }
+    
+  },
+  onReachBottom() {
+    // this.current = this.current + 1
+    // this.getList()
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.AddTag {
+  height: 100%;
+  .header-content-bg {
+    width: 100%;
+    position: relative;
+    img {
+      width: 100%;
+      height: 592px;
+      position: absolute;
+      z-index: -1;
+    }
+  }
+  .footer {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background-color: #F4F5FA;
+    padding: 64px 64px 68px 64px;
+    z-index: 9;
+    .btn {
+      width: calc(100% - 128px);
+      line-height: 88px;
+      background: #026AF2;
+      border-radius: 44px;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 34px;
+      color: #FFF;
+      text-align: center;
+    }
+  }
+}
+</style>

src/project/weiyang/AppPeopleList/AppPeopleList.vue

@@ -21,13 +21,13 @@ export default {
     return {
       bannerList: [
         {
-          img: require('./components/img/blue-bg.png'),
+          img: 'https://cdn.sinoecare.com/i/2024/07/16/66960741d6338.png',
           title: '查看居民档案',
           linkUrl: './PeopleList'
         },
         {
-          img: require('./components/img/green-bg.png'),
+          img: 'https://cdn.sinoecare.com/i/2024/07/16/66960746d79c9.png',
-          title: '居民档案审核',
+          title: '居民标签管理',
           linkUrl: './ExamineList'
         }
       ],

src/project/weiyang/AppPeopleList/PeopleList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="PeopleList">
     <u-navbar back-icon-color="#000" title="居民管理" title-color="#000" title-width="300" title-size="32" 
-        :title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44"></u-navbar>
+        :title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44" z-index="999"></u-navbar>
     <div class="header-content-bg">
       <img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
     </div>
@@ -25,7 +25,7 @@
       </div>
     </AiTopFixed> -->
 
-    <div class="top-tabs">
+    <div class="top-tabs" :style="{'top': `${statusBarHeight+50}px`}">
       <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#fff" inactive-color="#222"
         active-color="#1D2229" :bar-style="barStyle"  font-size="34" @change="change"></u-tabs>
       <div class="select-content">
@@ -50,11 +50,13 @@
     </div>
 
 
-    <div class="dataes" v-if="datas.length > 0">
+    <div class="dataes">
-      <div class="datass" v-for="(item, iindex) in datas" :key="iindex" @click="toDetailCard(item)">
+      <div class="datass" v-for="(item, index) in datas" :key="index" @click="toDetailCard(item)">
         <div class="left">
-          <img :src="item.photo" alt="" v-if="item.photo"/>
+          <div class="select-img" @click.stop="clickCheck(index)">
-          <img src="./components/img/4.png" alt="" v-else/>
+            <img :src="item.isCheck ? checkImg : circleImg" alt="" >
+          </div>
+          <img :src="item.photo ? item.photo : userImg " alt="" class="user-img"/>
         </div>
 
         <div class="right">
@@ -67,21 +69,41 @@
           </div>
           <div class="rightBottom">
             <span>{{ item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1********$2') }}</span>
-
             <span>{{ item.phone }}</span>
           </div>
         </div>
       </div>
+        <div class="empty" v-if="!datas.length">
+        <img src="https://cdn.cunwuyun.cn/dvcp/h5/no-data.png" alt="">
+        <p>暂无居民信息<br/>点击<span @click="edit('')">新增按钮</span>新增居民信息,也可在管理系统批量导入</p>
+      </div>
     </div>
-    <div class="empty" v-else>
+    
-      <img src="https://cdn.cunwuyun.cn/dvcp/h5/no-data.png" alt="">
-      <p>暂无居民信息<br/>点击<span @click="edit('')">新增按钮</span>新增居民信息,也可在管理系统批量导入</p>
-    </div>
     <!-- <AiEmpty class="emptyWrap" v-else></AiEmpty> -->
     <div style="height: 60px"></div>
-    <div class="footer" @click="edit('')">
+    <div class="footer" v-if="showBtn" @click="showTag=true">
-      <div class="btn">新增居民</div>
+      <div class="btn">打标签</div>
     </div>
+    <u-popup v-model="showTag" mode="bottom">
+      <div class="popup-content">
+        <div class="title">111</div>
+        <div class="tag-list">
+          <div class="item active">2222</div>
+          <div class="item active">2222</div>
+          <div class="item">2222</div>
+        </div>
+        <div class="title">111</div>
+        <div class="tag-list">
+          <div class="item">333</div>
+          <div class="item">333</div>
+        </div>
+        <div class="poup-btn">
+          <div>取消</div>
+          <div class="confirm">确定</div>
+        </div>
+      </div>
+    </u-popup>
+
   </div>
 </template>
 
@@ -123,10 +145,24 @@ export default {
         'bottom': '-4px',
         'background': '#026AF2'
       },
+      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
+      checkImg: 'https://cdn.sinoecare.com/i/2024/07/16/6695ddf91113c.png',
+      circleImg: 'https://cdn.sinoecare.com/i/2024/07/16/6695ddf890b1e.png',
+      userImg: 'https://cdn.sinoecare.com/i/2024/07/16/6695e2a0d95c9.png',
+      showTag: false
     }
   },
   computed: {
     ...mapState(['user']),
+    showBtn() {
+      var btn = false
+      this.datas.map((item) => {
+        if(item.isCheck) {
+          btn = true
+        }
+      })
+      return btn
+    }
   },
   watch: {},
   onLoad() {
@@ -160,6 +196,9 @@ export default {
       })
       .then((res) => {
         if (res.code == 0) {
+          res.data.records.map((item) => {
+            item.isCheck = false
+          })
           this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
 
           this.pages = res.data.pages
@@ -212,6 +251,9 @@ export default {
         })
       }).catch(() => {
       })
+    },
+    clickCheck(index) {
+      this.datas[index].isCheck = !this.datas[index].isCheck
     }
   },
   onReachBottom() {
@@ -224,6 +266,7 @@ export default {
 <style scoped lang="scss">
 .PeopleList {
   height: 100%;
+
   .header-content-bg {
     width: 100%;
     position: relative;
@@ -234,17 +277,14 @@ export default {
       z-index: -1;
     }
   }
+  
   .top-tabs {
-    width: 100%;
+    width: calc(100% - 64px);
-    padding: 0 32px;
     box-sizing: border-box;
     position: fixed;
+    left: 32px;
     z-index: 9;
-    ::v-deep .u-tabs {
+
-      border-top-left-radius: 16px;
-      border-top-right-radius: 16px;
-      border-bottom: 1px solid #eee;
-    }
     .select-content {
       width: 100%;
       padding: 0 32px;
@@ -274,6 +314,56 @@ export default {
       
     }
   }
+
+  ::v-deep .u-tabs {
+    border-bottom: 1px solid #eee;
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+  }
+
+
+
+  // .top-tabs {
+  //   width: 100%;
+  //   padding: 0 32px;
+  //   box-sizing: border-box;
+  //   position: fixed;
+  //   z-index: 9;
+  //   ::v-deep .u-tabs {
+  //     border-top-left-radius: 16px;
+  //     border-top-right-radius: 16px;
+  //     border-bottom: 1px solid #eee;
+  //   }
+  //   .select-content {
+  //     width: 100%;
+  //     padding: 0 32px;
+  //     box-sizing: border-box;
+  //     background-color: #fff;
+  //     .search-input {
+  //       width: 100%;
+  //       padding: 28px 0;
+  //     }
+  //     .area-content {
+  //       width: 100%;
+  //       padding: 26px 32px;
+  //       box-sizing: border-box;
+  //       font-family: PingFangSC-Regular;
+  //       font-size: 32px;
+  //       color: #222;
+  //       ::v-deep u-icon, 
+  //       ::v-deep .u-icon {
+  //         width: 100%;
+  //       }
+  //       ::v-deep .u-icon__label {
+  //         display: inline-block;
+  //         width: calc(100% - 32px);
+  //       }
+  //     }
+
+      
+  //   }
+  // }
+
   .areatop {
     display: flex;
     justify-content: space-between;
@@ -326,34 +416,49 @@ export default {
   }
 
   .dataes {
-    background: #fff;
     width: calc(100% - 64px);
-    margin-left: 32px;
+    margin: 320px 0 0 32px;
-    padding-top: 320px;
+    border-bottom-left-radius: 16px;
+    border-bottom-right-radius: 16px;
     .datass {
       display: flex;
-      padding: 24px 32px;
+      padding: 24px 0;
-
+      width: 100%;
+      background: #fff;
       .left {
-        img {
+        width: 208px;
+        .user-img {
           width: 80px;
           height: 80px;
           border-radius: 50%;
         }
+        .select-img {
+          display: inline-block;
+          padding: 0 32px;
+          img {
+            width: 48px;
+            height: 48px;
+            vertical-align: super;
+          }
+        }
       }
 
       .right {
         display: flex;
         flex-direction: column;
-        margin-left: 32px;
+        width: calc(100% - 208px);
-        width: 100%;
+        padding: 0 32px 20px 0;
+        box-sizing: border-box;
+        border-bottom: 1px solid #eee;
 
         .rightTop {
-          font-size: 32px;
-          font-weight: 500;
-          color: #333333;
           display: flex;
           justify-content: space-between;
+          font-family: PingFangSC-Medium;
+          font-weight: 500;
+          font-size: 32px;
+          color: #333;
+          line-height: 44px;
 
           .btn {
             img {
@@ -368,17 +473,19 @@ export default {
           display: flex;
           justify-content: space-between;
           margin-top: 8px;
+          font-size: 28px;
+          font-family: PingFangSC-Regular;
+          color: #999;
+          span:nth-of-type(1) {
+            display: inline-block;
+            margin-right: 16px;
+            font-size: 26px;
+          }
         }
       }
     }
   }
 
-  .emptyWrap {
-    background: #f5f5f5;
-    margin: 0;
-  }
-
-
   .footer {
     width: 100%;
     position: fixed;
@@ -401,8 +508,7 @@ export default {
   }
 
   .empty {
-    height: 100%;
+    padding-bottom: 64px;
-
     img {
       width: 282px;
       height: 306px;
@@ -421,5 +527,65 @@ export default {
       }
     }
   }
+
+  .popup-content {
+    height: 800px;
+    width: 100%;
+    padding: 16px 32px 170px;
+    box-sizing: border-box;
+    overflow-y: scroll;
+    position: relative;
+    .title {
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 32px;
+      color: #333;
+      line-height: 44px;
+      margin-bottom: 16px;
+    }
+    .tag-list {
+      .item {
+        display: inline-block;
+        padding: 0 8px;
+        line-height: 44px;
+        border-radius: 8px;
+        margin: 0 16px 16px 0;
+        background: #F0F2F5;
+        color: #8891A1;
+        font-size: 24px;
+      }
+      .active {
+        background-color: #467DFE;
+        color: #fff;
+      }
+    }
+    .poup-btn {
+      padding: 0 32px 68px;
+      box-sizing: border-box;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      div {
+        display: inline-block;
+        width: calc(50% - 64px);
+        height: 88px;
+        line-height: 88px;
+        text-align: center;
+        border-radius: 44px;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        font-size: 34px;
+        color: #222;
+        border: 1px solid #eee;
+      }
+      .confirm {
+        margin-left: 64px;
+        color: #fff;
+        background-color: #026AF2;
+        border-color: #026AF2;
+      }
+    }
+  }
 }
 </style>

src/project/weiyang/AppPeopleList/TagList.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="TagList">
+    <u-navbar back-icon-color="#000" title="居民标签管理" title-color="#000" title-width="300" title-size="32" 
+        :title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44" z-index="999"></u-navbar>
+    <div class="header-content-bg">
+      <img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
+    </div>
+    
+
+
+    
+    <!-- <AiEmpty class="emptyWrap" v-else></AiEmpty> -->
+    <div class="footer">
+      <div class="btn">新增标签组</div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  name: 'TagList',
+  appName: '居民标签管理',
+  customNavigation: true,
+  data() {
+    return {
+      backgroundNavbar: {
+        background: 'url(https://cdn.sinoecare.com/i/2024/07/12/6690a1309c7d3.png) no-repeat',
+        backgroundSize: 'cover',
+      },
+      current: 1,
+      pages: 2
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  onLoad() {
+    
+  },
+  onShow() {
+    uni.setNavigationBarColor({
+      frontColor: 'black',
+      backgroundColor: '#ffffff'
+    })
+  },
+  methods: {
+    getList() {
+      if(this.current > this.pages) return
+      this.$instance.post('/app/appresident/list', null, {
+        params: {
+          size: 20,
+          current: this.current,
+        },
+      })
+      .then((res) => {
+        if (res.code == 0) {
+          res.data.records.map((item) => {
+            item.isCheck = false
+          })
+          this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
+
+          this.pages = res.data.pages
+        }
+      })
+    }
+    
+  },
+  onReachBottom() {
+    // this.current = this.current + 1
+    // this.getList()
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.TagList {
+  height: 100%;
+  .header-content-bg {
+    width: 100%;
+    position: relative;
+    img {
+      width: 100%;
+      height: 592px;
+      position: absolute;
+      z-index: -1;
+    }
+  }
+  .footer {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background-color: #F4F5FA;
+    padding: 64px 64px 68px 64px;
+    z-index: 9;
+    .btn {
+      width: calc(100% - 128px);
+      line-height: 88px;
+      background: #026AF2;
+      border-radius: 44px;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 34px;
+      color: #FFF;
+      text-align: center;
+    }
+  }
+}
+</style>