Merge branch 'yb_back5.8.1'

package.json

@@ -18,6 +18,7 @@
     "normalize.css": "^8.0.1",
     "vconsole": "^3.14.6",
     "vue": "^3.2.25",
+    "vue-pdf-embed": "^1.1.6",
     "vue-router": "^4.0.12",
     "vuedraggable": "^4.1.0",
     "vuex": "^4.0.2"

src/api/report.js

@@ -258,4 +258,13 @@ export const apiReportClassifyMenuList=params=>{
  */
 export const apiReportChapterAudioSet=params=>{
     return post('/report/report_chapter/set',params)
+}
+
+/**
+ * 获取PDF详情
+ * @param pdf_id 
+ * @returns 
+ */
+ export const apiGetPDFDetail = params=>{
+    return get('/report/pdf/detail',params)
 }

src/router/index.js

@@ -183,6 +183,17 @@ const routes=[
           hasBack:true
         },
       },
+      {
+        path: "previewPDF",
+        name: "PreviewPDF",
+        component: () => import("@/views/report/PreviewPDF.vue"),
+        meta: {
+          title: "预览报告",
+          keepAlive:true,
+          isRoot:false,
+          hasBack:true
+        },
+      }
     ]
   },
   {

src/views/report/PreviewPDF.vue

@@ -0,0 +1,146 @@
+<script setup>
+import { useRoute,useRouter } from 'vue-router';
+import { ref,reactive, onMounted} from "vue";
+import VuePdfEmbed from "vue-pdf-embed";
+import { ElMessage,ElMessageBox, ElLoading } from 'element-plus';
+import {apiGetPDFDetail} from '@/api/report.js';
+import {apiUserInfo} from '@/api/user.js';
+import {useStore} from "vuex"
+
+const store = useStore()
+const route = useRoute();
+const router = useRouter()
+let LOADING = null
+const pdfState = reactive({
+    pdf_id:Number(route.query.pdf_id)||0,
+    pdf_url:'',
+    pdf_name:''
+})
+let showHint = ref(true)
+let hasRight = ref(false)
+let hintText = ref('')
+const loadingFailed = ()=>{
+    LOADING.close()
+    ElMessage.error('加载PDF失败!')
+    showHint.value = true
+}
+const loadedPDF=()=>{
+    LOADING.close()
+    showHint.value = false
+    hintText.value = ''
+}
+const getPDFDetail = (pdf_id)=>{
+    if(!pdf_id){
+        ElMessage.error('未找到PDF')
+        hintText.value="获取PDF失败"
+        LOADING&&LOADING.close()
+        return
+    }
+    apiGetPDFDetail({pdf_id}).then(res=>{
+        if(res.code!==200) return 
+        pdfState.pdf_url = res.data.pdf_url
+        pdfState.pdf_name = res.data.pdf_name
+        handleDataToXcx()
+    })
+}
+// 向小程序发送数据
+const handleDataToXcx=()=>{
+  const postData={
+    path:'/pages-report/previewPDF',
+    params:{
+        pdf_id:Number(route.query.pdf_id)||0,
+    },
+    title:pdfState.pdf_name||'',
+    shareImg:'https://hzstatic.hzinsights.com/static/images/yb/report_pdf_share_cover.png'
+  }
+  wx.miniProgram.postMessage({ data: postData })
+}
+
+//检查权限
+const checkRight = async()=>{
+    const res = await apiUserInfo()
+    if(res.code!==200) return 
+    if(['试用','正式','永续'].includes(res.data.status)){
+        hasRight.value = true
+    }else{
+        LOADING&&LOADING.close()
+        hasRight.value = false
+    }
+}
+//申请
+const handleApply = ()=>{
+    //判断用户是否登录
+    if(store.state.userInfo.is_bind===0){
+        ElMessageBox({
+            title:`温馨提示`,
+            message:'为了优化您的用户体验，<br>请登录后查看更多信息！',
+            dangerouslyUseHTMLString: true,
+            center: true,
+            confirmButtonText:'去登录',
+            confirmButtonClass:'self-elmessage-confirm-btn',
+            showCancelButton:true,
+            cancelButtonText:'取消',
+            cancelButtonClass:'self-elmessage-cancel-btn'
+        }).then(res=>{
+            wx.miniProgram.reLaunch({url:'/pages/login'})
+        }).catch(()=>{})
+        return
+    }
+    router.push({
+        path:'/apply/permission',
+        query:{
+            source:4,
+            fromPage:'PDF报告'
+        }
+    })
+
+}
+onMounted(async ()=>{
+    LOADING = ElLoading.service({
+        target:'.preview-pdf-wrap',
+        text:'正在加载PDF'
+    })
+    await checkRight()
+    getPDFDetail(Number(route.query.pdf_id))
+    //handleDataToXcx()
+})
+</script>
+
+<template>
+    <div class="preview-pdf-wrap">
+        <!-- 无权限 -->
+        <template v-if="!hasRight">
+            <div class="no-data-wrap">
+                <img src="@/assets/pricedriven/nodata.png" alt="">
+                <p>您暂无权限查看报告</p>
+                <p>若想查看请申请开通</p>
+                <span class="global-main-btn btn" @click="handleApply">立即申请</span>
+            </div>
+        </template>
+        <template v-else-if="pdfState.pdf_url.length">
+            <vue-pdf-embed :source="pdfState.pdf_url" @loading-failed="loadingFailed" @loaded="loadedPDF"/>
+            <p v-if="showHint" class="hint">加载PDF失败!</p>
+        </template>
+        <template v-else>
+            <p class="hint">{{hintText}}</p>
+        </template>
+        
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.preview-pdf-wrap{
+    .hint{
+        margin-top: 100px;
+        text-align: center;
+        color:#999;
+    }
+    .no-data-wrap{
+        text-align: center;
+        .btn{
+            display: inline-block;
+            width:218px;
+        }
+    }
+}
+</style>