dvcp_v2_wechat_app/src/project/pingchang/AppPartyAuth/partyAuthSuccess.vue

<template>
  <div class="partyAuthSuccess">
    <template v-if="isSuccess">
      <!-- <image src="https://cdn.cunwuyun.cn/img/authSuccess.png"/> -->
      <image src="./img/success.png"/>
      <h2 v-text="`认证成功！`"/>
      <div class="btn" @click="gotoInfo" v-text="`前往查看`"/>
    </template>
    <template v-else-if="isFail">
      <image src="https://cdn.cunwuyun.cn/img/authFail.png"/>
      <h2 v-text="`认证失败！`"/>
      <span class="flex">请先填写<div class="blue" v-text="`居民档案`"/> 进行申请</span>
      <div class="btn" @click="apply">居民档案申请</div>
      <div class="btn plain" @click="backToHome">返回</div>
    </template>
    <div class="authing" v-else>
      <div class="result" v-text="`你发起的申请/修改`"/>
      <div class="result" v-text="authingResult"/>
      <div class="failReason" v-if="authFail">
        <div class="title flex spb">
          <b v-text="`审核结果`"/>
          <b class="red" v-text="`未通过`"/>
        </div>
        <b v-text="`原因`"/>
        <div v-html="info.resident.auditOpinion"/>
      </div>
      <div class="fixed-bottom">
        <u-button type="primary" @click="$linkTo('./authInfo')">
          <text style="font-size: 16px" v-text="`查看填报内容`"/>
        </u-button>
      </div>
    </div>
  </div>
</template>
<script>
import {mapState} from "vuex";

export default {
  appName: "实名身份认证",
  data() {
    return {
      info: {}
    }
  },
  computed: {
    ...mapState(['user']),
    isSuccess() {
      return this.user.partyStatusForWX == 0
    },
    // isFail() {
    //   return this.user.partyStatusForWX == 0
    // },
    authFail() {
      return this.user.status == -1
    },
    authingResult() {
      return this.authFail ? "审核未通过" : "正在审核中"
    }
  },
  onLoad() {
    if (!this.isSuccess && !this.isFail) this.getAuthResult()
  },
  methods: {
    backToHome() {
      uni.navigateBack({})
    },
    apply() {
      uni.redirectTo({url: "./authApply"})
    },
    gotoInfo() {
      uni.redirectTo({url: "./authInfo"})
    },
    getAuthResult() {
      this.$instance.post(`/app/appresident/detailForWx`, null, {
        params: {id: this.user.residentId}
      }).then(res => {
        if (res?.data) {
          this.info = res.data
        }
      })
    }
  }
}
</script>
<style lang="scss">
@import "~dvcp-wui/common";

.partyAuthSuccess {
  height: 100vh;
  padding-top: 96px;
  box-sizing: border-box;
  text-align: center;
  background-color: #fff;
  overflow: hidden;

  image {
    width: 240px;
    height: 240px;
    margin-bottom: 16px;
  }

  h2 {
    margin-bottom: 16px;
    color: #333333;
    font-size: 40px;
    font-weight: 700;
  }

  span {
    font-size: 28px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: #333;
    margin-bottom: 40px;
    justify-content: center;

    .blue {
      color: #4181FF;
    }
  }

  .btn {
    width: 320px;
    height: 88px;
    line-height: 88px;
    margin: 48px auto 0;
    color: #fff;
    font-size: 34px;
    background: #4181FF;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
    border-radius: 16px;

    &.plain {
      background: #fff;
      color: #4181FF;
      border: 2px solid #4181FF;
    }
  }

  .authing {
    margin-top: -272px;
    padding: 224px 32px 0;
    box-sizing: border-box;
    height: calc(100vh + 272px);
    background-image: url("https://cdn.cunwuyun.cn/shandong10086/authInfoHbg.png");
    background-size: 100vw;
    background-repeat: no-repeat;
    background-color: #f3f6f9;

    .result {
      font-size: 56px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: bold;
      color: #000;
      line-height: 88px;
      text-align: left;
    }

    .failReason {
      margin-top: 160px;
      background: #FFFFFF;
      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
      border-radius: 16px;
      padding: 0 32px 34px;
      font-size: 32px;
      text-align: left;

      .title {
        height: 112px;
        box-shadow: inset 0px -1px 0px 0px #DDDDDD;
      }

      b {
        font-size: inherit;
        color: #999;
        line-height: 112px;

        &.red {
          color: #f46;
        }
      }
    }

    .fixed-bottom {
      position: fixed;
      bottom: 16px;
      width: 100vw;
      height: 120px;
      padding: 16px 32px;
      box-sizing: border-box;
      background-color: inherit;
    }
  }
}
</style>