Merge remote-tracking branch 'origin/dev' into dev

.nuxt/defaultRouter.js

@@ -47,7 +47,7 @@ const _416381c6 = () => interopDefault(import('../pages/otherpage/money/index.vu
 const _3d41f161 = () => interopDefault(import('../pages/seo/test.vue' /* webpackChunkName: "pages/seo/test" */))
 const _20d8197f = () => interopDefault(import('../pages/setting/check/index.vue' /* webpackChunkName: "pages/setting/check/index" */))
 const _300defab = () => interopDefault(import('../pages/sign/new.vue' /* webpackChunkName: "pages/sign/new" */))
-const _1939d0da = () => interopDefault(import('../pages/sign/new_old.vue' /* webpackChunkName: "pages/sign/new_old" */))
+const _420f6640 = () => interopDefault(import('../pages/sign/new_v2.vue' /* webpackChunkName: "pages/sign/new_v2" */))
 const _8face68c = () => interopDefault(import('../pages/topics/create.vue' /* webpackChunkName: "pages/topics/create" */))
 const _05306f89 = () => interopDefault(import('../pages/type/interview.vue' /* webpackChunkName: "pages/type/interview" */))
 const _7c134fd3 = () => interopDefault(import('../pages/type/partners.vue' /* webpackChunkName: "pages/type/partners" */))
@@ -422,9 +422,9 @@ export const routerOptions = {
     component: _300defab,
     name: "sign-new"
   }, {
-    path: "/sign/new_old",
-    component: _1939d0da,
-    name: "sign-new_old"
+    path: "/sign/new_v2",
+    component: _420f6640,
+    name: "sign-new_v2"
   }, {
     path: "/topics/create",
     component: _8face68c,

.nuxt/dist/server/123.js

@@ -68,7 +68,7 @@ module.exports = {};
 
 /***/ }),
 
-/***/ 489:
+/***/ 488:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -223,7 +223,7 @@ var staticRenderFns = []
 var mixins_wx = __webpack_require__(97);
 
 // EXTERNAL MODULE: ./components/user/jishuin/topicCell.vue + 4 modules
-var topicCell = __webpack_require__(489);
+var topicCell = __webpack_require__(488);
 
 // EXTERNAL MODULE: external "vant"
 var external_vant_ = __webpack_require__(24);

.nuxt/dist/server/124.js

@@ -134,7 +134,7 @@ module.exports = {};
 
 /***/ }),
 
-/***/ 491:
+/***/ 490:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -364,7 +364,7 @@ var external_qs_ = __webpack_require__(36);
 var _404 = __webpack_require__(137);
 
 // EXTERNAL MODULE: ./components/level-tag.vue + 4 modules
-var level_tag = __webpack_require__(491);
+var level_tag = __webpack_require__(490);
 
 // CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/frontend/dynamic/info.vue?vue&type=script&lang=js&
 //

.nuxt/dist/server/pages/group/_detail/edit.js

@@ -287,7 +287,7 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ 487:
+/***/ 486:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -597,7 +597,7 @@ var staticRenderFns = []
 // CONCATENATED MODULE: ./pages/group/_detail/edit.vue?vue&type=template&id=00cbe348&
 
 // EXTERNAL MODULE: ./components/group/ce.vue + 4 modules
-var ce = __webpack_require__(487);
+var ce = __webpack_require__(486);
 
 // CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/group/_detail/edit.vue?vue&type=script&lang=js&
 //

.nuxt/dist/server/pages/group/create.js

@@ -287,7 +287,7 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ 487:
+/***/ 486:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -597,7 +597,7 @@ var staticRenderFns = []
 // CONCATENATED MODULE: ./pages/group/create.vue?vue&type=template&id=4fc81d75&
 
 // EXTERNAL MODULE: ./components/group/ce.vue + 4 modules
-var ce = __webpack_require__(487);
+var ce = __webpack_require__(486);
 
 // CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/group/create.vue?vue&type=script&lang=js&
 //

.nuxt/dist/server/pages/kaifain/case/_tid.js

@@ -245,7 +245,7 @@ module.exports = {};
 
 /***/ }),
 
-/***/ 490:
+/***/ 489:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -458,7 +458,7 @@ var quill_core = __webpack_require__(83);
 var quill_snow = __webpack_require__(84);
 
 // EXTERNAL MODULE: ./components/common/connectUsKaifain.vue + 4 modules
-var connectUsKaifain = __webpack_require__(490);
+var connectUsKaifain = __webpack_require__(489);
 
 // EXTERNAL MODULE: ./components/SeoFooter.vue + 4 modules
 var SeoFooter = __webpack_require__(108);

.nuxt/dist/server/pages/type/vip/index copy.js

