党员认证

src/project/pingchang/AppPartyAuth/partyAuthInfo.vue

@@ -0,0 +1,155 @@
+<template>
+  <section class="partyAuthInfo">
+    <div class="headerCard flex card">
+      <div class="avatar">
+        <open-data type="userAvatarUrl" lang="zh_CN" class="user-img"/>
+      </div>
+      <div class="flex fill">
+        <div class="fill">
+          <b v-text="user.realName"/>
+          <div class="color-999" v-text="sexAge"/>
+        </div>
+        <div class="blue" v-if="isOwner">户主</div>
+      </div>
+    </div>
+    <div class="card">
+      <b class="title" v-text="`基本信息`"/>
+      <view class="item flex spb" v-for="row in baseInfo" :key="row.prop">
+        <span class="color-999" v-text="row.label"/>
+        <div v-if="row.dict" v-text="$dict.getLabel(row.dict,detail[row.prop])||'-'"/>
+        <div v-else v-text="detail[row.prop]||'-'"/>
+      </view>
+    </div>
+    <div class="card">
+      <b class="title" v-text="`联络方式`"/>
+      <view class="item" :class="{spb:!row.topLabel,flex:!row.topLabel}" v-for="row in contract" :key="row.prop">
+        <span class="color-999" v-text="row.label"/>
+        <div v-text="detail[row.prop]||'-'"/>
+      </view>
+    </div>
+    <div class="fixed-bottom">
+      <u-button type="primary" @click="apply">
+        <text style="font-size: 16px" v-text="`申请修改`"/>
+      </u-button>
+    </div>
+  </section>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "partyAuthInfo",
+  appName: "我的档案",
+  data() {
+    return {
+      detail: {},
+      baseInfo: [
+        {label: "身份证号", prop: "idNumber"},
+        {label: "籍贯", prop: "birthplaceAreaName"},
+        {label: "民族", prop: "nation", dict: "nation"},
+        {label: "文化程度", prop: "education", dict: "education"},
+        {label: "政治面貌", prop: "politicsStatus", dict: "politicsStatus"},
+        {label: "兵役状况", prop: "militaryStatus", dict: "militaryStatus"},
+        {label: "宗教信仰", prop: "faithType", dict: "faithType"},
+        {label: "职业", prop: "job", dict: "job"},
+      ],
+      contract: [
+        {label: "联系方式", prop: "phone"},
+        {label: "现住址", prop: "currentAreaName"},
+        {label: "详细住址", prop: "currentAddress", topLabel: true},
+        {label: "户籍地址", prop: "householdAreaName"},
+        {label: "详细地址", prop: "householdAddress", topLabel: true},
+      ]
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+    sexAge() {
+      let {idNumber, gender} = this.$idCardNoUtil.getIdCardInfo(this.user.idNumber), age = this.$calcAge(idNumber)
+      return `${this.$dict.getLabel("sex", gender) || ""} ${age ? age + "岁" : ""}`
+    },
+    isOwner() {
+      return this.detail.householdName == 1
+    }
+  },
+  onLoad() {
+    this.$dict.load("sex", "nation", "education", "politicsStatus", "militaryStatus", "faithType", "job")
+    this.getResident()
+  },
+  methods: {
+    getResident() {
+      this.$instance.post("/app/appresident/detailForWx", null, {
+        params: {id: this.user.residentId}
+      }).then(res => {
+        if (res?.data) {
+          this.detail = res.data.resident
+        }
+      })
+    },
+    apply() {
+      uni.navigateTo({url: "./partyAuthApply"})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.partyAuthInfo {
+  background: #F3F6F9;
+  min-height: 100vh;
+  padding-bottom: 280px;
+
+  .avatar {
+    display: inline-block;
+    width: 96px;
+    height: 96px;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 4px solid #FFFFFF;
+    flex-shrink: 0;
+    margin-right: 16px;
+  }
+
+  .card {
+    background: #fff;
+    padding-left: 32px;
+    margin-bottom: 24px;
+
+
+    .title {
+      width: 100%;
+      height: 116px;
+      line-height: 116px;
+      font-weight: bold;
+    }
+
+    .item {
+      width: 100%;
+      min-height: 112px;
+      color: #333;
+      box-shadow: inset 0px -1px 0px 0px #DDDDDD;
+      padding: 32px 32px 32px 0;
+      box-sizing: border-box;
+      white-space: normal;
+    }
+  }
+
+  .headerCard {
+    height: 160px;
+    padding-right: 32px;
+  }
+
+  .blue {
+    color: #4181FF;
+  }
+
+  .fixed-bottom {
+    width: 100vw;
+    height: 120px;
+    padding: 16px 32px;
+    box-sizing: border-box;
+    background: inherit;
+  }
+}
+</style>