proginn-frontend/components/sign/profile.vue

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

<script>
import { mapState } from "vuex";
import editor from "@/components/editor";
export default {
  data() {
    return {
      editing: false,
      content: ""
    };
  },
  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() {
      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">
.profile {
  .edit {
    padding: 0 20px;
    width: 1000px;
    min-height: 244px;
    > div {
      border: 0 !important;
    }
    & > .ql-toolbar.ql-snow {
      border: 0 !important;
    }
  }

  .show {
    padding: 20px;
    * {
      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;
  }
}
</style>