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" 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>

    <h5 class="app__mt_35">作品资源</h5>

    <div class="app__mt_20">
      <el-upload style="display:inline-block"
                 action="#"
                 ref="upload"
                 :on-success="handleSuccess"
                 :on-change="uploadFileChange"
                 :on-remove="uploadFileDelete"
                 :on-err="uploadFileError"
                 :multiple="false"
                 :show-file-list="false"
                 :file-list="uploadFileList">
        <div class=" app__f_r app__al_c">
          <button slot="trigger" class='app__bd_a_308EFF app__fc_308EFF app__fs_13 app_br_2  app__w_120 app__h_35 app__ta_c app__lh_35'
                  v-if="uploadFileList.length === 0">
            点击添加
          </button>
          <span slot="tip" class="app__fs_13 app__fc_999 app__ml_15" v-if="uploadFileList.length === 0">文件小于1GB，请勿上传侵权内容作品</span>
        </div>
      </el-upload>
      <div v-if="uploadFileList.length > 0" class="app__mw_40_p">
        <div class="app__f_r app__al_c">
          <p class="app__fs_15 app__txt_ellipsis">{{uploadFileList.length > 0 ? uploadFileList[0].name : ""}}</p>
          <button class="app__fc_999 app__fs_18 app__ml_20" @click="uploadFileDelete">x</button>
        </div>
        <el-progress :percentage="uploadPercentage" status="success" :stroke-width="8" class="app__mt_10"/>
      </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';

  import axios from "axios";
  import oos from "../../mixins/oos";

  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: [],
        wid: "",
        work_up_url: "",
        workList: []
      };
    },

    mixins: [oos],
    computed: {},
    mounted() {
      this.needLogin();
      // this.needVerify();
      this.getHejiList();
      if (this.$route.query.wid) {
        this.getWorkDetail();
        this.getWorkFile();
      }
      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.setWorkImages(res.data);
              this.workUrl = res.data.url || ""
            }
          });
      },

      getWorkFile() {
        this.$axios.$post(`/api/UserWorks/getWorkFile`, {wid: this.$route.query.wid}).then(res => {
          console.log(res);
          if (res.status === 1) {
            this.uploadFileList.push({name: res.data.file_name, url: res.data.file_url_abs, path: res.data.file_url});
            console.log(this.uploadFileList)
          }
        }).catch(err => {
          console.log(err)
        });
      },

      setWorkImages(data) {
        let images = data.images;
        if (images && images.length > 0) {
          images.forEach((image, index) => {
            let imageName = this.getImageName(image.url);
            console.log("imageName", imageName);
            this.workImages.push({name: imageName + index, url: image.url});
          })
        }
        console.log(this.workImages);
      },
      getImageName(imageName) {
        if (imageName) {
          try {
            const lastquotaIndex = imageName.lastIndexOf("/");
            const lastDotIndex = imageName.lastIndexOf('.');
            return imageName.substring(lastquotaIndex + 1, lastDotIndex);
          } catch (e) {
            console.log(e);
          }
        }
        return "";
      },
      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;

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

        let workFile = this.uploadFileList.length > 0 ? this.uploadFileList[0].url : "";
        console.log(this.uploadFileList);
        const data = {
          name: this.workName,
          description: this.content,
          url: this.workUrl,
          image_list: this.workImages.map((it) => it.url).join(","),
          work_file: workFile
        };

        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("编辑成功！");
              // window.location.href = res.data.work_url;
            } 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字符，请删减"};
        }
        if (this.workImages.length < 2) {
          return {success: false, msg: "至少上传2张作品截图"};
        }

        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, "");

      },
      handleSuccess(response, file, fileList) {
      },
    },

  };
</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>