pbl-student-table/src/components/easy2/commpont/onlineWrite.vue

<template>
  <div class="engBox">
    <div class="engTitle">
      <div>作文题目：</div>
      <div>{{ englishList.engTitle }}</div>
    </div>
    <div class="engText">
      <div>作文内容：</div>
      <div class="cont" v-html="englishList.englishText"></div>
    </div>

    <div
      v-for="(item, index) in myAnswerList.imgList"
      :key="index"
      class="imgListCss"
    >
      <div class="itemImg">
        <img :src="item.url" alt="" />
        <div class="itemDeleteImg" @click="deleteImgList">
          <img src="../../../assets/icon/english/delete.png" alt="" />
        </div>
      </div>
    </div>

    <div class="chooseUpload" @click="type = 1" v-if="type == 0">+在线编写</div>
    <div
      class="chooseUpload"
      @click="uploadDialogVisible = true"
      v-if="type == 0"
    >
      +图片上传
    </div>

    <div v-if="type == 1">
      <div class="ftypeBox">
        <div class="ftypeTitle">
          <div>标题：</div>
          <div>
            <el-input
              v-model="myAnswerList.engTitle"
              placeholder="请填写你的作文题目"
            ></el-input>
          </div>
        </div>
        <div class="ftypeText">
          <div>正文：</div>
          <div>
            <el-input
              type="textarea"
              :rows="20"
              resize="none"
              v-model="myAnswerList.engText"
            ></el-input>
          </div>
        </div>

        <div class="upImg" @click="uploadDialogVisible = true">
          <img src="../../../assets/icon/english/uploadImg.png" alt="" />
        </div>
      </div>
    </div>

    <el-dialog
      title="图片上传"
      :visible.sync="uploadDialogVisible"
      :append-to-body="true"
      width="30%"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div
        class="chapter_add"
        @click="addImg($event)"
        v-if="myAnswerList.imgList.length == 0"
      >
        <div class="up_photo2">
          <img src="../../../assets/icon/plwork1.png" alt />
          <span>点击上传文件</span>
        </div>
        <input
          type="file"
          accept="video/mp4, video/quicktime, video/x-msvideo,application/pdf, application/.ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, image/*"
          multiple="multiple"
          style="display: none"
          @change="beforeUpload($event)"
        />
      </div>
      <div class="chapter_add" v-else>
        <div class="isUpImg">
          <img :src="myAnswerList.imgList[0].url" alt="" />
        </div>
        <div class="deleteImg" @click="deleteImgList">
          <img src="../../../assets/icon/english/delete.png" alt="" />
        </div>
      </div>
      <div style="text-align: center">如已进行填写，确认后讲清空内容噢。</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploadIsType">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["englishList", "myAnswerList1"],
  data() {
    return {
      type: 0,
      myAnswerList: {
        engTitle: "",
        engText: "",
        imgList: [],
      },
      uploadDialogVisible: false,
      noneBtnImg: false,
    };
  },
  watch: {
    myAnswerList1: {
      handler(newVal) {
        if (
          !this.myAnswerList1.engTitle &&
          !this.myAnswerList1.engText &&
          !this.myAnswerList1.imgList.length
        ) {
          this.myAnswerList = {
            engTitle: "",
            engText: "",
            imgList: [],
          };
          this.type = 0;
        } else {
          this.myAnswerList = newVal;
          this.type = 1;
        }
      },
      deep: true,
    },
  },
  methods: {
    handleClose(done) {
      done();
    },
    imgChange() {
      var _tmp = this.myAnswerList.imgList;
      this.noneBtnImg = _tmp.length >= 1;
    },
    addImg(e) {
      var el = e.currentTarget;
      el.getElementsByTagName("input")[0].click();
      e.target.value = "";
    },
    deleteImgList() {
      this.myAnswerList.imgList = [];
    },
    uploadIsType() {
      if (this.type == 2) {
        this.type = 1;
      }
      this.uploadDialogVisible = false;
    },
    async beforeUpload(event) {
      // this.$message.success('进入上传')
      var file = event.target.files[0];
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域

      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
      var _this = this;
      // _this.progress = 0;
      var photoA = [
        "BMP",
        "GIF",
        "PNG",
        "JPGE",
        "JPG",
        "TIF",
        "PCX",
        "TGA",
        "EXIF",
        "FPX",
        "SVG",
        "APNG",
      ];
      if (
        photoA.indexOf(
          file.name
            .split(".")
            [file.name.split(".").length - 1].toLocaleUpperCase()
        ) == -1
      ) {
        _this.$message.error("请上传图片!");
        return;
      }

      if (file) {
        var params = {
          Key:
            file.name.split(".")[0] +
            new Date().getTime() +
            "." +
            file.name.split(".")[file.name.split(".").length - 1],
          ContentType: file.type,
          Body: file,
          "Access-Control-Allow-Credentials": "*",
          ACL: "public-read",
        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
        var options = {
          // partSize: 2048 * 1024 * 1024,
          partSize: 1024 * 1024 * 1024,
          queueSize: 2,
          leavePartsOnError: true,
        };
        bucket
          .upload(params, options)
          .on("httpUploadProgress", function (evt) {
            //这里可以写进度条
            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
            // _this.progress = parseInt((evt.loaded * 80) / evt.total);
          })
          .send(function (err, data) {
            // _this.progress = 100;

            if (err) {
              var a = _this.$refs.upload1.uploadFiles;
              a.splice(a.length - 1, a.length);
              _this.$message.error("上传失败");
            } else {
              // _this.$message.success('上传成功')
              _this.myAnswerList.imgList.push({
                name: file.name,
                url: data.Location,
              });
              _this.imgChange();
              console.log(data.Location);
              // _this.$message.success('上传成功'+data.Location)
            }
          });
      }
    },
  },
  mounted() {
    if (
      !this.myAnswerList1.engTitle &&
      !this.myAnswerList1.engText &&
      !this.myAnswerList1.imgList.length
    ) {
      this.myAnswerList = {
        engTitle: "",
        engText: "",
        imgList: [],
      };
      this.type = 0;
    } else {
      this.myAnswerList = JSON.parse(JSON.stringify(this.myAnswerList1));
      this.type = 1;
    }
  },
};
</script>

