hongze_yb_xcx/components/sharePoster/sharePoster.vue

<template>
    <view class="share-poster-wrap" :catchtouchmove="false">
        <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.stop="showPoster=false"></view>
        <view class="loading-box" v-if="show">
            <image class="load-img" src="../../static/loading.png" mode="aspectFill" />
            <view>海报生成中...</view>
        </view>
        <image v-if="showPoster" class="poster-img" :src="posterImg" mode="widthFix" show-menu-by-longpress />
  </view>
</template>

<script>
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(图库详情) voice_detail(语音详情)
    props:{
        style:null,
        shareData:null,
        showSlot:{//是否用插槽显示
            default:false
        }
    },
    data () {
        return {
            loading:false,
            show:false,
            posterImg:'',
            showPoster:false
        }
    },
    methods: {
        async handleCreatePoster(){
            this.show=true
            
            const res=await apiGetPoster({
                code_page:this.shareData.code_page,
                code_scene:this.shareData.code_scene,
                source:this.shareData.type,
                pars:JSON.stringify(this.shareData.data)
            })
            if(res.code==200){
                this.posterImg=res.data
                this.show=false
                this.showPoster=true
            }else{
                this.show=false 
            }
        }
    }

}
</script>

<style lang="scss" scoped>
.share-poster-wrap{
    .share-icon{
        position: fixed;
        bottom: 100rpx;
        right: 34rpx;
        z-index: 50;
        width: 76rpx;
        height: 76rpx;
    }
    .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: 417rpx;
        height: 261rpx;
        text-align: center;
        padding-top: 80rpx;
        font-size: 32rpx;
        font-weight: bold;
        .load-img{
            width: 91rpx;
            height: 91rpx;
            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: 16rpx;
    }
}

</style>