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>
        <StepEnd v-if="isStepEndShow"></StepEnd>
    </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 StepEnd from './components/StepEnd.vue'
export default {
    name: "SeoLearnList",
    components: {
        FormFirstStep,
        FormXuQiu,
        FormZhengBao,
        StepEnd
    },
    data() {
        return {
            baseUrl: "",
            mobile: false,
            // firstLoad: true,
            isWeixinApp: true,

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

            // 当前激活的状态
            active: 0,
            // wait process finish
            activeStatus: "wait"
        };
    },
    head() {
        const {
            title = "",
                keyword = "",
                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
        },
        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
            }
            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
        }
        this.baseUrl = this.$store.state.domainConfig.siteUrl;
        this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1;
    },
    methods: {
        formSubmit(step, data) {
            let query = {}
            if (step == 1) {
                this.type = data;
                query['type'] = this.type
            }
            // 进入下一步
            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>