@@ -1149,7 +1149,7 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ 488:
+/***/ 487:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1366,7 +1366,7 @@ var staticRenderFns = []
 var external_vuex_ = __webpack_require__(2);
 
 // EXTERNAL MODULE: ./components/type/vip/pc.vue + 4 modules
-var pc = __webpack_require__(488);
+var pc = __webpack_require__(487);
 
 // EXTERNAL MODULE: ./components/type/vip/mobile.vue + 4 modules
 var mobile = __webpack_require__(216);

.nuxt/dist/server/pages/type/vip/index.js

@@ -1149,7 +1149,7 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ 488:
+/***/ 487:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1366,7 +1366,7 @@ var staticRenderFns = []
 var external_vuex_ = __webpack_require__(2);
 
 // EXTERNAL MODULE: ./components/type/vip/pc.vue + 4 modules
-var pc = __webpack_require__(488);
+var pc = __webpack_require__(487);
 
 // EXTERNAL MODULE: ./components/type/vip/mobile.vue + 4 modules
 var mobile = __webpack_require__(216);

.nuxt/dist/server/pages/user/searchTopic/index.js

@@ -31,7 +31,7 @@ module.exports = {};
 
 /***/ }),
 
-/***/ 489:
+/***/ 488:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -164,7 +164,7 @@ var staticRenderFns = []
 // CONCATENATED MODULE: ./pages/user/searchTopic/index.vue?vue&type=template&id=62f7ecc8&scoped=true&
 
 // EXTERNAL MODULE: ./components/user/jishuin/topicCell.vue + 4 modules
-var topicCell = __webpack_require__(489);
+var topicCell = __webpack_require__(488);
 
 // EXTERNAL MODULE: external "moment"
 var external_moment_ = __webpack_require__(69);

.nuxt/dist/server/pages/wo/cash.js

@@ -49,7 +49,7 @@ module.exports = {};
 
 /***/ }),
 
-/***/ 486:
+/***/ 485:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -205,7 +205,7 @@ var staticRenderFns = []
 // CONCATENATED MODULE: ./pages/wo/cash.vue?vue&type=template&id=dd970026&scoped=true&
 
 // EXTERNAL MODULE: ./components/input/ver.vue + 4 modules
-var ver = __webpack_require__(486);
+var ver = __webpack_require__(485);
 
 // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./components/inner_header.vue?vue&type=template&id=4edcd5c6&scoped=true&
 var inner_headervue_type_template_id_4edcd5c6_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"inner-header"},[_vm._ssrNode("<h1 class=\"title\" data-v-4edcd5c6>"+_vm._ssrEscape(_vm._s(_vm.title))+"</h1> <div class=\"line\" data-v-4edcd5c6></div>")])}

.nuxt/dist/server/server.manifest.json

@@ -110,7 +110,7 @@
     "pages/setting/check/old_mobile.js": "pages/setting/check/old_mobile.js",
     "pages/setting/check/real_info.js": "pages/setting/check/real_info.js",
     "pages/sign/new.js": "pages/sign/new.js",
-    "pages/sign/new_old.js": "pages/sign/new_old.js",
+    "pages/sign/new_v2.js": "pages/sign/new_v2.js",
     "pages/topics/_id/edit.js": "pages/topics/_id/edit.js",
     "pages/topics/create.js": "pages/topics/create.js",
     "pages/type/index.js": "pages/type/index.js",
@@ -250,7 +250,7 @@
     "pages/setting/check/old_mobile.js": "pages/setting/check/old_mobile.js.map",
     "pages/setting/check/real_info.js": "pages/setting/check/real_info.js.map",
     "pages/sign/new.js": "pages/sign/new.js.map",
-    "pages/sign/new_old.js": "pages/sign/new_old.js.map",
+    "pages/sign/new_v2.js": "pages/sign/new_v2.js.map",
     "pages/topics/_id/edit.js": "pages/topics/_id/edit.js.map",
     "pages/topics/create.js": "pages/topics/create.js.map",
     "pages/type/index.js": "pages/type/index.js.map",

.nuxt/routes.json

