jy-docs/jydocs-mobile/src/views/details/details.vue

<template>
  <div class="details-p" ref="sContent" @scroll="showMorePage">
    <div class="details-content">
      <div class="details-head">
        <div class="top-title-group flex-r-c">
          <van-icon :name="'diy-' + fileType(detailData.docFileType)"></van-icon>
          <div class="flex">
            <span class="docName">{{ detailData.docName}}</span>
            <span class="type-tag"
                  :class="detailData.productType === 2 ? 'boutique' : 'free'">{{ detailData.productType === 2 ? '付费精品' : '会员免费' }}</span>
          </div>
        </div>
        <div class="details-tags">
          <div class="tag-item"><span>{{ detailData.viewTimes || 0 }}</span>次浏览</div>
          <div class="tag-item"><span>{{ detailData.downTimes || 0 }}</span>次下载</div>
          <div class="tag-item"><span>{{ detailData.docFileSize }}</span></div>
          <div class="tag-item"><span>{{ dateFormatter(detailData.uploadDate, 'yyyy-MM-dd') }}</span>上传</div>
        </div>
      </div>
      <div class="middles middles-summary" v-if=" buyed == 0 && detailData.source === 1 && !loginInfo">
        <h3>摘要</h3>
        <p>{{ detailData.docSummary }}</p>
        <div class="continue" v-show="buyed == 0">全文共{{ detailData.docPageSize }}页，<span @click="readAll">阅读全文<van-icon
              name="arrow-down" size="18" /></span></div>
      </div>

      <div class="middles preview-page" v-if="buyed === 0 && (loginInfo || (!loginInfo && detailData.source === 2))">
        <div>
          <!--剑鱼文档全为PDF-->
          <div class="pdf_" v-if="detailData.source === 1 && showfileType==='pdf'">
            <pdf v-for="i in getPageNum" :key="i" :src="pdfPage.url" :page="i" @error="pdfError($event)"></pdf>
          </div>
          <div class="file-content file-word-docx" v-if="detailData.source !== 1">
            <img v-for="(iUrl, ind) in previewConfig.docinImg" :key="'iUrl_' + ind" :src="iUrl" alt="预览">
          </div>
        </div>
        <div
            class="continue"
            v-if="unreadPage > 0 && detailData.docPageSize > 1 && guideText"
        >
          <div class="unread-num">
            <span class="line"></span>
            剩余{{ unreadPage }}页未读
            <span class="line"></span>
          </div>
         <div class="handle-span" @click="readAll">{{ guideText }}
            <van-icon name="arrow-down" size="16" />
         </div>
        </div>
      </div>
    </div>
    <van-sticky :offset-top="Offset" @scroll="stickyScroll" v-show="buyed == 1">
      <div class="head-tip" :class="{ 'is-fixed': fixed }">
        <h3 class="flex" v-show="fixed">
          <van-icon class="word01" :name="'diy-' + fileType(detailData.docFileType)" />
          <span class="flex">{{ detailData.docName }}</span>
        </h3>
        <!--              <span class="pages"><i id="page_num"></i> / <i>{{detailData.docPageSize}}</i></span>-->
      </div>
    </van-sticky>
