17pdf_front_end/pages/members/me/expenses.vue

<!--
 * @Description: 
 * @Author: 欧阳承珺
 * @LastEditors: 欧阳承珺
 * @Date: 2022-11-01 19:27:42
 * @LastEditTime: 2022-11-17 09:31:51
-->
<template>
  <div>
    <div class="expenses-date-tips flex content-center py-6px min-w-700px">
      <img src="http://cn-file.17pdf.com/website/common/ic_notice.svg" class="align-middle">
      <div class="text-container" ref="wrap">
        <span class="text">
          转档后的文件支持在云端保留24小时，<span v-if="userInfo?.subscriberType === 1">会员尊享5G容量，</span>请在24小时内下载文件至本地永久保存
        </span>
        <span v-if="userInfo?.subscriberType === 1" class="vip tip">
          <img src="http://cn-file.17pdf.com/website/common/ic_info.svg" alt="">
          <div class="tip-text">
            若已有文件大小超出5G，将按转档时间计算（从最近一次转档往过去推算），即保留最近的5G容量文件，超出部分文件将不再保留
          </div>
        </span>
      </div>
    </div>

    <div class="py-15px">
      <p class="text-[20px] leading-28px text-[#333]">我的转档</p>
      <div class="mt-10px mb-16px">
        <button class="btn btn-download" :disabled="isDownload" @click="downloadFiles">下载</button>
        <button class="btn btn-delete" :disabled="isDelete" @click="showDelate">删除</button>
      </div>
    </div>
  <client-only>
    <el-table :data="tableData" @selection-change="handleSelectionChange" stripe="true">
      <el-table-column type="selection" width="50" align="center"></el-table-column>
      <el-table-column prop="format" label="格式转换" class-name="style-change"></el-table-column>
      <el-table-column prop="outFilename" label="目标文件" show-overflow-tooltip filter-placement="bottom">
      <!-- <el-table-column prop="outFilename" label="目标文件"> -->
        <template slot-scope="scope">
          <span v-html="scope.row.outFilename"></span>
        </template>
      </el-table-column>
      <el-table-column prop="convertSize" label="文件大小" align="center">
        <template slot-scope="scope">
          <span v-html="scope.row.convertSize"></span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="消耗券数" align="center">
        <template slot-scope="scope">
          <span v-html="scope.row.price"></span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120px" align="center">
        <template slot-scope="scope">
            <div class="bottom">
              <el-tooltip class="item" effect="dark"  placement="bottom">
                <div slot="content">
                  {{'转换时间: ' +scope.row.createdAt}}
                  <br/>
                  <div v-if="scope.row.failReason">
                    {{scope.row.failReason}}
                  </div>
                </div>
                <span v-html="scope.row.status" class="cursor-default"></span>
              </el-tooltip>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="path" label="" width="50px">
        <template slot-scope="scope">
          <a v-if="scope.row.path" :href="scope.row.path" class="downloadBtn"></a>
        </template>
      </el-table-column>
      <!-- 表格无数据显示 -->
      <div slot="empty">
        <div class="table-empty"></div>
        <p class="text-14px" style="color:rgba(0,0,0,0.54)">没有任何消费记录</p>
        <p class="leading-20px mt-8px mb-100px text-14px" style="color:rgba(0,0,0,0.38)">每一分钱都花在了刀刃上</p>
      </div>
    </el-table>
    <div v-show="totalNum>25">
      <el-pagination
        class="text-center mt-50px"
        background
        layout="prev, pager, next"
        :total="totalNum"
        :page-size="25"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="ifSureDelate" width="384px" append-to-body center top = "35vh" >
      <div class="mt-[-20px]">
        <div class="text-[18px] leading-22px font-medium text-[#000000e6]">您确认要删除选中文档么？</div>
        <div class="text-[14px] leading-[18px] text-[#00000099] mt-20px">该转换文档将永久删除，删除后将无法找回</div>
        <div class="flex mt-20px flex-row-reverse">
          <button class="block w-64px h-32px text-[12px] text-[#fff] bg-[#FF4F4F] leading-16px ml-20px mt-10px text-center border border-[#FF4F4F] border-solid rounded-4px" @click="deleteChangeFileRecord">删除</button>
          <button class="block w-64px h-32px text-[12px] text-[#FF4F4F] leading-16px ml-0px mt-10px text-center border border-[#FF4F4F] border-solid rounded-4px" @click="showDelate">取消</button>
        </div>
      </div>
    </el-dialog>
  </client-only>
  </div>
</template>

