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-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>

        <FormRecomment ref="FormRecomment"  :projectid="projectid"></FormRecomment>
    </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 FormRecomment from "./components/Form_recommend.vue";

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

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

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

            projectid: "",
        };
    },
    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['FormRecomment'].show();
                }
                else
                {
                  this.$refs['FormRecomment'].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>