<!--    已购买，但是加载失败-->
    <div class="bottoms-preview" v-if="docLoadError && buyed === 1">
      <div class="file-content">
        <img v-for="(iUrl, ind) in previewConfig.docinImg" :key="'iUrl_' + ind" :src="iUrl" alt="预览">
      </div>
      <div
          class="continue"
          v-if="unreadPage > 0 && detailData.docPageSize > 1 && showfileType !== 'pdf'"
      >
        <div class="unread-num">
          <span class="line"></span>
          剩余{{ unreadPage }}页未读，
          <span class="line"></span>
        </div>
        <div class="handle-span" @click="readAll">{{ guideText }}
          <van-icon name="arrow-down" size="16" />
        </div>
      </div>
    </div>
    <div class="botts" v-if="buyed == 1 && !docLoadError">
      <!-- showfileType -->
      <div class="pdf_" v-if="showfileType==='pdf'">
        <pdf v-for="i in getPageNum" :key="i" :src="pdfPage.url" :page="i" @error="pdfError($event)"></pdf>
      </div>
      <div class="doc_" v-if="showfileType==='docx'">
        <vue-office-docx
       :src="buyShowUrl"
       style="height: 100%"
       @rendered="rendered"
       />
      </div>
      <div class="excel_" v-if="showfileType==='xlsx' || showfileType==='xls'">
        <vue-office-excel
        :options="setOptions"
        :src="buyShowUrl"
        style="height: 100%"
        @rendered="renderedHandler"
        @error="errorHandler"
        ></vue-office-excel>
      </div>
      <div class="ppt_" v-if="showfileType==='ppt'">
      </div>
    </div>
    <van-goods-action>
      <div class="foot-ad">
        <div class="warm_text" v-if="warmShow && isrenew">
          <van-icon :name="'diy-warmclose'" @click="warmShow = false"></van-icon>
          <div class="middle_text">您的文库会员将于{{Remainingtime}}到期，续费即享下载特权！</div>
          <div class="warm_btn" @click="bottomBtn('续费文库会员')">去续费</div>
        </div>
        <div class="ad-box" v-if="showAd && !isrenew">
          <van-icon class="Ad_close" name="cross" @click="showAd = false"></van-icon>
          <Ad :width="0" :loop="true" :code="$envs.inWX ? 'jy-wx-docmember-detail' : 'jy-app-docmember-detail'" @noData="showAd = false"></Ad>
        </div>
      </div>
      <div class="footbar">
        <div class="goods-action">
          <!-- <van-goods-action-icon class="no-icon" v-if="needBuy">
            <template #default>
              <p class="p1">剑鱼币</p>
              <p class="p2">{{ detailData.price }}</p>
            </template>
          </van-goods-action-icon> -->
          <van-goods-action-icon icon="diy-jubao" text="投诉举报" @click="jubaod" />
          <van-goods-action-icon :icon="collectd == 1 ? 'diy-guanzhu' : 'diy-weiguanzhu'" :text="collectd == 1 ? '已收藏' : '收藏'"
            @click="canged" v-if="!flag" />
          <van-goods-action-icon :icon="collectd == 1 ? 'diy-guanzhu' : 'diy-weiguanzhu'" :text="collectd == 1 ? '已收藏' : '收藏'"
            v-else />
        </div>
        <!-- <van-goods-action-button  text="下载文档" @click="uploaded" /> -->
         <!-- 精品 未下载 不是会员 -->
         <div class="btnGroup" v-if="boutique && buyed === 0 && !isviper">
          <div class="foot_leftbtn" @click="bottomBtn('原价下载')">
            <div>
              <div class="flex-r-c">
                <van-icon :name="'diy-jymoney'"></van-icon>
                <span class="fs_large c_red">{{ detailData.price }}</span>
              </div>
              <p class="fs_small">原价下载</p>
            </div>
          </div>
          <div class="foot_rightbtn" @click="bottomBtn('开通文库会员')">
            <div>
              <p class="fs_middle">{{detailData.docMemberDiscount}}折下载</p>
              <p class="fs_small">开通文库会员</p>
            </div>
          </div>
         </div>
         <!-- 会员免费 未下载 不是会员 使用过免费下载次数 -->
         <div class="btnGroup" v-if="isvipFree && buyed === 0 && !isviper && power.freeDownload === 1">
          <div class="foot_leftbtn" :class="{visibility_hide: downloadStatus === 1}"  @click="bottomBtn('原价下载')">
            <div>
              <div class="flex-r-c">
                <van-icon :name="'diy-jymoney'"></van-icon>
                <span class="fs_large c_red">{{ detailData.price }}</span>
              </div>
              <p class="fs_small">原价下载</p>
            </div>
          </div>
          <div class="foot_rightbtn" @click="bottomBtn('开通文库会员')">
            <div>
              <p class="fs_middle">免费下载</p>
              <p class="fs_small">开通文库会员</p>
            </div>
          </div>
         </div>
         <!-- 精品 未下载 是会员  -->
         <div class="btnGroup" v-if="boutique && buyed === 0 && isviper">
          <div class="price_box">
            <div>
              <div class="flex-end-center">
                <span class="vip_price fs_small">会员价：</span>
                <van-icon :name="'diy-jymoney'"></van-icon>
                <span class="fs_large c_red">{{detailData.docMemberPrice}}</span>
              </div>
              <div class="flex-end-center">
                <span class="c_hui fs_small s_line">原价：</span>
                <van-icon :name="'diy-jymoney'" class="opcity_n"></van-icon>
                <span class="fs_small c_hui s_line">{{detailData.price}}</span>
              </div>
            </div>
          </div>
          <div class="foot_rightbtn" @click="bottomBtn('会员获取文档')">
            <div>
              <p class="fs_middle">获取文档</p>
            </div>
          </div>
         </div>
         <!-- 会员免费 未下载 是会员 -->
         <div class="btnGroup" v-if="isvipFree && buyed === 0 && isviper">
          <div class="price_box">
            <div>
              <div class="flex-end-center">
                <span class="vip_price fs_small">会员价：</span>
                <van-icon :name="'diy-jymoney'"></van-icon>
                <span class="fs_middle c_red">免费</span>
              </div>
              <div class="flex-end-center">
                <span class="c_hui fs_small s_line">原价：</span>
                <van-icon :name="'diy-jymoney'" class="opcity_n"></van-icon>
                <span class="fs_small c_hui s_line">{{detailData.price}}</span>
              </div>
            </div>
          </div>
          <div class="foot_rightbtn" @click="getFile">
            <div>
              <p class="fs_middle" >获取文档</p>
            </div>
          </div>
         </div>
         <!-- 未留资或留资未使用免费下载次数 会员免费 未下载 不是会员 -->
         <div class="btnGroup" v-if="(power.freeDownload === 2 || power.freeDownload === 0) &&  isvipFree && buyed === 0 && !isviper">
          <div class="foot_leftbtn" :class="{ 'green_border_width_120': loginInfo }" @click="bottomBtn(loginInfo ? '使用免费下载特权' : '原价下载')">
            <div v-if="loginInfo">
              <div class="flex-r-c">
                <span class="fs_middle" >使用免费下载特权</span>
              </div>
              <p class="fs_small">（1次机会）</p>
            </div>
            <div v-else>
              <div class="flex-r-c">
                <van-icon :name="'diy-jymoney'"></van-icon>
                <span class="fs_large c_red">{{ detailData.price }}</span>
              </div>
              <p class="fs_small">原价下载</p>
            </div>
          </div>
          <div class="foot_rightbtn"  @click="bottomBtn('开通文库会员')">
            <div>
              <p class="fs_middle">免费下载</p>
              <p class="fs_small">开通文库会员</p>
            </div>
          </div>
         </div>
         <!-- 下载过 -->
         <div class="btnGroup" v-if="buyed === 1">
          <div class="price_box">
          </div>
          <div class="foot_rightbtn" @click="uploaded('down')">
            <div>
              <p class="fs_middle">下载文档</p>
            </div>
          </div>
         </div>
      </div>
    </van-goods-action>
    <!-- 充值 -->
    <recharge ref="charge" :detailData="detailData" :coins="coins"></recharge>
    <!-- 分享 -->
    <share-pop ref="shares" :detailData="detailData" :links="links"></share-pop>
    <!-- 弹窗 -->
    <popupbox ref="popVIPdeplete" title="今日会员免费文档下载特权已用尽" text="建议您明日享受会员特权进行免费下载。" :leftbtnShow="false"
      rightbtn="我知道了"
      @rightBtn="popBtn({ type: 'popVIPdeplete', btn: '我知道了' }, $event)"></popupbox>

    <popupbox ref="popDown" title="文档获取成功" text="已添加到您的文库中，您可前往下载文档。" :leftbtnShow="false" rightbtn="下载文档"
      @rightBtn="downLoadFile('popDown', $event)"></popupbox>

    <popupbox ref="popJYcurrency" title="剑鱼币余额不足" leftbtn="我再想想" rightbtn="立即充值"
      @leftBtn="popBtn({ type: 'popJYcurrency', btn: '我再想想' }, $event)"
      @rightBtn="popBtn({ type: 'popJYcurrency', btn: '立即充值' }, $event)">
      <template #text>
        <span>现有 <span style="color:#2ABED1;">{{coins.balance}}</span> 剑鱼币，还需 <span style="color:#2ABED1;">{{ myprice - coins.balance }}</span> 剑鱼币，请先充值</span>
      </template>
    </popupbox>
    <popupbox ref="popDownVIP" :showFoot="false" type="download" title="文档获取成功" text="已添加到您的文库中，您可前往下载文档。"
      @downLoad="downLoadFile('popDownVIP', $event)">
      <template #btnUnder>
        <div class="fs_small">
          <div>- 会员免费文档下载特权 -</div>
          <div>消耗 <span style="color:#2ABED1;">1</span> 篇 | 今日还剩余 <span style="color:#2ABED1;">{{surplus}}</span> 篇</div>
        </div>
      </template>
    </popupbox>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { mapActions, mapMutations, mapState } from 'vuex'
