项目整包

需求梳理

assets/css/requirements/index.scss

@@ -0,0 +1,93 @@
+.requirements-container {
+  width: 1100px;
+  padding-top: 50px;
+  padding-bottom: 80px;
+  background: #ffffff;
+  border-radius: 8px;
+}
+.requirements-title {
+  text-align: center;
+  height: 40px;
+  font-size: 28px;
+  font-weight: 500;
+  color: #0b121a;
+  line-height: 40px;
+}
+
+.requirements-step-container {
+  width: 462px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 40px;
+  display: flex;
+  height: 80px;
+}
+.requirements-step {
+  flex: 1;
+  height: 32px;
+  position: relative;
+  &:nth-last-child(1) {
+    flex: 0;
+  }
+}
+.requirements-step-status {
+  height: 32px;
+  position: relative;
+}
+.requirements-step-icon {
+  position: relative;
+  z-index: 5;
+  width: 32px;
+  height: 32px;
+  background: #ebeced;
+  border-radius: 100%;
+  transition: all .3s;
+  &.success {
+    background: url("~@/assets/img/account/step_cur.png") no-repeat 50% 50%;
+    background-size: 32px auto;
+  }
+  &.wait {
+    background: #ebeced;
+  }
+  &.process {
+    background: #45c47a;
+  }
+}
+.requirements-step-line {
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 6px;
+  background: #ebeced;
+  transition: all .3s;
+  &.success {
+    background: #d0f2de;
+  }
+  &.wait {
+    background: #ebeced;
+  }
+  &.process {
+    background: #d0f2de;
+  }
+}
+
+.requirements-step-tips {
+  position: absolute;
+  margin-top: 14px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #828c99;
+  line-height: 20px;
+  transform: translateX(-50%);
+  left: 50%;
+  top: 46px;
+  white-space: nowrap;
+}
+.requirements-type-submit {
+    text-align: center;
+    margin-top: 80px;
+}

mixins/uploadFile.js

