proginn-frontend/components/works/editor.vue

<template>
  <div class="editor">
    <!-- title -->
    <div class="work-title">{{ this.wid ? '编辑' : '添加' }}项目作品</div>
    <!--作品名称-->
    <div class="work-field" style="margin-top: 30px;">
      <div class="work-label"><span class="app__fc_r">*</span> 作品名称</div>
      <el-input type="textarea" :rows="1" resize="none" show-word-limit v-model="workName" class="" placeholder="50字符以内，不能包含&*\#等特殊字符"
                :maxlength="50" @blur="workNameBlur"/>
    </div>
    <!--作品描述-->
    <div class="work-field" style="align-items:flex-start">
      <div class="work-label"><span class="app__fc_r">*</span> 作品描述</div>
      <el-input type="textarea" :rows="5" v-model="content" placeholder="请输入60-10000字的作品内容"
                :maxlength="10000" class=""/>
    </div>
    <!--作品链接-->
    <div class="work-field">
      <div class="work-label">作品链接</div>
      <el-input v-model="workUrl" class="title _title" placeholder="例如：https://www.proginn.com 若无法添加作品有效链接,请添加作品截图"></el-input>
    </div>
    <!--作品封面图 -->
    <div class="work-field">
      <div class="work-label" style="margin-bottom: 10px;"><span class="app__fc_r">*</span> 作品截图(至少2张)</div>
      <multi-uploader v-model="workImages"></multi-uploader>
    </div>
    <!-- 作品资源 -->
    <div class="work-field">
      <div class="work-label" style="margin-bottom: 10px;">作品资源<span class="upload-tips">文件小于1GB，请勿上传侵权内容作品</span></div>
      <div class="">
        <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='upload-btn' v-if="uploadFileList.length === 0">
              点击添加
            </button>
          </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>
    </div>
    <!-- 所属分类 & 作品类型 -->
    <div class="work-field" v-if="uploadFileList.length > 0">
      <div class="work-label"><span class="app__fc_r">*</span> 所属分类</div>
      <div class="work-cate-type">
        <el-cascader
          class="work-cate-cascader"
          v-model="selectedWorkCate"
          :options="workCate"
          :props="{ expandTrigger: 'hover' }"
          placeholder="请选择作品分类"></el-cascader>
      </div>
    </div>
    <!-- 资源价格 -->
    <div class="work-field" v-if="uploadFileList.length > 0">
      <div class="work-label"><span class="app__fc_r">*</span> 资源价格</div>
      <div class="work-price-wrapper">
        <el-input
          class="work-price-input"
          type="number"
          placeholder="请输入资源价格"
          v-model="price"></el-input>
        <span>元</span>
      </div>
    </div>
    <!-- btn group -->
    <footer class="">
      <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: [],
        // 所属分类
        workCate: [],
        selectedWorkCate: [],
        // 资源类型: 1 免费，2 付费
        workType: 1,
        // 资源价格
        price: 1
      };
    },
    mixins: [oos],
    computed: {},
    mounted() {
      this.needLogin();
      this.getWorkCate();
      // this.needVerify();
      // this.getHejiList();
      this.wid = this.$route.query.wid || ''
      if (this.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 || ""
              if (res.data.cate_id_one && res.data.cate_id_two) {
                this.selectedWorkCate = [res.data.cate_id_one, res.data.cate_id_two]
              }
              this.workType = res.data.price > 0 ? 2 : 1
              this.price = res.data.price || 0
            }
          });
      },
      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)
        });
      },
      /**
       * 获取作品分类
       */
      getWorkCate() {
        this.$axios.$post('/api/user_works/cate').then(res => {
          if (res.status === 1) {
            let workCate = res.data || []
            this.workCate = workCate.map(item => {
              let children = item.child.map(child => {
                return {
                  value: child.category_id,
                  label: child.name
                }
              })
              return {
                value: item.category_id,
                label: item.name,
                children: children
              }
            })
          }
        }).catch(err => {
          console.log('get work cate error: ', 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() {
        const self = this;
        //防止快速连点
        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,
          type: this.workType,
          cate_id_one: this.selectedWorkCate[0],
          cate_id_two: this.selectedWorkCate[1],
          price: this.price
        };

        if (this.wid) {
          data.wid = this.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("编辑作品成功！");
              setTimeout(() => {
                //window.location.href = `/wo/${self.$store.state.userinfo.uid}/works`;
                window.location.href = res.data.work_url;
              }, 800);
              // 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.wid = res.data.wid || ''
              setTimeout(() => {
                window.location.href = res.data.work_url;
              }, 800);
            } else {
              this.$message.error("添加作品失败，请重试");
            }
            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.workName.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张作品截图"};
        }
        // 上传文件后，才需要填写分类及价格
        if (this.uploadFileList.length) {
          if (this.selectedWorkCate.length !== 2 || (!this.selectedWorkCate[0] || !this.selectedWorkCate[1])) {
            return {success: false, msg: "请选择作品分类"};
          }
          if (this.price <= 0) {
            //return {success: false, msg: "请输入大于0的资源价格"};
          }
          if (String(this.price).indexOf('.') > -1 &&
              String(this.price).length - String(this.price).indexOf('.') - 1 > 2) {
            return {success: false, msg: "资源价格最多保留两位小数"};
          }
        }

        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) {
      },
      showUploadTips () {
        this.$message.info('先保存项目作品，才能上传作品资源');
      }
    },
  };
</script>

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

  .work-title {
    width: 960px;
    line-height: 37px;
    padding: 5px 0 25px 0;
    margin-left: -80px;
    font-size: 26px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: center;
    color: #1d2a3a;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .editor {
    position: relative;
    padding: 20px 100px;
    width: 1000px;
    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 !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;
  }
  .work-field {
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    .work-label {
      margin-bottom: 5px;
      line-height: 20px;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: #19222e;
    }
    .upload-tips {
      line-height: 20px;
      margin-left: 10px;
      font-size: 14px;
      font-weight: 400;
      color: #999999;
    }
    .upload-btn {
      width: 160px;
      height: 40px;
      line-height: 40px;
      border: 1px solid #308eff;
      border-radius: 6px;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #308eff;
    }
    .work-cate-type {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      .work-cate-cascader {
        width: 315px;
        margin-right: 30px;
      }
    }
    .work-price-wrapper {
      display: flex;
      align-items: center;
      .work-price-input {
        width: 315px;
      }
      span {
        margin-left: 8px;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: #19222e;
      }
    }
  }
  .custom-radio {
    .el-radio__inner {
      width: 20px;
      height: 20px;
      border: none;
      border-radius: 0;
      background: url("~@/assets/img/common/custom-radio.png") no-repeat !important;
      &:after {
        content: none;
      }
    }
    .is-checked {
      .el-radio__inner {
        background: url("~@/assets/img/common/custom-radio-checked.png") no-repeat !important;
      }
    }
  }
</style>
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
input[type="number"]{
  -moz-appearance: textfield !important;
}
</style>