17pdf_front_end/pages/converter.vue

<template>
  <div class="page-converter">
    <div class="date-tips flex content-center justify-center py-6px">
      <img src="http://cn-file.17pdf.com/website/common/ic_notice.svg" class="align-middle">
      <div class="text-container">
        <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>
    <h1 class="text-48px text-opacity-100 font-500 text-[#3333] mt-48px mb-10px text-center">文件转换器</h1>
    <h2 class="text-20px text-center text-[#666] mt-20px font-normal">PDF文件格式转换器，一键转档，支持批量转换，精准快速。</h2>
    <div class="text-center mb-80px">
      <a
class="mt-20px text-[#4D4D4D] text-16px font-600 inline-flex items-center leading-22px hover:text-$btn-color-primary hover:underline"
        href="https://www.compdf.com/pdf-conversion-sdk?utm_source=anroidapp&utm_medium=17pdfweb&utm_campaign=pdfsdk" target="_blank">由 ComPDFKit Conversion SDK 提供技术支持
        <svg class="ml-8px" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6 12.9567L10.714 8.24261L6 3.52856" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </a>
    </div>
    <div class="transfer-container-wrap">
      <div class="index-converter w-[80%] h-700px relative top-0 left-[50%] -ml-[40%]">
        <div class="transfer-container absolute w-full h-auto my-0 -mx-15px bg-white pb-60px">
          <button type="button" class="close hidden" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
          <div class="recharge py-0 px-[10%] h-48px mx-0 mt-24px mb-14px absolute right-0 -top-70px z-2">
            <span class="recharge-btn float-right bg-white border border-[#ff4f4f] boder-solid text-16px py-7px px-18px rounded-4px mt-4px cursor-pointer hover:bg-[#ff4f4f]">
              <a class="text-[#ff4f4f] no-underline leading-normal" @click="handlerBuy('ticket')">充值</a>
            </span>
            <div class="need-volume float-right right-48px text-16px text-[#666] leading-48px mr-20px">
              所需券：<span class="text-[#0dd299] text-16px" :class="{'text-red-500': requiredCoupon > userInfo?.points}">{{ requiredCoupon }}券</span> / 剩余券：<span class="text-[#0dd299] text-16px">{{ userInfo?.points }}券</span>
            </div>
          </div>
          <div class="transfer-panel">
            <div>
              <form enctype="multipart/form-data">
                <input type="hidden" name="folder" value="converter/input"/>
                <div class="file-input theme-explorer file-input-ajax-new h-380px mt-17px py-0 px-[10%]">
                  <div class="file-preview rounded-5px w-[100%] h-[100%]">
                    <div class="file-drop-zone border border-dashed border-[#d1d1d1] rounded-4px h-[100%] text-center align-middle overflow-y-auto">
                      <div v-show="fileList.length <= 0" class="file-drop-zone-title text-[#999] text-16px pt-222px cursor-default">
                        <div></div>
                        点击从电脑上传文件或把文件拖到这里
                        <p class="text-14px">（支持PDF to Word、PPT、Excel、TXT、JPG/PNG无限次数转换）</p>
                      </div>
                      <table id="table-fileinput" class="table table-hover w-[100%] max-w-[100%]">
                        <thead v-show="fileList.length > 0">
                          <tr class="h-40px bg-[#eee]">
                            <th class="!w-[5.5%]"></th>
                            <th class="!text-left w-[26.5%]">文档名</th>
                            <th class="!w-[17%]">大小</th>
                            <th class="!w-[13%]">所需券</th>
                            <th class="!w-[9.5%]">转为</th>
                            <th class="!w-[23%]">状态</th>
                            <th class="!w-[4.5%]"></th>
                          </tr>
                        </thead>
                        <tbody v-show="fileList.length > 0" class="file-preview-thumbnails cursor-default">
                          <tr v-for="(item, index) in fileList" id="preview-1668340925733-0" :key="index" class="file-preview-frame explorer-frame  kv-preview-thumb w-100px h-38px hover:bg-[#f5f5f5]" data-fileindex="0" data-template="pdf" title="test.pdf">
                            <td class="file-details-cell">{{ index+1 }}</td>
                            <td class="file-details-cell !text-left">
                              <div class="explorer-caption max-w-260px truncate block text-[#777]" title="test.pdf">{{ item.name }}</div>
                            </td>
                            <td class="file-details-cell text-[#999]">{{ getfilesize(item.size) }}</td>
                            <td class="file-details-cell points">{{ userInfo.subscriberType === 1 ? 0 : item.price }}</td>
                            <td class="file-details-cell select w-106px">
                              <select v-if="item.status !== 6" v-model="item.output" class="transfer-select appearance-none" @change="changeOutput(item, index)">
                                <option value="png">PNG</option>
                                <option value="xlsx">XLSX</option>
                                <option value="pptx">PPTX</option>
                                <option value="docx">DOCX</option>
                                <option value="txt">TXT</option>
                                <option value="jpg">JPG</option>
                              </select>
                              <span v-else>{{ item.output }}</span>
                            </td>
                            <td class="file-details-cell state text-14px text-[#878787]" v-html="fileStatus(item, index)"></td>
                            <!-- <td v-else class="file-details-cell state text-14px text-red-500">转换失败<img src="/converter/menu_ic_pdfconvert.png" @click="rechangeFile" /></td> -->
                            <td class="file-actions-cell w-50px p-0">
                              <div class="file-actions text-center">
                                <div class="file-footer-buttons" @click="deleteFile(index)">
                                    <button type="button" class="kv-file-remove btn btn-xs btn-default bg-inherit !border-none pr-7px py-1px pl-5px text-12px leading-normal rounded-3px" title="删除文件"><i class="pdf-removeicon"></i></button>
                                </div>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                      <div class="clearfix"></div>
                      <div class="file-preview-status text-success text-center text-[#3c763d]"></div>
                    </div>
                  </div>
                  <div class="kv-upload-progress hide">
                    <div class="progress overflow-hidden h-20px mb-20px bg-[#f5f5f5] rounded-4px ring-inset-2 ring-[rgba(0,0,0/10%)]">
                      <div class="progress-bar progress-bar-success progress-bar-striped active w-0 bg-[#5cb85c]" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                    </div>
                  </div>
                  <div class="input-group file-caption-main w-[100%] -top-450px relative table border-separate">
                    <div class="input-group-btn relative text-0px whitespace-nowrap !flex">
                      <div tabindex="500" class="btn btn-file" :class="{'btn-file-left' : fileList.length > 0}">
                        <div class="add-file" :class="{'add-file-left':(fileList.length > 0)}">{{ fileList.length > 0 ? '添加文件' : '' }}</div>
                        <input
