FD_Pano/src/views/material/components/uploadList1.1.0.vue

<template>
  <!-- 这是一个简单组件，只关注视图层 -->
  <div class="upload-list-component">
    <div class="head">
      <div class="left">
        <i class="iconfont iconmaterial_preview_upload"></i>
        <span class="text">正在上传 {{successNumber}}/{{taskList.length}}</span>
      </div>
      <div class="right">
        <!-- <span></span> -->
        <i
          class="iconfont icon-material_preview_upload_collect"
          :class="this.expandSwitch ? '' : 'upsideDown'"
          @click="onClickExpand"></i>
      </div>
    </div>
    <div class="content" v-show="expandSwitch">
      <div
        class="list-item" 
        v-for="(taskItem, index) in taskList"
        :key="index"
        v-show="taskItem.status === 'LOADING' || taskItem.status === 'FAIL'"
        >
        <div class="left">
          <img class="type-icon" :src="uploadFieIconUrl" alt=""/>
          <span class="text">{{taskItem.title}}</span>
        </div>
        <div class="right">
          <span :class="{
            'text-success': taskItem.status === 'SUCCESS',
            'text-fail': taskItem.status === 'FAIL',
            'text-loading': taskItem.status === 'LOADING' || taskItem.status === 'CANCELLED',
          }">
            {{taskItem.statusText}}
          </span>
          <span v-show="taskItem.ifKnowProgress && taskItem.status === 'LOADING'" class="progress-text">{{taskItem.progress}}</span>
          <img
            v-show="(taskItem.status === 'LOADING' && taskItem.ifKnowProgress) || taskItem.status === 'FAIL'"
            class="cancel-btn"
            :src="require('@/assets/images/icons/material_preview_upload_cancel@2x.png')"
            @click="onClickCancel(index)"
          />
        </div>
        <div class="progress-bar" v-if="taskItem.ifKnowProgress && taskItem.status === 'LOADING'" :style="{width: taskItem.progress}"></div>
        <div class="progress-bar-unknown" v-if="!taskItem.ifKnowProgress && taskItem.status ==='LOADING'"></div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  props: {
    fileType: {
      type: String,
      default: 'IMAGE', // 'IMAGE' | 'AUDIO' | 'VIDEO'
    },
    taskList: {
      /**
       * 每个元素的内部结构：{
       *  title: String
       *  ifKnowProgress: Boolean // false则进度条效果是loading而不是具体进度
       *  progress：String // 进度，以百分号结尾。
       *  status: 'SUCCESS' | 'FAIL' | 'LOADING' | 'CANCELLED'
       *  statusText
       * }
       */
      type: Array,
      default: () => []
      // default: () => [
      //   {
      //     title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',
      //     ifKnowProgress: true,
      //     progress: '100%',
      //     status: 'SUCCESS',
      //     statusText: '成功',
      //   },
      //   {
      //     title: '标题',
      //     ifKnowProgress: true,
      //     progress: '30%',
      //     status: 'LOADING',
      //     statusText: '上传中',
      //   },
      //   {
      //     title: '标题',
      //     ifKnowProgress: false,
      //     progress: '30%',
      //     status: 'LOADING',
      //     statusText: '后台处理中',
      //   },
      //   {
      //     title: '标题',
      //     ifKnowProgress: true,
      //     progress: '55%',
      //     status: 'FAIL',
      //     statusText: '失败',
      //   },
      //   {
      //     title: '标题',
      //     ifKnowProgress: false,
      //     progress: '30%',
      //     status: 'CANCELLED',
      //     statusText: '已取消',
      //   },
      // ]
    },
  },
  computed: {
    uploadFieIconUrl() {
      switch (this.fileType) {
        case 'IMAGE':
          return require('@/assets/images/icons/upload-file-type-icon-image@2x.png')
        case 'AUDIO':
          return require('@/assets/images/icons/upload-file-type-icon-audio@2x.png')
        case 'VIDEO':
          return require('@/assets/images/icons/upload-file-type-icon-video@2x.png')
        default:
          return require('@/assets/images/icons/upload-file-type-icon-image@2x.png')
      }

    },
    successNumber() {
      return this.taskList.filter((item) => item.status === 'SUCCESS').length
    },
    totalNumber() {
      return this.taskList.filter((item) => item.status !== 'CANCELLED').length
    }
  },
  data() {
    return {
      expandSwitch: true,
    }
  },
  methods: {
    onClickExpand() {
      this.expandSwitch = !this.expandSwitch
    },
    onClickCancel(index) {
      this.$emit('cancel-task', index)
    },
  }
}
</script>

<style lang="less" scoped>
.upload-list-component {
  width: 550px;
  background: #FFFFFF;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border: 1px solid #E4E7ED;
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0 26px;
    border-bottom: 1px solid #EBEDF0;
    .left {
      display: flex;
      align-items: center;
      .iconmaterial_preview_upload {
        color: @color;
        font-size: 30px;
        margin-right: 10px;
        animation: spin 2s linear infinite;
      }
      .text {
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: #323233;
        line-height: 19px;
      }
    }
    .right {
      display: flex;
      align-items: center;
      i {
        color: #979797;
        cursor: pointer;
        font-size: 12px;
        transition: transform 0.2s;
        &.upsideDown {
          transform: rotate(180deg);
        }
      }
    }
  }
  .content {
    padding-left: 26px;
    padding-right: 26px;
    .list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60px;
      border-bottom: 1px solid #EBEDF0;
      position: relative;
      overflow: hidden;
      .left {
        display: flex;
        align-items: center;
        width: 60%;
        .type-icon {
          width: 28px;
          height: 28px;
          margin-right: 10px;
          object-fit: contain;
        }
        .text {
          font-size: 14px;
          font-family: MicrosoftYaHei;
          color: #323233;
          line-height: 19px;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: keep-all;
          white-space: nowrap;
          max-width: 90%;
        }
      }
      .right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 40%;
        .text-success {
          margin-right: 10px;
          font-size: 12px;
          font-family: MicrosoftYaHei;
          color: #969799;
        }
        .text-fail {
          margin-right: 10px;
          font-size: 12px;
          font-family: MicrosoftYaHei;
          color: #FA5555;
        }
        .text-loading {
          margin-right: 10px;
          font-size: 12px;
          font-family: MicrosoftYaHei;
          color: #969799;
        }
        .progress-text {
          margin-right: 10px;
          font-size: 12px;
          font-family: MicrosoftYaHei;
          color: #969799;
        }
        img {
          width: 18px;
          height: 18px;
          cursor: pointer;
        }
      }
      .progress-bar {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        background: linear-gradient(144deg, #00AEFB 0%, @color 100%);
      }
      .progress-bar-unknown {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        background: linear-gradient(144deg, #00AEFB 0%, @color 100%);
        width: 330px;
        animation: marquee 10s linear infinite
      }
    }
  }
}
@keyframes spin {
  100% {
    transform: rotate(360deg)
  }
}
@keyframes marquee {
  0% {
    transform: translateX(-100%)
  }
  100% {
    transform: translateX(496px)
  }
}
</style>