@@ -425,11 +425,11 @@
     "_name": "_300defab"
   },
   {
-    "name": "sign-new_old",
-    "path": "/sign/new_old",
-    "component": "/Users/majunjie/Documents/project/proginn-frontend/pages/sign/new_old.vue",
-    "chunkName": "pages/sign/new_old",
-    "_name": "_1939d0da"
+    "name": "sign-new_v2",
+    "path": "/sign/new_v2",
+    "component": "/Users/majunjie/Documents/project/proginn-frontend/pages/sign/new_v2.vue",
+    "chunkName": "pages/sign/new_v2",
+    "_name": "_420f6640"
   },
   {
     "name": "topics-create",

components/sign/step-education.vue

@@ -39,7 +39,7 @@
                 allow-create
                 filterable
                 remote
-                reserve-keyword
+                default-first-option
                 placeholder="学校名称"
                 :remote-method="fetchUniversity"
                 :loading="loadingUniversity"
@@ -51,13 +51,14 @@
                   :value="item.label"
                 ></el-option>
               </el-select>
+              <!--                reserve-keyword -->
               <el-select
                 class="small"
                 v-model="item.major"
                 allow-create
                 filterable
                 remote
-                reserve-keyword
+                default-first-option
                 placeholder="选择专业"
                 :remote-method="fetchMajor"
                 :loading="loadingMajor"

components/sign/step-experience-form.vue

@@ -28,22 +28,12 @@
             :value="item.label"
           ></el-option>
         </el-select>
-        <!-- TODO：公司规模未绑定 -->
-        <el-select
-          v-model="item.company"
-          allow-create
-          filterable
-          remote
-          reserve-keyword
-          placeholder="公司规模"
-          :remote-method="fetchCompany"
-          :loading="loadingCompany"
-        >
+        <el-select v-model="item.company_scale" placeholder="公司规模">
           <el-option
-            v-for="item in companys"
-            :key="item.label"
+            v-for="item in companySize"
+            :key="item.value"
             :label="item.label"
-            :value="item.label"
+            :value="item.value"
           ></el-option>
         </el-select>
 
@@ -73,6 +63,7 @@
           minlength="40"
           placeholder="可简要描述公司主要业务，我的职责和工作内容，字数要求：40-5000字符"
           v-model="item.description"
+          show-word-limit
         ></el-input>
         <!-- <uploader
           :imageUrl="item.work_certify_img"
@@ -192,6 +183,29 @@ export default {
         ]
       },
       companys: [],
+      company_scale: "",
+      companySize: [
+        {
+          value: "1",
+          label: "0-19人"
+        },
+        {
+          value: "2",
+          label: "20-99人"
+        },
+        {
+          value: "3",
+          label: "100-499人"
+        },
+        {
+          value: "4",
+          label: "500-2000人"
+        },
+        {
+          value: "5",
+          label: "2000人以上"
+        }
+      ],
       loadingCompany: false,
       titles: [],
       loadingTitle: false

pages/frontend/developer/index.vue

@@ -35,7 +35,7 @@
                   尚未签约
                   <a
                     @click="cnzz('开发者首页', '立即签约', '')"
-                    href="/sign/new"
+                    href="/sign/new_v2"
                     >立即签约</a
                   >
                 </p>
@@ -162,7 +162,6 @@
               </p>
             </article>
 
-
             <article class="developer-order-item">
               <div class="developer-order-title-area">
                 <div class="developer-order-title-area-wrap">
@@ -254,7 +253,12 @@
                     class="dynamic-user-avatar"
                   >
                     <img :src="dynamic.user_info.icon_url" />
-                    <a v-if="dynamic.user_info.is_vip == 1" href="/type/vip/developer" target="view_window" class="dynamic-user-avatar-vip-icon"></a>
+                    <a
+                      v-if="dynamic.user_info.is_vip == 1"
+                      href="/type/vip/developer"
+                      target="view_window"
+                      class="dynamic-user-avatar-vip-icon"
+                    ></a>
                   </a>
                   <div class="dynamic-user-info">
                     <p class="dynamic-user-nickname text-line-1">
@@ -273,8 +277,10 @@
                     </p>
                   </div>
                 </div>
-                <div class="dynamic-title dynamic-margin" v-html="dynamic.title_web">
-                </div>
+                <div
+                  class="dynamic-title dynamic-margin"
+                  v-html="dynamic.title_web"
+                ></div>
                 <div class="dynamic-type-list dynamic-margin">
                   <span class="dynamic-type-item">{{ dynamic.type_text }}</span>
                 </div>
@@ -394,7 +400,9 @@
               >
               </a>
               <!-- 如果已登录 并且 是vip ，显示会员日期 -->
-              <div v-if="isVipMode" class="developer-vip-end-date">{{ userinfo.vip_end_date }} 到期</div>
+              <div v-if="isVipMode" class="developer-vip-end-date">
+                {{ userinfo.vip_end_date }} 到期
+              </div>
             </div>
           </div>
           <h5 class="user-title">工作台</h5>
@@ -525,7 +533,7 @@ import Empty from "./empty";
 import personalIcon from "@/assets/img/account/personal.png";
 import LevelIntroduce from "./component/level-introduce.vue";
 import AdList from "@/components/ad.vue";
-import BindWeChatArticle from '@/components/bind_wechat_article'
+import BindWeChatArticle from "@/components/bind_wechat_article";
 
 export default {
   name: "SeoLearnList",
@@ -825,12 +833,12 @@ export default {
       }
     },
 