<script> 
import { mapState } from 'vuex' 
export default {
  layout: 'userCenter',
  middleware: ['auth','user'],
  data() {
    return {
      tableData:[],
      tableDataSelection: [],
      totalNum: 0,
      isDownload: true,
      isDelete: true,
      ifSureDelate: false
    }
  },
  head() {
    return {
      title: '17PDF Reader - 个人中心',
      meta: [
        {
          name: 'keywords',
          content: 'PDFReader,pdfreader,17PDF Reader,pdf软件,PDF阅读器,文件扫描'
        },
        {
          hid: 'description',
          content: '17PDF Reader是行走的PDF阅读器和文件扫描仪，并提供免费的PDF文件格式转换工具，支持pdf转word，pdf转doc，pdf转ppt，pdf转图片等。17PDF Reader被用户誉为“亚洲的Adobe”，拥有自主产权的PDF核心技术，为商务精英、教育族群及企业提供全方位的PDF文件解决方案。'
        },
      ]
    }
  },
  computed: {
    ...mapState([
      'userInfo',
    ]),
  },
  mounted () {
    this.getChangeFileRecord(1)
  },
  methods: {
    // 用户转档记录分页查询
    getChangeFileRecord (page) {
      this.$axios.get(`/missionFile/page?page=${page}`).then((res) => {
        if(res.code === 200) {
          this.tableData = res.result.list
          this.totalNum = res.result.total
          for (let i = 0; i < this.tableData.length; i++) {
            this.$set(this.tableData[i], 'format', this.getFormat(this.tableData[i].inputType, this.tableData[i].outputType))
            this.tableData[i].outFilename = this.getFileFileName(this.tableData[i].outFilename,this.tableData[i].statusName,this.tableData[i])
            this.tableData[i].convertSize = this.getfilesize(this.tableData[i].convertSize,this.tableData[i].status)
            this.tableData[i].price = this.getfilePrice(this.tableData[i].price,this.tableData[i].status)
            this.tableData[i].status = this.getFileStatus(this.tableData[i].status)
          }
        }
      })
    },
    // 计算文件大小函数(保留两位小数),Size为字节大小
    getfilesize (convertSize,status) {
      if(status=== 3){
        return `<span style="color: #9599b1">0KB</span>`
      }
      if (!convertSize) {
        return "0KB"
      }
      const num = 1024.00 // byte
      if (convertSize < num) {
        return convertSize + "B"
      }
      if (convertSize < Math.pow(num, 2)) {
        return (convertSize / num).toFixed(2) + "KB"
      }
      if (convertSize < Math.pow(num, 3)) {
        return (convertSize / Math.pow(num, 2)).toFixed(2) + "MB"
      }
      if (convertSize < Math.pow(num, 4)) {
        return (convertSize / Math.pow(num, 3)).toFixed(2) + "GB"
      }
      else {
        return (convertSize / Math.pow(num, 4)).toFixed(2) + "TB"
      }
    },
    //计算文件消耗劵
    getfilePrice(price,status){
      if(status=== 3){
        return `<span style="color: #9599b1">0</span>`
      }
      return price
    },
    // 判断文件状态
    getFileStatus (status) {
      switch (status) {
        case 0:
          return '转档中'
        case 1:
          return '转档中'
        case 2:
          return '<span style="color: #0dd299">转档成功</span>'
        case 3:
          return '<span style="color: gray">转档失败</span>'
        case 4:
          return '<span style="color: #0dd299">转档成功</span>'
      }
    },
    //文件转换失败,文件置灰
    getFileFileName(outFilename,statusName,item){
      let name = item.fileName
      let num= name.lastIndexOf(".")
      let output = ""
      if(item.outputType === "png" || item.outputType === "jpg"){
        output = "zip"
      }else {
        output = item.outputType
      }
      const outFilenames = name.slice(0,num)+"."+output
      if(outFilename){
        if(statusName === "failed"){
          return `<span style="color: #9599b1"  class="style-ellipsis">${outFilename}</span>`
        } else {
          return `<span style="color: #333" class="style-ellipsis">${outFilename}</span>`
        }
      }else{
        return `<span style="color: #9599b1" class="style-ellipsis">${outFilenames}</span>`
      }
    },
    // 格式转换
    getFormat (input, output) {
      return input.toUpperCase() + '-->' + output.toUpperCase()
    },
    // 选中的数据行
    handleSelectionChange(val) {
      this.tableDataSelection = val
      if (this.tableDataSelection.length === 0) {
        this.isDownload = true
        this.isDelete = true
      } else {
        this.isDelete = false
      }
      for (const file of this.tableDataSelection) {
        if (file.status === '<span style="color: #0dd299">转档成功</span>') {
          this.isDownload = false
          return
        } else {
          this.isDownload = true
        }
      }
    },
    // 删除转档记录
    deleteChangeFileRecord () {
      const data = new FormData()
      for (const file of this.tableDataSelection) {
        data.append('ids', file.id)
      }
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data;'
        }
      }
      this.$axios.post('/missionFile/delete', data, config).then((res) => {
        if(res.code === 200) {
          this.getChangeFileRecord(1)
          this.isDelete = true
          this.ifSureDelate = false
        }
      })
    },
    // 分页器
    handleCurrentChange(val) {
      this.getChangeFileRecord(val)
      window.scrollTo(0, 0)
    },
    // 下载文件
    downloadFiles () {
      // for (const file of this.tableDataSelection) {
      //   if (file.status !== 2 || file.status !== 4) {
      //     this.isDownload = true
      //   }
      // }
      this.tableDataSelection.forEach(item => {
        this.downloadFile(item.path)
      })
    },
    downloadFile (url) {
      const iframe = document.createElement("iframe");
      iframe.style.display = "none";  // 防止影响页面
      iframe.style.height = 0;  // 防止影响页面
      iframe.src = url;
      document.body.appendChild(iframe);
      setTimeout(()=>{
        iframe.remove();
      }, 5 * 60 * 1000);
    },
    //展示删除框
    showDelate(){
      this.ifSureDelate = !this.ifSureDelate 
    }
  }
}
</script>

