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: {}
    };
  },
  computed: {},
  async mounted() {
    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("其他错误");
      }
    },
    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>