feat:市场分析报告新增报告下载弹窗

apps/bigmember_pc/src/views/analysisReport/MarketAnalysisResult.vue

@@ -43,7 +43,7 @@
             </el-dropdown>
           </div>
         </div>
-        <el-button class="download-report-btn" type="primary">下载报告</el-button>
+        <el-button class="download-report-btn" type="primary" @click="downloadReport">下载报告</el-button>
       </div>
       <div class="analysis-limit-time analysis-wrap">
         <div class="analysis-label">数据统计范围：</div>
@@ -552,6 +552,10 @@
     />
     <!-- 留资弹窗 -->
     <CollectInfo ref="collectRef"></CollectInfo>
+    <report-download-dialog
+      v-if="reportDownloadDialog.visible"
+      :options.sync="reportDownloadDialog"
+    ></report-download-dialog>
   </div>
 </template>
 
@@ -576,6 +580,7 @@ import MaskCard from '@/components/mask-card/MaskCard.vue'
 import MarketUserScatter from '@/views/analysisReport/components/MarketUserScatter'
 import UserScatterDialog from '@/views/analysisReport/components/UserScatterDialog'
 import CollectInfo from '@/components/collect-info/CollectInfo.vue'
+import ReportDownloadDialog from '@/views/analysisReport/components/ReportDownloadDialog.vue'
 import { getReportAnalysisInfo } from '@/api/modules/'
 import { mapState } from 'vuex'
 import { moneyUnit, dateFormatter, formatPrice } from '@/utils/globalFunctions'
