web/apps/bigmember_pc/src/composables/attachment-download/component/AttachmentDownload.vue

<template>
  <section class="attachment-download-container" v-if="renderAttachList.length">
    <div class="others-header flex flex-(items-center)">
      <div class="content-file-attachment-left flex flex-items-center">
        <span class="left-icon flex flex-items-center">
          <span class="file-attachment-text text-nowrap">附件下载</span>
        </span>
        <div class="right-content flex flex-items-center" v-if="canShowTip">
          <!-- 免费用户，无体验次数（没体验过） -->
          <template v-if="isFree && freeFileNum === 0">
            <span class="attachment-tag text-nowrap">
              <span class="attachment-tag-text">
                免费用户享有{{ freeFileNum || 1 }}次附件下载权益
              </span>
            </span>
          </template>
          <!-- 免费用户，无体验次数（体验过） -->
          <template v-else-if="isFree && freeFileNum < 0">
            <span class="attachment-tag text-nowrap">
              <span class="attachment-tag-text">下载更多附件</span>
              <button class="open-vip-btn" @click="toBuySvip">
                开通超级订阅
              </button>
            </span>
          </template>
          <!-- 新超级订阅，并且不是大会员(或者是大会员没有附件下载权限) -->
          <template v-else-if="isNewSuper && !memberHasAttachPower">
            <span class="attachment-tag text-nowrap">
              <span class="attachment-tag-text">本月剩余：{{ fileNum }}个</span>
            </span>
            <i class="iconfont icon-help" @click="fileDownloadHelp"></i>
          </template>
        </div>
      </div>
      <div class="content-file-attachment-actions" v-if="canShowTip">
        <span
          class="action-button"
          @click="chargeFilePack"
          v-if="isNewSuper && !memberHasAttachPower"
        >
          立即充值
        </span>
      </div>
    </div>
    <div class="file-attachment-list">
      <div
        class="file-attachment-item highlight-text underline clickable"
        v-for="(attach, index) in renderAttachList"
        @click="startDownloadFile(attach)"
        :key="index"
      >
        {{ attach.name }}
      </div>
    </div>
  </section>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { useGetContentAttachment } from '@/composables/attachment-download/'
import {
  IsCustomTopNet,
  IsSunPublishContent
} from '@/views/article-content/composables/useContentStore'

