feat:新增底部报告下载组件

apps/bigmember_pc/src/components/download-report/DownloadBottomTip.vue

@@ -0,0 +1,112 @@
+<template>
+  <el-collapse-transition>
+    <div class="download-bottom-tip" v-show="showTip">
+      <template v-if="hasPower">
+        <span>如您对以上分析结果满意，点击</span>
+        <span class="download-button" @click="downloadReport"><img src="@/assets/images/icon/download.png" alt="">
+          <slot name="download-text">
+            下载报告
+          </slot>
+        </span>
+      </template>
+      <template v-else>
+        <span>如需查看详细{{typeText}}，您可选择</span>
+        <span class="free-experience" @click="goFreeExperience">
+          <slot name="free-text">申请免费体验</slot>
+        </span>或
+        <span class="download-button" @click="downloadReport"><img src="@/assets/images/icon/download.png" alt="">
+          <slot name="download-text">
+            下载报告
+          </slot>
+        </span>
+      </template>
+      <span class="iconfont icon-close" @click="hiddenTip"></span>
+    </div>
+  </el-collapse-transition>
+</template>
+
+<script>
+export default {
+  props: {
+    typeText:{
+      type: String,
+      default: '报告'
+    },
+    downloadText: {
+      type: String,
+      default: '下载报告'
+    },
+    hasPower: {
+      type: Boolean,
+      default: false
+    },
+    showClose: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      showTip: true
+    }
+  },
+  methods: {
+    hiddenTip () {
+      this.showTip = !this.showTip
+    },
+    goFreeExperience() {
+      this.$emit('goFreeExperience')
+    },
+    downloadReport () {
+      this.$emit('downloadReport')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.download-bottom-tip{
+  position: fixed;
+  bottom: 0;
+  left:0;
+  width:100%;
+  height:68px;
+  text-align: center;
+  background: #fff;
+  box-shadow: 0 -4px 8px rgba(0,0,0, 0.05);
+  margin-top: 16px;
+  color: #888;
+  font-size:14px;
+  line-height:22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  .free-experience {
+    color: $color_main;
+    margin:0 9px;
+    font-size:14px;
+    cursor: pointer;
+  }
+  .download-button {
+    color: $color_main;
+    margin-left:9px;
+    font-size:13px;
+    cursor: pointer;
+    img{
+      width:20px;
+      height:20px;
+      vertical-align: text-bottom;
+    }
+  }
+  .icon-close{
+    cursor: pointer;
+    position: absolute;
+    color: #cecece;
+    right:20px;
+    &:hover{
+      color: $color_main;
+    }
+  }
+}
+</style>

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

@@ -545,18 +545,15 @@
         />
       </el-tab-pane>
     </el-tabs>
-    <div class="download-bottom-tip" v-if="bottomDownloadShow">
-      <template v-if="isConf26">
-        <span>如您对以上分析结果满意，点击</span>
-        <span class="download-button" @click="downloadReport"><img src="@/assets/images/icon/download.png" alt="">下载报告</span>
-      </template>
-     <template v-else>
-       <span>如需查看详细市场分析报告，您可选择</span>
-       <span class="free-experience" @click="goFreeExperience">申请免费体验</span>或
-       <span class="download-button" @click="downloadReport"><img src="@/assets/images/icon/download.png" alt="">下载报告</span>
-     </template>
-
-    </div>
+    <!--页面底部下载提示-->
+    <download-bottom-tip
+      v-if="bottomDownloadShow"
+      typeText="业主分析报告"
+      :hasPower="isConf26"
+      @goFreeExperience="goFreeExperience"
+      @downloadReport="downloadReport"
+    >
+    </download-bottom-tip>
     <!-- 更多项目信息 -->
     <user-scatter-dialog
       v-if="userScatterDialog.visible"
@@ -586,6 +583,7 @@ import { mapGetters, mapState } from 'vuex'
 import { moneyUnit, dateFormatter, formatPrice } from '@/utils/globalFunctions'
 import { workDeskTop } from '@/utils/mixins/in-workdesktop'
 import ProjectDetailsList from './components/ProjectDetailsList.vue'
+import DownloadBottomTip from '@/components/download-report/DownloadBottomTip.vue'
 import { getAssetsFile } from '@/utils'
 function getImgForVipUpgrade(name, bg = false, suffix = '.png') {
   return getAssetsFile('report/' + (bg ? 'bg/' : '') + name + suffix)
@@ -613,7 +611,8 @@ export default {
     UserScatterDialog,
     MaskCard,
     MarketUserScatter,
-    CollectInfo
+    CollectInfo,
+    DownloadBottomTip
   },
   props: {
     rid: {
@@ -2799,39 +2798,4 @@ i.el-icon-caret-bottom {
   }
 }
 
-.download-bottom-tip{
-  position: fixed;
-  bottom: 0;
-  left:0;
-  width:100%;
-  height:68px;
-  text-align: center;
-  background: #fff;
-  box-shadow: 0 -4px 8px rgba(0,0,0, 0.05);
-  margin-top: 16px;
-  color: #888;
-  font-size:14px;
-  line-height:22px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  .free-experience {
-    color: $color_main;
-    margin:0 9px;
-    font-size:14px;
-    cursor: pointer;
-  }
-  .download-button {
-    color: $color_main;
-    margin-left:9px;
-    font-size:13px;
-    cursor: pointer;
-    img{
-      width:20px;
-      height:20px;
-      vertical-align: text-bottom;
-    }
-  }
-}
-
 </style>

apps/bigmember_pc/src/views/portrayal/UnitPortrayal.vue

@@ -477,6 +477,7 @@
         :section2List="buyerList"
       ></AsideNewscards>
     </template>
+    <!--下载报告弹窗-->
     <report-download-dialog
       v-if="reportDownloadConfig.visible"
       :options="reportDownloadConfig"
@@ -487,13 +488,21 @@
       :canSelect="canSelect"
       @scrollChange="handleClick('3')"
     ></report-download-dialog>
+    <!--页面底部下载提示-->
     <download-bottom-tip
+      v-if="activeName === '3'"
       typeText="业主分析报告"
-      downloadText="下载业主分析报告"
       :hasPower="!this.noBuyerAuth"
-      @goFreeExperience="goFreeExperience"
+      @goFreeExperience="goVipBuy"
       @downloadReport="downloadReport"
-    ></download-bottom-tip>
+    >
+      <template #download-text>
+        下载业主分析报告
+      </template>
+      <template #free-text>
+       开通在线查看权限
+      </template>
+    </download-bottom-tip>
   </Layout>
 </template>
 <script>
@@ -1648,23 +1657,9 @@ export default {
       this.reportDownloadConfig.hasPower = !this.noBuyerAuth
       this.reportDownloadConfig.visible = true
     },
-    // 申请免费体验
-    goFreeExperience () {
-      const _this = this
-      if(this.entniche && this.bigmember) {
-        this.$confirm('您可联系客服，申请体验查看完整报告内容', '申请免费体验', {
-          confirmButtonText: '联系客服',
-          cancelButtonText: '我再想想',
-          center: true,
-          showClose: false,
-          customClass: 'download-message-tip',
-        }).then(() => {
-          _this.contactCustomer(_this)
-        }).catch(() => {})
-      } else {
-        const source = ''
-        this.$refs.collectRef.noCallApiFn(source)
-      }
+    // 开通超级订阅
+    goVipBuy () {
+      window.open('/swordfish/page_big_pc/free/svip/buy?type=buy')
     }
   }
 }
@@ -1892,6 +1887,15 @@ export default {
     transform: translateX(-50%);
     z-index: 99;
   }
+  ::v-deep {
+    .download-bottom-tip {
+      width: calc(1200px - 280px);
+      left: 50%;
+      margin-left: -140px;
+      transform: translateX(-50%);
+      z-index: 100;
+    }
+  }
 
   .empty-container.mtb60 {
     background: #fff;