迁移居民列表

src/apps/AppResidentFile/AppResidentFile.vue

@@ -62,7 +62,27 @@
     </div>
 
     <div class="currentTabBar1" v-if="currentTabBar == 1">
-      <AiAreaPicker v-model="areaId" all :areaId="areaId" @select="areaSelect"></AiAreaPicker>
+      <AiTopFixed>
+        <u-search placeholder="请输入昵称、姓名" :show-action="false" search-icon-color="#ccc" v-model="search.name" @search=";(page.current = 1), getList()" />
+        <AiCell>
+          <b slot="label" class="title">共<i v-html="page.total || 0" />个居民</b>
+        </AiCell>
+      </AiTopFixed>
+
+      <div class="mainPane">
+        <AiCell v-for="item in data" :key="item.id" @click.native="showResident(item)">
+          <template #label>
+            <AiImage :src="item.avatar" preview />
+          </template>
+          <div class="card wrap start" flex>
+            <b>{{ item.name }}</b>
+            <div flex class="tag" v-for="(tag, j) in item.tags" :key="j">{{ tag.tagName }}</div>
+            <div class="realName" shrink v-html="`真实姓名：${item.realName || '-'}`" />
+          </div>
+        </AiCell>
+      </div>
+
+      <!-- <AiAreaPicker v-model="areaId" all :areaId="areaId" @select="areaSelect"></AiAreaPicker>
 
       <div class="line"></div>
 
@@ -88,31 +108,17 @@
               <div class="rightBottom">
                 <span>
                   <span>{{ item.name }}</span>
