proginn-frontend/pages/frontend/requirements/index.vue

<template>
  <div
    :class="mobile ? 'mobileMain' : ''"
    :style="{
      marginTop: mainMarginTop,
      marginBottom: mobile ? '0px' : '30px !important'
    }"
  >
    <div class="requirements-container" v-if="!mobile">
      <div class="requirements-title">发布需求</div>

      <div class="requirements-tips">
        程序员客栈拥有
        <span
          ><b>{{ developer_number }}</b
          >个</span
        >
        互联网人才，成功完成了
        <span
          ><b>{{ project_number }}</b
          >个</span
        >
        项目，请放心发布您的需求！
      </div>

      <div class="requirements-step-container">
        <div class="requirements-step">
          <div class="requirements-step-status">
            <div class="requirements-step-icon" :class="FirstStepStatus">
              <div class="requirements-step-tips">
                选择需求类型
              </div>
            </div>
          </div>
          <div class="requirements-step-line" :class="FirstStepStatus"></div>
        </div>

        <div class="requirements-step">
          <div class="requirements-step-status">
            <div class="requirements-step-icon" :class="secondStepStatus">
              <div class="requirements-step-tips">
                填写需求描述
              </div>
            </div>
          </div>
          <div class="requirements-step-line" :class="secondStepStatus"></div>
        </div>

        <div class="requirements-step">
          <div class="requirements-step-status">
            <div class="requirements-step-icon" :class="thirdStepStatus">
              <div class="requirements-step-tips">
                发布成功
              </div>
            </div>
          </div>
        </div>
      </div>

      <FormFirstStep
        v-if="isFirstFormShow"
        v-on:formSubmit="formSubmit"
        v-on:formChange="formChange"
      ></FormFirstStep>
      <FormXuQiu
        v-if="isFormXuqiuShow"
        v-on:formChange="formChange"
        v-on:formSubmit="formSubmit"
      ></FormXuQiu>
      <FormZhengBao
        v-if="isFormZhengBaoShow"
        v-on:formChange="formChange"
        v-on:formSubmit="formSubmit"
      ></FormZhengBao>
      <FormYunDuan
        v-if="isFormYunDuanShow"
        v-on:formChange="formChange"
        v-on:formSubmit="formSubmit"
      ></FormYunDuan>
      <StepEnd v-if="isStepEndShow"></StepEnd>

      <FormRecommend ref="FormRecommend" :projectid="projectid"></FormRecommend>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import qs from "qs";
import FormFirstStep from "./components/FormFirstStep.vue";
// 发布需求梳理表单
import FormXuQiu from "./components/Form_xuqiu.vue";
// 发布整包表单
import FormZhengBao from "./components/Form_zhengbao";
// 发布云端项目
import FormYunDuan from "./components/Form_yunduan";

import FormRecommend from "./components/Form_recommend.vue";

