测试生成海报

src/api/common.js

@@ -54,4 +54,19 @@ export const apiGetEmailCode=params=>{
  */
 export const apiUserLogin=params=>{
 	return post('/user/login',params)
+}
+
+/**
+ * 获取海报
+ * @param code_page 分享海报小程序页面地址
+ * @param code_scene 小程序页面参数
+ * @param source 来源 activity_detail(活动详情) activity_list(活动列表)
+ *                    special_column_list(专栏列表) special_column_detail(专栏详情)
+ *                    report_list(报告列表) report_detail(报告详情)
+ *                    chart_list(图库列表) chart_detail(图库详情)
+ * @param version 
+ * @param pars 生成海报需要的页面参数
+ */
+ export const apiGetPoster=params=>{
+    return post('/public/get_share_poster',{version:'3.0',...params})
 }

src/components/SharePoster.vue

@@ -0,0 +1,113 @@
+<script setup>
+import {ref} from 'vue'
+import {apiGetPoster} from '@/api/common'
+
+const props=defineProps({
+    style:Object,
+    shareData:Object
+})
+
+let show=ref(false)
+let showPoster=ref(false)
+let posterImg=ref('')
+
+const handleCreatePoster=async ()=>{
+    show.value=true
+    const res=await apiGetPoster({
+        code_page:props.shareData.code_page,
+        code_scene:props.shareData.code_scene,
+        source:props.shareData.type,
+        pars:JSON.stringify(props.shareData.data)
+    })
+    if(res.code==200){
+        posterImg.value=res.data
+        show.value=false
+        showPoster.value=true
+    }else{
+        show.value=false
+    }
+}
+
+</script>
+
+
+<template>
+    <div class="share-poster-wrap" @touchmove.prevent>
+        <img @click="handleCreatePoster" :style="props.style" class="share-icon" src="@/assets/hzyb/share-poster-icon.png"/>
+
+        <div class="poster-mask" v-if="show||showPoster" @click="showPoster=false" @touchmove.prevent></div>
+        <div class="loading-box" v-if="show">
+            <img class="load-img" src="@/assets/hzyb/loading.png"/>
+            <div>海报生成中...</div>
+        </div>
+        <img v-if="showPoster" class="poster-img" :src="posterImg" show-menu-by-longpress />
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.share-poster-wrap{
+    .share-icon{
+        position: fixed;
+        bottom: 100px;
+        right: 34px;
+        z-index: 50;
+        width: 76px;
+        height: 76px;
+    }
+    .chart-icon{
+        float: right;
+        width: 40px;
+        height: 40px;
+        margin-left: 30px;
+    }
+    .poster-mask{
+        position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.4);
+        z-index: 998;
+    }
+    .loading-box{
+        background-color: #fff;
+        position: fixed;
+        left: 50%;
+        top: 50%;
+        z-index: 999;
+        transform: translate(-50%,-50%);
+        width: 417px;
+        height: 261px;
+        text-align: center;
+        padding-top: 80px;
+        font-size: 32px;
+        font-weight: bold;
+        .load-img{
+            display: block;
+            margin-left: auto;
+            margin-right: auto;
+            width: 91px;
+            height: 91px;
+            animation: circle 1s linear infinite;
+        }
+        @keyframes circle {
+            0%{
+                transform: rotateZ(0);
+            }
+            100%{
+                transform: rotateZ(360deg);
+            }
+        }
+    }
+    .poster-img{
+        width: 400px;
+        display: block;
+        position: fixed;
+        left: 50%;
+        top: 50%;
+        z-index: 999;
+        transform: translate(-50%,-50%);
+        border-radius: 16px;
+    }
+}
+</style>

src/views/report/Detail.vue

@@ -1,9 +1,10 @@
 <script setup>
-import {onMounted, onUpdated, ref} from 'vue'
+import {onMounted, onUpdated, ref,computed} from 'vue'
 import { ElMessageBox } from 'element-plus'
 import moment from 'moment';
 import 'moment/dist/locale/zh-cn'
 import AudioBox from './components/AudioBox.vue'
+import SharePoster from '@/components/SharePoster.vue'
 import {apiReportDetail,apiReportMoreRecmd,apiReportDetailBanner} from '@/api/report'
 import {apiGetWechatQRCode} from '@/api/common'
 import { useRoute , onBeforeRouteUpdate} from 'vue-router';
@@ -250,6 +251,18 @@ getQRCodeImg()
 
 let showDisclaimers=ref(false)//显示免责声明
 
+const code_scene=computed(()=>{
+    return JSON.stringify({reportId:reportId.value})
+})
+
+const posterParams=computed(()=>{
+    return {
+        report_type:info.value.report_info.classify_name_first,
+        report_title:`【第${info.value.report_info.stage}期 | ${info.value.report_info.classify_name_second}】${info.value.report_info.title}`,
+        report_abstract:info.value.report_info.content
+    }
+})
+
 </script>
 
 <template>
@@ -391,6 +404,19 @@ let showDisclaimers=ref(false)//显示免责声明
             <div style="margin-bottom:10px">4、在任何情况下，本公司不对客户/接受人/接受机构因使用报告中内容所引致的一切损失负责任，客户/接受人/接受机构需自行承担全部风险。</div>
         </div>
     </el-dialog>
+
+    <!-- 生成海报 -->
+    <Teleport to="body">
+        <SharePoster  
+            :shareData="{
+                type:'report_detail',
+                code_page:'pages-report/reportDetail',
+                code_scene:code_scene,
+                data:posterParams
+            }"
+            v-if="info&&info.auth_ok"
+        ></SharePoster>
+    </Teleport>
 </template>
 
 <style lang="scss" scoped>