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

<template>
  <div class="sign-new-profile" id="profile">
    <header class="sign-new-header">
      <div class="sign-new-header-title">个人介绍</div>
      <div v-if="editing" class="opts">
        <el-button
          class="sign-new-profile-btn"
          type="info"
          @click="editing = false"
          >取消</el-button
        >
        <el-button class="sign-new-profile-btn" type="primary" @click="onSubmit"
          >保存</el-button
        >
      </div>
      <div v-else class="opts">
        <el-button
          class="sign-new-profile-btn"
          type="primary"
          @click="handleEdit"
          >编辑</el-button
        >
      </div>
    </header>
    <div class="sign-new-profile-main">
      <div v-if="!content && !editing" class="empty">
        点击右上角“编辑”按钮添加个人介绍
      </div>
      <div v-else-if="editing" class="edit">
        <editor
          :hideImage="true"
          :content="content"
          @change="handleChange"
          :placeholder="placeholder"
        ></editor>
      </div>
      <!-- <div v-else class="show" v-html="content"></div> -->
      <div v-else class="show ql-snow ql-editor" v-html="content"></div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import editor from "@/components/editor";

export default {
  data() {
    return {
      editing: false,
      content: "",
      placeholder:
        "我是程序员客栈的【昵称】，一名【二级方向】；\n我毕业于【大学名称】，担任过【公司1】的【职位】，担任过【公司2】的【职位】；\n负责过【项目1名称】，【项目2名称】，【项目3名称】的开发；\n熟练使用【技术栈1】，【技术栈2】，【技术栈3】，【技术栈4】，【技术栈5】；\n如果我能帮上您的忙，请点击“立即预约”或“发布需求”！"
    };
  },
  components: { editor },
  watch: {
    // content: function(val) {
    //   console.log(val);
    // }
  },
  computed: {
    ...mapState(["userinfo"])
  },
  async mounted() {
    let res = await this.$axios.$post("/api/user/get_resume");
    this.content = res.data ? res.data.personaldetails : "";
  },
  methods: {
    handleEdit() {
      if (this.userinfo && this.userinfo.realname_verify_status === "0") {
        this.$message.error("请先进行实名认证");
        return;
      }
      this.editing = true;
    },
    handleChange(val) {
      this.content = val;
    },
    async onSubmit() {
      this.cnzz("签约", "签约页面+个人介绍保存", "");
      if (!this.content) {
        this.$message.error("请输入个人介绍");
        return false;
      }
      if (this.content.length < 150) {
        this.$message.error("个人介绍不得低于150字");
        return false;
      }
      if (!this.content.length > 3000) {
        this.$message.error("个人介绍不得 超过3000字");
        return false;
      }
      const formData = {
        personaldetails: this.content
      };
      let res = await this.$axios.$post("/api/user/update_resume", formData);
      if (res.status === 1) {
        this.$message.success("保存成功！");
        this.editing = false;
      } else {
        this.$message.error(res.info);
      }
    }
  }
};
</script>

<style lang="scss">
.sign-new-profile {
  .sign-new-profile-main {
    margin-top: 30px;
  }
  .edit {
    padding: 10px;
    min-height: 244px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;

    > div {
      border: 0 !important;
    }
    & > .ql-toolbar.ql-snow {
      border: 0 !important;
    }
  }

  .show {
    padding: 20px 0;
    * {
      word-break: break-all;
    }
  }
  .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;
  }
  .sign-new-header {
    border: none;
  }
}
.sign-new-profile-btn {
  height: 34px;
  padding: 0 20px;
  line-height: 34px;
}
</style>