教育经历样式调整

components/sign/step-education.vue

@@ -0,0 +1,463 @@
+<template>
+  <div class="education" id="education">
+    <header class="sign-new-header">
+      <div class="sign-new-header-title">教育经历</div>
+      <span>
+        <el-button @click="handleAdd" type="text" icon="el-icon-plus"
+          >添加</el-button
+        >
+      </span>
+    </header>
+    <div v-if="education.length > 0">
+      <template v-for="(item, idx) in education">
+        <div
+          v-if="editingItem.indexOf(idx) < 0"
+          :key="item.university"
+          class="show"
+        >
+          <h4>
+            <span>{{
+              `${item.start_time} - ${item.end_time || "至今"} ${
+                item.university
+              } ${item.major}`
+            }}</span>
+            <el-button @click="editItem(idx)" type="text">编辑</el-button>
+          </h4>
+          <p>{{ item.description }}</p>
+        </div>
+        <div v-else :key="'education' + idx" class="edit">
+          <el-form ref="form" :rules="rules" :model="item" label-width="147px">
+            <div class="header">
+              <date-range class="range" v-model="item.date"></date-range>
+              <el-select
+                v-model="item.university"
+                allow-create
+                filterable
+                remote
+                reserve-keyword
+                placeholder="学校名称"
+                :remote-method="fetchUniversity"
+                :loading="loadingUniversity"
+              >
+                <el-option
+                  v-for="item in universities"
+                  :key="item.label"
+                  :label="item.label"
+                  :value="item.label"
+                ></el-option>
+              </el-select>
+              <el-select
+                class="small"
+                v-model="item.major"
+                allow-create
+                filterable
+                remote
+                reserve-keyword
+                placeholder="选择专业"
+                :remote-method="fetchMajor"
+                :loading="loadingMajor"
+              >
+                <el-option
+                  v-for="item in majors"
+                  :key="item.label"
+                  :label="item.label"
+                  :value="item.label"
+                ></el-option>
+              </el-select>
+              <el-select
+                class="small"
+                v-model="item.education_background"
+                placeholder="学历"
+              >
+                <el-option
+                  v-for="educationBackground in educationBackgrounds"
+                  :key="educationBackground.value"
+                  :label="educationBackground.label"
+                  :value="educationBackground.label"
+                ></el-option>
+              </el-select>
+            </div>
+            <div>
+              <el-input
+                class="big"
+                v-model="item.diploma_url"
+                placeholder="请输入学信网在线验证报告地址"
+              ></el-input>
+            </div>
+            <div class="content">
+              <el-input
+                type="textarea"
+                :rows="7"
+                maxlength="140"
+                show-word-limit
+                placeholder="教育经历文字说明，不得低于15个字符"
+                v-model="item.description"
+              ></el-input>
+              <uploader
+                :imageUrl="item.diploma_photo"
+                title="毕业证图片"
+                @change="val => handleImageUrl(idx, val)"
+              ></uploader>
+            </div>
+            <footer class="sign-new-education-footer">
+              <div class="sign-new-education-tips">
+                <p>学信网在线验证报告, 例如：https://www.proginn.com</p>
+                <p>
+                  注：学历证明可以是毕业证图片或学信网在线验证报告（二选一即可）
+                </p>
+              </div>
+              <div class="sign-new-btn-area">
+                <span class="opts">
+                  <el-button type="danger" @click="handleDelete(idx, item)"
+                    >删除</el-button
+                  >
+                  <el-button type="info" @click="handleCancel(idx, item)"
+                    >取消</el-button
+                  >
+                  <el-button type="primary" @click="handleConfirm(idx, item)"
+                    >保存</el-button
+                  >
+                </span>
+              </div>
+            </footer>
+          </el-form>
+        </div>
+      </template>
+    </div>
+    <div v-else class="empty">点击右上角“添加”按钮添加教育经历</div>
+  </div>
+</template>
+
+<script>
+import uploader from "@/components/uploader";
+import dateRange from "@/components/date-range";
+import { mapState } from "vuex";
+export default {
+  data() {
+    return {
+      // editing: true,
+      editingModel: null,
+      editingItem: [],
+      rules: {
+        name: ""
+      },
+      education: [],
+      current: null,
+      originEducation: [],
+      universities: [],
+      loadingUniversity: false,
+      majors: [],
+      loadingMajor: false,
+      educationBackgrounds: [],
+      init: {
+        diploma_photo: "",
+        diploma_url: "",
+        start_time: "",
+        end_time: "",
+        date: [],
+        university: "",
+        major: "",
+        education_background: "",
+        description: ""
+      }
+    };
+  },
+  components: {
+    uploader,
+    dateRange
+  },
+  computed: {
+    ...mapState(["userinfo"])
+  },
+  watch: {},
+  async mounted() {
+    this.getData();
+    this.getEducationBackground();
+  },
+  methods: {
+    async onSubmit(idx) {
+      console.log("submit!", this.education);
+      if (this.education.length > 10) {
+        this.$message.error("最多可添加10项工作经历!");
+      }
+      const data = this.education.map(it => {
+        let item1 = {
+          diploma_photo: it.diploma_photo,
+          diploma_url: it.diploma_url,
+          start_time: it.date[0],
+          end_time: it.date[1],
+          university: it.university,
+          major: it.major,
+          education_background: it.education_background,
+          description: it.description
+        };
+        if (it.id) {
+          item1.id = it.id;
+        }
+        return item1;
+      });
+      const res = await this.$axios.$post("/api/user_education/save_all", {
+        data: JSON.stringify(data)
+      });
+      if (res.status === 1) {
+        this.$message.success("保存成功！");
+        this.getData();
+        return true;
+      } else {
+        this.$message.error(res.info);
+        return false;
+      }
+    },
+    async getData() {
+      const res = await this.$axios.$post("/api/user_education/list");
+      const data = res.data || [];
+      const education = data.map(it => ({
+        ...it,
+        date: [it.start_time || "", it.end_time || ""]
+      }));
+      console.log("education", education);
+      this.education = education;
+    },
+    async getEducationBackground() {
+      const res = await this.$axios.$post(
+        "/api/simple_data/select_education_background"
+      );
+      const data = res.data || [];
+      this.educationBackgrounds = data.map(it => ({
+        value: it.id,
+        label: it.name
+      }));
+    },
+    async fetchUniversity(keyword) {
+      console.log(keyword);
+      this.loadingUniversity = true;
+      const res = await this.$axios.$post(
+        "/api/simple_data/select_university",
+        { keyword }
+      );
+      this.loadingUniversity = false;
+      const data = res.data || [];
+      this.universities = data.map(it => ({ value: it.id, label: it.name }));
+    },
+    async fetchMajor(keyword) {
+      console.log(keyword);
+      this.loadingMajor = true;
+      const res = await this.$axios.$post("/api/simple_data/select_major", {
+        keyword
+      });
+      this.loadingMajor = false;
+      const data = res.data || [];
+      this.majors = data.map(it => ({ value: it.id, label: it.name }));
+    },
+    handleRankClose() {
+      this.rankForm = {
+        first: ""
+      };
+    },
+    handleRank() {
+      this.rankDialog = false;
+    },
+    handleAdd() {
+      if (this.userinfo && this.userinfo.realname_verify_status === "0") {
+        this.$message.error("请先进行实名认证");
+        return;
+      }
+      if (
+        this.editingItem.length > 0 &&
+        !this.education[this.editingItem[0]].id
+      ) {
+        this.$message.error("请先保存现有修改");
+        return;
+      }
+      const _init = JSON.parse(JSON.stringify(this.init));
+      this.education.push(_init);
+      this.editingModel = _init;
+      this.editingItem = [this.education.length - 1];
+    },
+    handleImageUrl(idx, url) {
+      this.education[idx].diploma_photo = url;
+    },
+    async handleDelete(idx) {
+      this.editingItem = [];
+      this.education.splice(idx, 1);
+      this.editingModel = null;
+      await this.onSubmit();
+    },
+    handleCancel(idx, item) {
+      if (!item.id) {
+        this.education.splice(idx, 1);
+      } else {
+        this.education.splice(idx, 1, this.editingModel);
+      }
+
+      this.editingItem = [];
+      this.editingModel = null;
+    },
+    handleConfirm(idx, item) {
+      this.cnzz("签约", "签约页面+教育经历保存", "");
+      // const item = this.education.slice(idx, idx + 1)[0];
+      if (!item.date) {
+        this.$message.error("请设置开始时间/结束时间!");
+        return;
+      } else if (
+        item.date &&
+        item.date[0] &&
+        item.date[1] &&
+        item.date[0] > item.date[1]
+      ) {
+        this.$message.error("请设置开始时间小于结束时间!");
+        return;
+      }
+      if (!item.university || !item.major || !item.education_background) {
+        this.$message.error("请设置学校名称/专业/学历!");
+        return;
+      }
+      if (!item.description || item.description.length < 15) {
+        this.$message.error("教育经历不得低于15个字符");
+        return;
+      }
+      if (!item.description || item.description.length > 140) {
+        this.$message.error("教育经历不得多于140个字符");
+        return;
+      }
+      // if (!item.diploma_url && !item.diploma_photo) {
+      //   this.$message.error("请提供学历证明!");
+      //   return;
+      // }
+      this.editingItem = [];
+      // const submitItem = {
+      //   ...item,
+      //   start_time: item.date[0],
+      //   end_time: item.date[1]
+      // };
+      this.onSubmit();
+    },
+    editItem(idx) {
+      if (this.userinfo && this.userinfo.realname_verify_status === "0") {
+        this.$message.error("请先进行实名认证");
+        return;
+      }
+      this.editingItem = [idx];
+      const origin = this.education.slice(idx, idx + 1)[0];
+      this.editingModel = JSON.parse(JSON.stringify(origin));
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.education {
+  header .el-icon-plus {
+    font-size: 18px;
+  }
+  .edit {
+    padding: 20px 0;
+    > form {
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+      }
+      .range {
+        margin-right: 10px;
+      }
+      .opts {
+        display: flex;
+        align-items: center;
+        .el-button {
+          margin-left: 5px;
+        }
+      }
+      .el-select,
+      .el-input {
+        width: 136px;
+        margin-right: 10px;
+        .el-input--suffix .el-input__inner {
+          padding-right: 0;
+        }
+      }
+      .small {
+        width: 140px;
+      }
+      .big {
+        width: 100%;
+      }
+      .times {
+        .el-checkbox {
+          width: 88px;
+        }
+        .el-input {
+          width: 160px;
+        }
+      }
+      .content {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-top: 10px;
+        .el-textarea {
+          display: flex;
+          width: 620px;
+          height: 162px;
+        }
+      }
+    }
+  }
+  .show {
+    padding: 23px 0 23px 0;
+    border-bottom: 1px solid #ebeef5;
+    &:last-of-type {
+      border: 0;
+    }
+    h4 {
+      display: flex;
+      justify-content: space-between;
+      height: 44px;
+      font-size: 14px;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      color: #308eff;
+      line-height: 44px;
+    }
+    p {
+      word-break: break-all;
+      margin-top: 8px;
+      font-size: 14px;
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      color: rgba(102, 102, 102, 1);
+      line-height: 24px;
+    }
+  }
+
+  .empty {
+    margin: 112px auto 104px;
+    font-size: 27px;
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    text-align: center;
+    color: rgba(205, 205, 205, 1);
+    line-height: 38px;
+  }
+  footer p {
+    margin-top: 15px;
+    font-size: 12px;
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    color: rgba(145, 154, 167, 1);
+    line-height: 17px;
+  }
+}
+
+.sign-new-education-footer {
+  display: flex;
+}
+.sign-new-education-tips {
+  flex: 1;
+}
+.sign-new-btn-area {
+  margin-top: 24px;
+  display: flex;
+}
+</style>

components/sign/step-experience.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="sign-new-experience">
+    <div class="sign-new-tips">
+      完善经历和技能信息，<b>技能</b>将直接用于<b>派单匹配</b>，确保准确，完善
+    </div>
+    <div class="sign-experience-main">
+      <stepEducation></stepEducation>
+    </div>
+
+    <div class="sign-new-next">
+      <div class="sign-new-next-btn">下一步</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import stepEducation from "./step-education.vue";
+export default {
+  components: {
+    stepEducation
+  }
+};
+</script>
+
+<style lang="scss">
+.sign-experience-main {
+  margin-top: 60px;
+}
+</style>

pages/sign/new_v2.vue

@@ -18,7 +18,10 @@
         <!-- <stepCert></stepCert> -->
 
         <!-- 填写基础信息 -->
-        <stepInfo></stepInfo>
+        <!-- <stepInfo></stepInfo> -->
+
+        <!-- 经历 -->
+        <stepExperienceVue></stepExperienceVue>
       </div>
 
       <!-- 提示 -->
@@ -43,6 +46,7 @@ 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 stepExperienceVue from "@/components/sign/step-experience.vue";
 import qs from "qs";
 
 export default {
@@ -65,7 +69,8 @@ export default {
     social,
     showToast,
     stepCert,
-    stepInfo
+    stepInfo,
+    stepExperienceVue
   },
   // mixins: [getDeviceType],
   data() {
@@ -194,4 +199,34 @@ export default {
     cursor: pointer;
   }
 }
+
+.sign-new-header {
+  display: flex;
+  justify-content: space-between;
+  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;
+    }
+  }
+}
 </style>