<style lang="scss" scoped>
.expenses-date-tips {
  display: flex;
  align-items: center;
  padding: 12px;
  background: linear-gradient(90deg, #FFFAFA 10.37%, rgba(255, 243, 243, 0) 91.75%), linear-gradient(90deg, #FFF2F6 2.26%, rgba(255, 242, 246, 0.21) 101.41%);
  border: 1px solid rgba(255, 79, 79, 0.2);
  border-radius: 12px;
  .text-container {
    display: flex;
    align-items: center;
    margin-left: 16px;
    img {
      margin-left: 8px;
    }
  }
  span {
    font-size: 14px;
    line-height: 24px;
    vertical-align: middle;
  }
  .text {
    display: inline-flex;
    align-items: center;
  }
  .tip {
    position: relative;
    font-size: 0;
    .tip-text {
      display: none;
      position: absolute;
      left: -3px;
      width: 258px;
      padding: 15px 14px 10px 10px;
      background: url('http://cn-file.17pdf.com/website/members/ic_tip.svg') left top no-repeat;
      background-size: auto 100%;
      font-size: 12px;
      line-height: 18px;
      color: #fff;
      border-radius: 4px;
    }
    &:hover .tip-text {
      display: block;
    }
  }
}
.btn {
  height: 30px;
  line-height: 28px;
  font-size: 12px;
  border-radius: 2px;
  display: inline-block;
  padding: 0px 9px 0px 33px;
  &-download {
    color: #fff;
    background: #FF4F4F url(http://cn-file.17pdf.com/website/members/ic_download.svg) no-repeat 8px center;
    margin-right: 7px;
    &_disabled {
      background-color: #FFA7A7;
    }
  }
  &-delete {
    border: 1px solid #d8d8d9;
    color: #666;
    background: url(http://cn-file.17pdf.com/website/members/ic_delete_normal.png) no-repeat 8px 5px;
    &_disabled {
      color: #ccc;
      border-color: #ccc;
    }
  }
}
::v-deep .el-table {
  th {
    background-color: #f4f4f4 !important;
    font-size: 16px;
    color: #666666;
    font-weight: normal;
  }
  .style-change{
    color: #333;
  }
  .style-ellipsis{
    width:100%;
    display: inline-block;
    white-space: nowrap!important;
	  overflow:hidden;
	  text-overflow:ellipsis;
  }
  .cell{
    white-space: nowrap;
  }
}
.table-empty {
  margin-top: 50px;
  height: 200px;
  background: url(http://cn-file.17pdf.com/website/members/pic_noconsumption.png) no-repeat center center;
}
.el-table__row:hover .downloadBtn {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: url(http://cn-file.17pdf.com/website/members/ic_download_gray.svg) center no-repeat;
}
.btn-download:disabled,.btn-delete:disabled {
  opacity: 0.5;
  pointer-events: none;
}
::v-deep .el-table__header,
::v-deep .el-table__body,
::v-deep .el-table__footer {
  // 使表格兼容safari，不错位
  // width: 100%;
  table-layout: fixed !important;
}
//兼容Safari，el-tooltip不出现蓝框
::v-deep .el-tooltip:focus:hover,
::v-deep .el-tooltip:focus:not(.focusing){
	outline:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
</style>