import { Icon, Toast, GoodsAction, GoodsActionIcon, GoodsActionButton, Sticky } from 'vant'
import Recharge from '@/components/Recharge.vue'
import sharePop from '@/components/SharePopup.vue'
import popupbox from '@/components/popupbox/index.vue'
import Ad from '@/components/Ad.vue'
import { MixinTop } from '@/utils/mixin-top'
import { weChatShare } from '@/utils/wxShare'
import { formatSize, dateFormatter } from '@/utils/globalFunctions'
import { appCallOpenWindow } from '@/utils/globalFunctionsForApp'
import { isAdd } from '@/api'
import { getDocPay } from '@/api/main'
import pdf from 'vue-pdf'
// 引入VueofficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
// 引入相关样式
import '@vue-office/docx/lib/index.css'
// 号入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
// 引入相关样式
import '@vue-office/excel/lib/index.css'
@Component({
  name: 'details-p',
  mixins: [MixinTop],
  components: {
    [Icon.name]: Icon,
    [Sticky.name]: Sticky,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionIcon.name]: GoodsActionIcon,
    [GoodsActionButton.name]: GoodsActionButton,
    Recharge,
    sharePop,
    popupbox,
    Ad,
    pdf,
    VueOfficeDocx,
    VueOfficeExcel
  },
  computed: {
    ...mapState('main', {
      loginInfo: (state: any) => state.isLogin
    })
  },
  methods: {
    dateFormatter,
    ...mapActions({
      getDetails: 'main/getDetails',
      getShow: 'main/getShow',
      getCoin: 'main/getCoin',
      getDown: 'main/getDown',
      getShare: 'main/getShare',
      getAdd: 'main/getAdd',
      getRemove: 'main/getRemove'
    }),
    ...mapMutations({
      clearLibState: 'main/clearMyLibState'
    })
  }
})
export default class extends Vue {
  $envs: any
  clearLibState: any
  getDetails: any
  getCoin: any
  getDown: any
  getShow: any
  getShare: any
  loginInfo: any
  links = ''
  docIds = ''
  fixed = false
  coins: any = []
  Remainingtime = ''
  use = ''
  surplus = ''
  pdfPage = {
    pageNum: 0,
    url: ''
  }

