proginn-frontend/components/works/editor.vue

<template>
  <div class="editor">
    <!--作品名称-->
    <div class="app__dp_f app__f_r app__alig_c">
      <h5 class="app__f_s_0"><span class="app__fc_r">*</span>作品名称</h5>
      <el-input show-word-limit v-model="workName" class="title _title" placeholder="50字符以内，不能包含&*\#等特殊字符" :maxlength="50" @blur="workNameBlur"></el-input>
    </div>
    <!--作品描述-->
    <h5 class="label app__mt_20"><span class="app__fc_r">*</span>作品描述 <span class="app__ml_10"><a>查看参考案例</a></span></h5>
    <editor placeholder="请输入作品描述，支持图文混排，可添加【文字描述】【方案视频】【作品图片】【担任职责】等模块;可添加方案截图、PDF文档转图片，不低于60字" :content="content" @change="handleChange"
            class="app__bd_g"></editor>
    <!--作品封面图 -->
    <h5 class="label app__mt_20">作品封面图</h5>
    <div class="uploadInfo">
      <div class="left">
        <el-upload class="avatar-uploader" action="#" :show-file-list="false" :multiple="false" accept="image/png, image/jpeg"
                   :before-upload="handleFileChange">
          <i v-if="cover_url" class="el-icon-delete avatar-uploader-icon" @click.stop="handleDeleteFile"></i>
          <img v-if="cover_url" :src="cover_url" class="avatar"/>
          <!--无照片-->
          <div v-else class="app__dp_f app__f_c app__alig_c app__jus__c" style="height: 100%">
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <p class="app__fz_12 app__mt_10 el-p-upload">上传照片</p>
          </div>
        </el-upload>
        <p class="app__fz_12 app__mt_10 app__tg_c app__fc_grey">支持JPG、PNG格式</p>
      </div>
      <div class="right">
        <p>(800*800,图片最大2M,最多一张)</p>
      </div>
    </div>
    <!--作品链接-->
    <div class="app__dp_f app__f_r app__alig_c app__mt_20">
      <h5 class="app__f_s_0">作品链接</h5>
      <el-input show-word-limit v-model="title" class="title _title" placeholder="例如：https://www.proginn.com 若无法添加作品有效链接,请添加作品截图" :maxlength="50"></el-input>
    </div>


    <footer class="app__tg_c">
      <el-button type="primary" @click="publish" class="btn-save">保存</el-button>
      <!--      <el-button @click="cancel">取消</el-button>-->
    </footer>
  </div>
</template>

