proginn-frontend/components/sign/step-cert.vue

<template>
  <div class="sign-new-cert">
    <div class="sign-new-tips">完成签约流程即可接单！</div>
    <div class="sign-cert-main">
      <a
        href="/frontend/name_cert?from=sign"
        @click="cnzz('签约流程', '实名认证', '去认证')"
        class="sign-cert-btn"
        >去认证</a
      >
    </div>

    <div class="sign-new-next">
      <div
        class="sign-new-next-btn"
        :class="{
          disable: !canNext
        }"
        @click="nextStep"
      >
        下一步
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {}
    };
  },
  created() {
    this.checkIsVerify();
    this.cnzz("签约流程", "实名认证", "访问");
  },
  computed: {
    canNext() {
      // realname_verify_status, 1是待审核，2审核通过，3是拒绝
      return this.userInfo.realname_verify_status == "2";
    }
  },
  methods: {
    async checkIsVerify() {
      this.userInfo = await this.getUserInfo();
    },
    nextStep() {
      if (!this.canNext) {
        this.cnzz("签约流程", "实名认证(下一步)", "未认证");
        this.$message.error("请先完成实名认证哦");
        return false;
      }
      this.$emit("next");
      this.cnzz("签约流程", "实名认证(下一步)", "已认证");
    }
  }
};
</script>

<style lang="scss">
.sign-cert-main {
  margin: 40px auto;
  width: 390px;
  height: 280px;

  border-radius: 8px;
  box-sizing: border-box;
  background: #ebf4ff url("~@/assets/img/sign/cert.png") no-repeat 50% 60px;
  background-size: 127px 82px;
  padding-top: 182px;
}
.sign-cert-btn {
  margin: 0 auto;
  display: block;
  width: 252px;
  height: 48px;
  background: #4b5d73;
  border-radius: 8px;

  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;

  text-align: center;
  line-height: 48px;
}
</style>