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

<template>
  <div class="sign-new-experience">
    <div class="sign-new-tips">
      完善经历和技能信息，尤其<b>技能</b>信息将直接用于<b>派单匹配</b>，确保准确，完善
    </div>
    <div class="sign-experience-main">
      <!-- 教育经历 -->
      <div class="sign-experience-item">
        <stepEducation @educationChange="educationChange"></stepEducation>
      </div>

      <!-- 工作经历 -->
      <div class="sign-experience-item">
        <stepWorkExperienceVue
          @workExperienceChange="workExperienceChange"
        ></stepWorkExperienceVue>
      </div>

      <!-- 技能 -->
      <div class="sign-experience-item">
        <stepSkills @skillsChange="skillsChange"></stepSkills>
      </div>

      <!-- 个人介绍 -->
      <div class="sign-experience-item">
        <stepProfile @profileChange="profileChange"></stepProfile>
      </div>
    </div>

    <div class="sign-new-next">
      <div
        class="sign-new-next-btn"
        :class="{
          disable: !canFinish
        }"
        @click="nextStep"
      >
        完成签约
      </div>
    </div>
  </div>
</template>

<script>
import stepEducation from "./step-education.vue";
import stepWorkExperienceVue from "./step-work-experience.vue";
import stepSkills from "./step-skills.vue";
import stepProfile from "./step-profile.vue";
export default {
  components: {
    stepEducation,
    stepWorkExperienceVue,
    stepSkills,
    stepProfile
  },
  data() {
    return {
      education: [],
      workExperience: [],
      skills: [],
      profile: ""
    };
  },
  computed: {
    canFinish() {
      return (
        this.education.length > 0 &&
        this.workExperience.length > 0 &&
        this.skills.length > 0
      );
    }
  },
  mounted() {
    this.cnzz("签约流程", "最后一步", "访问");
  },
  methods: {
    educationChange(val) {
      this.education = [...val];
    },
    workExperienceChange(val) {
      this.workExperience = [...val];
    },
    skillsChange(val) {
      this.skills = [...val];
    },
    profileChange(val) {
      this.profile = val;
    },
    async nextStep() {
      if (!this.canFinish) {
        this.cnzz("签约流程", "完成签约", "资料未完善");
        return;
      }
      this.cnzz("签约流程", "完成签约", "提交");
      let that = this;
      let res = await this.$axios.$post("/api/user/sign", {});
      if (res.status === 1) {
        this.cnzz("签约流程", "完成签约", "提交成功");
        this.$alert("签约提交成功，等待后台审核", "", {
          type: "success",
          callback: function () {
            that.$router.replace({
              path: "/frontend/developer"
            });
          }
        });
      }
    }
  }
};
</script>

<style lang="scss">
.sign-experience-main {
  margin-top: 60px;
  .el-button {
    height: 34px;
    line-height: 34px;
    padding: 0 20px;
  }
}
.sign-experience-item {
  margin-top: 60px;
}
.sign-new-experience {
  padding-bottom: 30px;
  .sign-new-next {
    margin-top: 100px;
  }
}

.sign-edit-icon {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
</style>