web/apps/bigmember_pc/src/views/analysisReport/components/ReportDownloadDialog.vue

<template>
  <el-dialog
    title="市场分析定制报告下载"
    :visible.sync="options.visible"
    :close-on-click-modal="false"
    lock-scroll
    center
    top="15%"
    custom-class="market-report-download-dialog"
    width="1000px"
    style="overflow: hidden"
  >
    <div class="content" v-loading="loading">
      <section class="report-effect-box">
         <div class="left">
           <p class="box-label">报告作用：</p>
           <p class="box-desc">从市场规模、采购单位、中标单位等多个维度深度剖析行业现状与领军企业运营状况，帮助您深度挖掘市场、把握市场先机。</p>
         </div>
          <el-button type="primary" @click="viewExample">查看报告样例</el-button>
      </section>
      <section class="market-general-box" v-if="hasPower">
        <span class="box-label">市场概况：</span>
        <span v-for="item in totalList">{{item.label}}：<strong>{{ item.count + item.unit }}</strong></span>
        <span class="highlight view-more" @click="viewMore">查看更多</span>
      </section>
      <section class="email-box">
        <span class="email-label"><i class="star">*</i>接收邮箱：</span>
        <el-input v-model="s_email" placeholder="必填，报告将发送至邮箱" @input="showEmailError = false" @change="checkEmail"></el-input>
        <span class="error-tip" v-if="showEmailError">
          <i class="el-icon-error"></i>
          <span v-if="s_email">邮箱格式错误</span>
          <span v-else>请输入邮箱</span>
        </span>
        <span class="error-tip" v-if="s_email && !showEmailError">
          <i class="el-icon-success"></i>
        </span>
      </section>
      <section class="download-notice-box">
        <p class="box-label">下载须知：</p>
        <div class="box-desc">
          <p>1.“项目明细”按照成交时间排序，报告最多展示前100条，如需导出全部，请<em class="highlight t-ud"  @click="openCustomer">联系客服</em>；</p>
          <p>2. 该报告数据来自于公开数据整理，不代表任何权威观点，仅供参考；</p>
          <p>3. 请在有效期内使用下载权限，逾期清零；</p>
          <p>4. 如有任何疑问,您可拨打<em class="highlight"  style="cursor:default;">400-108-667</em>联系客服或点击<em class="highlight t-ud" @click="openCustomer">联系在线客服</em>。</p>
        </div>
      </section>
    </div>
    <div slot="footer" :class="{ 'mask': loading }">
      <div class="footer-con">
        <span class="residue">市场分析定制报告下载余额：{{ residueCount }}份</span>
        <span class="go-recharge" @click="goRecharge">去充值&gt;</span>
        <span class="deduct">本次扣除：<em>1份</em></span>
        <span class="zero-tip" v-if="residueCount === 0">余额不足，请先充值</span>
      </div>
      <el-button class="download-btn" :disabled="loading" type="primary" @click="downloadHandle" >立即下载</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { getPDFPackBalance, sendPdfEmail, getPdfEmail, savePdfCondition, ajaxExportPdf } from '@/api/modules/'
import { debounce } from '@/utils/'
import { emailRegExp } from '@/utils/constant'

