student-h5/src/views/homeworkpage/UploadWork.vue

<template>
  <ReturnHead
    text="写作业"
    :showpublish="true"
    :publishWork="publishWork"
  ></ReturnHead>
  <div
    class="uploadworkpage"
    :style="{
      height: screenHeight - 73.5 + 'px',
    }"
  >
    <div class="inputcontainer">
      <div class="inputt">
        <el-input
          type="textarea"
          placeholder="请输入正文"
          v-model="textarea"
          autosize
        ></el-input>
      </div>

      <div class="imgcon">
        <div class="linecon">
          <div class="line"></div>
        </div>
        <div class="allimg">
          <UploadImg v-model:fileList="fileList" ref="uploadRef">
            <img src="../../assets/image/homeworkpage/link.png" />
          </UploadImg>
          <!-- <img src="../../assets/image/homeworkpage/pre.png" />
          <img src="../../assets/image/homeworkpage/next.png" /> -->
          <img
            src="../../assets/image/homeworkpage/delete.png"
            @click="deleteAll"
          />
        </div>
      </div>
      <div class="fileInfo" v-if="fileList && fileList.length !== 0">
        <div class="triangle"></div>
        <div class="filebox" v-for="(item, index) in fileList" :key="index">
          <img
            v-if="
              item.name.indexOf('jpg') !== -1 ||
              item.name.indexOf('jpeg') !== -1 ||
              item.name.indexOf('png') !== -1
            "
            style="width: 20px; height: 22px; margin-right: 20px"
            src="@/assets/image/file/pngpic.png"
          />
          <div v-else>
            <img
              v-if="item.name.indexOf('doc') !== -1"
              style="width: 20px; height: 22px; margin-right: 20px"
              src="@/assets/image/file/word.png"
            />
            <div v-else>
              <img
                v-if="item.name.indexOf('xls') !== -1"
                style="width: 20px; height: 22px; margin-right: 20px"
                src="@/assets/image/file/excel.png"
              />
              <div v-else>
                <img
                  v-if="item.name.indexOf('ppt') !== -1"
                  style="width: 20px; height: 22px; margin-right: 20px"
                  src="@/assets/image/file/ppt.png"
                />
                <div v-else>
                  <img
                    v-if="item.name.indexOf('pdf') !== -1"
                    style="width: 20px; height: 22px; margin-right: 20px"
                    src="@/assets/image/file/pdf.png"
                  />
                  <div v-else>
                    <img
                      v-if="item.name.indexOf('zip') !== -1"
                      style="width: 20px; height: 22px; margin-right: 20px"
                      src="@/assets/image/file/zip.png"
                    />
                    <img
                      v-else
                      style="width: 20px; height: 22px; margin-right: 20px"
                      src="@/assets/image/file/word.png"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <span class="filename" :title="item.name">{{ item.name }}</span>
          <div
            class="download"
            style="display: flex; align-items: center"
            @click="deleteFile"
          >
            <img
              src="../../assets/image/download.png"
              style="width: 16px; height: 15px"
            />
            <div style="margin-left: 2px; color: #2478ff">删除</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, ref } from "vue";