  setOptions = {
    xls: true
  }

  buyShowUrl = ''
  downloadStatus = 0
  myprice = 0
  power: any = {}
  getAdd: any
  getRemove: any
  detailData: any = {}
  collectd = 0
  isrenew = false
  warmShow = true
  showAd = true
  buyed = 0
  flag = false
  pdfh5 = null

  pData: any = {
    heightList: []
  }

  TopConfig: any = {
    actionRightText: '',
    // actionRightText: this.loginInfo ? '<div style="display:flex;flex-direction: column;align-items: center;"><i class="j-icon icon-iconJianYu"></i><p style="color: #171826;font-size: 10px;line-height: 12px;margin-top:3px;">分享赚剑鱼币</p></div>' : '',
    actionRightCallback: this.shared,
    actionRightStyle: {
      color: '#5F5E64',
      fontSize: '20px',
      paddingLeft: '10px'
    }
  }

  showPageNum = 2
  showPageNumT: any = ''

  // 预览配置
  previewConfig: any = {
    pageNums: 1,
    docinImg: []
  }

  // 文档加载失败
  docLoadError = false

  created () {
    if (this.loginInfo) {
      this.TopConfig.actionRightText = '<div style="display:flex;flex-direction: column;align-items: center;"><i class="j-icon icon-iconJianYu"></i><p style="color: #171826;font-size: 10px;line-height: 12px;margin-top:3px;">分享赚剑鱼币</p></div>'
    }
    this.docIds = this.$route.params.id
    this.getPower()
    this.onList()
  }

  get isvipFree () { // 会员免费
    return this.detailData.productType === 1
  }

  get boutique () { // 精品
    return this.detailData.productType === 2
  }

  get isviper () {
    return this.power.docStatus > 0
  }

  get getPageNum () {
    return this.showPageNum
  }

  get Offset () {
    const tempN = document.querySelector('.j-header.jy-app-header') as HTMLDivElement
    if (tempN) {
      return tempN.offsetHeight - 1
    } else {
      return 0
    }
  }

  get needBuy () {
    return this.buyed === 0
  }

  get showfileType () {
    if (this.buyShowUrl.includes('.pdf') || this.detailData.docFileType === 2) {
      return 'pdf'
    } else if (this.buyShowUrl.includes('.docx')) {
      return 'docx'
    } else if (this.buyShowUrl.includes('.xlsx')) {
      this.setOptions.xls = false
      return 'xlsx'
    } else if (this.buyShowUrl.includes('.xls')) {
      this.setOptions.xls = true
      return 'xls'
    } else if (this.buyShowUrl.includes('.ppt') || this.detailData.docFileType === 4) {
      return 'ppt'
    } else if (this.detailData.docFileType === 5) {
      return 'txt'
    } else {
      return ''
    }
  }

  get guideText () {
    // P620需求：1、未购买预览时，引流文案
    // 或者，购买豆丁文件加载时错误后，最多预览5页，最后的引流文案
    let btnText = '下载文档阅读全文'
    if (!this.loginInfo) {
      return '开通文库会员免费阅读全文'
    }
    if (this.docLoadError) {
      return '下载文档阅读全文'
    }
    if (this.isvipFree && this.buyed === 0 && this.isviper) { // 会员免费 未下载 会员
      btnText = '下载文档阅读全文'
    } else if ((this.power.freeDownload === 2 || this.power.freeDownload === 0) && this.isvipFree && this.buyed === 0 && !this.isviper) {
      btnText = '使用免费下载特权阅读全文'
    } else if (this.isvipFree && this.buyed === 0 && !this.isviper && this.power.freeDownload === 1) { // 会员免费 未下载 不是会员 使用过免费下载次数
      btnText = '开通文库会员免费阅读全文'
    } else if (this.boutique && this.buyed === 0 && this.isviper) {
      btnText = '下载文档阅读全文'
    } else if (this.boutique && this.buyed === 0 && !this.isviper) {
      btnText = `开通文库会员${this.detailData.docMemberDiscount}折下载文档阅读全文`
    } else if (this.buyed === 1 && this.showfileType !== 'pdf') {
      btnText = '下载文档阅读全文'
    } if (this.buyed === 1 && this.showfileType === 'pdf') {
      btnText = ''
    }
    return btnText
  }

  // 未购买预览时，未读页码; 或者豆丁渲染错误，
  get unreadPage () {
    return this.detailData.docPageSize - this.previewConfig.pageNums
  }

  rendered (res: any) {
    console.log('完成', res)
  }