id="fileinput-explorer" ref="file" name="file" accept=".pdf" title="上传文件" type="file" multiple="" class="absolute top-0 right-0 p-0 m-0 min-w-[100%] h-[100%] w-90px text-right opacity-0 bg-none bg-repeat bg-scroll block outline-none border-0 cursor-pointer"
                        @change="addFile($event)"/>
                      </div>
                      <div v-if="fileList.length > 0" class="inline-block ml-30px bg-white border border-[#ff4f4f] boder-solid text-16px py-7px px-18px rounded-4px mt-4px cursor-pointer text-[#ff4f4f] leading-normal hover:bg-[#ff4f4f] hover:text-white" @click="deleteAllFile">清空</div>
                    </div>
                  </div>
                </div>
              </form>
            </div>

            <div class="transfer-btn mt-30px h-64px text-center">
              <div class="cursor-not-allowed inline-block">
                <span :class="{'disabledBtn' : !checkbox || !changeFileFlag }" class="btn transfer-start-btn bg-[#ff524f] text-20px py-0 px-150px rounded-4px h-60px w-386px text-white hover:bg-[#f34545]" @click="createFileMission">
                  <a class="text-white leading-60px">{{ !changeFileFlag ? '转换中...' : '开始转换' }}</a>
                  <span v-if="!changeFileFlag" class="loading"></span>
                </span>
              </div>
              <span class="hide btn btn-down small w-240px h-60px bg-[#0dd299] rounded-4px text-20px ml-15px hover:bg-[#0fc993]"><a class="leading-60px text-white">下载全部</a></span>
            </div>
          </div>
          <div class="transfer-remember mt-23px text-center">
            <div class="checkbox checkbox-danger relative block mt-10px mb-10px">
              <label for="remember" class="text-12px font-normal text-[#999] min-h-20px pl-20px mb-0 inline-block max-w-[100%]">
                <input v-model="checkbox" type="checkbox" name="remember" class="remember_pass cursor-pointer" :disabled="!changeFileFlag" :class="{'cursor-not-allowed' : !changeFileFlag }" />确保上传的文档不涉及版权问题及违法内容
              </label>
            </div>
          </div>
        </div>
        <div class="modal verifi-modal top-[20%!important]" d="verifiPayModal" tabindex="-1" role="dialog" aria-labelledby="verifiPayModal">
          <div class="modal-dialog verifi-dialog w-480px h-426px my-50px" role="document">
            <div class="modal-content relative bg-white rounded-6px border border-solid border-[rgba(0,0,0,0.2)] outline-0 bg-clip-padding ring-[rgba(0,0,0/50%)] ring-offseet-3px ring-9px md:ring-offset-5 md:ring-15px">
              <div class="">
                <button id="verifi-close" type="button" class="close pompt_close py-5px px-10px outline-none" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
              </div>
              <div class="verifi-content text-center pt-60px px-0 pb-35px">
                <img src="http://cn-file.17pdf.com/website/converter/pic_trans_diomands.png"/>
                <p>该功能为付费套餐专属</p>
                <p>订阅解锁更多特权</p>
                <a href="javascript:;" class="now_pricing" value="0"
                  >立即订阅</a
                >
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="file_num w-[100%] h-120px text-center text-white leading-120px text-30px mb-76px">
        17PDF Reader，当前已转换了<span class="text-32px"> 1,859,726 </span> 个文件
      </div>
      <div id="more_type" class="pdf_converter clear w-[80%] my-0 mx-auto">
        <div class="package_type">
          <h3 class="text-24px text-[#333] font-normal mx-0 mt-0 mb-49px h-30px leading-30px">会员专享格式</h3>
          <ul class="flex justify-center w-[100%] min-w-340px p-0 mt-0 mb-10">
            <li>
              <a href="/converter">
                <img src="/converter/ic_pdf_word.png" />
                <span>PDF To Word</span>
              </a>
            </li>
            <li>
              <a href="/converter">
                <img src="/converter/ic_pdf_ppt.png"/>
                <span>PDF to PowerPoint</span>
              </a>
            </li>
            <li>
              <a href="/converter">
                <img src="/converter/ic_pdf_execl.png"/>
                <span>PDF to EXCEL</span>
              </a>
            </li>
            <li>
              <a href="/converter">
                <img src="/converter/ic_pdf_txt.png" />
                <span>PDF to TXT</span>
              </a>
            </li>
            <li>
              <a href="/converter">
                <img src="/converter/ic_pdf_picture.png" />
                <span>PDF to JPG/PNG</span>
              </a>
            </li>
          </ul>
        </div>
      </div>

      <div class="about_converter w-[100%] bg-[#fafafa] py-60px px-[10%] mt-102px">
        <h3 class="name text-24px text-[#333] font-normal mx-0 mt-0 mb-49px h-30px leading-30px">关于转档</h3>
        <ul class="clear p-0">
          <li>
            <img src="http://cn-file.17pdf.com/website/converter/ic_way.png" />
            <div class="content">
              <h3>如何转档</h3>
              <p>
                进入“文件转换器”区域。点击下方“添加文件”选择添加本地目标文件，然后在“转为”栏选择转换目标格式，最后点击“开始转换”即可。
              </p>
            </div>
          </li>
          <li>
            <img
              src="http://cn-file.17pdf.com/website/converter/ic_quality.png"
            />
            <div class="content">
              <h3>领先品质</h3>
              <p>
                行业领先的转换品质，经过转换的文件版面清晰、保持格式的一致，支持一键转档，批量转换，精准快速的文件格式转换，稳定的转换品质，是您处理转格式转换的首选。
              </p>
            </div>
          </li>
          <li>
            <img src="http://cn-file.17pdf.com/website/converter/ic_safe.png" />
            <div class="content">
              <h3>文件安全</h3>
              <p>
                我们尊重每位用户的隐私信息和文件安全。转档后的文件仅在云端保留24小时，让您免去后顾之忧。
              </p>
            </div>
          </li>
          <li>
            <img src="http://cn-file.17pdf.com/website/converter/ic_more.png" />
            <div class="content">
              <h3>多平台支持</h3>
              <p>
                文件格式转换器可以在所有计算机（Mac、Windows及Linux）上使用，也可下载App
                17PDF Reader在移动端使用，让您在手机上也能轻松转档文件。
              </p>
            </div>
          </li>
        </ul>
      </div>

      <div class="converter_question px-[10%] pt-76px pb-60px text-center">
        <h3 class="name text-24px text-[#333] font-normal m-0 h-30px leading-30px text-left">常见问题</h3>
        <table class="w-[100%] p-0 bg-transparent">
          <tbody>
            <tr>
              <td>
                <h3>1. 支持哪些格式转换？</h3>
                <p>
                  <span></span>支持PDF to
                  Word、PPT、Excel、TXT、JPG/PNG无限次数转换
                </p>
              </td>
              <td>
                <h3>2. 为什么图片格式的文件转档效果不好？</h3>
                <p>
                  如原文件为图片格式或者通过扫描文档保存为PDF文件的，转档后的文件可能无法选取文字进行高亮等编辑。
                </p>
              </td>
            </tr>
            <tr>
              <td>
                <h3>3. 文件转档后出现乱码？</h3>
                <p>
                  如果是原文件就有乱码问题，先处理好文件再提交转档；如果原文件正常而转档后目标文件乱码，请联系我们处理。
                </p>
              </td>
            </tr>
          </tbody>
        </table>
        <a class="more w-auto h-30px leading-30px text-[#666] inline-block text-center mx-auto mt-48px mb-0 link:no-underline hover:(!border-[#ff4f4f] text-[#ff4f4f])" href="/question#convert">更多问题请查看帮助</a>
      </div>

      <div class="download_code fixed right-14px bottom-50px bg-white w-134px py-12px px-0 rounded-6px text-center ">
        <span class="large text-16px inline-block w-[100%] my-6px mx-0">下载APP</span>
        <img src="http://cn-file.17pdf.com/website/download/android_code.png" class="w-110px border-0 align-middle inline-block" />
        <span class="inline-block w-[100%] text-14px my-6px mx-0">使用更便捷</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      fileList: [],
      uniqFileArr: [],
      checkbox: true,
      changeFileFlag: true,
      uploadNum: 0,
      getFileStatusTimer: null,
      changeSucesssNumTotal: 0,
      changeSucesssFileList: []
    }
  },
  // middleware: 'user',
  head() {
    return {
      title: 'PDF转换器免费在线转档',
      meta: [
        {
        hid: 'description',
        content: '17PDF Reader免费提供在线PDF格式转换文件转档服务，支持PDF转word,PDF转doc,PDF转PPT,PDF转png,PDF转html,PDF转epub,PDF转xls,psd转ai等。轻松拖曳，一键转档，批量转换，支持多种常用格式相互转档。先进的转换引擎，极速转换，精准度高达99.99%。',
        },
        {
          name: 'keywords',
          content: '格式转换,文件转档,pdf convert,converter, word to pdf'
        }
      ]
    }
  },
  computed: {
    ...mapState([
      'userInfo'
    ]),
    // 所需券数
    requiredCoupon () {
      let total = 0
      for (let i = 0; i < this.fileList.length; i++) {
        total += this.fileList[i].price
      }
      return total
    }
  },
  mounted () {
    if (localStorage.getItem('file') !== null) {
      this.fileList = JSON.parse(localStorage.getItem('file'))
    }
  },
  methods: {
    // 充值弹框
    handlerBuy(type) {
      this.$store.commit('OPEN_LOGIN', true)
      this.$store.commit('SET_INTERFACE', type)
    },
    // 添加文件
    async addFile (event) {
      // 阻止发生默认行为
      event.preventDefault();
      const array = event.target.files
      const defaultPrice = await this.getFilePrice('pdf', 'docx')
      for (let i = 0; i < array.length; i++) {
        const fileObj = {
          name: array[i].name,
          size: array[i].size,
          price: defaultPrice,
          input: 'pdf',
          output: 'docx',
          status: 0
        }
        this.fileList.push(fileObj)
        this.uniqFileArr.push(array[i])
      }
      console.log('fileList:', this.fileList)
      console.log('uniqFileArr:', this.uniqFileArr)
    },
    // 查询文件所需券数
    async getFilePrice (input, output) {
      let price = 0
      await this.$axios.get(`/convertType/getConvertTypeList?input=${input}&output=${output}`).then((res) => {
        if(res.code === 200) {
          price = res.result[0].price
        }
      })
      return price
    },
    // 改变要转换的格式
    async changeOutput (item, index) {
      const price = await this.getFilePrice(item.input, item.output)
      this.$set(this.fileList[index], 'price', price)
      this.$set(this.fileList[index], 'output', item.output)
    },
    // 计算文件大小函数(保留两位小数),Size为字节大小
    getfilesize (size) {
      if (!size) return ""
      const num = 1024.00 // byte
      if (size < num) {
        return size + "B"
      }
      if (size < Math.pow(num, 2)) {
        return (size / num).toFixed(2) + "K"
      }
      if (size < Math.pow(num, 3)) {
        return (size / Math.pow(num, 2)).toFixed(2) + "M"
      }
      if (size < Math.pow(num, 4)) {
        return (size / Math.pow(num, 3)).toFixed(2) + "G"
      }
      else {
        return (size / Math.pow(num, 4)).toFixed(2) + "T"
      }
    },
    // 删除文件
    deleteFile (index) {
      this.fileList.splice(index, 1)
      this.uniqFileArr.splice(index-this.changeSucesssNumTotal, 1)
      this.changeSucesssFileList = []
      localStorage.removeItem('file')
      this.fileList.forEach(item => {
        if (item.status === 6) {
          this.changeSucesssFileList.push(item)
        }
      })
      localStorage.setItem('file', JSON.stringify(this.changeSucesssFileList))
    },
    // 清空
    deleteAllFile () {
      this.fileList = []
      this.uniqFileArr = []
      this.changeFileStatus('all', 5)
      this.changeSucesssFileList = []
      localStorage.removeItem('file')
    },
    // 转档第一步，根据文件列表创建任务和插入文件信息
    createFileMission () {
      // if (this.fileList.length === 0) return
      const points = this.userInfo.points
      if (this.requiredCoupon > points) {
        alert('券数不足，请充值')
        return
      }
      const filterFileList = this.fileList.filter(function(item){
        return item.status !== 6
      })
      console.log(filterFileList)
      let fileArr = []
      for (let i = 0; i < filterFileList.length; i++) {
        const file = {}
        file.sourceType = 0
        file.size = filterFileList[i].size
        file.input = 'pdf'
        file.output = filterFileList[i].output
        file.filename = filterFileList[i].name
        fileArr[i] = file;
      }
      fileArr = JSON.stringify(fileArr)
      console.log(fileArr)
      this.changeFileFlag = false
      this.changeFileStatus('all', 1)
      const config = {
        method: 'post',
        url: '/mission/create',
        headers: {
          'Accept': '*/*',
          'Content-Type': 'application/json'
        },
        data: fileArr
      }
      this.$axios('/mission/create', config).then((res) => {
        if(res.code === 200) {
          const missionFiles = res.result.missionFilePoJos
          console.log(missionFiles)
          for (let i = 0; i < missionFiles.length; i++) {
            this.changeFileStatus(missionFiles[i].fileName, 2)
            this.uploadFile(this.uniqFileArr[i], missionFiles[i].id, res.result.id)
          }
        } else {
          this.changeFileFlag = true
          this.changeFileStatus('all', 5)
        }
      })
    },
    // 修改文件状态
    changeFileStatus (fileName, status) {
      if (fileName === 'all') {
        this.fileList.forEach(item => {
          if (item.status !== 6) {
            this.$set(item, 'status', status)
          }
        })
      } else {
        this.fileList.forEach(item => {
          if (item.name === fileName) {
            this.$set(item, 'status', status)
          }
        })
      }
    },
    // 文件状态: 0未转换，1上传中，2上传完成，3转换中，4转换成功，5转换失败，6已转档
    fileStatus (item, index) {
      switch (item.status) {
        case 0:
          this.$set(this.fileList[index], 'status', 0)
          return '未转换'
        case 1:
          this.$set(this.fileList[index], 'status', 1)
          return '上传中'
        case 2:
          this.$set(this.fileList[index], 'status', 2)
          return '上传完成'
        case 3:
          this.$set(this.fileList[index], 'status', 3)
          return '转换中'
        case 4:
          this.$set(this.fileList[index], 'status', 4)
          return '<span style="color: orange">转换成功</span>'
        case 5:
          this.$set(this.fileList[index], 'status', 5)
          return '<span style="color: red">转换失败</span>'
        case 6:
          this.$set(this.fileList[index], 'status', 6)
          return `<a href="${item.path}" style="color: #0dd299">下载</a>`
      }
    },
    // 转档第二步，上传文件
    uploadFile (file, id, missionId) {
      console.log(file)
      const formData = new FormData()
      formData.append('file', file)
      formData.append('missionFileId', id)
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
        }
      }
      this.$axios.post('/missionFile/upload', formData, config).then((res) => {
        console.log('上传文件')
        if(res.code === 200) {
          this.changeFileStatus(file.name, 3)
          this.uploadNum++
          console.log(this.uploadNum)
          if (this.uploadNum === this.uniqFileArr.length) {
            this.convertFile(file.name, missionId)
          }
        } else {
          this.changeFileFlag = true
          this.changeFileStatus(file.name, 5)
        }
      })
    },
    // 转档第三步，开始转档
    convertFile (file, missionId) {
      const formData = new FormData()
      formData.append('missionId', missionId)
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
        }
      }
      this.$axios.post('/mission/convertFile', formData, config).then((res) => {
        console.log('开始转档')
        if(res.code === 200) {
          this.changeFileStatus('all', 4)
          this.getFileStatusTimer = window.setInterval(() => {
            setTimeout(this.getFileStatus(formData, config), 0)
          }, 3000)
        } else {
          this.uploadNum = 0
          this.changeFileStatus('all', 5)
          this.changeFileFlag = true
        }
      })
    },
    // 转档最后一步，轮询文件状态和下载链接
    getFileStatus (formData, config) {
      this.$axios.post('/mission/queryFileStatus', formData, config).then((res) => {
        console.log('获取文件状态')
        if(res.code === 200) {
          const getFileList = res.result[0].missionFilePoJos
          console.log(getFileList)
          let changeSucesssNum = 0
          for (let i = 0; i < getFileList.length; i++) {
            if (getFileList[i].status === 2) {
              this.changeFileStatus(getFileList[i].fileName, 6)
              changeSucesssNum++
              this.fileList.forEach(item => {
                if (item.name === getFileList[i].fileName) {
                  this.$set(item, 'path', getFileList[i].path)
                  this.changeSucesssFileList.push(item)
                }
              })
            }
          }
          if (changeSucesssNum === getFileList.length) {
            clearInterval(this.getFileStatusTimer)
            this.getFileStatusTimer = null
            this.changeSucesssNumTotal += changeSucesssNum
            this.uniqFileArr = []
          }
          console.log(this.fileList)
          console.log('changeSucesssFileList:', this.changeSucesssFileList)
          localStorage.setItem('file', JSON.stringify(this.changeSucesssFileList))
        } else {
          this.uploadNum = 0
          this.changeFileStatus('all', 5)
        }
        this.changeFileFlag = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep body {
  min-width: 1200px !important;
}
.page-converter {
  .date-tips {
    background: linear-gradient(0deg, #fff2f6, #fff2f6),
      linear-gradient(90deg, snow 10.37%, rgba(255, 243, 243, 0) 91.75%),
      linear-gradient(90deg, #fff2f6 2.26%, rgba(255, 242, 246, 0.21) 101.41%);
    .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;
      }
    }
  }
  .transfer-container {
    .hide {
      display: none !important;
    }
    button {
      padding-right: 7px;
    }
    .close {
      float: right;
      font-size: 21px;
      font-weight: bold;
      line-height: 1;
      color: #000;
      text-shadow: 0 1px 0 #fff;
      opacity: 0.2;
      filter: alpha(opacity=20);
    }
    button.close {
      padding: 0;
      cursor: pointer;
      background: transparent;
      border: 0;
      -webkit-appearance: none;
    }
    button:focus {
      outline: none;
    }
    .close:hover,
    .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
      opacity: 0.5;
      filter: alpha(opacity=50);
    }
    .recharge .recharge-btn:hover a {
      color: #fff;
    }
    .transfer-btn .loading {
      display: inline-block;
      border: 3px solid #fff;
      border-bottom: 3px solid #cccccc;
      height: 35px;
      width: 35px;
      border-radius: 50%;
      position: relative;
      top: 10px;
      left: 100px;
      -webkit-animation: loading 1s infinite linear;
      -moz-animation: loading 1s infinite linear;
      -o-animation: loading 1s infinite linear;
      animation: loading 1s infinite linear;
    }
  }
  .table>caption+thead>tr:first-child>th, .table>caption+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>thead:first-child>tr:first-child>th, .table>thead:first-child>tr:first-child>td {
    border-top: 0;
  }
  .file-drop-zone .table thead tr th {
    color: #666666;
    text-align: center;
  }
  .table>thead>tr>th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
  }
  .table>thead>tr>th, .table>thead>tr>td, .table>tbody>tr>th, .table>tbody>tr>td, .table>tfoot>tr>th, .table>tfoot>tr>td {
    padding: 8px;
    line-height: 1.428571429;
    vertical-align: top;
    border-top: 1px solid #ddd;
  }
  .table th, .table td {
    vertical-align: middle;
    box-sizing: border-box;
  }
  th {
    text-align: left;
  }
  td, th {
    padding: 0;
  }
  .input-group-btn {
    position: relative;
    font-size: 0;
    white-space: nowrap;
  }
  .input-group-addon, .input-group-btn {
    white-space: nowrap;
    vertical-align: middle;
  }
  .input-group-addon, .input-group-btn, .input-group .form-control {
    display: table-cell;
  }
  .clearfix:before, .clearfix:after {
    content: " ";
    display: table;
  }
  .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group {
    z-index: 2;
    margin-left: -1px;
  }
  .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group {
    margin-right: -1px;
  }

  .input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group>.btn, .input-group-btn:last-child>.dropdown-toggle, .input-group-btn:first-child>.btn:not(:first-child), .input-group-btn:first-child>.btn-group:not(:first-child)>.btn {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
  .input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child>.btn-group:not(:last-child)>.btn {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
  .input-group-btn>.btn {
    position: relative;
  }
  .btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    cursor: not-allowed;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .btn-file {
    position: relative;
    overflow: hidden;
    margin: 0;
    top: 170px;
    left: 50%;
    margin-left: -45px !important;
    outline: none;
    cursor: pointer;
  }
  .btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .btn-file .add-file {
    background: url(http://cn-file.17pdf.com/website/fileinput/ic_file_add.png) no-repeat;
    width: 90px;
    height: 100px;
  }
  .btn-file .add-file-left {
    background: url(http://cn-file.17pdf.com/website/fileinput/ic_add.png) no-repeat;
    width: 120px;
    height: 30px;
    margin-top: 10px;
    margin-left: 10px;
    padding-left: 38px;
    font-size: 16px;
    line-height: 30px;
    color: #666666;
  }
  .btn-file-left {
    position: relative;
    top: 0px;
    left: 20px;
  }
  .transfer-container .transfer-remember .checkbox input[type="checkbox"] {
    top: 3px;
  }
  .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
    position: absolute;
    margin-left: -20px;
  }

  input[type="radio"], input[type="checkbox"] {
    margin: 4px 0 0;
    line-height: normal;
  }
  .modal {
    display: none;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    -webkit-overflow-scrolling: touch;
    outline: 0;
  }
  .file-drop-zone .table tbody tr:hover td {
    background: #dfdfdf;
  }
  .file-drop-zone .table tbody tr td {
    border-top: 0px;
  }
  .theme-explorer .explorer-frame td {
    vertical-align: middle;
    text-align: center;
  }
  .file-drop-zone .table tbody tr:hover td .transfer-select {
    border-color: #ff4f4f;
    background: url(http://cn-file.17pdf.com/website/converter/ic_trans_xiala_hover.png) no-repeat 72px 6px;
  }
  .file-drop-zone .table tbody tr .transfer-select {
    width: 100%;
    height: 22px;
    border: 1px solid #dadada;
    padding: 0px;
    outline: none;
    font-size: 14px;
    color: #ff4f4f;
    line-height: 22px;
    padding-left: 30px;
    border-radius: 2px;
    background: url(http://cn-file.17pdf.com/website/converter/ic_trans_xiala_nor.png) no-repeat 72px 6px;
  }
  .theme-explorer .file-actions-cell .file-actions .file-footer-buttons .pdf-removeicon:before {
    content: url(https://cn-file.17pdf.com/website/converter/ic_delet_red.png) !important;
    display: none;
  }
  .file-drop-zone .table tbody tr:hover td .file-actions .file-footer-buttons .pdf-removeicon:before {
    display: block;
  }
  .btn.disabledBtn {
    background-color: rgb(204, 204, 204);
    pointer-events: none;
  }

  .file_num {
    background: url(http://cn-file.17pdf.com/website/converter/pic_account_bg.png) repeat -10px 0px;
  }
  .clear {
    zoom: 1;
  }
  .clear:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
  .pdf_converter .package_type h3:before,
  .about_converter .name:before,
  .converter_question .name:before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 22px;
    background: #ff4f4f;
    margin-right: 10px;
    margin-top: 4px;
    vertical-align: top;
  }
  .pdf_converter .package_type ul li {
    width: 120px;
    list-style: none;
    text-align: center;
    margin-right: 30px;
    cursor: pointer;
    a {
      display: block;
      font-size: 14px;
      color: #333333;
      img {
        display: inline-block;
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
        vertical-align: middle;
      }
      span {
        display: block;
        white-space: nowrap;
        transition: all .5s;
      }
    }
  }
  .about_converter ul li {
    width: 50%;
    float: left;
    list-style: none;
    margin-bottom: 85px;
    img {
      width: 70px;
      height: 70px;
      float: left;
      margin: 10px 36px 0px 0px;
    }
    .content {
      width: 330px;
      float: left;
      h3 {
        font-size: 20px;
        color: #333333;
        margin: 0px 0px 10px;
        font-weight: normal;
      }
      p {
        font-size: 16px;
        color: #4c4c4c;
        margin: 0px !important;
      }
    }
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  .converter_question table td {
    width: 50%;
    vertical-align: top;
    h3 {
      font-size: 18px;
      color: #333333;
      margin: 54px 0px 14px;
      font-weight: normal;
      text-align: left;
    }
    p {
      width: 75%;
      font-size: 16px;
      color: #4c4c4c;
      text-align: left;
      span {
        width: 8px;
        height: 8px;
        display: inline-block;
        border-radius: 100%;
        background: #333333;
        margin-right: 12px;
        margin-left: 4px;
      }
    }
  }
  .converter_question .more {
    border-bottom: 1px solid #999999;
  }
  .download_code {
    box-shadow: 0px 1px 5px rgb(0 0 0 / 12%);
  }
  .file-details-cell.state img {
    display: inline-block;
    cursor: pointer;
  }
}
</style>