@@ -607,7 +612,8 @@ export default {
     UserScatterDialog,
     MaskCard,
     MarketUserScatter,
-    CollectInfo
+    CollectInfo,
+    ReportDownloadDialog
   },
   props: {
     rid: {
@@ -899,7 +905,13 @@ export default {
           bg: getImgForVipUpgrade('8', true)
         }
       },
-      inWorkDeskTop: false
+      inWorkDeskTop: false,
+      // 报告下载弹窗
+      reportDownloadDialog: {
+        visible: false,
+        power: false,
+        totalList: []
+      }
     }
   },
   computed: {
@@ -957,6 +969,9 @@ export default {
     this.sendRequest()
   },
   mounted() {
+    if(this.info?.power?.indexOf(26) > -1) {
+      this.reportDownloadDialog.power = true
+    }
     this.inWorkDeskTop = this.isInWorkDeskTop()
     this.$nextTick(() => {
       // 在工作桌面
@@ -1284,6 +1299,7 @@ export default {
       const totalCount = list.reduce((total, item) => item.count + total, 0)
 
       if (totalCount) {
+        this.reportDownloadDialog.totalList = list
         this.sections.market.overview = list
         this.showDimensionsOptions('market', 'market-overview')
       }
@@ -2418,6 +2434,10 @@ export default {
     },
     openLeaveSourceDialog(source) {
       this.$refs.collectRef.noCallApiFn(source)
+    },
+    // 下载报告
+    downloadReport () {
+      this.reportDownloadDialog.visible = true
     }
   }
 }

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

@@ -0,0 +1,281 @@
+<template>
+  <el-dialog
+    title="市场分析报告下载"
+    :visible.sync="options.visible"
+    :close-on-click-modal="false"
+
+    lock-scroll
+    center
+    top="15%"
+    custom-class="self-report-download-dialog"
+    width="1000px"
+  >
+    <div class="content">
+      <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="options.power">
+        <span class="box-label">市场概况：</span>
+        <span v-if="totalList[0]">项目总数：<strong>{{ totalList[0].count + totalList[0].unit }}</strong></span>
+        <span  v-if="totalList[1]">项目总金额：<strong>{{ totalList[1].count + totalList[1].unit }}</strong></span>
+        <span  v-if="totalList[3]">中标单位数：<strong>{{ totalList[3].count + totalList[3].unit }}</strong></span>
+        <span  v-if="totalList[4]">采购单位数：<strong>{{ totalList[4].count + totalList[4].unit }}</strong></span>
+        <span class="highlight view-more" @click="viewMore">查看更多</span>
+      </section>
+      <section class="download-notice-box">
+        <p class="box-label">下载须知：</p>
+        <div class="box-desc">
+          <p>1.“项目明细”按照成交时间排序，报告最多展示前100条，如需导出全部，<em class="highlight t-ud">请联系客服</em>；</p>
+          <p>2. 该报告数据来自于公开数据整理，不代表任何权威观点，仅供参考；</p>
+          <p>3. 请在有效期内使用下载权限，逾期清零；</p>
+          <p>4. 如有任何疑问,您可拨打<em class="highlight">400-108-667</em>联系客服或点击<em class="highlight t-ud" @click="openCustomer">联系在线客服</em>。</p>
+        </div>
+      </section>
+    </div>
+    <div slot="footer">
+      <div class="footer-con">
+        <span class="residue">市场分析定制报告下载余额：1份</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" type="primary" @click="downloadHandle">立即下载</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { Dialog, Button } from 'element-ui'
+import { debounce } from '@/utils/'
+
+export default {
+  components: {
+    [Dialog.name]: Dialog,
+    [Button.name]: Button
+  },
+  props: {
+    options: {
+      type: Object,
+      default: () => {
+        return {
+          visible: false,
+          power: false,
+          totalList: []
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      // 下载余额
+      residueCount: 0
+    }
+  },
+  computed: {
+    totalList () {
+      return this.options.totalList
+    }
+  },
+  created() {
+  },
+  methods: {
+    // 获取下载余额
+    getResidueCount () {
+
+    },
+    // 查看报告样例
+    viewExample (fileUrl) {
+      // TODO 需要服务端提供链接
+      window.open('https://www.kdocs.cn/l/ctXdN3LVDdjP', '_blank')
+    },
+    // 立即下载
+    downloadHandle: debounce(function (fileUrl) {
+      this.options.visible = false
+      this.$confirm('您可前往“资产-报告下载记录”查看详情。', '报告下载成功', {
+        confirmButtonText: '返回',
+        cancelButtonText: '查看下载记录',
+        center: true,
+        showClose: false,
+        customClass: 'report-download-message-tip',
+      }).then(() => {
+
+      }).catch(() => {
+
+      })
+    }, 300),
+    // 查看更多
+    viewMore () {
+      this.options.visible = false
+    },
+    // 去充值
+    goRecharge () {
+
+    },
+    // 联系客服
+    openCustomer() {
+      this.options.visible = false
+      this.contactCustomer(this)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .report-download-message-tip{
+    border-radius: 8px;
+    width:380px;
+    &.el-message-box--center{
+      padding-bottom: 32px;
+    }
+    .el-message-box__header{
+      padding: 32px 32px 20px 32px;
+    }
+    .el-message-box--center .el-message-box__header {
+      padding-top: 32px;
+    }
+    .el-message-box__message{
+      color:#686868;
+    }
+    .el-message-box__content{
+      padding:0 32px 32px;
+    }
+    .el-message-box__btns {
+      padding: 0 32px;
+      display: flex;
+      justify-content: space-between;
+      flex-direction:row-reverse;
+      .el-button{
+        width:132px;
+        height:36px;
+        border-radius: 6px;
+        font-size:16px;
+      }
+    }
+  }
+</style>
+<style lang="scss" scoped>
+  .self-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: 6px 35px;
+        font-size:16px;
+        line-height: 24px;
+      }
+    }
+    .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 100%, #F7F9FA 0%);
+      border-radius: 8px;
+      border: 1px solid rgba(0,0,0, 0.05);
+    }
+    .highlight {
+      color: $color_main;
+      cursor: pointer;
+    }
+    .t-ud {
+      text-decoration: underline;
+    }
+    .el-dialog__footer{
+      .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 {
+      padding: 0 20px 32px 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>