<style scoped>
.engBox {
  width: 90%;
  margin: 0 auto;
}

.engTitle,
.engText {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  margin-bottom: 20px;
}

.engTitle > .div:first-child,
.engText > div:first-child {
  min-width: 75px;
}

.chooseUpload {
  width: 100%;
  height: 300px;
  text-align: center;
  line-height: 300px;
  border: 1px dashed #c4c4c4;
  border-radius: 5px;
  margin-bottom: 20px;
  cursor: pointer;
}

.ftypeBox {
  margin: 20px auto 0;
}
.ftypeTitle {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.ftypeTitle > div:first-child {
  min-width: 42px;
  font-weight: bold;
}
.ftypeTitle > div:last-child {
  width: calc(100% - 42px);
}
.ftypeText {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  margin-top: 20px;
}
.ftypeText > div:first-child {
  min-width: 42px;
  margin-top: 10px;
  font-weight: bold;
}
.ftypeText > div:last-child {
  width: 100%;
}
.upImg {
  width: 30px;
  height: 30px;
  float: right;
  cursor: pointer;
}
.upImg > img,
.isUpImg > img,
.deleteImg > img,
.itemImg > img,
.itemDeleteImg > img {
  width: 100%;
  height: 100%;
}

.chapter_add {
  width: 180px;
  margin: 0 auto;
  position: relative;
  text-align: center;
}

.up_photo2 {
  width: 180px;
  box-sizing: border-box;
  min-width: 180px;
  height: 180px;
  max-height: 180px;
  min-height: 180px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgb(242, 246, 255);
  /* padding: 25px; */
  margin-bottom: 10px;
}

.up_photo2 img {
  width: 50%;
  height: auto;
}

.up_photo2 span {
  color: #898989;
}

.isUpImg {
  width: 180px;
  min-width: 180px;
  height: 180px;
  max-height: 180px;
  min-height: 180px;
}

.deleteImg {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}

.imgListCss {
  margin: 10px 0;
}

.itemImg {
  width: 50px;
  height: 50px;
  position: relative;
}

.itemDeleteImg {
  width: 15px;
  height: 15px;
  cursor: pointer;
  position: absolute;
  top: -5px;
  right: -5px;
}

/* table 样式 */
.cont >>> table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

.cont >>> table td,
.cont >>> table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  /* padding: 20px 5px; */
  padding: 5px 10px;
  max-width: 0px;
  height: 30px;
  vertical-align: baseline;
  box-sizing: border-box;
}

.cont >>> table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* blockquote 样式 */
.cont >>> blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 样式 */
.cont >>> code {
  display: inline-block;
  /* *display: inline; */
  zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}

.cont >>> pre code {
  display: block;
}

/* ul ol 样式 */
.cont >>> ul,
ol {
  margin: 10px 0 10px 20px;
}

/* code 样式 */
.cont {
  /* -webkit-user-modify: read-write; */
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
}
</style>