WorksItem.vue

<template>
  <div class="works-list-page">
    <div class="works-list-container" v-for="(item, index) in uploadList" :key="index">
      <div class="first-title">{{item.title}}</div>
      <div class="flex-container">
        <div class="works-items" v-for="(item_second, indey) in item.items_list" :key="indey">
          <div class="works-upload" @click="getId(item_second.img_id)">
            <!-- <div class="not-upload-mask" v-if="item.title === '待学习项目'"></div> -->
            <div v-if="item.title === '你有待上传的截图作品'">
              <el-upload class="el-upload-item"
                ref="uploadImg"
                :id="item_second.img_id"
                :before-upload="beforeUpload"
                :action="img.uploadHost"
                :multiple="false"
                :auto-upload="false"
                :data="img.extraData"
                :show-file-list="false"
                :on-change="(file, fileList, item_second) => onChange(file, fileList, item_second)"
                :on-success="(response, file, fileList) => onSuccess(response, file, fileList)"
              >
              <div class="add-imgSize">
                <i class="el-icon-plus avatar-uploader-icon"></i>
                <span class="upload-title">支持jpg/png格式, 不超过10M</span>
              </div>
              </el-upload>
            </div>
            <div v-else-if="item.title === '已经上传作品'" class="already-load">
              <i class="el-icon-delete"></i>
              <div class="img-container"><el-image src="https://cdn-oss-public.pyhot.cn/program_public/user_upload/445ea19128f146bd41d60bdce498f61e.jpg" alt="" class="upload-image" :fits="fits"></el-image></div>
            </div>
            <div v-else-if="item.title === '待学习项目'">
              <div class="await-study">待学习</div>
            </div>
            <div class="middle-section">
              <div class="section-title">{{item_second.section_title}}</div>
                <div class="section-data-title">
                  <div class="section-small-title">{{item_second.small_title}}</div>
                  <div class="data-title">{{item_second.data}}</div>
                </div>
            </div>
          </div>
          <div class="item-footer">
            <div class="footer-title">{{item_second.project_name}}</div>
            <div class="footer-small-title">{{item_second.project_title}}</div>
          </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WorksItem',
  data () {
    return {
      showCollectionModal: false,
      fits: ['contain'],
      img: {
        url: '',
        uploadHost: '',
        extraData: {
          key: '',
          policy: '',
          OSSAccessKeyId: '',
          success_action_status: '200',
          signature: '',
          idx: 0
        },
        fileList: []
      },
      signing: false,
      itemid: '',
      uploadList: [
        {
          title: '你有待上传的截图作品',
          items_list: [
            {
              img_id: '1',
              section_title: '第八关 图片美化、蒙版',
              small_title: 'LOW图拯救大战',
              data: '2020.02.02',
              project_name: '项目名称一',
              project_title: '涵盖的技巧主要包含了什么非二级第四季二维集就都是覅及额防静电丝谁为你'
            },
            {
              img_id: '2',
              section_title: '第八关 图片美化、蒙版',
              small_title: 'LOW图拯救大战',
              data: '2020.02.02',
              project_name: '项目名称一',
              project_title: '涵盖的技巧主要包含了什么非二级第四季二维集就都是覅及额防静电丝谁为你'
            },
            {
              img_id: '3',
              section_title: '第八关 图片美化、蒙版',
              small_title: 'LOW图拯救大战',
              data: '2020.02.02',
              project_name: '项目名称一',
              project_title: '涵盖的技巧主要包含了什么非二级第四季二维集就都是覅及额防静电丝谁为你'
            },
            {
              img_id: '4',
              section_title: '第八关 图片美化、蒙版',
              small_title: 'LOW图拯救大战',
              data: '2020.02.02',
              project_name: '项目名称一',
              project_title: '涵盖的技巧主要包含了什么非二级第四季二维集就都是覅及额防静电丝谁为你'
            },
            {
              img_id: '5',
              section_title: '第八关 图片美化、蒙版',
              small_title: 'LOW图拯救大战',
              data: '2020.02.02',
              project_name: '项目名称一',
              project_title: '涵盖的技巧主要包含了什么非二级第四季二维集就都是覅及额防静电丝谁为你'
            },
            {
              img_id: '6',
              section_title: '第八关 图片美化、蒙版',
              small_title: 'LOW图拯救大战',
              data: '2020.02.02',
              project_name: '项目名称一',
              project_title: '涵盖的技巧主要包含了什么非二级第四季二维集就都是覅及额防静电丝谁为你'
            },
            {
              img_id: '7',
              section_title: '第八关 图片美化、蒙版',
              small_title: 'LOW图拯救大战',
              data: '2020.02.02',
              project_name: '项目名称一',
              project_title: '涵盖的技巧主要包含了什么非二级第四季二维集就都是覅及额防静电丝谁为你'
            },
            {
              img_id: '8',
              section_title: '第八关 图片美化、蒙版',
              small_title: 'LOW图拯救大战',
              data: '2020.02.02',
              project_name: '项目名称一',
              project_title: '涵盖的技巧主要包含了什么非二级第四季二维集就都是覅及额防静电丝谁为你'
            }
          ]
        },
        {
          title: '已经上传作品',
          items_list: [
            {
              section_title: '第八关 图片美化、蒙版',
              small_title: 'LOW图拯救大战',
              data: '2020.02.02',
              project_name: '项目名称一',
              project_title: '涵盖的技巧主要包含了什么非二级第四季二维集就都是覅及额防静电丝谁为你'
            }
          ]
        },
        {
          title: '待学习项目',
          items_list: [
            {
              section_title: '第八关 图片美化、蒙版',
              small_title: 'LOW图拯救大战',
              data: '2020.02.02',
              project_name: '项目名称一',
              project_title: '涵盖的技巧主要包含了什么非二级第四季二维集就都是覅及额防静电丝谁为你'
            },
            {
              section_title: '第八关 图片美化、蒙版',
              small_title: 'LOW图拯救大战',
              data: '2020.02.02',
              project_name: '项目名称一',
              project_title: '涵盖的技巧主要包含了什么非二级第四季二维集就都是覅及额防静电丝谁为你'
            }
          ]
        }
      ]
    }
  },
  methods: {
    showModal () {
      console.log('展示弹窗')
      this.showCollectionModal = true
    },
    closeCollectionModal () {
      this.showCollectionModal = false
    },
    // 上传之前先拿到host等信息
    beforeUpload (file) {
      console.log(file)
      this.$api.getCollectionUploadImg()
        .then(res => {
          console.log(res)
          this.img.uploadHost = res.token.host
          this.img.extraData.key = `${res.token.dir}${res.file_signature}.${file.name.split('.')[file.name.split('.').length - 1]}`
          this.img.extraData.OSSAccessKeyId = res.token.accessid
          this.img.extraData.signature = res.token.signature
          this.img.extraData.policy = res.token.policy
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 上传成功或者失败的时候都会调用
    onChange (file, fileList, indey) {
      console.log(indey)
      console.log(file)
      console.log(fileList)
      const raw = file.raw
      const allowFileType = [
        'image/png',
        'image/jpeg',
        'image/jpg'
      ].indexOf(raw.type) !== -1
      if (!allowFileType) {
        this.$message.error('请上传jpg/png格式图片')
        return
      }
      // for (var i = 0; i < this.$refs.uploadImg.length; i++) {
      //   var uploadImgDom = this.$refs.uploadImg[i]
      //   console.log(uploadImgDom)
      // }
      // 等到图片上传成功，图片dom重新渲染出来只有调用
      // uploadImg是一个数组
      this.$nextTick(() => {
        // console.log('hah')
        console.log(this.$refs.uploadImg)
        for (var i = 0; i < this.$refs.uploadImg.length; i++) {
          var uploadImgDom = this.$refs.uploadImg[i]
          console.log(uploadImgDom)
          console.log(uploadImgDom.$attrs.id)
          // 提价上传的文件信息
          uploadImgDom.submit()
        }
      })
    },
    // 上传成功之后调用
    onSuccess (response, file, fileList) {
      console.log(response)
      console.log(file)
      console.log(fileList)
      console.log('上传成功')
      // this.signUrl(this.img.extraData.key)
    },
    // 获取签名
    signUrl (fileName) {
      console.log('进入signUrl')
      console.log(fileName)
      if (!fileName) {
        console.log('fileName is null')
        return
      }
      if (this.signing) {
        return
      }
      this.signing = true
      let data = {
        file_name: fileName
      }
      console.log(data)
      this.$api.getCollectionSignalUrl(data)
        .then(res => {
          this.img.url = res.url
          console.log(res)
          this.signing = false
        }).catch(err => {
          console.log(err)
          this.signing = true
        })
    },
    // getIndex (indey) {
    //   console.log(indey)
    // },
    getId (id) {
      console.log(id)
      this.itemid = id
    }
  }
}
</script>

<style scoped>
.works-list-container .flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 77.2vw;
}
.first-title {
  font-size: 2vh;
  color: #385061;
  letter-spacing: .2vh;
  font-weight: bold;
  margin-top: 7vh;
}
.works-items {
  height: 100%;
  /* height: 40vh; */
  margin-top: 4vh;
  margin-right: 1.7vw;
  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
  border-radius: 1vh;
}
.works-items:nth-child(5n) {
  margin-right: 0;
}
.works-upload {
  width: 14vw;
  height: 26vh;
  text-align: center;
  position: relative;
  border-top-left-radius: 1vh;
  border-top-right-radius: 1vh;
  box-sizing: border-box;
  background-origin: content-box;
  border-radius: 1vh;
}
/* 不能上传 */
.not-upload-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 992;
  cursor: not-allowed;
}
.el-upload-item {
  width: 14vw;
  height: 26vh;
  /* line-height: 26vh; */
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  /* line-height: 18vh; */
  box-sizing: border-box;
  /* background: #D3D3D3; */
  border-top-left-radius: 1vh;
  border-top-right-radius: 1vh;
  cursor: pointer;
  
  /* height: 100%; */
  /* line-height: 8vh; */
}
.el-icon-delete {
  position: absolute;
  top: .6vh;
  right: .7vh;
  color: #fff;
  z-index: 99;
  cursor: pointer;
  font-size: 20px !important;
  display: none;
}
.works-upload .el-upload.el-upload--text {
  /* width: 100%;
  height: 100%; */
}
.upload-title {
  font-size: .4vh;
  color: #929292;
  margin-top: 1vh;
}
.el-upload-item .el-icon-plus, .avatar-uploader-icon {
  font-size: 4vh;
  color: #929292;
  border: 1px dashed #929292;
}
.middle-section {
  padding-top: .5vh;
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 1vw;
  text-align: left;
  background: rgba(133, 133, 133, .2);
}
.middle-section .section-title {
  font-size: 1.6vh;
  color: #fff;
}
.section-data-title {
  display: flex;
  height: 3vh;
  width: 12vw;
  justify-content: space-between;
  font-size: .2vh;
  color: #fff;
}
.data-title {
  color: #fff;
}
.item-footer {
  width: 14vw;
  box-sizing: border-box;
  height: 12vh;
  background: #fff;
  padding-top: 3vh;
  padding-left: 1vw;
  border-bottom-left-radius: 1vh;
  border-bottom-right-radius: 1vh;
}
.footer-title {
  height: 2vh;
  color: #385061;
  font-size: 16px;
  font-weight: bold;
}
.footer-small-title {
  width: 10vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1.5vh;
  font-size: 12px;
  color: #767676;
}
.section-small-title {
  font-size: .1vw !important;
}
.img-container {
  width: 14vw;
  height: 26vh;
}
.upload-image {
  /* object-fit: cover; */
  border-top-left-radius: 1vh;
  border-top-right-radius: 1vh;
  width: 100%;
  height: 26vh;
  box-sizing: border-box;
}
.image-div {
  background-position: center;
  background-repeat: no-repeat;
}
.collection-modal-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
}
.collection-modal {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 444;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: #fff;
  border-radius: 10px;
  background-size: cover;
  height: 54vh;
  width: 42vw;
}
.collection-modal-close {
  position: absolute;
  color: #333;
  height: 18px;
  width: 18px;
  top: 20px;
  right: 20px;
  cursor: pointer;
}
.collection-container {
  height: 300px;
  overflow: hidden;
  margin-top: 8vh;
  margin-bottom: 5px;
  text-align: center;
}
.collection-modal-input {
  /* width: 10vw; */
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  max-width: 100%;
  margin-top: 10vh;
  align-items: center;
  position: relative;
  align-items: flex-start;
}
.collection-first-title {
  font-size: 4vh;
  color: #181052;
  font-weight: bold;
  letter-spacing: 2px;
}
.collection-second-title {
  height: 5vh;
  line-height: 5vh;
  font-size: 3vh;
  color: #181052;
  margin-top: 2vh;
  box-sizing: border-box;
}
.collection-input {
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
}
.collection-input input {
  height: 5.5vh;
  line-height: 5.5vh;
  width: 15.8vw;
  padding-left: 0.4vw;
  outline: none;
  border: 1px solid #269686;
  box-sizing: border-box;
  border-top-left-radius: 1vh;
  border-bottom-left-radius: 1vh;
  font-size: 1.8vh;
}
.commit-btn {
  height: 5.5vh;
  width: 5vw;
  line-height: 5.5vh;
  background: #269686;
  cursor: pointer;
  color: #fff;
  border-top-right-radius: 1vh;
  border-bottom-right-radius: 1vh;
  font-size: 1.8vh;
  letter-spacing: .2vw;
}
.collection-tip {
  margin: 0 auto;
  color: #787878;
  font-size: .2vh;
  width: 20vw;
  text-align: left;
  margin-top: .5vh;
}
.change-name-btn {
  display: inline-block;
  height: 3.5vh;
  width: 5vw;
  background: #269686;
  box-sizing: border-box;
  line-height: 3.5vh;
  text-align: center;
  position: relative;
  top: -0.5vh;
  color: #fff;
  cursor: pointer;
  font-size: 1.5vh;
  margin-bottom: .2vh;
}
.add-imgSize {
  display: flex;
  width: 14vw;
  height: 26vh;
  padding-top: 8vh;
  box-sizing: border-box;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
}
.await-study {
  box-sizing: border-box;
  padding-top: 9vh;
  font-size: 2vh;
  color: #B1B1B1;
}
.already-load {
  width: 100%;
  height: 100%;
}
.already-load:hover .el-icon-delete {
  display: inline-block;
}
</style>