  renderedHandler () {
    console.log('完成')
    const inputs = document.getElementsByTagName('input')
    // 遍历所有input元素并设置readonly属性
    for (let i = 0; i < inputs.length; i++) {
      inputs[i].setAttribute('readonly', 'readonly')
      inputs[i].setAttribute('tabindex', '-1')
    }
    // 获取页面上的所有textarea元素
    const textareas = document.getElementsByTagName('textarea')

    // 遍历所有textarea元素并设置事件监听器
    for (let i = 0; i < textareas.length; i++) {
      textareas[i].setAttribute('tabindex', '-1')
      textareas[i].addEventListener('input', function (event) {
        event.preventDefault() // 阻止输入
      })
    }
  }

  errorHandler () {
    console.log('失败')
    this.ddErrorPreview()
  }

  popBtn (obj: any) {
    switch (obj.btn) {
      case '立即充值': {
        window.location.href = `/page_points_mobile/pay?id=${this.detailData.docId}`
        break
      }

      case '原价下载': {
        this.uploaded('Originalprice')
        break
      }
      default:
        break
    }
    (this.$refs[obj.type] as any).value = false
  }

  async bottomBtn (type: string) {
    // 未登录跳转登录
    if (!this.loginInfo) {
      window.location.href = '/jyapp/free/login?to=back'
      return
    }
    switch (type) {
      case '开通文库会员': {
        window.location.href = '/jy_mobile/order/create/docsvip/?type=buy'
        break
      }
      case '续费文库会员': {
        window.location.href = '/jy_mobile/order/create/docsvip/?type=renew'
        break
      }
      case '使用免费下载特权': {
        if (this.power.freeDownload === 0) { // 未留资
          let url = ''
          if (this.$envs.inWX) {
            url = '/weixin/frontPage/bigmember/free/perfect_info?source=wx_library_details_free'
          } else if (this.$envs.inApp) {
            url = '/jyapp/frontPage/bigmember/free/perfect_info?source=app_library_details_free'
          } else {
            url = '/jyapp/frontPage/bigmember/free/perfect_info?source=h5_library_details_free'
          }
          window.location.href = url
        } else {
          const { data } = await getDocPay({ docId: this.docIds, payType: 2 })
          if (data.data) {
            this.onList();
            (this.$refs.popDown as any).value = true
          }
        }
        break
      }
      case '原价下载': {
        this.uploaded('Originalprice')
        break
      }
      case '会员获取文档': {
        this.uploaded('vipget')
        break
      }
      default:
        break
    }
  }

  downLoadFile (type: string) {
    this.uploaded('down');
    (this.$refs[type] as any).value = false
  }

  getMorePage () {
    if (this.showPageNum < this.pdfPage.pageNum) {
      if (this.showPageNum + 2 <= this.pdfPage.pageNum) {
        this.showPageNum = this.showPageNum + 2
      } else {
        this.showPageNum = this.pdfPage.pageNum
      }
    }
  }

  showMorePage () {
    const tDom = this.$refs.sContent as HTMLDivElement
    const beBottom = tDom.scrollHeight - tDom.clientHeight - tDom.scrollTop
    if (beBottom <= 200) {
      clearTimeout(this.showPageNumT)
      this.showPageNumT = setTimeout(() => {
        this.getMorePage()
      }, 300)
    }
  }

  getNumPages (url: string, type: any) {
    try {
      const loadingTask = pdf.createLoadingTask(url)
      loadingTask.promise.then((pdf: any) => {
        const nums = type === 'preview' ? this.previewConfig.pageNums : pdf.numPages
        this.pdfPage.url = loadingTask
        this.pdfPage.pageNum = nums
      }).catch((err: any) => {
        this.ddErrorPreview()
        console.error('pdf加载失败', err)
      })
    } catch (e: any) {
      console.log(e)
    }
  }

  async getPower () {
    const { data } = await isAdd({})
    this.power = data.data.docsInfo
    const endTime = this.power?.endDate
    const date = parseInt(new Date().getTime() / 1000 as any)
    const sevenDay = 60 * 60 * 24 * 7
    const Remainingtime = endTime - date
    if (Remainingtime <= sevenDay && this.power.docStatus > 0) {
      this.isrenew = true
    }
    this.Remainingtime = this.timestampToDays(Remainingtime) as string
  }

  timestampToDays (timestamp: number) {
    const oneDay = 24 * 60 * 60 * 1 // 每天的秒数
    if ((timestamp / oneDay) < 1) {
      return '今天'
    } else {
      return (timestamp / oneDay).toFixed(0) + '天后'
    }
  }

  async getShareUrl () {
    const { data } = await this.getShare({ docId: this.docIds })
    this.links = data.url || location.href
    // 注册微信sdk
    weChatShare({
      config: {
        title: this.detailData.docName,
        desc: this.detailData.docSummary,
        link: this.links
      }
    })
  }

  shared () {
    (this.$refs.shares as any).show = true
  }

  updateText (data: any) {
    // console.log(data)
    switch (data.type) {
      case 'count': {
        (document.getElementById('page_count') as HTMLDivElement).textContent = data.value
        break
      }
      case 'num': {
        (document.getElementById('page_count') as HTMLDivElement).textContent = data.value
        break
      }
    }
  }

  stickyScroll (data: any) {
    if (data.isFixed) {
      this.fixed = true
    } else {
      this.fixed = false
    }
  }

