签约分步表单

components/sign/step-cert.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="sign-new-cert">
+    <div class="sign-new-tips">完成签约流程即可接单！</div>
+    <div class="sign-cert-main">
+      <a
+        href="/setting/user"
+        @click="cnzz('签约', '签约页面+去认证', '')"
+        target="view_window"
+        class="sign-cert-btn"
+        >去认证</a
+      >
+    </div>
+
+    <div class="sign-new-next">
+      <div class="sign-new-next-btn">下一步</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss">
+.sign-cert-main {
+  margin: 93px auto 0;
+  width: 390px;
+  height: 280px;
+
+  border-radius: 8px;
+  box-sizing: border-box;
+  background: #ebf4ff url("~@/assets/img/sign/cert.png") no-repeat 50% 60px;
+  background-size: 127px 82px;
+  padding-top: 182px;
+  margin-bottom: 95px;
+}
+.sign-cert-btn {
+  margin: 0 auto;
+  display: block;
+  width: 252px;
+  height: 48px;
+  background: #4b5d73;
+  border-radius: 8px;
+
+  font-size: 18px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #ffffff;
+
+  text-align: center;
+  line-height: 48px;
+}
+</style>

components/sign/step-info.vue

@@ -0,0 +1,538 @@
+<template>
+  <div class="sign-new-info">
+    <div class="sign-new-tips">
+      基本信息能让客栈和客户迅速了解你！信息完善将会优先派单！
+    </div>
+
+    <div class="edit">
+      <el-form
+        ref="form"
+        :rules="rules"
+        :model="form"
+        label-width="100px"
+        label-position="left"
+      >
+        <el-form-item label="昵称" prop="nickname">
+          <el-input
+            v-model="form.nickname"
+            maxlength="50"
+            style="width:340px"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="工作状态" prop="type">
+          <el-select
+            v-model="form.type"
+            placeholder="请选择"
+            style="width:340px"
+          >
+            <el-option
+              v-for="typeItem in types"
+              :key="typeItem.value"
+              :label="typeItem.label"
+              :value="typeItem.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="职业方向" prop="direction_op">
+          <el-select
+            v-model="form.occupation_op"
+            placeholder="请选择"
+            style="width:340px"
+          >
+            <el-option
+              v-for="item in directions"
+              :key="item.occupation_id"
+              :label="item.occupation_name"
+              :value="item.occupation_id"
+            ></el-option>
+          </el-select>
+          <el-select
+            v-model="form.direction_op"
+            placeholder="请选择"
+            style="width:340px"
+          >
+            <el-option
+              v-for="item in subDirections"
+              :key="item.direction_id"
+              :label="item.direction_name"
+              :value="item.direction_id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="所在地区" prop="city_op_id">
+          <el-select
+            v-model="form.province_op_id"
+            placeholder="请选择"
+            @change="getCities"
+            style="width:340px"
+          >
+            <el-option
+              v-for="item in provinces"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+          <el-select
+            v-model="form.city_op_id"
+            placeholder="请选择"
+            style="width:340px"
+          >
+            <el-option
+              v-for="item in cities"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="日薪" prop="work_price">
+          <el-input-number
+            :min="300"
+            :max="2000"
+            controls-position="right"
+            v-model="form.work_price"
+            :style="{ width: '340px', marginRight: '10px' }"
+          ></el-input-number
+          >元/天（8小时-远程）
+        </el-form-item>
+        <el-form-item label="可工作时间" prop="workday">
+          <div class="times">
+            <el-checkbox v-model="form.workday" label="工作日"></el-checkbox>
+            <el-time-select
+              v-model="form.workdayStart"
+              :picker-options="{
+                start: '00:00',
+                step: '00:30',
+                end: '24:00'
+              }"
+              placeholder="开始时间"
+            ></el-time-select>
+            <span class="to">至</span>
+            <el-time-select
+              v-model="form.workdayEnd"
+              :picker-options="{
+                start: '00:00',
+                step: '00:30',
+                end: '24:00'
+              }"
+              placeholder="结束时间"
+            ></el-time-select>
+          </div>
+          <div class="times">
+            <el-checkbox v-model="form.weekend" label="周末"></el-checkbox>
+            <el-time-select
+              v-model="form.weekendStart"
+              :picker-options="{
+                start: '00:00',
+                step: '00:30',
+                end: '24:00'
+              }"
+              placeholder="开始时间"
+            ></el-time-select>
+            <span class="to">至</span>
+            <el-time-select
+              v-model="form.weekendEnd"
+              :picker-options="{
+                start: '00:00',
+                step: '00:30',
+                end: '24:00'
+              }"
+              placeholder="结束时间"
+            ></el-time-select>
+          </div>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="sign-new-next">
+      <div class="sign-new-next-btn">下一步</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+const types = [
+  {
+    value: "2",
+    label: "求职"
+  },
+  {
+    value: "4",
+    label: "自由职业"
+  },
+  {
+    value: "5",
+    label: "正常工作"
+  }
+];
+export default {
+  data() {
+    return {
+      rules: {
+        nickname: [
+          {
+            required: true,
+            message: "请完善昵称信息",
+            trigger: "blur"
+          },
+          { max: 50, message: "昵称不得超过50字符", trigger: "blur" },
+          {
+            validator: (rule, value, callback) => {
+              console.log(this.regPhone);
+              if (this.regPhone.test(value)) {
+                callback(new Error("请不要使用手机号作为昵称"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur"
+          },
+          {
+            validator: (rule, value, callback) => {
+              if (this.regSpecialChar.test(value)) {
+                callback(new Error("昵称不得使用特殊字符"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur"
+          }
+        ],
+        type: [
+          {
+            required: true,
+            message: "请设置当前工作状态",
+            trigger: "change"
+          }
+        ],
+        direction_op: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              if (!this.form.direction_op || !this.form.occupation_op) {
+                callback(new Error("请设置职业方向信息"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "change"
+          }
+        ],
+        city_op_id: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              if (!this.form.city_op_id || !this.form.occupation_op) {
+                callback(new Error("请设置所在地区信息"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "change"
+          }
+        ],
+        work_price: [
+          {
+            required: true,
+            message: "请设置日薪",
+            trigger: "blur"
+          },
+          {
+            validator: (rule, value, callback) => {
+              if (value < 300 || value > 2000) {
+                callback(new Error("日薪只允许设置300--2000范围内的正整数"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur"
+          }
+        ],
+        workday: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              console.log(value);
+              if (!this.form.workday && !this.form.weekend) {
+                callback(new Error("请完善可工作时间"));
+              } else if (
+                (this.form.workday &&
+                  (!this.form.workdayStart || !this.form.workdayEnd)) ||
+                (this.form.weekend &&
+                  (!this.form.weekendStart || !this.form.weekendEnd))
+              ) {
+                callback(new Error("请完善可工作时间"));
+              } else {
+                console.log(this.$refs.form);
+                callback();
+              }
+            },
+            trigger: "change"
+          }
+        ],
+        weekend: [
+          {
+            validator: (rule, value, callback) => {
+              if (!value && !this.form.workday) {
+                callback(new Error("请完善可工作时间"));
+              } else if (
+                value &&
+                (!this.form.weekendStart || !this.form.weekendEnd)
+              ) {
+                callback(new Error("请完善周末可工作时间"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "change"
+          }
+        ]
+      },
+      userInfo: {},
+      form: {
+        nickname: "",
+        type: "",
+        work_price: 300,
+        occupation_op: "",
+        direction_op: "",
+        address: ["", ""],
+        region: "",
+        workday: true,
+        weekend: false,
+        workdayStart: "",
+        workdayEnd: "",
+        weekendStart: "",
+        weekendEnd: "",
+        dailyRate: "",
+        workdayTime: "",
+        province_op_id: "",
+        city_op_id: ""
+      },
+      editing: false,
+      types,
+      directions: [],
+      regions: [],
+      provinces: [],
+      cities: []
+    };
+  },
+  computed: {
+    ...mapState(["regPhone", "regSpecialChar"]),
+    subDirections: function() {
+      let direction = this.form.occupation_op;
+      let current = null;
+      this.directions.map(dir => {
+        if (dir.occupation_id === direction) {
+          current = dir;
+        }
+      });
+      if (!current) {
+        return [];
+      }
+      return current.children;
+    },
+    typeShow: function() {
+      const types = this.types;
+      const type = this.form.type;
+      let show = "-";
+      for (let i = 0, len = types.length; i < len; i++) {
+        if (types[i].value == type) {
+          show = `${types[i].label}`;
+        }
+      }
+      return show;
+    },
+    occupationShow: function() {
+      const directions = this.directions;
+      let show = "-";
+      for (let i = 0, len = directions.length; i < len; i++) {
+        if (directions[i].occupation_id == this.form.occupation_op) {
+          const subs = directions[i].children;
+          for (let j = 0, len = subs.length; j < len; j++) {
+            if (subs[j].direction_id == this.form.direction_op) {
+              show = `${directions[i].occupation_name} - ${subs[j].direction_name}`;
+            }
+          }
+        }
+      }
+      return show;
+    },
+    provinceShow: function() {
+      const directions = this.directions;
+      let show = "-";
+      for (let i = 0, len = directions.length; i < len; i++) {
+        if (directions[i].occupation_id == this.type) {
+          show = `${directions[i].occupation_name}`;
+        }
+      }
+      return show;
+    }
+  },
+  watch: {
+    "form.occupation_op": function() {
+      if (this.form.occupation_op !== this.userInfo.occupation_op) {
+        this.form.direction_op = "";
+      }
+    }
+  },
+  async mounted() {
+    this.userInfo = await this.getUserInfo();
+    const user = this.userInfo;
+    console.log(user);
+    this.form.nickname = user.nickname;
+    this.form.type = user.type && user.type !== "0" ? user.type : "";
+    this.form.occupation_op =
+      user.occupation_op && user.occupation_op !== "0"
+        ? user.occupation_op
+        : "";
+    this.form.direction_op =
+      user.direction_op && user.direction_op !== "0" ? user.direction_op : "";
+    this.form.work_price = user.work_price;
+    this.form.province_op_id =
+      user.province_op_id && user.province_op_id !== "0"
+        ? user.province_op_id
+        : "";
+    this.form.city_op_id =
+      user.city_op_id && user.city_op_id !== "0" ? user.city_op_id : "";
+    const work_time_op = user.work_time_op;
+    if (work_time_op) {
+      if (work_time_op.weekend) {
+        this.form.weekend = true;
+        this.form.weekendStart = work_time_op.weekend[0];
+        this.form.weekendEnd = work_time_op.weekend[1];
+      } else {
+        this.form.weekend = false;
+      }
+      if (work_time_op.workday) {
+        this.form.workday = true;
+        this.form.workdayStart = work_time_op.workday[0];
+        this.form.workdayEnd = work_time_op.workday[1];
+      } else {
+        this.form.workday = false;
+      }
+    }
+
+    this.getDirection();
+    this.getProvinces();
+    this.form.province_op_id = this.form.province_op_id
+      ? this.form.province_op_id
+      : "";
+    if (this.form.province_op_id) {
+      this.getCities(this.form.province_op_id, true);
+    }
+  },
+  methods: {
+    async onSubmit() {
+      this.cnzz("签约", "签约页面+基本信息保存", "");
+      //console.log("submit!");
+      this.$refs["form"].validate(async valid => {
+        if (!valid) {
+          // this.$message.error("填写有误");
+          return false;
+        }
+        const form = this.form;
+        const work_time_op = {};
+        if (form.weekend) {
+          work_time_op.weekend = [form.weekendStart, form.weekendEnd];
+        }
+        if (form.workday) {
+          work_time_op.workday = [form.workdayStart, form.workdayEnd];
+        }
+        const data = {
+          work_time_op: JSON.stringify(work_time_op),
+          province_op_id: this.form.province_op_id,
+          city_op_id: this.form.city_op_id,
+          // district_op_name: '',
+          // work_time_per_work: '',
+          // work_remote: '',
+          // work_area: '',
+          // province_op: '', // 远程工作
+          work_price: form.work_price,
+          nickname: form.nickname,
+          type: form.type,
+          occupation_op: form.occupation_op,
+          direction_op: form.direction_op
+        };
+        const res = await this.$axios.$post("/api/user/update_info", data);
+        if (res.status === 1) {
+          this.$message.success("保存成功！");
+          this.editing = false;
+        } else {
+          // this.$message.error(res.info);
+        }
+      });
+    },
+    async getDirection() {
+      const res = await this.$axios.$post("/api/direction/get_all_data");
+      this.directions = res.data || [];
+    },
+    async getProvinces() {
+      const res = await this.$axios.$post("/api/geo/get_province_list");
+      this.provinces = res.data || [];
+    },
+    async getCities(id, flag) {
+      if (!flag) {
+        this.form.city_op_id = "";
+      }
+      const res = await this.$axios.$post(
+        "/api/geo/get_city_list_by_province",
+        { prov_id: id }
+      );
+      this.cities = res.data || [];
+      this.form.city_op = res.data[0].id;
+    },
+    async onCancel() {
+      this.form.nickname = this.userInfo.nickname;
+      this.form.type = this.userInfo.type;
+      this.form.occupation_op = this.userInfo.occupation_op;
+      this.form.direction_op = this.userInfo.direction_op;
+      this.form.work_price = this.userInfo.work_price;
+      let work_time_op = this.userInfo.work_time_op;
+      if (work_time_op.weekend) {
+        this.form.weekend = true;
+        this.form.weekendStart = work_time_op.weekend[0];
+        this.form.weekendEnd = work_time_op.weekend[1];
+      } else {
+        this.form.weekend = false;
+      }
+      if (work_time_op.workday) {
+        this.form.workday = true;
+        this.form.workdayStart = work_time_op.workday[0];
+        this.form.workdayEnd = work_time_op.workday[1];
+      } else {
+        this.form.workday = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.sign-new-info {
+  .edit {
+    margin-top: 60px;
+    & > form {
+      margin-top: 44px;
+      .el-select,
+      .el-input {
+        width: 217px;
+        margin-right: 10px;
+      }
+      .times {
+        margin-bottom: 20px;
+        .el-checkbox {
+          width: 88px;
+        }
+        .to {
+          margin-right: 10px;
+        }
+        .el-input {
+          width: 136px;
+        }
+      }
+    }
+  }
+}
+</style>

pages/sign/new_v2.vue

@@ -0,0 +1,197 @@
+<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="40"
+          color="#45C47A"
+        ></el-progress>
+      </div>
+
+      <div class="sign-new-container">
+        <!-- 认证签约 -->
+        <!-- <stepCert></stepCert> -->
+
+        <!-- 填写基础信息 -->
+        <stepInfo></stepInfo>
+      </div>
+
+      <!-- 提示 -->
+      <!-- <div class="sign-new-tips">
+        完善经历和技能信息，<b>技能</b> 将直接用<b>派单匹配</b>，确保准确，完善
+      </div> -->
+    </div>
+  </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 stepCert from "@/components/sign/step-cert";
+import stepInfo from "@/components/sign/step-info";
+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,
+    stepCert,
+    stepInfo
+  },
+  // 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-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;
+  .sign-new-next-btn {
+    width: 140px;
+    height: 48px;
+    background: #96c6ff;
+    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;
+  }
+}
+</style>