export default {
  props: {
    options: {
      type: Object,
      default: () => {
        return {
          visible: false,
          totalList: [],
          sid: ''
        }
      }
    }
  },
  data () {
    return {
      // 下载余额
      residueCount: 0,
      s_email: '',
      showEmailError: false,
      loading: false
    }
  },
  computed: {
    ...mapGetters('user', ['power']),
    totalList () {
      const arr = this.options.totalList.filter(item => {
        return item.label !== '项目平均金额'
      })
      return arr
    },
    hasPower() {
      return this.power && this.power.length > 0 && this.power.indexOf(26) !== -1
    }
  },
  created() {
    this.getEmail()
    this.getResidueCount()
  },
  methods: {
    async getEmail () {
      const {error_code: code, data } = await getPdfEmail()
      if(data && code === 0) {
        this.s_email = data || ''
      }
    },
    // 获取下载余额
    async getResidueCount () {
      const {error_code: code, data } = await getPDFPackBalance()
      if(code === 0 && data) {
        this.residueCount = data.market?.total || 0
      }
    },
    // 查看报告样例
    viewExample () {
      window.open('/common-module/pdf/【剑鱼标讯】市场分析定制报告样例.pdf', '_blank')
    },
    // 立即下载
    downloadHandle: debounce(function () {
      if(this.residueCount > 0) {
        this.checkEmail()
        if(this.showEmailError) {
          return
        }
        this.ajaxPdf()
      } else {
        // 余额不足
        this.goRecharge()
      }
    }, 300),
    ajaxPdf () {
      const params = {
        type: 3,
        sid: this.options.sid,
        s_email: this.s_email
      }
      this.loading = true
      // 保存pdf的条件
      savePdfCondition(params).then(res => {
        const {error_code: code, data } = res
        if(code === 0 && data) {
          // 发送邮箱
          // 此处id是接口返回的id
          const params = {
            filterId: data
          }
          ajaxExportPdf(params).then(response => {
            if(response.error_code === 0 && response.data) {
              this.options.visible = false
              this.showConfirmDialog()
            }
          }).finally(() => {
            this.loading = false
          })
        }
      }).catch(() => {
        this.loading = false
      })
    },
    showConfirmDialog () {
      this.$emit('successConfirm')
    },
    // 查看更多
    viewMore () {
      const id = this.options.sid
      if(this.options.tab === 'history' && id) {
        this.$router.push(`/desktop/report_analysis?id=${id}`)
      }
      this.options.visible = false
    },
    // 去充值
    goRecharge () {
      window.open('/swordfish/page_big_pc/order/download-pack/market', '_self')
    },
    // 联系客服
    openCustomer() {
      this.options.visible = false
      this.contactCustomer(this)
    },
    checkEmail () {
      if (!emailRegExp.test(this.s_email)) {
        this.showEmailError = true
      } else {
        this.showEmailError = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .market-report-download-dialog{
    section {
      margin-top:20px;
    }
    .box-label{
      font-size:16px;
      line-height:24px;
      color: #1d1d1d;
    }
    .box-desc{
      margin-top:8px;
      font-size:14px;
      color: #686868;
      line-height:22px;
    }
    .report-effect-box{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left{
        width:720px;
      }
      .el-button{
        padding: 7px 22px;
        font-size:14px;
        line-height: 22px;
      }
    }
    .market-general-box{
      span {
        margin-right:20px;
      }
      .box-label{
        margin-right:14px;
      }
      strong {
        color: #1d1d1d;
        font-size:18px;
        line-height: 28px;
      }
      .view-more{
        font-size:16px;
        line-height:24px;
      }
    }
    .download-notice-box{
      padding:20px;
      background: linear-gradient(180deg, #F7F9FA 0%, #fff 100%);
      border-radius: 8px;
      border: 1px solid rgba(0,0,0, 0.05);
    }
    .email-box{
      display: flex;
      align-items: center;
      font-size:14px;
      .email-label{
        display: inline-block;
        width:94px;
        color: #5F5E64;
      }
      .star {
        color: #ff3a20;
        margin-right:3px;
      }
      .error-tip {
        color: #ff3a20;
        display: flex;
        align-items: center;
        .el-icon-error{
          font-size:22px;
          margin:0 8px;
        }
        .el-icon-success{
          font-size:22px;
          margin-left: 8px;
          color: #2CB7CA;
        }
      }
      ::v-deep {
        .el-input {
          width: 438px;
        }
        .el-input__inner{
          width: 438px;
          height: 36px;
          line-height: 36px;
          font-size:14px;
          line-hieght: 22px;

        }
      }


    }
    .highlight {
      color: $color_main;
      cursor: pointer;
    }
    .t-ud {
      text-decoration: underline;
    }
    .el-dialog__footer{
      .mask {
        opacity: .6;
      }
      .download-btn{
        padding: 11px 58px;
        font-size:16px;
        line-height: 24px;
      }
      .footer-con{
        font-size:14px;
        line-height:18px;
        span {
          margin-right:20px;
        }
        .residue{
         color: #686868;
        }
        .go-recharge{
          display: inline-block;
          padding: 4px 12px;
          border: 1px solid $color_main;
          color: $color_main;
          border-radius: 20px;
          cursor: pointer;
        }
        .deduct{
          color: #1d1d1d;
          em{
            color: $color_main;
          }
        }
        .zero-tip {
          padding: 4px 12px;
          border-radius: 20px;
          color: #ff3a20;
          background-color: #ffecec;
        }
      }

    }
  }
  ::v-deep {
    .el-dialog{
      border-radius: 8px;
    }
    .el-dialog__header{
      padding: 32px 32px 0 32px;
    }
    .el-dialog__body {
      overflow-y: auto;
      padding: 0 32px 20px 32px;
    }
    .el-dialog__footer{
      padding: 11px 32px;
      > div{
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
      box-shadow: 0 -4px 8px rgba(0,0,0, 0.05);
    }
    .el-button {
      border-radius: 6px !important;
    }
  }
</style>