// 发布成功页
import StepEnd from "./components/StepEnd.vue";
export default {
  name: "SeoLearnList",
  components: {
    FormFirstStep,
    FormXuQiu,
    FormZhengBao,
    FormYunDuan,
    StepEnd,
    FormRecommend
  },
  data() {
    return {
      baseUrl: "",
      mobile: false,
      // firstLoad: true,
      isWeixinApp: true,

      // 0 默认 1云端工作 2 项目整包 3 需求梳理
      type: 0,

      // 当前激活的状态
      active: 1,
      // wait process finish
      activeStatus: "wait",

      projectid: "",

      developer_number: 0,
      project_number: 0
    };
  },
  async asyncData({ route, $axios }) {
    let active;
    if (route.query.step) {
      active = Number(route.query.step);
      console.log(active, 2222);
    } else {
      active = 1;
    }
    let countResult = await $axios.$post("/api/index/count");
    let developer_number = 0;
    let project_number = 0;
    if (countResult.status === 1) {
      developer_number = countResult.data.developer_number;
      project_number = countResult.data.project_number;
    }

    return {
      active,
      developer_number,
      project_number
    };
  },
  head() {
    const {
      title = "项目外包_方案定制_专业服务众包平台-【程序员客栈项目开发】-程序员客栈",
      keyword = "众包,众包平台,众包网站,软件外包,软件众包平台,项目外包,兼职,兼职平台,软件开发,APP开发,小程序开发，微信小程序开发，网站建设,游戏开发,微信开发,移动应用开发,行业解决方案,创意设计,LOGO设计,动画动漫,影视制作,工业设计,技术服务,短期驻场,IT运维,测试服务,入驻赚钱,外包线索",
      description = "程序员客栈项目开发服务，为科技企业提供技术新⼈⼒解决⽅案，为程序员提供各式⼯作成⻓机会。",
      h1 = "",
      canonical = "",
      metaLocation
    } = this.head || {};
    let obj = {
      title: title,
      meta: [
        {
          name: "keywords",
          content: keyword
        },
        {
          name: "description",
          content: description
        },
        {
          name: "h1",
          content: h1
        }
      ],
      link: [
        {
          rel: "canonical",
          href: canonical
        }
      ]
    };
    if (metaLocation) {
      obj.meta.push({
        name: "location",
        content: metaLocation
      });
    }
    return obj;
  },
  computed: {
    ...mapState(["deviceType"]),
    showWxHeader() {
      return (
        !this.deviceType.app &&
        !this.isWeixinApp &&
        (this.deviceType.android || this.deviceType.ios)
      );
    },
    mainMarginTop() {
      if (this.mobile && this.showWxHeader) {
        return "64px !important";
      } else if (this.mobile) {
        return "0px !important";
      } else {
        return "20px !important";
      }
    },
    FirstStepStatus: function() {
      let status = "";
      switch (this.active) {
        case 1:
          status = this.activeStatus;
          break;
        case 2:
          status = "success";
          break;
        case 3:
          status = "success";
          break;
        default:
          status = "wait";
      }
      return status;
    },
    secondStepStatus: function() {
      let status = "";
      switch (this.active) {
        case 1:
          status = "wait";
          break;
        case 2:
          status = this.activeStatus;
          break;
        case 3:
          status = "success";
          break;
        default:
          status = "wait";
      }
      return status;
    },
    thirdStepStatus: function() {
      let status = "";
      switch (this.active) {
        case 1:
          status = "wait";
          break;
        case 2:
          status = "wait";
          break;
        case 3:
          status = "success";
          break;
        default:
          status = "wait";
      }
      return status;
    },
    isFirstFormShow: function() {
      return this.active == 1;
    },
    isFormXuqiuShow: function() {
      return this.active == 2 && this.type == 3;
    },
    isFormZhengBaoShow: function() {
      return this.active == 2 && this.type == 2;
    },
    isFormYunDuanShow: function() {
      return this.active == 2 && this.type == 1;
    },
    isStepEndShow: function() {
      return this.active == 3;
    }
  },
  watch: {
    "$route.query": function(val) {
      if (val.step) {
        this.active = Number(val.step);
      } else {
        this.active = 1;
      }
      if (val.type) {
        this.type = Number(val.type);
      } else {
        this.type = 0;
      }

      if (val.type == 1 && val.step == 3 && val.projectid) {
        this.projectid = val.projectid;
        this.$nextTick(() => {
          this.$refs["FormRecomment"].show();
        });
      }

      this.activeStatus = "wait";
    }
  },
  mounted() {
    let query = this.$route.query;
    if (query.step) {
      this.active = Number(query.step);
    } else {
      this.active = 1;
    }
    if (query.type) {
      this.type = Number(query.type);
    } else {
      this.type = 0;
    }
    if (query.type == 1 && query.step == 3 && query.projectid) {
      this.projectid = query.projectid;
      this.$nextTick(() => {
        if (query.show) {
          this.$refs["FormRecommend"].show();
        } else {
          this.$refs["FormRecommend"].hide();
        }
      });
    }
    this.baseUrl = this.$store.state.domainConfig.siteUrl;
    this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1;
  },
  methods: {
    formSubmit(step, data) {
      this.checkLogin(true);
      let query = {};
      query["show"] = false;
      if (step == 1) {
        this.type = data;
        query["type"] = this.type;
      }
      if (step == 2 && this.type == 1) {
        query["projectid"] = data;
        query["type"] = this.type;
      }
      if (step == 3) {
        query["show"] = true;
      }
      // 进入下一步
      step++;
      this.active = step;
      query["step"] = this.active;
      this.activeStatus = "process";
      this.$nextTick(() => {
        this.$router.push({
          path: "/frontend/requirements",
          query: query
        });
      });
    },
    formChange(step, type) {
      this.active = step;
      this.activeStatus = type;
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/css/requirements/index.scss";
</style>