-                  <!-- {{ item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1****$2') }} -->
+                  {{ item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1****$2') }}
                 </span>
 
-                <!-- <span>{{ item.phone }}</span> -->
-              </div>
-            </div>
-
-            <!-- <div class="left">
-              <img :src="item.photo" alt="" v-if="item.photo" />
-              <img src="./components/img/4.png" alt="" v-else />
-            </div>
-
-            <div class="right">
-              <div class="rightTop">{{ item.name }}</div>
-              <div class="rightBottom">
-                <span>{{ item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1****$2') }}</span>
-
                 <span>{{ item.phone }}</span>
               </div>
-            </div> -->
+            </div>
           </div>
         </div>
 
         <AiEmpty v-else></AiEmpty>
-      </div>
+      </div> -->
     </div>
 
     <div class="currentTabBar2" v-if="currentTabBar == 2">
@@ -192,14 +198,14 @@ export default {
       Echarts2: null,
       areaId: '',
       currentPeople: 0,
-      tabPeopleList: [
+      // tabPeopleList: [
-        {
+      //   {
-          name: '本地居民',
+      //     name: '本地居民',
-        },
+      //   },
-        {
+      //   {
-          name: '流动人员',
+      //     name: '流动人员',
-        },
+      //   },
-      ],
+      // ],
       current: 1,
       keyword: '',
       data: [],
@@ -212,6 +218,10 @@ export default {
       todayList2: [],
       counts1: '',
       counts2: '',
+      page2: { current: 1, size: 10, total: 0 },
+      search2: { name: '' },
+      page1: { current: 1, size: 10, total: 0 },
+      search1: { name: '' },
     }
   },
   computed: {
@@ -226,10 +236,37 @@ export default {
     this.Echarts1 = echarts.init(document.getElementById('echarts1'))
   },
   methods: {
+    getList() {
+      this.$http
+        .post('/app/wxcp/wxcustomer/list', null, {
+          params: { ...this.page1, ...this.search, type: 1 },
+        })
+        .then((res) => {
+          if (res?.data) {
+            if (this.page.current > 1) {
+              this.data = [...this.data, ...res.data.records]
+            } else this.data = res.data.records
+            this.page.total = res.data.total
+          }
+        })
+    },
+    reachBottom() {
+      if (this.page.total > this.list.length) {
+        this.page.current++
+        this.getList()
+      }
+    },
+    showResident({ id }) {
+      id &&
+        uni.navigateTo({
+          url: './resident?id=' + id,
+        })
+    },
+
     getList2() {
       this.$http
         .post('/app/wxcp/wxgroup/list', null, {
-          params: { ...this.page, ...this.search },
+          params: { ...this.page2, ...this.search },
         })
         .then((res) => {
           if (res?.data) {
@@ -247,7 +284,7 @@ export default {
 
     reachBottom() {
       if (this.page.total > this.list.length) {
-        this.page.current++
+        this.page.current = this.page.current + 1
         this.getList2()
       }
     },
@@ -258,26 +295,28 @@ export default {
       })
     },
 
-    getList() {
+    // getList() {
-      this.$http
+    //   this.$http
-        .post('/app/wxcp/wxcustomer/list', null, {
+    //     .post('/app/wxcp/wxcustomer/list', null, {
-          params: {
+    //       params: {
-            size: 10,
+    //         size: 10,
-            current: this.current,
+    //         current: this.current,
-            areaId: this.areaId,
+    //         areaId: this.areaId,
-            name: this.keyword,
+    //         name: this.keyword,
-            residentType: this.currentPeople == 0 ? '0' : '1',
+    //         residentType: this.currentPeople == 0 ? '0' : '1',
-          },
+    //       },
-        })
+    //     })
-        .then((res) => {
+    //     .then((res) => {
-          if (res.code == 0) {
+    //       if (res.code == 0) {
-            this.data = this.current > 1 ? [...this.data, ...res.data.records] : res.data.records
+    //         this.data = this.current > 1 ? [...this.data, ...res.data.records] : res.data.records
-            this.pages = res.data.pages
+    //         this.pages = res.data.pages
-          }
+    //       }
-        })
+    //     })
-    },
+    // },
 
+    //
     // 居民群统计
+
     getEchart1() {
       this.$http.post(`/app/wxcp/wxgroup/groupStatistic`).then((res) => {
         if (res.code === 0) {
@@ -501,26 +540,26 @@ export default {
       }
     },
 
-    toDetailCard(item) {
+    // toDetailCard(item) {
-      uni.navigateTo({ url: `./DetailCard?id=${item.id}` })
+    //   uni.navigateTo({ url: `./DetailCard?id=${item.id}` })
-    },
+    // },
 
-    areaSelect(e) {
+    // areaSelect(e) {
-      this.areaId = e.id
+    //   this.areaId = e.id
-      this.getList()
+    //   this.getList()
-    },
+    // },
 
-    handerSearch(e) {
+    // handerSearch(e) {
-      this.keyword = e
+    //   this.keyword = e
-      this.current = 1
+    //   this.current = 1
-      this.getList()
+    //   this.getList()
-    },
+    // },
 
-    handerClear() {
+    // handerClear() {
-      this.keyword = ''
+    //   this.keyword = ''
-      this.current = 1
+    //   this.current = 1
-      this.getList()
+    //   this.getList()
-    },
+    // },
 
     changeTab(e) {
       this.currentTabBar = e
@@ -651,52 +690,124 @@ uni-page-body {
   .currentTabBar1 {
     height: 100%;
     background: #fff;
-    .AiAreaPicker {
+    ::v-deep .AiTopFixed {
-      padding: 16px 0 14px 12px;
+      b.title {
-    }
+        color: #333;
+        font-size: 32px;
 
-    .line {
+        & > i {
-      height: 16px;
+          color: #267fce;
-      background: #f5f5f5;
+          font-style: normal;
-    }
+          margin: 0 4px;
-
-    .peopleCard {
-      background: #fff;
-      .seachObj {
-        border-bottom: 2px solid #f5f5f5;
-        border-top: 2px solid #f5f5f5;
-        padding: 20px 32px;
-      }
-      .datas {
-        .datass {
-          display: flex;
-          padding: 24px 32px;
-          .left {
-            img {
-              width: 80px;
-              height: 80px;
-              border-radius: 50%;
-            }
-          }
-          .right {
-            display: flex;
-            flex-direction: column;
-            margin-left: 32px;
-            width: 100%;
-            .rightTop {
-              font-size: 32px;
-              font-weight: 500;
-              color: #333333;
-            }
-            .rightBottom {
-              display: flex;
-              justify-content: space-between;
-              margin-top: 8px;
-            }
-          }
         }
       }
     }
+
+    ::v-deep .mainPane {
+      background: #fff;
+      padding: 0 32px;
+
+      .AiCell {
+        flex-shrink: 0;
+        justify-content: flex-start;
+
+        .content {
+          flex: 1;
+          min-width: 0;
+          max-width: unset;
+          border-bottom: 1px solid rgba(221, 221, 221, 1);
+          min-height: 160px;
+        }
+      }
+
+      .card {
+        text-align: left;
+
+        b {
+          max-width: 100%;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-size: 36px;
+        }
+
+        .tag {
+          justify-content: center;
+          background: #f3f4f7;
+          border-radius: 4px;
+          padding: 0 16px;
+          font-size: 28px;
+          font-weight: 400;
+          color: #333;
+          margin-left: 16px;
+          margin-bottom: 16px;
+          height: 56px;
+        }
+
+        .realName {
+          width: 100%;
+          margin-top: 8px;
+          font-size: 28px;
+          font-weight: 400;
+          color: #999;
+        }
+      }
+
+      .AiImage {
+        margin-right: 24px;
+
+        image {
+          width: 112px;
+          height: 112px;
+        }
+      }
+    }
+    // .AiAreaPicker {
+    //   padding: 16px 0 14px 12px;
+    // }
+
+    // .line {
+    //   height: 16px;
+    //   background: #f5f5f5;
+    // }
+
+    // .peopleCard {
+    //   background: #fff;
+    //   .seachObj {
+    //     border-bottom: 2px solid #f5f5f5;
+    //     border-top: 2px solid #f5f5f5;
+    //     padding: 20px 32px;
+    //   }
+    //   .datas {
+    //     .datass {
+    //       display: flex;
+    //       padding: 24px 32px;
+    //       .left {
+    //         img {
+    //           width: 80px;
+    //           height: 80px;
+    //           border-radius: 50%;
+    //         }
+    //       }
+    //       .right {
+    //         display: flex;
+    //         flex-direction: column;
+    //         margin-left: 32px;
+    //         width: 100%;
+    //         .rightTop {
+    //           font-size: 32px;
+    //           font-weight: 500;
+    //           color: #333333;
+    //         }
+    //         .rightBottom {
+    //           display: flex;
+    //           justify-content: space-between;
+    //           margin-top: 8px;
+    //         }
+    //       }
+    //     }
+    //   }
+    // }
   }
 
   .currentTabBar2 {

src/apps/AppResidentFile/components/document.vue

@@ -0,0 +1,129 @@
+<template>
+  <section class="document">
+    <div class="card">
+      <div class="info">
+        <u-image border-radius="4" :src="top.detail.avatar" width="118" height="118"/>
+        <div class="fill">
+          <b>{{ top.detail.realName || top.detail.name }}</b>
+          <u-row>
+            <span class="idNumber" v-html="IDObj.id"/>
+            <a @tap="showID=!showID">{{ IDObj.btn }}</a>
+          </u-row>
+        </div>
+      </div>
+      <AiCell label="性别">{{ $dict.getLabel("sex", resident.sex) || "-" }}</AiCell>
+      <AiCell label="出生日期">{{ resident.birthDate }}</AiCell>
+      <AiCell label="年龄">{{ resident.age }}</AiCell>
+      <AiCell label="籍贯">{{ resident.birthplaceAreaName }}</AiCell>
+      <AiCell label="民族">{{ $dict.getLabel("nation", resident.nation) || "-" }}</AiCell>
+      <AiCell label="文化程度">{{ $dict.getLabel("education", resident.education) || "-" }}</AiCell>
+      <AiCell label="兵役状况">{{ $dict.getLabel("militaryStatus", resident.militaryStatus) || "-" }}</AiCell>
+      <AiCell label="政治面貌">{{ $dict.getLabel("politicsStatus", resident.politicsStatus) || "-" }}</AiCell>
+      <AiCell label="职业">{{ $dict.getLabel("job", resident.job) || "-" }}</AiCell>
+      <AiCell label="宗教信仰">{{ $dict.getLabel("faithType", resident.faithType) || "-" }}</AiCell>
+    </div>
+    <div class="card">
+      <AiCell title label="联络信息"/>
+      <AiCell label="联系方式">{{ resident.phone }}</AiCell>
+      <AiCell label="现住址">{{ resident.currentAreaName + resident.currentAddress }}</AiCell>
+    </div>
+    <div class="card">
+      <AiCell title label="家庭信息"/>
+      <AiCell label="是否户主">{{ $dict.getLabel("householdName", resident.householdName) || "-" }}</AiCell>
+      <AiCell label="与户主关系">{{ $dict.getLabel("householdRelation", resident.householdRelation) || "-" }}</AiCell>
+      <AiCell label="现住址">{{ resident.householdAreaName + resident.householdAddress }}</AiCell>
+    </div>
+    <div class="card">
+      <AiCell title label="家庭成员"/>
+      <AiTable :data="family" :colConfigs="colConfigs"/>
+    </div>
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: "document",
+  inject: ['top'],
+  computed: {
+    IDObj() {
+      return this.showID ? {
+        id: this.resident?.idNumber,
+        btn: '隐藏'
+      } : {
+        id: this.resident?.idNumber?.replace(/(\d{10}).+/g, '$1******'),
+        btn: '显示'
+      }
+    },
+    colConfigs() {
+      return [
+        {label: "与户主关系", prop: "householdRelation", width: '160rpx', dict: "householdRelation"},
+        {label: "姓名", prop: "name", width: '120rpx'},
+        {label: "性别", prop: "sex", dict: "sex"},
+        {label: "年龄", prop: "age"},
+        {label: "身份证号", prop: "idNumber", width: '320rpx'},
+      ]
+    },
+    resident() {
+      let obj = {}
+      Object.keys(this.top.detail?.residentInfo?.resident || {}).map(e => {
+        obj[e] = this.top.detail?.residentInfo?.resident[e] || ""
+      })
+      return obj
+    },
+    family() {
+      return this.top.detail?.residentInfo?.family?.map(e => ({...e, householdRelation: e.householdRelation || "户主"}))
+    }
+  },
+  data() {
+    return {
+      showID: false,
+      familyList: []
+    }
+  },
+  created() {
+    this.$dict.load("sex", "nation", "education", "job",
+        "faithType", "politicsStatus", "militaryStatus", "householdRelation",
+        "householdName")
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.document {
+  overflow-y: auto;
+  background: #F5F5F5;
+
+  .info {
+    height: 186px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    .fill {
+      color: #3C7FC8;
+      margin-left: 24px;
+      font-size: 28px;
+      line-height: 40px;
+      display: flex;
+      flex-direction: column;
+
+      b {
+        font-size: 36px;
+        color: #333;
+        margin-bottom: 8px;
+        line-height: 50px;
+      }
+
+      a {
+        cursor: pointer;
+      }
+
+      .idNumber {
+        margin-right: 16px;
+        color: #999;
+      }
+    }
+  }
+}
+</style>

src/apps/AppResidentFile/components/info.vue

@@ -0,0 +1,353 @@
+<template>
+  <section class="info">
+    <div class="card">
+      <div class="baseInfo">
+        <u-image border-radius="4" :src="top.detail.avatar" width="118" height="118"/>
+        <div class="fill">
+          <b>{{ top.detail.name }}</b>
+          <div v-if="top.detail.type==1" class="wx">@微信</div>
+          <div v-if="top.detail.type==2">@企业微信</div>
+        </div>
+        <div class="certBtn" @tap="handleCert">{{ !isCert ? "实名认证" : "解绑" }}</div>
+      </div>
+      <u-row>
+        <AiCell class="half" top-label label="来源">{{ $dict.getLabel("wxCustomerAddWay", top.detail.addWay) }}</AiCell>
+        <AiCell class="half" top-label label="添加时间">{{ top.detail.createTime }}</AiCell>
+        <AiCell class="half" top-label label="真实姓名">{{ top.detail.realName }}</AiCell>
+        <AiCell class="half" top-label label="手机号码">{{ resident.phone || "-" }}</AiCell>
+        <AiCell class="half" top-label label="家庭积分">{{ resident.familyIntegral }}</AiCell>
+        <AiCell class="half" top-label label="个人积分">{{ resident.personalIntegral }}</AiCell>
+      </u-row>
+    </div>
+    <div class="card">
+      <AiCell title label="公共标签">
+        <u-icon label="添加" size="38" name="iconAdd" custom-prefix="iconfont" color="#1365DD"
+                label-color="#1365DD" @tap="top.showTagManage=true"/>
+      </AiCell>
+      <AiCell top-label v-for="(op,name) in tagsList" :label="name" :key="name">
+        <u-row>
+          <div class="tag" v-for="(tag,j) in op" :key="j">{{ tag }}</div>
+        </u-row>
+      </AiCell>
+    </div>
+    <div class="card">
+      <AiCell title label="动态"/>
+      <AiCell top-label>
+        <div class="logItem" v-for="item in customLogs" :key="item.id">
+          <div flex class="column" shrink>
+            <div class="dot"/>
+            <div class="line fill"/>
+          </div>
+          <div flex class="start column">
+            <b>{{ $dict.getLabel('wxCustomerLogType', item.type) }}</b>
+            <span>{{ item.createTime }}</span>
+            <div v-html="item.content"/>
+          </div>
+        </div>
+      </AiCell>
+    </div>
+    <u-mask :show="dialog" @tap="dialog=false">
+      <div class="bindCert" @tap.stop>
+        <b class="title">实名认证</b>
+        <u-input class="searchInput" v-model="search" clearable placeholder="请输入姓名或身份证号" @input="handleSearch"/>
+        <div class="residents">
+          <div flex class="spb" v-for="(op,i) in result" :key="i" @tap="bindCert(op.id)">
+            <div v-html="op.name"/>
+            <div v-html="op.idNumber"/>
+          </div>
+        </div>
+      </div>
+    </u-mask>
+    <div bottom>
+      <u-button type="primary" @tap="handleWechat">微信联系</u-button>
+      <u-button v-if="isMobile" :disabled="!resident.phone" @tap="handleTel">电话联系</u-button>
+    </div>
+  </section>
+</template>
+
+<script>
+import {mapActions} from "vuex";
+
+export default {
+  name: "info",
+  inject: ['top'],
+  computed: {
+    resident() {
+      return this.top.detail?.residentInfo?.resident || {}
+    },
+    tagsList() {
+      let obj = {}
+      this.top.detail?.tags?.map(e => {
+        if (e.type == 1 && e?.groupName) {
+          if (obj?.[e.groupName]) {
+            obj[e.groupName].push(e.tagName)
+          } else {
+            obj[e.groupName] = [e.tagName]
+          }
+        }
+      })
+      return obj
+    },
+    isCert() {
+      return !!this.top?.detail?.residentInfo
+    },
+    isMobile() {
+      return ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]
+      .some(e => navigator.userAgent.indexOf(e) > -1)
+    }
+  },
+  data() {
+    return {
+      dialog: false,
+      search: "",
+      result: [],
+      customLogs: []
+    }
+  },
+  methods: {
+    ...mapActions(['injectJWeixin', 'wxInvoke']),
+    searchResident() {
+      this.$http.post("/app/appresident/check-name", null, {
+        params: {name: this.search}
+      }).then(res => {
+        if (res?.data) {
+          let reg = new RegExp(this.search, 'g')
+          this.result = res.data?.map(e => ({
+            ...e,
+            name: e.name.replace(reg, `<b>${this.search}</b>`),
+            idNumber: e.idNumber.replace(reg, `<b>${this.search}</b>`),
+          }))
+        }
+      })
+    },
+    handleSearch() {
+      if (this.search?.length >= 2) {
+        this.searchResident()
+      } else {
+        this.result = []
+      }
+    },
+    handleCert() {
+      if (this.isCert) {
+        this.$confirm("是否要解绑当前实名认证?").then(() => {
+          this.$http.post("/app/wxcp/wxcustomer/unBindCustomer2Resident", null, {
+            params: {residentId: this.resident.id, customerId: this.top.custom}
+          }).then(res => {
+            if (res?.code == 0) {
+              this.$u.toast("解除绑定成功!")
+              this.top.getContact()
+            }
+          })
+        })
+      } else this.dialog = true
+    },
+    bindCert(residentId) {
+      this.dialog = false
+      this.$confirm("是否要绑定该居民?").then(() => {
+        this.$http.post("/app/wxcp/wxcustomer/bindCustomer2Resident", null, {
+          params: {residentId, customerId: this.top.custom}
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$u.toast("绑定成功!")
+            this.top.getContact()
+          }
+        }).catch(err => {
+          this.$u.toast(err)
+          setTimeout(() => this.dialog = true, 1000)
+        })
+      }).catch(() => this.dialog = true)
+    },
+    getCustomLog(customerId) {
+      customerId && this.$http.post("/app/wxcp/wxcustomerlog/listAll", null, {
+        params: {customerId}
+      }).then(res => {
+        if (res?.data) {
+          this.customLogs = res.data
+        }
+      })
+    },
+    handleTel() {
+      location.href = "tel:" + this.resident.phone
+    },
+    handleWechat() {
+      this.wxInvoke(['openUserProfile', {
+        type: 2,
+        userid: this.top.custom
+      }, () => 0])
+    }
+  },
+  created() {
+    this.$dict.load("wxCustomerAddWay", 'wxCustomerLogType')
+    this.getCustomLog(this.top.custom)
+    this.injectJWeixin('openUserProfile')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.info {
+  padding-bottom: 130px;
+
+  .certBtn {
+    cursor: pointer;
+    background: $uni-color-primary;
+    color: #fff;
+    padding: 8px 16px;
+    border-radius: 4px;
+  }
+
+  .baseInfo {
+    height: 186px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    .fill {
+      color: #3C7FC8;
+      margin-left: 24px;
+      font-size: 28px;
+      line-height: 40px;
+
+      b {
+        font-size: 36px;
+        color: #333;
+        margin-bottom: 8px;
+        line-height: 50px;
+      }
+
+      .wx {
+        color: #2EA222;
+      }
+    }
+  }
+
+  ::v-deep .AiCell {
+    &.half {
+      width: 50%;
+    }
+  }
+
+  ::v-deep .u-form-item {
+    width: 50%;
+    min-height: 124px;
+
+    .u-form-item--left {
+      color: #999;
+      min-height: 40px;
+    }
+
+    .u-form-item--right {
+      min-height: 0;
+      margin-top: 16px;
+    }
+  }
+
+  ::v-deep .u-mask {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .bindCert {
+      width: 600px;
+      padding: 32px;
+      min-height: 400px;
+      background-color: #fff;
+      display: flex;
+      flex-direction: column;
+      color: #333;
+    }
+
+    .residents {
+      max-height: 780px;
+      overflow-y: auto;
+    }
+
+    .title {
+      text-align: center;
+      font-size: 36px;
+    }
+
+    .searchInput {
+      margin: 16px 0;
+      border: 1px solid #D0D4DC;
+      border-radius: 8px;
+      padding: 0 16px !important;
+      flex: 0;
+    }
+
+    .spb {
+      height: 60px;
+      cursor: pointer;
+      padding: 0 16px;
+
+      b {
+        font-size: 32px;
+      }
+
+      &:nth-of-type(2n) {
+        background: #eee;
+      }
+    }
+  }
+
+  ::v-deep .logItem {
+    display: flex;
+    min-height: 220px;
+
+    &:last-of-type {
+      .line {
+        display: none;
+      }
+    }
+
+    & > .column + .column {
+      margin-left: 16px;
+    }
+
+    .dot {
+      flex-shrink: 0;
+      width: 16px;
+      height: 16px;
+      background: $uni-color-primary;
+      border: 8px solid #FFFFFF;
+      border-radius: 50%;
+      margin: 8px 0;
+    }
+
+    .line {
+      width: 4px;
+      background: #eee;
+    }
+
+    .start {
+      font-size: 26px;
+      font-weight: 400;
+      color: #666;
+
+      b {
+        color: #333;
+      }
+
+      i {
+        color: $uni-color-primary;
+        font-style: normal;
+      }
+
+      & > b {
+        font-size: 32px;
+        font-weight: bold;
+        margin-bottom: 8px;
+      }
+
+      & > span {
+        color: #999;
+      }
+
+      & > div {
+        margin-top: 16px;
+      }
+
+    }
+  }
+}
+</style>

src/apps/AppResidentFile/resident.vue

@@ -0,0 +1,153 @@
+<template>
+  <section class="resident">
+    <AiLoading v-if="!custom && !error" tips="获取居民信息中..." />
+    <AiResult v-else-if="error" status="error" :tips="error" />
+    <template v-else>
+      <tag-manage v-if="showTagManage" />
+      <template v-else>
+        <AiTopFixed>
+          <u-tabs :list="tabs" :is-scroll="false" :current="currentType" font-size="32" bar-width="192" height="96" @change="handleTabClick" />
+        </AiTopFixed>
+        <component :is="currentTab.comp" />
+      </template>
+    </template>
+    <AiBack v-if="isNormal && !showTagManage" />
+  </section>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import Info from './components/info'
+import Document from './components/document'
+import TagManage from './tagManage.vue'
+
+export default {
+  name: 'resident',
+  components: { TagManage, Document, Info },
+  provide() {
+    return {
+      top: this,
+      id: '',
+    }
+  },
+  computed: {
+    tabs() {
+      return [
+        { name: '居民信息', value: 0, comp: Info },
+        { name: '居民档案', value: 1, comp: Document, hide: !this.detail.residentInfo },
+      ].filter((e) => !e.hide)
+    },
+    currentTab() {
+      return this.tabs.find((e) => e.value == this.currentType)
+    },
+    isNormal() {
+      return !!this.id
+    },
+  },
+  data() {
+    return {
+      currentType: 0,
+      detail: {},
+      showTagManage: false,
+      custom: '',
+      error: '',
+    }
+  },
+  methods: {
+    ...mapActions(['injectJWeixin', 'wxInvoke']),
+    handleTabClick(i) {
+      this.currentType = i
+    },
+    getContact() {
+      if (this.isNormal) {
+        this.getCustom(this.id)
+      } else {
+        this.injectJWeixin('getCurExternalContact')
+          .then(() => {
+            this.wxInvoke([
+              'getCurExternalContact',
+              {},
+              (res) => {
+                if (res?.err_msg == 'getCurExternalContact:ok') {
+                  this.getCustom(res.userId)
+                }
+              },
+            ])
+          })
+          .catch(({ errMsg }) => {
+            this.error = errMsg
+          })
+      }
+    },
+    getCustom(id) {
+      this.$http
+        .post('/app/wxcp/wxcustomer/queryCustomerById', null, {
+          params: { id },
+        })
+        .then((ret) => {
+          if (ret?.data) {
+            this.custom = id
+            this.detail = ret.data
+            if (this.detail.type == 2) {
+              this.error = '只能查看个人微信绑定的居民信息'
+            }
+          }
+        })
+    },
+  },
+  onLoad(o) {
+    this.id = o.id
+    this.getContact()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.resident {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #f5f5f5;
+
+  .error {
+    font-size: 32px;
+    color: #666;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  ::v-deep .u-scroll-box {
+    border-bottom: 1px solid #d4d4d4;
+
+    .u-tab-bar {
+      position: absolute;
+      bottom: -6px;
+    }
+  }
+
+  ::v-deep .card {
+    background: #fff;
+    margin-bottom: 16px;
+    padding: 16px 32px;
+  }
+
+  .half {
+    width: 50%;
+  }
+
+  ::v-deep .tag {
+    height: 56px;
+    line-height: 56px;
+    background: #f3f4f7;
+    border-radius: 6px;
+    padding: 8px 16px;
+    margin-right: 16px;
+    margin-bottom: 16px;
+    overflow: hidden;
+    cursor: default;
+  }
+}
+</style>