-    callBindWeChat(){
-      this.$refs['bindWeChat'].show({
-        name:this.userInfo.nickname,
-        uid:this.userinfo.uid,
-        avatar:this.userInfo.icon_url
-      })
+    callBindWeChat() {
+      this.$refs["bindWeChat"].show({
+        name: this.userInfo.nickname,
+        uid: this.userinfo.uid,
+        avatar: this.userInfo.icon_url
+      });
     }
   }
 };
@@ -841,8 +849,7 @@ export default {
 .no-padding {
   padding: 0;
 }
-.dynamic-user-avatar-vip{
+.dynamic-user-avatar-vip {
   position: relative;
-
 }
 </style>

pages/sign/new.vue

@@ -1,266 +1,226 @@
 <template>
-  <div class="sign-new">
-    <h6 class="sign-new-title">签约成为远程工作者</h6>
-    <div class="sign-new-main">
-      <!-- 进度条 -->
-      <div class="sign-progress">
-        <!-- percentage 进度值，百分比 -->
-        <el-progress
-          :text-inside="true"
-          :stroke-width="30"
-          :percentage="stepState[curStep].progress"
-          color="#45C47A"
-        ></el-progress>
-      </div>
+  <div class="sign">
+    <intro></intro>
+    <verify></verify>
+    <info></info>
+    <profile></profile>
+    <experience></experience>
+    <education></education>
+    <skills></skills>
+    <works></works>
+    <social></social>
+    <el-button
+      v-if="this.userInfo.realnamshowToaste_re == '3' || this.userInfo.realname_re=='0'  || this.userInfo.realname_re=='3'"
+      @click="signNow"
+      class="sign-btn"
+    >申请签约开发者
+    </el-button>
 
-      <div class="sign-new-container">
-        <!-- 认证签约 -->
-        <stepCert v-if="curStep === 1" @next="nextStep"></stepCert>
-
-        <!-- 填写基础信息 -->
-        <stepInfo v-if="curStep === 2" @next="nextStep"></stepInfo>
-
-        <!-- 项目 -->
-        <stepProject v-if="curStep === 3" @next="nextStep"></stepProject>
-
-        <!-- 经历 -->
-        <stepExperienceVue
-          v-if="curStep === 4"
-          @next="nextStep"
-        ></stepExperienceVue>
-      </div>
-    </div>
+    <showToast
+      :isShowToast="isShowToast"
+      title="完善技术信用"
+      desc="你已成功提交签约申请,客栈将在2-3个工作日内完成签约审核，完善个人技术信用，可以提高签约成功率和接单率。"
+      submitBtnDesc="立即了解"
+      cancleBtnDesc="好的，知道了"
+      @close="onToastClose"
+      @submit="jumpToCredit"
+    />
   </div>
 </template>
 
 <script>
-import { mapState } from "vuex";
+  import {mapState} from "vuex";
+  import intro from "@/components/sign/intro";
+  import verify from "@/components/sign/verify";
+  import info from "@/components/sign/info";
+  import profile from "@/components/sign/profile";
+  import experience from "@/components/sign/experience";
+  import education from "@/components/sign/education";
+  import skills from "@/components/sign/skills";
+  import works from "@/components/sign/works";
+  import social from "@/components/sign/social";
+  import showToast from "@/components/common/showToast";
+  import qs from "qs";
 
-import showToast from "@/components/common/showToast";
-import stepCert from "@/components/sign/step-cert";
-import stepInfo from "@/components/sign/step-info";
-import stepExperienceVue from "@/components/sign/step-experience";
-import stepProject from "@/components/sign/step-project";
-
-export default {
-  head: {
-    title: "申请签约 - 程序员客栈"
-  },
-  components: {
-    showToast,
-    stepCert,
-    stepInfo,
-    stepExperienceVue,
-    stepProject
-  },
-  // mixins: [getDeviceType],
-  data() {
-    return {
-      sign: null,
-      isShowToast: false,
-      userInfo: {},
-      target: 0,
-      curStep: 1,
-      stepState: {
-        "1": {
-          progress: 40
-        },
-        "2": {
-          progress: 70
-        },
-        "3": {
-          progress: 90
-        },
-        "4": {
-          progress: 100
-        }
-      }
-    };
-  },
-  computed: {},
-  async mounted() {
-    this.setFrom();
-    this.needLogin();
-    // realname_re, 1是待审核，2已签约，3是拒绝
-    this.userInfo = await this.getUserInfo();
-  },
-  methods: {
-    nextStep() {
-      // 最后一步
-      if (this.curStep === 4) {
-        // TODO:跳转
-        return;
-      }
-      this.$router.push({
-        path: "/sign/new",
-        query: {
-          step: this.curStep + 1
-        }
-      });
+  export default {
+    // async asyncData({ $axios, params }) {
+    //   let res = await $axios.$get(`/api/vip/getList`)
+    //   console.log('init', res)
+    // },
+    head: {
+      title: "申请签约 - 程序员客栈"
     },
-    async signNow() {
-      this.cnzz("签约", "签约页面+申请签约点击", "");
-      let res = await this.$axios.$post(`/api/user/sign`);
-      if (res.status === 1) {
-        this.$message.success(res.info);
-        this.isShowToast = true;
-      } else if (res.status === -11) {
-        // this.$message.error("请设置主要展示工作经历");
-      } else if (res.status === -10) {
-        // this.$message.error("其他错误");
-      }
+    components: {
+      intro,
+      verify,
+      info,
+      profile,
+      experience,
+      education,
+      skills,
+      works,
+      social,
+      showToast
     },
-    setFrom() {
-      let doc = "";
-      let from = this.$route.query.from || this.$route.params.from;
-      console.log("run setFrom: ", from);
-      switch (from) {
-        case "wo_intro":
-          doc = document.getElementById("profile");
-          break;
-        case "wo_workexp":
-          doc = document.getElementById("workexp");
-          break;
-        case "wo_edu":
-          doc = document.getElementById("education");
-          break;
-        case "wo_skill":
-          doc = document.getElementById("skill");
-          break;
-        case "works":
-          doc = document.getElementById("works");
-          break;
-      }
-      console.log("执行！！！！");
-      if (doc) {
-        setTimeout(() => {
-          doc.scrollIntoView();
-        }, 600);
-      }
+    // mixins: [getDeviceType],
+    data() {
+      return {
+        sign: null,
+        isShowToast: false,
+        userInfo: {},
+        target: 0
+      };
     },
-    jumpToCredit() {
-      this.cnzz("签约", "签约页面+申请签约", "确认");
-      location.href = "/credit/pages";
+    computed: {},
+    async mounted() {
+      console.log('sign new mounted')
+      this.setFrom()
+
+      this.needLogin();
+      // realname_re, 1是待审核，2已签约，3是拒绝
+      this.userInfo = await this.getUserInfo();
     },
-    onToastClose() {
-      this.isShowToast = false;
-      window.location.reload();
-    }
-  },
-  watchQuery: true,
-  watchQuery: ["step"],
-  asyncData({ params, query }) {
-    let curStep = Number(query.step);
-    if (isNaN(curStep)) {
-      curStep = 1;
+    methods: {
+      async signNow() {
+        this.cnzz("签约","签约页面+申请签约点击","");
+        let res = await this.$axios.$post(`/api/user/sign`);
+        if (res.status === 1) {
+          this.$message.success(res.info);
+          this.isShowToast = true
+        } else if (res.status === -11) {
+          // this.$message.error("请设置主要展示工作经历");
+        } else if (res.status === -10) {
+          // this.$message.error("其他错误");
+        }
+      },
+      setFrom() {
+        let doc = "";
+        let from = this.$route.query.from || this.$route.params.from;
+        console.log("run setFrom: ", from);
+        switch (from) {
+          case "wo_intro":
+            doc = document.getElementById("profile");
+            break;
+          case "wo_workexp":
+            doc = document.getElementById("workexp");
+            break;
+          case "wo_edu":
+            doc = document.getElementById("education");
+            break;
+          case "wo_skill":
+            doc = document.getElementById("skill");
+            break;
+          case "works":
+            doc = document.getElementById("works");
+            break;
+        }
+        console.log("执行！！！！");
+        if (doc) {
+          setTimeout(() => {
+            doc.scrollIntoView();
+          }, 600);
+        }
+      },
+      jumpToCredit() {
+        this.cnzz("签约","签约页面+申请签约","确认");
+        location.href = "/credit/pages"
+      },
+      onToastClose() {
+        this.isShowToast = false
+        window.location.reload();
+      }
     }
-    return {
-      curStep
-    };
-  }
-};
+  };
 </script>
 
 <style lang="scss">
-.sign-new {
-  width: 1100px;
-  margin: 0 auto;
-  background: #ffffff;
-  border-radius: 8px;
-}
-.sign-new-title {
-  font-size: 28px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #0b121a;
-  line-height: 40px;
-  text-align: center;
-  margin-top: 55px;
-}
-.sign-new-main {
-  margin: 0 140px;
-}
-.sign-progress {
-  margin-top: 40px;
-  .el-progress-bar__outer {
-    background: url("~@/assets/img/sign/progress_bg.png") repeat-x 50% 50%;
-  }
-}
-.sign-new-tips {
-  margin-top: 24px;
-  text-align: center;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #0b121a;
-  line-height: 20px;
-  b {
-    color: #ff0300;
-    font-weight: 400;
-  }
-}
+  .sign {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 1000px;
+    background: #f7f7f7;
 
-.sign-new-next {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 12px;
-  .sign-new-next-btn {
-    width: 140px;
-    height: 48px;
-    background: #409eff;
-    border-radius: 24px;
-    font-size: 18px;
-    font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: 500;
-    color: #ffffff;
-    text-align: center;
-    line-height: 48px;
-    cursor: pointer;
-    &.disable {
-      background: #96c6ff;
-    }
-  }
-}
+    > div {
+      margin-bottom: 10px;
+      width: 100%;
+      background: #fff;
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+
+      > header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 13px 20px;
+        border-bottom: 1px solid #ebeef5;
+      }
+
+      h5 {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 16px;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        color: rgba(29, 42, 58, 1);
+        line-height: 22px;
+      }
+
+      .status {
+        position: relative;
+        display: inline-block;
+        float: right;
+        font-size: 14px;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        line-height: 20px;
+      }
+
+      .success {
+        color: rgba(16, 185, 106, 1);
 
-.sign-new-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #f0f0f0;
-  .sign-new-header-title {
-    margin: 0;
-    padding: 0;
-    font-size: 15px;
-    font-family: PingFangSC-Semibold, PingFang SC;
-    font-weight: 600;
-    color: #000000;
-    padding-left: 13px;
-    position: relative;
-    line-height: 1;
-    height: 16px;
+        &::before {
+          content: "";
+          position: absolute;
+          display: inline-block;
+          left: -10px;
+          top: 50%;
+          transform: translate3d(-100%, -50%, 0);
+          width: 20px;
+          height: 20px;
+          background: url("~@/assets/img/sign/success.png");
+        }
+      }
+
+      .info {
+        color: gray;
+      }
+
+      .warning {
+        color: red;
+      }
 
-    &::before {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 2px;
-      height: 14px;
-      background: #308eff;
-      border-radius: 1px;
+      button {
+        height: 34px;
+        line-height: 10px;
+        border-radius: 2px;
+      }
     }
-  }
-}
 
-.sign-new-form-footer {
-  display: flex;
-}
-.sign-new-form-tips {
-  flex: 1;
-}
-.sign-new-btn-area {
-  margin-top: 24px;
-  display: flex;
-}
+    .sign-btn {
+      margin-top: 30px;
+      width: 210px;
+      height: 46px;
+      background: rgba(48, 142, 255, 1);
+      border-radius: 2px;
+      font-size: 14px;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      color: rgba(255, 255, 255, 1);
+      line-height: 20px;
+    }
+  }
 </style>

pages/sign/new_old.vue

@@ -1,226 +0,0 @@
-<template>
-  <div class="sign">
-    <intro></intro>
-    <verify></verify>
-    <info></info>
-    <profile></profile>
-    <experience></experience>
-    <education></education>
-    <skills></skills>
-    <works></works>
-    <social></social>
-    <el-button
-      v-if="this.userInfo.realnamshowToaste_re == '3' || this.userInfo.realname_re=='0'  || this.userInfo.realname_re=='3'"
-      @click="signNow"
-      class="sign-btn"
-    >申请签约开发者
-    </el-button>
-
-    <showToast
-      :isShowToast="isShowToast"
-      title="完善技术信用"
-      desc="你已成功提交签约申请,客栈将在2-3个工作日内完成签约审核，完善个人技术信用，可以提高签约成功率和接单率。"
-      submitBtnDesc="立即了解"
-      cancleBtnDesc="好的，知道了"
-      @close="onToastClose"
-      @submit="jumpToCredit"
-    />
-  </div>
-</template>
-
-<script>
-  import {mapState} from "vuex";
-  import intro from "@/components/sign/intro";
-  import verify from "@/components/sign/verify";
-  import info from "@/components/sign/info";
-  import profile from "@/components/sign/profile";
-  import experience from "@/components/sign/experience";
-  import education from "@/components/sign/education";
-  import skills from "@/components/sign/skills";
-  import works from "@/components/sign/works";
-  import social from "@/components/sign/social";
-  import showToast from "@/components/common/showToast";
-  import qs from "qs";
-
-  export default {
-    // async asyncData({ $axios, params }) {
-    //   let res = await $axios.$get(`/api/vip/getList`)
-    //   console.log('init', res)
-    // },
-    head: {
-      title: "申请签约 - 程序员客栈"
-    },
-    components: {
-      intro,
-      verify,
-      info,
-      profile,
-      experience,
-      education,
-      skills,
-      works,
-      social,
-      showToast
-    },
-    // mixins: [getDeviceType],
-    data() {
-      return {
-        sign: null,
-        isShowToast: false,
-        userInfo: {},
-        target: 0
-      };
-    },
-    computed: {},
-    async mounted() {
-      console.log('sign new mounted')
-      this.setFrom()
-
-      this.needLogin();
-      // realname_re, 1是待审核，2已签约，3是拒绝
-      this.userInfo = await this.getUserInfo();
-    },
-    methods: {
-      async signNow() {
-        this.cnzz("签约","签约页面+申请签约点击","");
-        let res = await this.$axios.$post(`/api/user/sign`);
-        if (res.status === 1) {
-          this.$message.success(res.info);
-          this.isShowToast = true
-        } else if (res.status === -11) {
-          // this.$message.error("请设置主要展示工作经历");
-        } else if (res.status === -10) {
-          // this.$message.error("其他错误");
-        }
-      },
-      setFrom() {
-        let doc = "";
-        let from = this.$route.query.from || this.$route.params.from;
-        console.log("run setFrom: ", from);
-        switch (from) {
-          case "wo_intro":
-            doc = document.getElementById("profile");
-            break;
-          case "wo_workexp":
-            doc = document.getElementById("workexp");
-            break;
-          case "wo_edu":
-            doc = document.getElementById("education");
-            break;
-          case "wo_skill":
-            doc = document.getElementById("skill");
-            break;
-          case "works":
-            doc = document.getElementById("works");
-            break;
-        }
-        console.log("执行！！！！");
-        if (doc) {
-          setTimeout(() => {
-            doc.scrollIntoView();
-          }, 600);
-        }
-      },
-      jumpToCredit() {
-        this.cnzz("签约","签约页面+申请签约","确认");
-        location.href = "/credit/pages"
-      },
-      onToastClose() {
-        this.isShowToast = false
-        window.location.reload();
-      }
-    }
-  };
-</script>
-
-<style lang="scss">
-  .sign {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 1000px;
-    background: #f7f7f7;
-
-    > div {
-      margin-bottom: 10px;
-      width: 100%;
-      background: #fff;
-
-      &:last-of-type {
-        margin-bottom: 0;
-      }
-
-      > header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 13px 20px;
-        border-bottom: 1px solid #ebeef5;
-      }
-
-      h5 {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        font-size: 16px;
-        font-family: PingFangSC-Medium;
-        font-weight: 500;
-        color: rgba(29, 42, 58, 1);
-        line-height: 22px;
-      }
-
-      .status {
-        position: relative;
-        display: inline-block;
-        float: right;
-        font-size: 14px;
-        font-family: PingFangSC-Medium;
-        font-weight: 500;
-        line-height: 20px;
-      }
-
-      .success {
-        color: rgba(16, 185, 106, 1);
-
-        &::before {
-          content: "";
-          position: absolute;
-          display: inline-block;
-          left: -10px;
-          top: 50%;
-          transform: translate3d(-100%, -50%, 0);
-          width: 20px;
-          height: 20px;
-          background: url("~@/assets/img/sign/success.png");
-        }
-      }
-
-      .info {
-        color: gray;
-      }
-
-      .warning {
-        color: red;
-      }
-
-      button {
-        height: 34px;
-        line-height: 10px;
-        border-radius: 2px;
-      }
-    }
-
-    .sign-btn {
-      margin-top: 30px;
-      width: 210px;
-      height: 46px;
-      background: rgba(48, 142, 255, 1);
-      border-radius: 2px;
-      font-size: 14px;
-      font-family: PingFangSC-Medium;
-      font-weight: 500;
-      color: rgba(255, 255, 255, 1);
-      line-height: 20px;
-    }
-  }
-</style>

pages/sign/new_v2.vue

@@ -0,0 +1,266 @@
+<template>
+  <div class="sign-new">
+    <h6 class="sign-new-title">签约成为远程工作者</h6>
+    <div class="sign-new-main">
+      <!-- 进度条 -->
+      <div class="sign-progress">
+        <!-- percentage 进度值，百分比 -->
+        <el-progress
+          :text-inside="true"
+          :stroke-width="30"
+          :percentage="stepState[curStep].progress"
+          color="#45C47A"
+        ></el-progress>
+      </div>
+
+      <div class="sign-new-container">
+        <!-- 认证签约 -->
+        <stepCert v-if="curStep === 1" @next="nextStep"></stepCert>
+
+        <!-- 填写基础信息 -->
+        <stepInfo v-if="curStep === 2" @next="nextStep"></stepInfo>
+
+        <!-- 项目 -->
+        <stepProject v-if="curStep === 3" @next="nextStep"></stepProject>
+
+        <!-- 经历 -->
+        <stepExperienceVue
+          v-if="curStep === 4"
+          @next="nextStep"
+        ></stepExperienceVue>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+import showToast from "@/components/common/showToast";
+import stepCert from "@/components/sign/step-cert";
+import stepInfo from "@/components/sign/step-info";
+import stepExperienceVue from "@/components/sign/step-experience";
+import stepProject from "@/components/sign/step-project";
+
+export default {
+  head: {
+    title: "申请签约 - 程序员客栈"
+  },
+  components: {
+    showToast,
+    stepCert,
+    stepInfo,
+    stepExperienceVue,
+    stepProject
+  },
+  // mixins: [getDeviceType],
+  data() {
+    return {
+      sign: null,
+      isShowToast: false,
+      userInfo: {},
+      target: 0,
+      curStep: 1,
+      stepState: {
+        "1": {
+          progress: 40
+        },
+        "2": {
+          progress: 70
+        },
+        "3": {
+          progress: 90
+        },
+        "4": {
+          progress: 100
+        }
+      }
+    };
+  },
+  computed: {},
+  async mounted() {
+    this.setFrom();
+    this.needLogin();
+    // realname_re, 1是待审核，2已签约，3是拒绝
+    this.userInfo = await this.getUserInfo();
+  },
+  methods: {
+    nextStep() {
+      // 最后一步
+      if (this.curStep === 4) {
+        // TODO:跳转
+        return;
+      }
+      this.$router.push({
+        path: "/sign/new_v2",
+        query: {
+          step: this.curStep + 1
+        }
+      });
+    },
+    async signNow() {
+      this.cnzz("签约", "签约页面+申请签约点击", "");
+      let res = await this.$axios.$post(`/api/user/sign`);
+      if (res.status === 1) {
+        this.$message.success(res.info);
+        this.isShowToast = true;
+      } else if (res.status === -11) {
+        // this.$message.error("请设置主要展示工作经历");
+      } else if (res.status === -10) {
+        // this.$message.error("其他错误");
+      }
+    },
+    setFrom() {
+      let doc = "";
+      let from = this.$route.query.from || this.$route.params.from;
+      console.log("run setFrom: ", from);
+      switch (from) {
+        case "wo_intro":
+          doc = document.getElementById("profile");
+          break;
+        case "wo_workexp":
+          doc = document.getElementById("workexp");
+          break;
+        case "wo_edu":
+          doc = document.getElementById("education");
+          break;
+        case "wo_skill":
+          doc = document.getElementById("skill");
+          break;
+        case "works":
+          doc = document.getElementById("works");
+          break;
+      }
+      console.log("执行！！！！");
+      if (doc) {
+        setTimeout(() => {
+          doc.scrollIntoView();
+        }, 600);
+      }
+    },
+    jumpToCredit() {
+      this.cnzz("签约", "签约页面+申请签约", "确认");
+      location.href = "/credit/pages";
+    },
+    onToastClose() {
+      this.isShowToast = false;
+      window.location.reload();
+    }
+  },
+  watchQuery: true,
+  watchQuery: ["step"],
+  asyncData({ params, query }) {
+    let curStep = Number(query.step);
+    if (isNaN(curStep)) {
+      curStep = 1;
+    }
+    return {
+      curStep
+    };
+  }
+};
+</script>
+
+<style lang="scss">
+.sign-new {
+  width: 1100px;
+  margin: 0 auto;
+  background: #ffffff;
+  border-radius: 8px;
+}
+.sign-new-title {
+  font-size: 28px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #0b121a;
+  line-height: 40px;
+  text-align: center;
+  margin-top: 55px;
+}
+.sign-new-main {
+  margin: 0 140px;
+}
+.sign-progress {
+  margin-top: 40px;
+  .el-progress-bar__outer {
+    background: url("~@/assets/img/sign/progress_bg.png") repeat-x 50% 50%;
+  }
+}
+.sign-new-tips {
+  margin-top: 24px;
+  text-align: center;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #0b121a;
+  line-height: 20px;
+  b {
+    color: #ff0300;
+    font-weight: 400;
+  }
+}
+
+.sign-new-next {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 12px;
+  .sign-new-next-btn {
+    width: 140px;
+    height: 48px;
+    background: #409eff;
+    border-radius: 24px;
+    font-size: 18px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+    text-align: center;
+    line-height: 48px;
+    cursor: pointer;
+    &.disable {
+      background: #96c6ff;
+    }
+  }
+}
+
+.sign-new-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #f0f0f0;
+  .sign-new-header-title {
+    margin: 0;
+    padding: 0;
+    font-size: 15px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #000000;
+    padding-left: 13px;
+    position: relative;
+    line-height: 1;
+    height: 16px;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 2px;
+      height: 14px;
+      background: #308eff;
+      border-radius: 1px;
+    }
+  }
+}
+
+.sign-new-form-footer {
+  display: flex;
+}
+.sign-new-form-tips {
+  flex: 1;
+}
+.sign-new-btn-area {
+  margin-top: 24px;
+  display: flex;
+}
+</style>