  buyShow (type: any) {
    this.getShow({ docId: this.docIds }).then((res: any) => {
      this.buyShowUrl = res.data
      if (res.data.includes('.pdf') || this.detailData.docFileType === 2 || !this.showfileType) {
        this.getNumPages(res.data, type)
      } else if (res.data.includes('.docx') || res.data.includes('.ppt')) {
        this.ddErrorPreview()
      }
    })
  }

  onList () {
    this.getDetails({ docId: this.docIds, from: this.$route.query.from }).then((res: any) => {
      this.detailData = res.data.detail
      this.detailData.docFileSize = formatSize(this.detailData.docFileSize)
      this.detailData.docSummary = res.data.detail.docSummary.split('').length >= 500 ? res.data.detail.docSummary + '...' : res.data.detail.docSummary
      this.buyed = res.data.status
      this.downloadStatus = res.data.downloadStatus
      if (res.data.status === 1) {
        this.buyShow('all')
      } else {
        // 处理预览展示
        this.disposePreviewContent()
      }
      this.collectd = res.data.collect
      this.getShareUrl()
    })
    this.getCoin({ B: true }).then((res: any) => {
      // console.log(res.data.data)
      this.coins = res.data.points
    })
  }

  // 处理预览展示
  disposePreviewContent () {
    this.previewConfig.docinImg = []
    // P620需求 总页数≥3页：最多预览2页；总页数≤2页：最多预览1页。
    // 预览页数
    this.previewConfig.pageNums = this.detailData.docPageSize >= 3 ? 2 : 1
    // 豆丁预览图片
    // source 2豆丁 1 剑鱼
    if (this.detailData.source === 2) {
      for (let i = 1; i <= this.previewConfig.pageNums; i++) {
        const ddUrl = `https://docimg1.docin.com/docinviewpic.jsp?file=${this.detailData.imgId}&width=1000&pageno=${i}&sview=1&clogo=1`
        this.previewConfig.docinImg.push(ddUrl)
      }
    } else {
      // 剑鱼文档，返回的格式全部为pdf
      this.buyShow('preview')
    }
  }

  pdfError () {
    console.log('---pdf渲染失败--')
    if (this.detailData.source === 2) {
      this.ddErrorPreview()
    }
  }

  // 豆丁预览(如果购买后的全文加载失败，则走预览逻辑,PDF)
  ddErrorPreview () {
    this.docLoadError = true
    this.previewConfig.docinImg = []
    this.previewConfig.pageNums = this.detailData.docPageSize >= 5 ? 5 : this.detailData.docPageSize
    for (let i = 1; i <= this.previewConfig.pageNums; i++) {
      const ddUrl = `https://docimg1.docin.com/docinviewpic.jsp?file=${this.detailData.imgId}&width=1000&pageno=${i}&sview=1&clogo=1`
      this.previewConfig.docinImg.push(ddUrl)
    }
  }

  jubaod () {
    Toast({
      duration: 3500,
      message: '如果您发现此内容有侵权行为，请联系客服400-108-6670进行投诉'
    })
  }

  canged () {
    // 未登录跳转登录
    if (!this.loginInfo) {
      window.location.href = '/jyapp/free/login?to=back'
      return
    }
    if (this.collectd === 0) {
      this.getAdd({ docId: this.docIds }).then((res: any) => {
        if (res.error_code === 0) {
          this.clearLibState('clearCollections') // 清除我的收藏列表缓存数据
          this.collectd = 1
          Toast('收藏成功')
        }
      })
      this.flag = true
    } else {
      this.getRemove({ docId: this.docIds }).then((res: any) => {
        if (res.error_code === 0) {
          this.clearLibState('clearCollections') // 清除我的收藏列表缓存数据
          this.collectd = 0
          Toast('取消收藏')
        }
      })
      this.flag = true
    }
    setTimeout(() => {
      this.flag = false
    }, 1000)
  }

  async getFile () {
    const { data } = await getDocPay({ docId: this.docIds, payType: 0 })
    const getData = data.data
    if (getData) {
      if (getData.status === 0) {
        this.onList()
        this.surplus = getData.surplus
        this.use = getData.use;
        (this.$refs.popDownVIP as any).value = true
      } else if (getData.status === 1) {
        (this.$refs.popVIPdeplete as any).value = true
      }
    }
  }

  uploaded (type: string) {
    if (type === 'down') { // 下载
      this.getDown({ docId: this.docIds }).then((res: any) => {
        if (res.error_code === 0) {
          if (this.$env.platform === 'app' && this.$env.platform.platformOS === 'ios') {
            appCallOpenWindow(res.data)
          } else {
            window.location.href = res.data
          }
        }
      })
    } else if (type === 'vipget') { // 会员下载
      if (this.coins.balance < this.detailData.docMemberPrice) {
        this.myprice = this.detailData.docMemberPrice as number
        // (this.$refs.charge as any).show = true
        (this.$refs.popJYcurrency as any).value = true
      } else {
        this.$router.push({ path: '/purchase/' + this.detailData.docId, query: { payType: '0' } })
      }
    } else { // 原价下载
      if (this.coins.balance < this.detailData.price) {
        this.myprice = this.detailData.price as number
        // (this.$refs.charge as any).show = true
        (this.$refs.popJYcurrency as any).value = true
      } else {
        this.$router.push({ path: '/purchase/' + this.detailData.docId, query: { payType: '1' } })
      }
    }
  }