<script>
  import editor from "@/components/editor";

  export default {
    head() {
      return {
        script: []
      };
    },
    components: {
      editor
    },
    data() {
      return {
        topicId: "", // 编辑
        hashID: null,
        workName: "",
        title: "",
        subTitle: "",
        content: "",
        cover_url: "",
        dialogVisible: false,
        disabled: false,
        collectionId: "",
        collectionList: [],
        categoryList: [
          {
            value: "default",
            label: "推荐"
          }
        ],
        fileList: [],
        uploading: false
      };
    },
    computed: {},
    mounted() {
      this.needLogin();
      this.needVerify();
      this.getHejiList();
      if (this.$route.params.id) {
        this.loadData();
      }
    },
    methods: {
      loadData() {
        const data = {topicId: this.$route.params.id};
        this.$axios
          .$post(`/api/community/topic/get_edit_topic`, data)
          .then(res => {
            console.log(res);
            const topic = res.data;
            if (topic) {
              this.cover_url = topic.cover_url;
              this.topicId = topic.id;
              this.title = topic.title;
              this.subTitle = topic.intro;
              this.content = topic.body;
              this.hashID = topic.hash_id;
              if (this.cover_url) {
                this.fileList.push({
                  name: "cover_image",
                  url: this.cover_url
                });
              }
            } else {
              this.goHome();
            }
            // TODO go details
          });
      },
      getHejiList() {
        this.$axios.post("/api/jishuquan/get_collections", {
          uid: this.$store.state.userinfo.uid,
          page: 1,
          size: 200
        }).then(res => {
          if (res.data.status === 1) {
            this.collectionList = res.data.data
          }
        })
      },
      publish() {
        this.needVerify();
        if (!this.title) {
          this.$message.error("请输入文章标题");
          return;
        }
        if (this.title.length < 2) {
          this.$message.error("文章标题不可少于2字符");
          return;
        }
        if (this.title.length > 64) {
          this.$message.error("文章标题不可超过64字符，请删减");
          return;
        }

        if (!this.content) {
          this.$message.error("请输入文章正文");
          return;
        }
        if (this.content.length < 100) {
          this.$message.error("文章正文不可少于100字符");
          return;
        }
        if (this.content.length > 100000) {
          this.$message.error("文章正文不可超过1万字符，请删减");
          return;
        }
        const data = {
          title: this.title,
          intro: this.subTitle,
          body: this.content,
          provider_id: this.collectionId,
          cover_url: this.cover_url
        };
        if (this.topicId) {
          data.topic_id = this.topicId;
          this.$axios
            .$post(`/api/community/topic/update_topic`, data)
            .then(res => {
              console.log(res);
              if (res.status === -99) {
                this.goHome();
              }
              if (res.status === 1) {
                this.$message.success("编辑成功！");
              }
              // TODO go details
              window.location.href = `/p/${this.hashID}.html`;
            });
        } else {
          this.$axios
            .$post(`/api/community/topic/create_topic`, data)
            .then(res => {
              console.log(res);
              if (res.status === -99) {
                this.goHome();
              }
              if (res.status === 1) {
                this.$message.success("发布成功！");
              }
              // TODO go details
              window.location.href = `/p/${res.data.hash_id}.html`;
            });
        }
      },
      cancel() {
        this.$router.back();
      },
      handleChange(val) {
        this.content = val;
      },
      handleDeleteFile() {
        this.cover_url = "";
      },
      handleFileChange(file) {
        console.log(file);
        if (file.size / 1024 > 500) {
          this.$message.error("图片大小不得超过500k，请重新选择");
          return false;
        }
        const formData = new FormData();
        formData.append("target", '{ "type": 3 }');
        formData.append("id", "WU_FILE_0");
        formData.append("name", file.name);
        formData.append("type", file.type);
        formData.append("lastModifiedDate", file.lastModifiedDate);
        formData.append("size", file.size);
        formData.append("file", file);
        this.$axios
          .$post(`/file/proxyUpload`, formData, {
            headers: {"Content-Type": "multipart/form-data"}
          })
          .then(res => {
            this.cover_url = (res.data && res.data.url) || "";
            this.fileList = [
              {
                name: "file.name",
                url: this.cover_url
              }
            ];
          });
      },
      workNameBlur(e) {
        this.workName = this.workName.replace(/[&|\*|#|\\]/g, "");

      },
      handleChange(e){
        console.log(e);
      }
    }
  };
</script>

<style lang="scss">
  @import "../../assets/css/common.css";

  .editor {
    position: relative;
    padding: 20px 100px;
    /*width: 740px;*/
    background: #fff;

    .title,
    .sub-title {
      .el-input__inner {
        padding: 0;
        border: 0;
        border-radius: 0;
      }
    }

    .title {
      margin: 10px auto 20px;
      font-size: 28px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: rgba(29, 42, 58, 1);
      line-height: 40px;
    }

    ._title {
      font-size: 15px !important;
      margin: 0 0 0 20px !important;
      border-bottom: 1px solid #ddd;
    }

    .sub-title {
      margin-bottom: 28px;
      min-height: 18px;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(145, 154, 167, 1);
      line-height: 18px;
      border: 0;

      .el-textarea__inner {
        height: 18px;
        line-height: 18px;
        border: 0;
        padding-left: 0;
      }
    }

    .label {
      margin: 20px auto 10px;
      font-size: 13px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: rgba(25, 34, 46, 1);
      line-height: 18px;
    }

    .ql-toolbar {
      border-width: 1px 0 0 0 !important;
    }

    .quill-editor {
      height: 450px;
      border-left: 0 !important;
      border-right: 0 !important;
      font-size: 14px;
      line-height: 25px;
    }

    .ql-snow.ql-toolbar::after {
      display: inline-block;
    }

    .class {
      width: 320px;
    }

    .tags {
      width: 560px;
    }

    footer {
      margin: 40px 0;

      /*button {*/
      /*  width: 100px;*/
      /*  height: 40px;*/
      /*  border-radius: 0;*/
      /*}*/
    }

    strong {
      font-weight: 800 !important;
    }

    em {
      font-style: italic !important;
    }
  }

  .uploadInfo {
    display: flex;
    padding-left: 30px;
    align-items: center;

    .left {
      width: 150px;
      height: 180px;
      flex-shrink: 0;
      overflow: hidden;
      position: relative;
      background: #fff;

      .el-icon-delete {
        display: none;
      }

      .avatar-uploader .el-upload {
        width: 150px;
        height: 150px;
        border: 1px dashed #dce1e8;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;

        img {
          width: 100%;
          height: auto;
          object-fit: contain;
          object-position: top left;
        }
      }

      .avatar-uploader .el-upload:hover {
        border-color: #409eff;

        .el-icon-plus {
          color: #409eff
        }

        .el-p-upload {
          color: #409eff
        }

        .el-icon-delete {
          display: block;
        }
      }

      .avatar-uploader-icon {
        /*position: absolute;*/
        /*top: 0;*/
        /*left: 0;*/
        font-size: 44px;
        color: #dce1e8;;
        /*width: 150px;*/
        /*height: 150px;*/
        /*line-height: 140px;*/
        text-align: center;
      }

      .el-p-upload {
        color: #dce1e8
      }


      .avatar {
        width: 180px;
        height: 140px;
        display: block;
      }

      .title {
        position: absolute;
        left: 50%;
        bottom: 40px;
        transform: translateX(-50%);
        font-size: 13px;
        font-weight: 500;
        color: #dce1e8;
        line-height: 18px;
        text-decoration: underline;
      }
    }

    .right {
      margin-left: 18px;
      height: 34px;

      p {
        font-size: 12px;
        font-weight: 400;
        color: rgba(145, 154, 167, 1);
        line-height: 17px;
      }
    }
  }

  .btn-save {
    width: 20vw;
    border-radius: 5px;
  }
</style>