150 lines
		
	
	
		
			3.4 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			150 lines
		
	
	
		
			3.4 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
<template>
 | 
						|
  <section class="resident">
 | 
						|
    <ai-loading v-if="!custom&&!error" tips="获取居民信息中..."/>
 | 
						|
    <ai-result v-else-if="error" status="error" :tips="error"/>
 | 
						|
    <template v-else>
 | 
						|
      <tag-manage v-if="showTagManage"/>
 | 
						|
      <template v-else>
 | 
						|
        <ai-top-fixed>
 | 
						|
          <u-tabs :list="tabs" :is-scroll="false" :current="currentType" font-size="32"
 | 
						|
                  bar-width="192" height="96" @change="handleTabClick"/>
 | 
						|
        </ai-top-fixed>
 | 
						|
        <component :is="currentTab.comp"/>
 | 
						|
      </template>
 | 
						|
    </template>
 | 
						|
    <ai-back v-if="isNormal&&!showTagManage"/>
 | 
						|
  </section>
 | 
						|
</template>
 | 
						|
 | 
						|
<script>
 | 
						|
import {mapActions} from "vuex";
 | 
						|
import Info from "./info";
 | 
						|
import Document from "./document";
 | 
						|
import TagManage from "./tagManage";
 | 
						|
import AiLoading from "../../components/AiLoading";
 | 
						|
import AiResult from "../../components/AiResult";
 | 
						|
import AiBack from "../../components/AiBack";
 | 
						|
import AiTopFixed from "../../components/AiTopFixed";
 | 
						|
 | 
						|
export default {
 | 
						|
  name: "resident",
 | 
						|
  components: {AiTopFixed, AiBack, AiResult, AiLoading, TagManage, Document, Info},
 | 
						|
  provide() {
 | 
						|
    return {
 | 
						|
      top: this
 | 
						|
    }
 | 
						|
  },
 | 
						|
  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.$route.query.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.$route.query.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 = "只能查看个人微信绑定的居民信息"
 | 
						|
          }
 | 
						|
        }
 | 
						|
      })
 | 
						|
    }
 | 
						|
  },
 | 
						|
  created() {
 | 
						|
    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>
 |