  readAll () {
    if (this.isvipFree && this.buyed === 0 && this.isviper) { // 会员免费 未下载 会员
      this.getFile()
    } else if ((this.power.freeDownload === 2 || this.power.freeDownload === 0) && this.isvipFree && this.buyed === 0 && !this.isviper) {
      this.bottomBtn('使用免费下载特权')
    } else if (this.isvipFree && this.buyed === 0 && !this.isviper && this.power.freeDownload === 1) { // 会员免费 未下载 不是会员 使用过免费下载次数
      this.bottomBtn('开通文库会员')
    } else if (this.boutique && this.buyed === 0 && this.isviper) {
      this.bottomBtn('会员获取文档')
    } else if (this.boutique && this.buyed === 0 && !this.isviper) {
      this.bottomBtn('开通文库会员')
    } else if (this.buyed === 1) {
      this.uploaded('down')
    }
  }

  fileType (val: any) {
    if (val === 1) {
      return 'word'
    } else if (val === 2) {
      return 'pdf'
    } else if (val === 3) {
      return 'excel'
    } else if (val === 4) {
      return 'ppt'
    } else if (val === 5) {
      return 'txt'
    } else {
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
@include diy-icon('pdf', 24, 24);
@include diy-icon('word', 24, 24);
@include diy-icon('excel', 24, 24);
@include diy-icon('ppt', 24, 24);
@include diy-icon('txt', 24, 24);
@include diy-icon('jubao', 20, 20);
@include diy-icon('weiguanzhu', 20, 20);
@include diy-icon('guanzhu', 20, 20);
@include diy-icon('iconJianYu', 24, 24);
@include diy-icon('warmclose', 20, 20);
@include diy-icon('jymoney', 20, 20);
.details-p {
  height: 100%;
  padding-bottom: 142px;
  box-sizing: border-box;

  .fs_small {
    font-size: 13px;
  }

  .goods-action {
    display: flex;
    align-items: center;
  }
  .excel_{
    height: 500px;
    ::v-deep{
      .x-spreadsheet-overlayer{
        z-index: 0;
      }
    }
  }
  .doc_{
    ::v-deep{
      .docx-wrapper{
      background-color: #fff;
      padding: 0;
      section.docx {
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
        z-index: 0;
      }
      img{
        max-width: 100vw;
        height: auto !important;
      }
    }
    }

  }

  .top-title-group {
    padding: 24px 12px 0 12px;
    box-sizing: border-box;
    background-color: #fff;
    color: #171826;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: left;
    .van-icon {
      margin-right: 8px;
    }
    .docName {
      margin-right:5px;
    }
    .type-tag {
      box-sizing: border-box;
      border-radius: 2px;
      font-size: 10px;
      white-space: nowrap;
      padding: 4px 5px;
      margin-bottom: 2px;
      vertical-align: middle;

      &.free {
        background: linear-gradient(98deg, #FFA674 0%, #F01212 100%);
        color: #fff;
      }
      &.boutique{
        background: linear-gradient(270deg, #F1D090 0%, #FAE7CA 100%);
        color: #C26F33;
      }
    }
  }

  .details-tags {
    background-color: #fff;
    padding: 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    .tag-item {
      position: relative;
      margin-right: 16px;
      font-size: 12px;
      line-height: 18px;
      color: #9B9CA3;
    }

    .tag-item::after {
      content: "";
      position: absolute;
      top: 50%;
      right: -8px;
      margin-top: -6px;
      width: 1px;
      height: 12px;
      background-color: rgba(0, 0, 0, 0.05);
    }

    .tag-item:last-child::after {
      display: none;
    }
  }

  .de-tops {
    min-height: 70px;
    display: flex;
    background: #fff;
    padding: 0 16px;

    .word {
      display: flex;
      height: 24px;
      margin-right: 8px;
      padding-top: 24px;

      .word-imgs {
        display: flex;
        width: 24px;
        height: 24px;
      }
    }

    .sp-text {
      display: flex;
      flex-wrap: wrap;
      padding: 24px 0;
      color: #171826;
      font-size: 20px;
      line-height: 30px;
    }
  }

  .middles, .bottoms-preview {
    position: relative;
    padding: 16px 0;
    background: #fff;
    margin: 8px;
    border-radius: 12px;

    .file-content {
      img:not(:first-of-type){
        border-top: 3px solid #f2f2f2;
      }
    }

    h3 {
      font-size: 16px;
      line-height: 24px;
      font-weight: 500;
      color: #171826;
    }

    p {
      color: #5F5E64;
      font-size: 14px;
      line-height: 20px;
      margin-top: 8px;
    }

    .continue {
      width: 100%;
      position: absolute;
      box-sizing: border-box;
      color: #1B1A2A;
      font-size: 12px;
      line-height: 18px;
      text-align: center;
      height: 100px;
      padding-top:46px;
      bottom: 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 50%);
      border-radius:  0 0 12px 12px;

      .unread-num {
       .line{
          display: inline-block;
          width: 20px;
          height: 1px;
          background: #1B1A2A;
         margin-bottom: 3px;
        }
      }

      .handle-span {
        padding: 8px 0;
        font-size:14px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2ABED1;
        cursor: pointer;

        i {
          margin-left: 4px;
        }
      }
    }
  }
  .middles.middles-summary {
    padding: 16px 8px;
    .continue {
      position: unset;
      height:unset;
      margin-top: 32px;
      padding-top: 0;
    }
  }

  .head-tip {
    width: auto;
    height: 0;
    background: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid #F2F2F4;

    h3 {
      display: flex;
      align-items: center;

      span {
        width: 260px;
        color: #686868;
        font-weight: 500;
        font-size: 14px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      i {
        margin-right: 8px;
      }
    }

    .pages {
      color: #686868;
      font-size: 14px;

      i:first-child {
        display: inline-block;
        font-style: normal;
        width: 16px;
        height: 16px;
        line-height: 18px;
        text-align: center;
        border-radius: 2px;
        background: #FFFFFF;
        border: 1px solid #ECECEC;
      }
    }
  }
  ::v-deep {
    .pdf_ {
      & > span:not(:first-of-type){
        border-top: 3px solid #f2f2f2;
      }
    }
  }

  .is-fixed {
    height: 40px;
    justify-content: space-between;
  }

  .botts {
    // padding: 16px 24px;
    // width: 375px;
    background: #fff;

    .cont-page {
      // width: 375px;
      overflow-y: scroll;
      background: #fff;
    }
  }

  .van-goods-action {
    height: auto;
    display: block;
    .foot-ad{
      width: 100%;
      // height: 64px;
      .ad-box{
        width: 100%;
        height: 64px;
        position: relative;
        .Ad_close{
          width: 14px;
          height: 14px;
          position: absolute;
          font-size: 14px;
          right: 14px;
          top: 50%;
          transform: translateY(-50%);
          z-index: 100;
          color: #fff;
          opacity: 0.8;
        }
      }
      .warm_text{
        background-color: #FEE9E8;
        width: 100%;
        height: 54px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 16px;
        .middle_text{
          width: 240px;
          line-height: 20px;
          font-size: 13px;
          color: #FB483D;
          margin-left: 8px;
        }
        .warm_btn{
          width: 72px;
          height: 32px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 8px;
          border: 1px solid  #FB483D;
          color: #FB483D;
          font-size: 13px;
          margin-left: 8px;
        }
      }
    }

    .footbar {
      width: 100%;
      box-sizing: border-box;
      padding: 8px 8px;
      box-shadow: 0px -2px 8px 0px #eee;
      display: flex;
      justify-content: space-between;
    }

    .no-icon {
      .p1 {
        font-size: 12px;
        line-height: 18px;
        color: #5F5E64;
      }

      .p2 {
        font-size: 18px;
        line-height: 26px;
        color: #FB483D;
      }

      .van-icon {
        display: none !important;
      }
    }

    .van-goods-action-icon:not(.no-icon) {
      font-size: 10px;
      color: #5F5E64;
    }

    .van-goods-action-button--first {
      margin-left: 0;
    }

    .van-goods-action-button--last {
      margin-right: 0;
    }

    .van-goods-action-button {
      flex: none;
    }

    .van-button--large {
      width: 165px;
      height: 40px;
    }
    ::v-deep .van-button--default {
      background-color: #2ABED1;

      .van-button__content {
        .van-button__text {
          color: #fff;
          // font-size: 16px;
        }
      }
    }
    .btnGroup{
      display: flex;
    }
    .visibility_hide{
      visibility: hidden;
    }
    .foot_leftbtn{
      margin-right: 8px;
      width: 108px;
      height: 40px;
      color: #5F5E64;
      font-size: 14px;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      border: 1px solid  #0000001A;
    }
    .green_border_width_120{
      color: #2ABED1;
      border-color:#2ABED1;
      width: 120px;
    }
    .foot_rightbtn{
      width: 108px;
      height: 40px;
      background-color: #2ABED1;
      color: #fff;
      font-size: 14px;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      // line-height: 20px;
    }
    .flex-end-center{
      display: flex;
      justify-content: end;
      align-items: center;
    }
    .s_line{
      text-decoration: line-through;
    }
    .price_box{
     box-sizing: border-box;
     padding-right: 24px;
    }
    .vip_price{
      color: #5F5E64;
    }
    .fs_small{
      font-size: 12px;
      line-height: 18px;
      text-align: center;
    }
    .fs_large{
      font-size: 16px;
      line-height: 22px;
      text-align: center;
    }
    .fs_middle{
      font-size: 14px;
      line-height: 20px;
      text-align: center;
    }
    .opcity_n{
      opacity: 0.9;
    }
   .c_hui{
    color: #9B9CA3;
   }
    .c_red{
      color:#FB483D;
    }
  }
}
</style>