yb3.1

src/views/hzyb/chart/Detail.vue

@@ -1,6 +1,7 @@
 <script setup>
 import chartBox from './component/chartBox.vue'
 import noAuth from './component/noAuth.vue'
+import sharePoster from '../components/SharePoster.vue'
 import { Popup, Toast,Picker } from 'vant';
 import {ref,onMounted, reactive, watch} from 'vue'
 import {useRoute, useRouter,onBeforeRouteUpdate} from 'vue-router'
@@ -1031,10 +1032,12 @@ const pageTouchmove=(e)=>{
                 </div>
             </div>
         </Popup>
+
+        <!-- 分享海报 -->
+        <share-poster :style="{bottom:'100px'}" :shareData="{type:'chartDetail'}"></share-poster>
     </div>
+    <!-- 无权限 -->
     <noAuth v-if="noauth" :data="noAuthData"></noAuth>
-    
-    
 
 </template>
 

src/views/hzyb/components/SharePoster.vue

@@ -0,0 +1,97 @@
+<script setup>
+import {ref} from 'vue'
+const props=defineProps({
+    style:Object,
+    shareData:Object
+})
+
+let show=ref(false)
+let showPoster=ref(false)
+let posterImg=ref('')
+
+const handleCreatePoster=()=>{
+    show.value=true
+    setTimeout(() => {
+        show.value=false
+        posterImg.value='http://hongze.oss-cn-shanghai.aliyuncs.com/static/images/htm2img/e15chyrTqpKDsYPvPRaA77yzIfO6.png'
+        showPoster.value=true
+    }, 1500);
+}
+
+</script>
+
+
+<template>
+    <div class="share-poster-wrap">
+        <img @click="handleCreatePoster" :style="props.style" class="share-icon" src="@/assets/hzyb/share-poster-icon.png"/>
+
+        <view class="poster-mask" v-if="show||showPoster" @click="showPoster=false"></view>
+        <view class="loading-box" v-if="show">
+            <img class="load-img" src="@/assets/hzyb/loading.png"/>
+            <view>海报生成中...</view>
+        </view>
+        <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;
+    }
+    .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: 90vw;
+        display: block;
+        position: fixed;
+        left: 50%;
+        top: 50%;
+        z-index: 999;
+        transform: translate(-50%,-50%);
+        border-radius: 16px;
+    }
+}
+</style>

src/views/hzyb/report/ChapterDetail.vue

@@ -86,6 +86,9 @@
             </div>
         </div>
     </van-popup>
+
+    <!-- 分享海报 -->
+    <SharePoster :style="{bottom:'100px'}" :shareData="{type:'reportDetail'}" v-if="info.auth_ok"></SharePoster>
   </div>
 </van-pull-refresh>
 </template>
@@ -100,6 +103,7 @@ import {apiChapterDetail,apiChapterTickerValue} from '@/api/hzyb/report'
 import {apiApplyPermission} from '@/api/hzyb/user'
 import {Popup,Image as VanImage,PullRefresh,Col, Row} from 'vant'
 import AudioBox from './components/AudioBox.vue'
+import SharePoster from '../components/SharePoster.vue'
 export default {
   components:{
     [Popup.name]:Popup,
@@ -108,7 +112,8 @@ export default {
     [Col.name]:Col,
     [Row.name]:Row,
     [PullRefresh.name]:PullRefresh,
-    AudioBox
+    AudioBox,
+    SharePoster
   },
   data() {
     return {

src/views/hzyb/report/Detail.vue

@@ -79,6 +79,9 @@
 
             <!-- 返回顶部 -->
             <img v-if="showToTop&&info.auth_ok" @click="handleBackTop" class="back-top-img" src="@/assets/hzyb/report/back-top.png" mode="aspectFill"/>
+
+            <!-- 分享海报 -->
+            <SharePoster :style="{bottom:'100px'}" :shareData="{type:'reportDetail'}" v-if="info.auth_ok"></SharePoster>
         </div>
 
         <!-- 免责声明 -->
@@ -104,6 +107,7 @@
             </div>
         </van-popup>
     </div>
+    
 </van-pull-refresh>
 </template>
 
@@ -117,12 +121,14 @@ import {apiReportDetail} from '@/api/hzyb/report'
 import {apiApplyPermission} from '@/api/hzyb/user'
 import {Popup,Image as VanImage,PullRefresh} from 'vant'
 import AudioBox from './components/AudioBox.vue'
+import SharePoster from '../components/SharePoster.vue'
 export default {
     components:{
         [Popup.name]:Popup,
         [VanImage.name]:VanImage,
         [PullRefresh.name]:PullRefresh,
-        AudioBox
+        AudioBox,
+        SharePoster
     },
     data () {
         return {