@@ -1,6 +1,6 @@
 import axios from 'axios'
 export default {
-  mounted() {},
+  mounted() { },
   data() {
     return {
       uploadInfo: {},
@@ -15,11 +15,11 @@ export default {
     }
   },
   methods: {
-    apiPrepareUpload(file, cb) {
+    apiPrepareUpload(file, cb, type = 3) {
       let uploadInfo = null;
       let formData = new FormData()
       formData.append("filename", file.name);
-      formData.append("target", '{"type":3}');
+      formData.append("target", JSON.stringify({ "type": type }));
       this.$axios.post('/file/prepareUpload', formData, {
         headers: {
           "Content-Type": "multipart/form-data"
@@ -28,19 +28,19 @@ export default {
         this.uploadInfo = data.data.data.post_params;
         this.post_url = data.data.data.post_url;
         this.upload_id = data.data.data.upload_id;
-        this.apiSend(file, cb)
+        this.apiSend(file, cb,type)
       })
       return uploadInfo;
     },
-    apiSend(file, cb) {
+    apiSend(file, cb,type = 3) {
       let formData = new FormData()
       formData.append("file", file);
       formData.append("name", file.name);
-      formData.append("target", '{"type":3}');
+      formData.append("target", JSON.stringify({ "type": type }));
       for (let key in this.uploadInfo) {
         formData.append(key, this.uploadInfo[key])
       }
-      axios.post('/file/proxyUpload', formData, {
+      this.$axios.post('/file/proxyUpload', formData, {
         headers: {
           "Content-Type": "multipart/form-data"
         }

pages/frontend/requirements/components/FormFirstStep.vue

@@ -0,0 +1,194 @@
+<template>
+<div class="requirements-type-container">
+    <div class="requirements-type-title">请选择一种需求类型：</div>
+    <div class="requirements-type-list">
+        <div class="requirements-type-item" :class="type == 1?'cur':''" @click="selectType(1)">
+            <div class="requirements-type-title-area">
+                <div class="requirements-type-icon type1"></div>
+                <div class="requirements-type-title">云端工作：</div>
+            </div>
+            <div class="requirements-type-purpose">我想明确找个人</div>
+            <ul class="requirements-type-purpose-list">
+                <li>我需要个前端开发者？</li>
+                <li>我需要个java开发者？</li>
+                <li>我需要个爬虫工程师？</li>
+                <li>我需要个安卓/IOS开发者？</li>
+            </ul>
+            <div class="requirements-type-payment">按月付费</div>
+        </div>
+        <div class="requirements-type-item" :class="type == 2?'cur':''" @click="selectType(2)">
+            <div class="requirements-type-title-area">
+                <div class="requirements-type-icon type2"></div>
+                <div class="requirements-type-title">项目整包</div>
+            </div>
+            <div class="requirements-type-purpose">我有个项目要开发：</div>
+
+            <ul class="requirements-type-purpose-list">
+                <li>我要开发个网站？我要开发个小程序？</li>
+                <li>我要开发个APP？</li>
+                <li>我要做个游戏？我要爬个网站？</li>
+            </ul>
+            <div class="requirements-type-payment">按项目付费</div>
+        </div>
+        <div class="requirements-type-item" :class="type == 3?'cur':''" @click="selectType(3)">
+            <div class="requirements-type-title-area">
+                <div class="requirements-type-icon type3"></div>
+                <div class="requirements-type-title">需求梳理</div>
+            </div>
+            <div class="requirements-type-purpose">
+                我有个idea需要请产品经理梳理：
+            </div>
+
+            <ul class="requirements-type-purpose-list">
+                <li>我的想法要落地，需要产品结构图和流程图？</li>
+                <li>用户交互怎么设计？</li>
+                <li>原型图不会画？</li>
+            </ul>
+            <div class="requirements-type-payment">固定付费￥1980</div>
+        </div>
+    </div>
+    <div class="requirements-type-submit">
+        <el-button :disabled="!type" type="primary" @click="submit" round>下一步</el-button>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            type: ""
+        }
+    },
+    methods: {
+        selectType(type) {
+            this.type = type
+            this.$emit('formChange', 1,'process')
+        },
+        submit() {
+            this.$emit('formSubmit',1, this.type)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.requirements-type-container {
+    margin: 80px 80px 0;
+}
+
+.requirements-type-container {
+    font-size: 22px;
+    font-weight: 500;
+    color: #0b121a;
+    line-height: 30px;
+}
+
+.requirements-type-list {
+    margin-top: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.requirements-type-item {
+    box-sizing: border-box;
+    width: 286px;
+    height: 246px;
+    cursor: pointer;
+    position: relative;
+
+    &::after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        border-radius: 16px;
+        border: 1px solid #ced3d9;
+        // transition: all 0.3s;
+    }
+
+    &.cur {
+        &::after {
+            border: 2px solid #308EFF;
+        }
+    }
+}
+
+.requirements-type-title-area {
+    margin-top: 17px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.requirements-type-icon {
+    width: 36px;
+    height: 36px;
+    margin-right: 8px;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: 36px auto;
+
+    &.type1 {
+        background-image: url("~@/assets/img/account/type1.png");
+    }
+
+    &.type2 {
+        background-image: url("~@/assets/img/account/type2.png");
+    }
+
+    &.type3 {
+        background-image: url("~@/assets/img/account/type3.png");
+    }
+}
+
+.requirements-type-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #0b121a;
+    line-height: 22px;
+}
+
+.requirements-type-purpose {
+    margin-left: 24px;
+    margin-top: 17px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #0b121a;
+    line-height: 20px;
+}
+
+.requirements-type-purpose-list {
+    margin-top: 6px;
+    margin-left: 24px;
+
+    li {
+        width: 224px;
+        margin-left: 20px;
+        list-style: disc;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #828c99;
+        line-height: 20px;
+    }
+}
+
+.requirements-type-payment {
+    margin-left: 24px;
+    margin-top: 20px;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #828c99;
+    line-height: 20px;
+}
+
+.requirements-type-submit {
+    text-align: center;
+    margin-top: 80px;
+}
+</style>

pages/frontend/requirements/components/Form_xuqiu.vue

@@ -0,0 +1,186 @@
+<template>
+<div class="form-xuqiu">
+    <div class="form-title">当前类型：需求梳理</div>
+    <el-form ref="modalForm" :model="modalFormData" :rules="rules" size="medium" label-width="100px">
+        <div class="form-label">1.简短描述您的需求</div>
+        <el-form-item label-width="0" prop="pro_descrption">
+            <el-input v-model="modalFormData.pro_descrption" type="textarea" :placeholder="tips" show-word-limit :autosize="{ minRows: 10, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
+        </el-form-item>
+
+        <el-form-item label-width="0" prop="field103">
+            <div class="form-label">
+                <span style="margin-right:10px">我有附件要上传</span>
+                <el-switch v-model="modalFormData.field103"></el-switch>
+            </div>
+        </el-form-item>
+        <el-form-item label-width="0" prop="field104" v-show="modalFormData.field103">
+            <el-upload class="upload-demo" :file-list="field104fileList" drag :show-file-list="true" action="/file/prepareUpload" :multiple="false" :http-request="uploadFile" :on-remove="remove">
+                <i class="el-icon-upload"></i>
+                <div class="el-upload__text">
+                    将文件拖到此处，或<em>点击上传</em>传需求文档
+                </div>
+                <!-- <div class="el-upload__tip" slot="tip">
+            拖拽或点击上
+          </div> -->
+            </el-upload>
+        </el-form-item>
+        <el-form-item size="large">
+            <div class="form-submit-area">
+                <el-button type="primary" @click="submitForm">确定</el-button>
+            </div>
+        </el-form-item>
+    </el-form>
+</div>
+</template>
+
+<script>
+import uploadFile from "@/mixins/uploadFile";
+export default {
+    components: {},
+    props: [],
+    data() {
+        return {
+            modalFormData: {
+                pro_descrption: "",
+                field103: false,
+                field104: null
+            },
+            rules: {
+                pro_descrption: [{
+                    required: true,
+                    message: "请输入您的需求",
+                    trigger: "blur"
+                }]
+            },
+            field104Action: "",
+            field104fileList: [],
+
+            successUploadFileMap: {},
+
+            tips: `可参考以下内容：\n1、您的产品/公司/业务的简短介绍\n2、需求的核心工作内容\n3、对开发者的其他需求`
+        };
+    },
+    computed: {},
+    watch: {
+        modalFormData: {
+            deep: true,
+            handler: function (val) {
+                if(!val.field103){
+                    this.field104fileList = []
+                }
+                this.$emit("formChange", 2, "process");
+            }
+        }
+    },
+    created() {},
+    mounted() {
+        this.$emit("formChange", 2, "process");
+    },
+    mixins: [uploadFile],
+    methods: {
+        submitForm() {
+            this.$refs["modalForm"].validate(valid => {
+                if (!valid) return;
+                // TODO 提交表单
+                this.requestSubmit();
+            });
+        },
+        resetForm() {
+            this.$refs["modalForm"].resetFields();
+        },
+        uploadFile(file, type) {
+            this.uploading = true;
+            this.apiPrepareUpload(
+                file.file,
+                res => {
+                    if (res.data && res.data.status === 1) {
+                        let uploadId = res.data.data._upload_id;
+                        let url = res.data.data.url;
+
+                        this.field104fileList.push({
+                            data: {
+                                ...res.data.data
+                            },
+                            name: res.data.data.name,
+                            url: url,
+                            uploadId: uploadId
+                        });
+                        this.$message.success("上传成功");
+                    } else {
+                        this.$message.error("上传失败");
+                    }
+                },
+                4
+            );
+            return false;
+        },
+        remove(file, fileList) {
+            this.field104fileList = [...fileList];
+            // console.log(111,file, fileList)
+        },
+
+        async requestSubmit() {
+            let params = {
+                is_package: 1,
+                // hotsale_id:0,
+                pro_name: "需求梳理",
+                // budget:0,
+                pro_descrption: 0,
+                projectfiles: []
+            };
+            if (this.field104fileList.length > 0) {
+                let arr = this.field104fileList.map(item => {
+                    return {
+                        ...item.data
+                    };
+                });
+                params["projectfiles"] = JSON.stringify(arr);
+            }
+            params["pro_descrption"] = this.modalFormData.pro_descrption;
+
+            let that = this;
+            this.$axios
+                .$post(
+                    "/api/project/publish", {
+                        ...params
+                    }
+                )
+                .then(res => {
+                    if (Number(res.status) === 1) {
+                        this.$message.success("提交成功");
+                        this.$emit('formSubmit', 2, res.data)
+                    } else {
+                        this.$message.error("提交失败");
+                    }
+                });
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+.form-xuqiu {
+    margin: 80px 80px 0;
+}
+
+.form-title {
+    font-size: 22px;
+    font-weight: 500;
+    color: #0b121a;
+    line-height: 30px;
+    margin-bottom: 40px;
+}
+
+.form-label {
+    height: 30px;
+    line-height: 30px;
+    font-size: 13px;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    color: #19222e;
+}
+
+.form-submit-area {
+    text-align: center;
+}
+</style>

pages/frontend/requirements/components/Form_zhengbao.vue

@@ -0,0 +1,230 @@
+<template>
+<div class="form-xuqiu">
+    <div class="form-title">当前类型：项目整包</div>
+    <el-form ref="modalForm" :model="modalFormData" :rules="rules" size="medium" label-width="100px">
+        <div class="form-label">1.简短描述您的需求</div>
+        <el-form-item label-width="0" prop="pro_descrption">
+            <el-input v-model="modalFormData.pro_descrption" type="textarea" :placeholder="tips" show-word-limit :autosize="{ minRows: 10, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
+        </el-form-item>
+
+        <el-form-item label-width="0" prop="field103">
+            <div class="form-label">
+                <span style="margin-right:10px">我有附件要上传</span>
+                <el-switch v-model="modalFormData.field103"></el-switch>
+            </div>
+        </el-form-item>
+        <el-form-item label-width="0" prop="field104" v-show="modalFormData.field103">
+            <el-upload class="upload-demo" :file-list="field104fileList" drag :show-file-list="true" action="/file/prepareUpload" :multiple="false" :http-request="uploadFile" :on-remove="remove">
+                <i class="el-icon-upload"></i>
+                <div class="el-upload__text">
+                    将文件拖到此处，或<em>点击上传</em>传需求文档
+                </div>
+            </el-upload>
+        </el-form-item>
+
+        <div class="form-label">2.您的预算大概多少？</div>
+        <el-row :gutter="15">
+
+            <el-col :span="6">
+                <el-form-item label-width="0" prop="budget">
+                    <el-input v-model="modalFormData.budget" placeholder="请输入预算" clearable :style="{width: '100%'}">
+                        <template slot="append">元</template>
+                    </el-input>
+                </el-form-item>
+            </el-col>
+        </el-row>
+
+        <el-form-item label-width="0" prop="is_need_manager">
+            <div class="form-label">
+                <span style="margin-right:10px">我需要项目经理</span>
+                <el-switch v-model="modalFormData.is_need_manager"></el-switch>
+
+                <el-tooltip placement="right">
+                    <div class="form-tooltip" slot="content">
+                        合理的项目分析和规划将提高34.7%的项目成功率<br />
+                        预计将支出5-10%项目费用，具体费用将由客户经理和您沟通
+                    </div>
+                    <i class="el-icon-info form-info-icon"></i>
+                </el-tooltip>
+
+            </div>
+        </el-form-item>
+
+        <el-form-item size="large">
+            <div class="form-submit-area">
+                <el-button type="primary" @click="submitForm">确定</el-button>
+            </div>
+        </el-form-item>
+    </el-form>
+</div>
+</template>
+
+<script>
+import uploadFile from "@/mixins/uploadFile";
+export default {
+    components: {},
+    props: [],
+    data() {
+        return {
+            modalFormData: {
+                pro_descrption: "",
+                field103: false,
+                field104: null,
+                is_need_manager: false,
+                budget: ""
+            },
+            rules: {
+                pro_descrption: [{
+                    required: true,
+                    message: "请输入您的需求",
+                    trigger: "blur"
+                }]
+            },
+            field104Action: "",
+            field104fileList: [],
+
+            successUploadFileMap: {},
+
+            tips: `可参考以下内容：\n1、您的产品/公司/业务的简短介绍\n2、需求的核心工作内容\n3、对开发者的其他需求`
+        };
+    },
+    computed: {},
+    watch: {
+        modalFormData: {
+            deep: true,
+            handler: function (val) {
+                if (!val.field103) {
+                    this.field104fileList = []
+                }
+                this.$emit("formChange", 2, "process");
+            }
+        }
+    },
+    created() {},
+    mounted() {
+        this.$emit("formChange", 2, "process");
+    },
+    mixins: [uploadFile],
+    methods: {
+        submitForm() {
+            this.$refs["modalForm"].validate(valid => {
+                if (!valid) return;
+                // TODO 提交表单
+                this.requestSubmit();
+            });
+        },
+        resetForm() {
+            this.$refs["modalForm"].resetFields();
+        },
+        uploadFile(file, type) {
+            this.uploading = true;
+            this.apiPrepareUpload(
+                file.file,
+                res => {
+                    if (res.data && res.data.status === 1) {
+                        let uploadId = res.data.data._upload_id;
+                        let url = res.data.data.url;
+
+                        this.field104fileList.push({
+                            data: {
+                                ...res.data.data
+                            },
+                            name: res.data.data.name,
+                            url: url,
+                            uploadId: uploadId
+                        });
+                        this.$message.success("上传成功");
+                    } else {
+                        this.$message.error("上传失败");
+                    }
+                },
+                4
+            );
+            return false;
+        },
+        remove(file, fileList) {
+            this.field104fileList = [...fileList];
+            // console.log(111,file, fileList)
+        },
+
+        async requestSubmit() {
+            let params = {
+                is_package: 1,
+                // hotsale_id:0,
+                pro_name: "项目整包",
+                // budget:0,
+                pro_descrption: "",
+                budget: 0,
+                projectfiles: []
+            };
+            if (this.field104fileList.length > 0) {
+                let arr = this.field104fileList.map(item => {
+                    return {
+                        ...item.data
+                    };
+                });
+                params["projectfiles"] = JSON.stringify(arr);
+            }
+            params["pro_descrption"] = this.modalFormData.pro_descrption;
+            params["budget"] = this.modalFormData.budget;
+            params["is_need_manager"] = this.modalFormData.is_need_manager == 1 ? 1 : 0;
+
+            let that = this;
+            this.$axios
+                .$post(
+                    "/api/project/publish", {
+                        ...params
+                    }
+                )
+                .then(res => {
+                    if (Number(res.status) === 1) {
+                        this.$message.success("提交成功");
+                        this.$emit('formSubmit', 2, res.data)
+                    } else {
+                        this.$message.error("提交失败");
+                    }
+                });
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+.form-xuqiu {
+    margin: 80px 80px 0;
+}
+
+.form-title {
+    font-size: 22px;
+    font-weight: 500;
+    color: #0b121a;
+    line-height: 30px;
+    margin-bottom: 40px;
+}
+
+.form-label {
+    height: 30px;
+    line-height: 30px;
+    font-size: 13px;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    color: #19222e;
+}
+
+.form-submit-area {
+    text-align: center;
+}
+
+.form-info-icon {
+    color: #409EFF;
+    font-size: 18px;
+    cursor: pointer;
+    position: relative;
+    top: 5px;
+}
+
+.form-tooltip {
+    width: 200px;
+    line-height: 2em;
+}
+</style>

pages/frontend/requirements/components/StepEnd.vue

@@ -0,0 +1,20 @@
+<template>
+<div class="step3">
+    <p>恭喜您，项目已提交功能！</p>
+    <p>官方客服将尽快联系您</p>
+</div>
+</template>
+
+<style lang="scss">
+.step3 {
+    margin-top:130px;
+    margin-bottom: 350px;
+    text-align: center;
+    p {
+        font-size: 20px;
+        font-weight: 400;
+        color: #0B121A;
+        line-height: 30px
+    }
+}
+</style>

pages/frontend/requirements/index.vue

@@ -0,0 +1,266 @@
+<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>

plugins/seoRouter.js

@@ -173,6 +173,15 @@ const extendRoutes = (routes, resolve) => {
         component: resolve(__dirname, '../pages/frontend/account/change.vue')
       }
     ],
+
+    // 发布需求
+    ...[
+      {
+        name: 'requirements',
+        path:"/frontend/requirements",
+        component: resolve(__dirname, '../pages/frontend/requirements/index.vue')
+      }
+    ]
   );
 
   /**