import ReturnHead from "@/components/ReturnHead.vue";
import { request, useRequest } from "@/api/request";
import { TASK_WORK_COMMIT } from "@/api/api";
import { useRoute } from "vue-router/dist/vue-router";
import { useRouter } from "vue-router";
import { ElMessage, ElLoading } from "element-plus";
import UploadImg from "@/components/img/UploadImg.vue";
export default {
  name: "UploadWork",
  components: {
    ReturnHead,
    UploadImg,
  },
  setup() {
    const router = useRouter();
    const state = reactive({
      text: "",
      screenHeight: document.body.clientHeight, // 屏幕高度
    });
    const {
      query: { workId, type, taskId, infoId },
    } = useRoute();
    const textarea = ref("");
    const fileList = ref([]);
    // 使用
    const loading = ref(false); // loading
    const openLoading = () => {
      loading.value = ElLoading.service({
        lock: true,
        text: "Loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    };
    const closeLoading = () => {
      loading.value.close();
    };
    //发布作业
    const publishWork = () => {
      console.log("点击了发布", workId, type, taskId, fileList);
      if (!textarea.value) {
        ElMessage.warning("请输入作业内容")
        return ;
      }
      openLoading();
      let obj = {
        projectOrRouterLogo: type,
        workUploadContent: textarea.value,
        workUploadAddress:
          fileList.value && fileList.value.length !== 0
            ? fileList.value[0].url
            : "",
        workId,
        type,
        taskId: taskId || infoId,
        workScore: -1
      };
      console.log("obj", obj, fileList.value);
      request(TASK_WORK_COMMIT, obj).then((res) => {
        console.log("上传作业", res);
        // submitList.value.unshift(res.data);
        // open();
        ElMessage.success("作业发布成功");
        closeLoading();
        textarea.value = "";
        fileList.value = [];
        router.back();
        // remove(0);
        // clearFiles();
      });
    };
    const deleteAll = () => {
      console.log("点击");
      textarea.value = "";
      fileList.value = [];
    };
    const deleteFile = () => {
      fileList.value = [];
    };
    return {
      ...toRefs(state),
      publishWork,
      textarea,
      fileList,
      deleteAll,
      deleteFile,
    };
  },
};
</script>

<style lang="scss">
.clearfix:before,
clearfix:after {
  content: " ";
  display: table;
  clear: both;
}
.uploadworkpage {
  width: 100%;
  background-color: #fff;
  // margin-top: 73.5px;
  .inputcontainer {
    margin-top: 10px;
    background-color: #fff;
    width: 100%;
    // height: 100px;
    // display: flex;
    // justify-content: center;
    // height: 80%;
    height: 100%;
    .inputt {
      width: 100%;
      height: calc(100% - 79px);
      // height: 100px;
      // padding-bottom: 79px;
      overflow-y: scroll;
    }
    ::v-deep .el-textarea__inner {
      resize: none;
      border-color: transparent;
      height: 100%;
    }
    ::v-deep .el-textarea:focus {
      border-color: transparent;
    }
    ::v-deep .el-textarea {
      height: 100%;
    }
    .el-textarea__inner {
      border: 0 !important;
      resize: none !important; /* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
      box-shadow: none !important;
      padding: 16px 18px;
    }
    .el-textarea__inner:hover {
      box-shadow: none !important;
      border: 0 !important;
    }
    .el-textarea__inner:focus {
      border: none;
      border: 0 !important;
    }

    .imgcon {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: fixed;
      bottom: 0;
      background-color: #fff;
      .linecon {
        margin-top: 10px;
        width: 100%;
        display: flex;
        justify-content: center;
        .line {
          width: 90%;
          height: 0;
          border-top: 1px solid #f1f2f3;
        }
      }
      .allimg {
        margin-top: 24.5px;
        width: 70%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 24.5px;
      }
    }

    .fileInfo {
      width: 95%;
      height: 56px;
      background-color: #fff;
      box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.11);
      border-radius: 4px;
      position: absolute;
      bottom: 81px;
      left: 2.5%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .triangle {
        width: 0;
        height: 0;
        border: 7px solid;
        border-color: #fff rgba(255, 255, 255, 0) rgba(255, 255, 255, 0)
          rgba(255, 255, 255, 0);
        position: absolute;
        bottom: -14px;
        left: 10%;
      }
      .filebox {
        width: 90%;
        display: flex;
        margin-left: 5%;
        margin-right: 5%;
        align-items: center;
        .fileimg {
          width: 19.5px;
          height: 22px;
          background-size: 100% 100%;
          margin-right: 19px;
        }
      }
      .filename {
        width: calc(100% - 100px);
        font-size: 13px;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>