完成语音播报生成海报

components/sharePoster/sharePoster.vue

@@ -1,8 +1,11 @@
 <template>
     <view class="share-poster-wrap" :catchtouchmove="false">
-        <image @click="handleCreatePoster" :style="style" class="share-icon" src="@/static/share-poster-icon.png" mode="aspectFill"/>
+        <div v-if="showSlot" @click.stop="handleCreatePoster">
+            <slot></slot>
+        </div>
+        <image @click.stop="handleCreatePoster" :style="style" class="share-icon" src="@/static/share-poster-icon.png" mode="aspectFill" v-else/>
 
-        <view class="poster-mask" v-if="show||showPoster" @click="showPoster=false"></view>
+        <view class="poster-mask" v-if="show||showPoster" @click.stop="showPoster=false"></view>
         <view class="loading-box" v-if="show">
             <image class="load-img" src="../../static/loading.png" mode="aspectFill" />
             <view>海报生成中...</view>
@@ -16,10 +19,13 @@ import {apiGetPoster} from '@/api/common'
 export default {
     // shareData.type 分享页面: 
     //activity_detail(活动详情) activity_list(活动列表) special_column_list(专栏列表) special_column_detail(专栏详情) 
-    //report_list(报告列表) report_detail(报告详情) chart_list(图库列表) chart_detail(图库详情)
+    //report_list(报告列表) report_detail(报告详情) chart_list(图库列表) chart_detail(图库详情) voice_detail(语音详情)
     props:{
         style:null,
         shareData:null,
+        showSlot:{//是否用插槽显示
+            default:false
+        }
     },
     data () {
         return {

pages-voice/voiceDetail.vue

@@ -22,6 +22,20 @@
         </view>
         <image class="del-btn" src="@/static/voice/del.png" mode="widthFix" @click="handleDel" v-if="info.IsAuthor"/>
         <image class="publish-btn" src="@/static/voice/publish.png" mode="widthFix" @click="handleSendMsg" v-if="info.CouldSendMsg"/>
+        <sharePoster 
+            :showSlot="true"
+            :shareData="{
+                type:'voice_detail',
+                code_page:'pages-voice/voiceDetail',
+                code_scene:JSON.stringify({voiceId:info.BroadcastId}),
+                data:{
+                    title:info.BroadcastName,
+                    img:info.ImgUrl
+                }
+            }"
+        >
+            <image style="width:34rpx;height:34rpx;float: right;" src="@/static/voice/creat-poster-icon.png" mode="aspectFill" />
+        </sharePoster>
 
         <!-- 图片部分 -->
         <view class="imgs-box">
@@ -61,12 +75,14 @@ import {apiGetSceneToParams} from '@/api/common'
 import noAuth from '@/pages/voice/components/noAuth.vue'
 import audioBox from '@/components/audioBox/audioBox.vue'
 import dragButton from '@/components/dragButton/dragButton.vue'
+import sharePoster from '@/components/sharePoster/sharePoster.vue'
 const moment=require('@/utils/moment-with-locales.min')
 export default {
     components:{
         noAuth,
         audioBox,
-        audioBox
+        dragButton,
+        sharePoster
     },
     computed:{
         showAudioPop(){//是否显示音频弹窗
@@ -305,6 +321,7 @@ export default {
             float: right;
             width: 36rpx;
             height: 36rpx;
+            margin-left: 40rpx;
         }
         .imgs-box{
             margin-top: 120rpx;

pages/voice/voice.vue

@@ -44,7 +44,12 @@
                 <view class="opt-box">
                     <image style="width:34rpx;height:34rpx" src="@/static/voice/publish.png" mode="widthFix" @click.stop="handleSendMsgItem(item)" v-if="item.CouldSendMsg"/>
                     <image style="width:34rpx;height:34rpx" src="@/static/voice/del.png" mode="widthFix" v-if="item.IsAuthor" @click.stop="handleDelItem(item)" />
-                    <image style="width:32rpx;height:32rpx" src="@/static/voice/creat-poster-icon.png" mode="aspectFill" />
+                    <sharePoster 
+                        :showSlot="true"
+                        :shareData="getItemShareData(item)"
+                    >
+                        <image style="width:32rpx;height:32rpx" src="@/static/voice/creat-poster-icon.png" mode="aspectFill" />
+                    </sharePoster>
                     <button 
                         class="share-btn" 
                         open-type="share" 
@@ -113,12 +118,14 @@ import {apiGetSceneToParams} from '@/api/common'
 import noAuth from './components/noAuth.vue'
 import audioBox from '@/components/audioBox/audioBox.vue'
 import dragButton from '@/components/dragButton/dragButton.vue'
+import sharePoster from '@/components/sharePoster/sharePoster.vue'
 const moment=require('@/utils/moment-with-locales.min')
 export default {
     components:{
         noAuth,
         audioBox,
-        dragButton
+        dragButton,
+        sharePoster
     },
     filters:{
         formatTime(e){
@@ -422,6 +429,19 @@ export default {
             if(res.code===200){
                 console.log('上报音频播放记录');
             }
+        },
+
+        //语音详情生成海报参数
+        getItemShareData(item){
+            return {
+                type:'voice_detail',
+                code_page:'pages-voice/voiceDetail',
+                code_scene:JSON.stringify({voiceId:item.BroadcastId}),
+                data:{
+                    title:item.BroadcastName,
+                    img:item.ImgUrl
+                }
+            }
         }
     },
 }