proginn-frontend/pages/sign/new.vue

<template>
  <div class="sign">
    <intro></intro>
    <verify></verify>
    <info></info>
    <profile></profile>
    <experience></experience>
    <education></education>
    <skills></skills>
    <works></works>
    <social></social>
    <el-button
      v-if="this.userInfo.realname_re == '3'||this.userInfo.realname_re=='0'"
      @click="signNow"
      class="sign-btn"
    >申请签约开发者
    </el-button>

    <showToast
      :isShowToast="isShowToast"
      title="完善技术信用"
      desc="你已成功提交签约申请,客栈将在2-3个工作日内完成签约审核，完善个人技术信用，可以提高签约成功率和接单率。"
      submitBtnDesc="立即了解"
      cancleBtnDesc="好的，知道了"
      @close="onToastClose"
      @submit="jumpToCredit"
    />
  </div>
</template>

<script>
  import {mapState} from "vuex";
  import intro from "@/components/sign/intro";
  import verify from "@/components/sign/verify";
  import info from "@/components/sign/info";
  import profile from "@/components/sign/profile";
  import experience from "@/components/sign/experience";
  import education from "@/components/sign/education";
  import skills from "@/components/sign/skills";
  import works from "@/components/sign/works";
  import social from "@/components/sign/social";
  import showToast from "@/components/common/showToast";
  import qs from "qs";

  export default {
    // async asyncData({ $axios, params }) {
    //   let res = await $axios.$get(`/api/vip/getList`)
    //   console.log('init', res)
    // },
    head: {
      title: "申请签约 - 程序员客栈"
    },
    components: {
      intro,
      verify,
      info,
      profile,
      experience,
      education,
      skills,
      works,
      social,
      showToast
    },
    // mixins: [getDeviceType],
    data() {
      return {
        sign: null,
        isShowToast: false,
        userInfo: {},
        target: 0
      };
    },
    computed: {},
    async mounted() {
      console.log('sign new mounted')
      this.setFrom()

      this.needLogin();
      // realname_re, 1是待审核，2已签约，3是拒绝
      this.userInfo = await this.getUserInfo();
    },
    methods: {
      async signNow() {
        let res = await this.$axios.$post(`/api/user/sign`);
        if (res.status === 1) {
          this.$message.success(res.info);
          this.isShowToast = true
        } else if (res.status === -11) {
          // this.$message.error("请设置主要展示工作经历");
        } else if (res.status === -10) {
          // this.$message.error("其他错误");
        }
      },
      setFrom() {
        let doc = "";
        let from = this.$route.query.from || this.$route.params.from;
        console.log("run setFrom: ", from);
        switch (from) {
          case "wo_intro":
            doc = document.getElementById("profile");
            break;
          case "wo_workexp":
            doc = document.getElementById("workexp");
            break;
          case "wo_edu":
            doc = document.getElementById("education");
            break;
          case "wo_skill":
            doc = document.getElementById("skill");
            break;
          case "works":
            doc = document.getElementById("works");
            break;
        }
        console.log("执行！！！！");
        if (doc) {
          setTimeout(() => {
            doc.scrollIntoView();
          }, 600);
        }
      },
      jumpToCredit() {
        location.href = "/credit/pages"
      },
      onToastClose() {
        this.isShowToast = false
        window.location.reload();
      }
    }
  };
</script>

<style lang="scss">
  .sign {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 1000px;
    background: #f7f7f7;

    > div {
      margin-bottom: 10px;
      width: 100%;
      background: #fff;

      &:last-of-type {
        margin-bottom: 0;
      }

      > header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 13px 20px;
        border-bottom: 1px solid #ebeef5;
      }

      h5 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(29, 42, 58, 1);
        line-height: 22px;
      }

      .status {
        position: relative;
        display: inline-block;
        float: right;
        font-size: 14px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        line-height: 20px;
      }

      .success {
        color: rgba(16, 185, 106, 1);

        &::before {
          content: "";
          position: absolute;
          display: inline-block;
          left: -10px;
          top: 50%;
          transform: translate3d(-100%, -50%, 0);
          width: 20px;
          height: 20px;
          background: url("~@/assets/img/sign/success.png");
        }
      }

      .info {
        color: gray;
      }

      .warning {
        color: red;
      }

      button {
        height: 34px;
        line-height: 10px;
        border-radius: 2px;
      }
    }

    .sign-btn {
      margin-top: 30px;
      width: 210px;
      height: 46px;
      background: rgba(48, 142, 255, 1);
      border-radius: 2px;
      font-size: 14px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 20px;
    }
  }
</style>