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 type="textarea" :rows="1" resize="none" show-word-limit v-model="workName" class="app__ml_20" placeholder="50字符以内，不能包含&*\#等特殊字符"
                :maxlength="50" @blur="workNameBlur"/>
    </div>
    <!--作品描述-->
    <div class="app__dp_f app__f_r app__mt_10" style="align-items:flex-start">
      <h5 class="label app__mt_20 app__ws_nw app__f_s_0"><span class="app__fc_r">*</span>作品描述
        <span class="app__ml_10" style="display: none"><a>查看参考案例</a></span></h5>
      <el-input type="textarea" :rows="5" v-model="content" placeholder="请输入60-10000字的作品内容"
                :maxlength="10000" @blur="workContentBlur" class="app__ml_20"/>
    </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="workUrl" class="title _title" placeholder="例如：https://www.proginn.com 若无法添加作品有效链接,请添加作品截图" :maxlength="50"></el-input>
    </div>

    <!--作品封面图 -->
    <h5 class="label app__mt_20">作品截图(至少上传2张)</h5>


    <multi-uploader v-model="workImages"></multi-uploader>
    <!--    <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"/>-->
    <!--          &lt;!&ndash;无照片&ndash;&gt;-->
    <!--          <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>-->


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

<script>
  import editor from "@/components/editor";
  import multiUploader from '@/components/multi-uploader';

  export default {
    head() {
      return {
        script: []
      };
    },
    components: {
      editor,
      multiUploader
    },
    data() {
      return {
        topicId: "", // 编辑
        hashID: null,
        workName: "",
        title: "",
        subTitle: "",
        content: "",
        cover_url: "",
        dialogVisible: false,
        disabled: false,
        collectionId: "",
        collectionList: [],
        categoryList: [
          {
            value: "default",
            label: "推荐"
          }
        ],
        fileList: [],
        uploading: false,
        workUrl: "",
        isPublishing: false,
        workImages: []
      };
    },
    computed: {},
    mounted() {
      this.needLogin();
      // this.needVerify();
      this.getHejiList();
      if (this.$route.query.wid) {
        this.getWorkDetail();
      }
      console.log("url", this.$route.query.wid);
    },
    methods: {
      getWorkDetail(data) {
        this.$axios
          .$post(`/api/user_works/get_detail`, {wid: this.$route.query.wid})
          .then(res => {
            console.log(res);
            if (res.status == 1) {
              this.workName = res.data.name || "";
              this.content = res.data.description || "";
              this.cover_url = res.data.images && res.data.images.length > 0 ? res.data.images[0].thumbnail : "";
              this.workUrl = res.data.url || "123"
            }
          });
        // this.content = "123";
      },
      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() {
        //防止快速连点
        if (this.isPublishing) {
          return;
        }
        this.isPublishing = true;

        if (this.workImages.length < 2) {
          this.$message.error("至少上传2张作品截图");
          return;
        }

        const validCheckResult = this.publishValidCheck();
        if (!validCheckResult.success) {
          this.$message.error(validCheckResult.msg);
          this.isPublishing = false;
          return;
        }

        const data = {name: this.workName, description: this.content, url: this.workUrl, image_list: this.workImages};

        if (this.$route.query.wid) {
          data.wid = this.$route.query.wid;
          this.$axios.$post(`/api/user_works/update`, 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 = `/wd/` + this.$route.query.wid;
            } else {
              this.$message.error("编辑提交失败，请重试");
            }
            this.isPublishing = false;
          });
        } else {
          this.$axios.$post(`/api/user_works/add`, data).then(res => {
            console.log(res);
            if (res.status === -99) {
              this.goHome();
            }
            if (res.status === 1) {
              this.$message.success("发布成功！");
              this.$router.go(-1);
            }
            this.isPublishing = false;
          });
        }
      },
      /**
       * 输入合法性检查
       * @return {{msg: string, success: boolean}}
       */
      publishValidCheck() {
        if (!this.workName) {
          return {success: false, msg: "请输入项目名称"};
        }
        if (this.workName.length < 2) {
          return {success: false, msg: "项目名称不可少于2字符"};
        }
        if (this.title.length > 50) {
          return {success: false, msg: "文章标题不可超过50字符，请删减"};
        }

        if (!this.content) {
          return {success: false, msg: "请输入项目正文"};
        }
        if (this.content.length < 60) {
          return {success: false, msg: "项目正文不可少于60字符"};
        }
        if (this.content.length > 10000) {
          return {success: false, msg: "项目正文不可大于10000字符，请删减"};
        }
        return {success: true, msg: ""};
      },
      cancel() {
        this.$router.back();
      },
      handleChange(val) {
        this.content = val;
      },
      handleDeleteFile() {
        this.cover_url = "";
      },
      handleFileChange(file) {
        console.log(file);
        if (file.size / 1024 > 2048) {
          this.$message.error("图片大小不得超过2M，请重新选择");
          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";
  @import "../../assets/css/public.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>