export default {
  name: 'AttachmentDownload',
  props: {
    id: {
      type: String,
      required: true,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      required: true,
      default: ''
    },
    attachmentList: {
      type: Array,
      default() {
        return [
          // {
          //   fileName: '附件1.pdf',
          //   fileSize: '1.9 M',
          //   fileType: 'pdf'
          // },
          // {
          //   fileName: '附件2.pdf',
          //   fileSize: '129 KB',
          //   fileType: 'pdf'
          // }
        ]
      }
    }
  },
  data() {
    return {
      loading: false,
      attachment: {
        fileUrl: '', // 当前附件真实url
        file: {}, // 当前需要下载的附件信息
        downloaded: false
      },
      resourcePack: {
        exchangeNum: 0,
        freeNum: 0,
        grantNum: 0,
        name: '附件下载包',
        number: 0,
        purchaseNum: 0,
        resourceType: '附件下载包',
        thirtyNum: 0
      }
    }
  },
  computed: {
    ...mapGetters('user', [
      'isFree',
      'isSuper',
      'isMember',
      'bigMemberPower',
      'isBusiness'
    ]),
    ...mapState({
      power: (state) => state.user.info
    }),
    // 免费用户免费体验次数
    freeFileNum() {
      if (this.resourcePack.number > 0) {
        return this.resourcePack.number
      } else {
        if (this.attachment.downloaded) {
          return -1
        } else {
          return this.power?.freeFile
        }
      }
    },
    fileNum() {
      return this.resourcePack.number
    },
    isNewSuper() {
      return this.power.viper && this.isSuper
    },
    memberHasAttachPower() {
      return this.isMember && this.bigMemberPower.indexOf(3) !== -1
    },
    renderAttachList() {
      return this.attachmentList.map((a) => {
        let size = a.fileSize
        return {
          name: a.fileName,
          size: size,
          type: a.fileType
        }
      })
    },
    canShowTip() {
      // 定制化用户不展示提示和留资
      if (IsCustomTopNet.value) {
        return false
      }
      if (IsSunPublishContent.value) {
        return false
      }
      return true
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    replaceSpace(n) {
      return n.trim().replace(/\s+/g, '')
    },
    async getInfo() {
      const { attachment } = useGetContentAttachment({ id: this.id })
      this.attachmentInstance = attachment
      await this.attachmentInstance.getResourcePackAccount()
      this.resourcePack = this.attachmentInstance.resourcePack
    },
    async refreshResourcePackCount() {
      if (!this.attachmentInstance) {
        return this.getInfo()
      }
      await this.attachmentInstance.getResourcePackAccount()
      this.resourcePack = this.attachmentInstance.resourcePack
    },
    showDialog(conf = {}) {
      const defaultConf = {
        title: '',
        message: '',
        customClass: 'custom-message-box',
        confirmButtonText: '我知道了',
        confirmButtonClass: 'custom-confirm-btn',
        cancelButtonClass: 'custom-cancel-btn',
        showClose: false,
        showCancelButton: false,
        closeOnClickModal: false,
        center: true
      }
      Object.assign(defaultConf, conf)
      return this.$confirm(defaultConf.message, defaultConf.title, defaultConf)
    },
    fileDownloadHelp() {
      this.$alert(
        '点击附件即为下载，系统会扣除当月附件下载个数；每月1号上月余额清零重新计算，请合理使用。',
        '',
        {
          confirmButtonText: '我知道了',
          confirmButtonColor: '#2ABDD1',
          showClose: false,
          center: true
        }
      )
    },
    async startDownloadFile(file) {
      // 定制化用户直接下载
      if (IsCustomTopNet.value) {
        return this.downloadFile(file)
      }
      if (IsSunPublishContent.value) {
        return this.downloadFile(file)
      }
      // 大客户直接下载
      if (location.pathname.indexOf('entservice') !== -1) {
        return this.downloadFile(file)
      }
      if (this.isFree) {
        // 免费用户
        // 判断有无体验过 0：未体验过
        if (this.freeFileNum === 0) {
          // TODO 判断有无留过资 且未体验过 - 去留资 source: 'article_attach_freeuser'
          this.$emit('doOpenCollect', {
            source: 'article_attach_freeuser',
            reload: true
          })
        } else if (this.freeFileNum < 0 && this.resourcePack.number <= 0) {
          // 免费用户 体验过 下载次数为-1 弹框提醒跳至超级订阅购买页
          // 并且剑鱼币兑换的附件下载权益没有余额
          return this.showDialog({
            title: '开通超级订阅',
            message:
              '您的免费【附件下载】次数已使用完，暂无免费查看权限。如需查看更多，请开通超级订阅获取更多权限。',
            showCancelButton: true,
            confirmButtonText: '去开通'
          })
            .then(() => {
              this.toBuySvip()
            })
            .catch(() => {})
        } else {
          // P317版本改为免费用户只要有下载次数，均可正常下载
          this.downloadFile(file)
          this.attachment.downloaded = true
        }
      } else {
        // 付费用户
        // 大会员用户 有下载个数
        if (this.memberHasAttachPower) {
          return this.downloadFile(file)
        }
        // 超级订阅用户
        if (this.isSuper) {
          // 新超级订阅用户
          if (this.isNewSuper) {
            // 是否用完弹窗放到请求之后，根据请求返回值进行判断
            return this.downloadFile(file)
            // if (this.fileNum > 0) {
            //   this.downloadFile(file)
            // } else {
            //   // 次数用完
            //   return this.showDialog({
            //     message:
            //       '您本月附件下载机会已消耗完毕，如需下载更多附件，请前往充值。',
            //     showCancelButton: true,
            //     confirmButtonText: '立即充值'
            //   })
            //     .then(() => {
            //       // this.concatKf()
            //       this.chargeFilePack()
            //     })
            //     .catch(() => {})
            // }
          } else {
            // 老超级订阅用户 提醒升级
            return this.showDialog({
              title: '升级超级订阅',
              message: '对不起，暂无权限，您可升级超级订阅解锁附件下载',
              showCancelButton: true,
              confirmButtonText: '前往升级'
            })
              .then(() => {
                this.toUpgradeSvip()
              })
              .catch(() => {})
          }
        }

        // 商机管理只要有个数就能下载
        if (this.isBusiness && this.resourcePack.number > 0) {
          return this.downloadFile(file)
        }

        // 大会员自定义版本没有下载权限 或 非超级订阅的商机管理用户 (弹框提醒联系客服)
        const isMemberButNoPower = this.isMember && !this.memberHasAttachPower
        const noAttachmentDownloadPower = isMemberButNoPower && !this.isNewSuper
        if (noAttachmentDownloadPower || (!this.isSuper && this.isBusiness)) {
          // 老超级订阅用户 提醒升级
          return this.showDialog({
            message:
              '您未购买此服务，如需使用请联系您的客户经理或客服升级套餐，谢谢！',
            confirmButtonText: '我知道了'
          })
            .then(() => {})
            .catch(() => {})
        }
      }
    },
    async downloadFile(file) {
      this.attachment.file = file
      // downUrl: 原始url
      // fileUrl: 下载地址
      const result = await this.getAttachmentInfo(file)
      if (result) {
        const { downUrl, fileUrl } = result

        let skipRefresh = false
        // 定制化用户不展示提示和留资
        if (IsCustomTopNet.value) {
          skipRefresh = true
        }
        if (IsSunPublishContent.value) {
          skipRefresh = true
        }

        if (!skipRefresh) {
          this.refreshResourcePackCount()
        }

        if (downUrl && fileUrl) {
          this._downloadFile(fileUrl, result.fileName)
        } else {
          console.log('获取附件fid失败')
        }
      }
    },
    _downloadFile(url, filename) {
      if (!url) return
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      // 同源download才会生效
      link.setAttribute('download', filename)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      return link
    },
    async getAttachmentInfo(file) {
      this.loading = true
      if (!this.loading) return
      const params = {
        id: this.id, // 附件详情页id
        fileName: file.name, // 附件名称
        infoType: this.type === 'issued' ? 'S' : '', // 信息类型：默认为空； 供应信息：S
        productName: '附件下载包',
        platform: 'PC', // 平台：PC;APP;WX
        title: this.title // 附件详情页标题附件详情页标题
      }
      try {
        const { r: data, m: msg } =
          await this.attachmentInstance.useResourcePack(params)
        // 各种余额不足提示
        if (data) {
          if (data.code && data.code < 0) {
            if (this.isFree) {
              this.showDialog({
                title: '开通超级订阅',
                message:
                  '您的免费【附件下载】次数已使用完，暂无免费查看权限。如需查看更多，请开通超级订阅获取更多权限。',
                showCancelButton: true,
                confirmButtonText: '去开通'
              })
                .then(() => {
                  this.toBuySvip()
                })
                .catch(() => {})
            } else if (this.isSuper) {
              this.showDialog({
                title: '开通超级订阅',
                message:
                  '您本月附件下载机会已消耗完毕，如需下载更多附件，请前往充值。',
                showCancelButton: true,
                confirmButtonText: '立即充值'
              })
                .then(() => {
                  this.chargeFilePack()
                })
                .catch(() => {})
            } else {
              this.$toast(msg || '获取附件地址失败')
            }
          } else if (!msg && data.downUrl) {
            const downUrl = data.downUrl
            const fileUrl = downUrl
              ? `${downUrl}?response-content-type=application/octet-stream`
              : ''
            return {
              ...data,
              fileUrl // 真实下载地址
            }
          } else {
            this.$toast(msg || '获取附件地址失败')
          }
        } else {
          this.$toast(msg || '获取附件地址失败')
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    toBuySvip() {
      window.open('/swordfish/page_big_pc/free/svip/buy', '_blank')
    },
    chargeFilePack() {
      window.open('/swordfish/page_big_pc/free/filePack/buy', '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
.attachment-download-container {
  margin-top: 40px;
  margin-bottom: 70px;
}
.file-attachment-text {
  margin-right: 12px;
  font-size: 16px;
  line-height: 24px;
}
.attachment-tag {
  margin: 0 8px;
  padding: 2px 0;
  font-size: 12px;
  line-height: 18px;
  color: $color-main;
  background: $color_main_background;
  border-radius: 10px;
  &-text {
    padding: 0 8px;
    color: $color-main;
  }
}
.action-button {
  flex-shrink: 0;
  display: inline-block;
  margin-left: 24px;
  text-align: center;
  cursor: pointer;
  padding: 0 16px;
  min-width: 64px;
  font-size: 12px;
  line-height: 30px;
  border-radius: 4px;
  color: #fff;
  background-color: $color-main;
}
.file-attachment-list {
  margin-top: 16px;
  font-size: 15px;
  line-height: 22px;
  .file-attachment-item {
    display: block;
    cursor: pointer;
    margin-bottom: 16px;
  }
}

.right-content {
  .iconfont {
    cursor: pointer;
    color: $color-main;
  }
}

.open-vip-btn {
  color: #fff;
  padding: 0 8px;
  border-radius: inherit;
  background-color: $color-main;
}
</style>