Browse Source

Merge branch 'yb_back5.8.1'

cxmo 1 year ago
parent
commit
9a55b0a2d4
3 changed files with 127 additions and 0 deletions
  1. 1 0
      package.json
  2. 5 0
      src/router/hzyb/index.js
  3. 121 0
      src/views/hzyb/report/PreviewPDF.vue

+ 1 - 0
package.json

@@ -20,6 +20,7 @@
     "normalize.css": "^8.0.1",
     "vant": "^3.3.4",
     "vue": "^3.2.16",
+    "vue-pdf-embed": "^1.1.6",
     "vue-router": "^4.0.12",
     "vuex": "^4.0.2"
   },

+ 5 - 0
src/router/hzyb/index.js

@@ -61,6 +61,11 @@ export const hzybRoutes=[
                 name:"hzybChapterDetail",
                 component: () => import("@/views/hzyb/report/ChapterDetail.vue"),
             },
+            {
+                path:"previewpdf",
+                name:"hzybPreviewPDF",
+                component:() => import("@/views/hzyb/report/PreviewPDF.vue")
+            }
         ]
     }
 ]

+ 121 - 0
src/views/hzyb/report/PreviewPDF.vue

@@ -0,0 +1,121 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import { ref,onMounted } from "vue";
+import VuePdfEmbed from "vue-pdf-embed";
+import {Toast,Dialog} from 'vant';
+import {apiUserInfo} from '@/api/hzyb/user'
+const route = useRoute();
+localStorage.setItem('hzyb-token',route.query.token)
+document.title='PDF报告'
+const pdfSrc = ref('')
+let LOADING = null
+let showHint = ref(false)
+let hasRight = ref(true)
+let userInfo = ref({})
+let hintText = ref('')
+
+
+const loadingFailed = ()=>{
+    LOADING.clear()
+    Toast("加载PDF失败!")
+    showHint.value = true
+}
+const loadedPDF = ()=>{
+    LOADING.clear()
+    showHint.value = false
+    hintText.value = ''
+}
+
+const checkRight = async()=>{
+    const res = await apiUserInfo({Authorization: localStorage.getItem('hzyb-token')})
+    if(res.code!==200) return 
+    userInfo.value = res.data
+    if(['试用','正式','永续'].includes(res.data.status)){
+        hasRight.value = true
+        LOADING = Toast.loading({
+            message: "正在加载PDF",
+            duration: 0,
+            forbidClick: true,
+        });
+        pdfSrc.value = route.query.pdfSrc ||''
+        if(!pdfSrc.value.length){
+            hintText.value = '获取PDF失败'
+        }
+    }else{
+        LOADING&&LOADING.clear()
+        hasRight.value = false
+    }
+}
+
+const handleGoApply = ()=>{
+    if(userInfo.value.is_bind===0){
+        Dialog.confirm({
+            title:'温馨提示',
+            message:'为了优化您的用户体验,\n 请登录后查看更多信息!',
+            confirmButtonText:'去登录',
+            confirmButtonColor:'#E6B77D',
+            cancelButtonColor:'#666'
+        }).then(res=>{
+            wx.miniProgram.reLaunch({url:'/pages/login'})
+        })
+        return
+    }
+    wx.miniProgram.redirectTo({
+        url:"/pages-applyPermission/applyPermission?source=4&from_page=PDF报告"
+    })
+}
+
+onMounted(()=>{
+    checkRight()
+})
+</script>
+
+<template>
+    <div class="preview-pdf-wrap">
+        <!-- 无权限 -->
+        <div class="no-auth-box" v-if="!hasRight">
+            <img class="img" src="https://hzstatic.hzinsights.com/static/icon/hzyb/activity_no_auth.png" mode="widthFix" />
+            <div class="apply-box">
+                <div>您暂无权限查看报告,若想查看请申请开通</div>
+                <div class="btn" @click="handleGoApply">立即申请</div>
+            </div>
+        </div>
+        <template v-else-if="pdfSrc.length">
+            <vue-pdf-embed :source="pdfSrc" @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-auth-box{
+        text-align: center;
+        font-size: 32px;
+        color: #E3B377;
+        img{
+            width: 100%;
+            margin-bottom: 50px;
+        }
+        .btn{
+            width: 90%;
+            margin-left: auto;
+            margin-right: auto;
+            line-height: 80px;
+            background-color: #E6B77D;
+            border-radius: 4px;
+            color: #fff;
+            margin-top: 100px;
+            display: block;
+        }
+    }
+}
+</style>