proginn-frontend/components/sign/step-info.vue

<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"
        :class="{
          disable: !canNext
        }"
        @click="nextStep"
      >
        下一步
      </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;
    },
    canNext() {
      let {
        nickname,
        occupation_op,
        direction_op,
        city_op_id,
        city_op,
        work_price,
        workdayEnd,
        workdayStart,
        weekendEnd,
        weekendStart
      } = this.form;
      let condition =
        nickname !== "" &&
        occupation_op !== "" &&
        direction_op !== "" &&
        work_price !== "" &&
        workdayEnd !== "" &&
        workdayStart !== "" &&
        weekendEnd !== "" &&
        weekendStart !== "" &&
        city_op_id !== "" &&
        city_op !== "";
      return condition;
    }
  },
  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);
    }
  },
  created() {
    this.cnzz("签约流程", "基本信息", "访问");
  },
  methods: {
    async nextStep() {
      if (!this.canNext) {
        this.cnzz("签约流程", "基本信息(下一步)", "失败");
        return;
      }
      this.cnzz("签约流程", "基本信息(下一步)", "成功");
      await this.onSubmit();
      this.$emit("next");
    },
    async onSubmit() {
      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;
          this.cnzz("签约流程", "基本信息(下一步)", "服务器OK");
        } else {
          this.cnzz("签约流程", "基本信息(下一步)", "服务器FAIL");
          // 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>