uniapp分享海报-能否用自己鉴别

<template>
    <view class="page" >
        <view class="poster" v-if="!show_poster">
            <lPainter :board="posterObj" ref="painter"></lPainter>
            <view class="footer-btn">
<!--                 <view class="">
                    返回
                </view> -->
                <view class="save" @click="toSave">
                    保存图片
                </view>
            </view>
        </view>
        <view class="mycode">
            我的邀请码：{{shareCode}}
        </view>    
<!--         <view class="poster-btn">
            <view :class="{'is-check':check_idx==index}" v-for="(item,index) in footer_arr" :key="index" @click="toChoose(index)">
                <image :src="item" mode=""></image>
                <view v-if="check_idx==index"></view>
            </view>
        </view> -->
        <!-- 生成的图片 -->
        <uni-popup type="center" ref="posterImg" :maskClick="false">
            <view class="poster-img">
                <text @click="closePopup"></text>
                <image :src="path" mode="" @click="previewImg"></image>
                <!-- #ifdef H5 -->
                <view class="">
                    长按图片保存到手机
                </view>
                <!-- #endif -->
                <!-- #ifndef H5 -->
                <view class="">
                    点击图片保存到手机
                </view>
                <!-- #endif -->
            </view>
        </uni-popup>
    </view>
</template>

<script>
    import {
        BaseApi,
        imgUrl,
        merchant_id,
        code_type
    } from "@/http/baseApi.js"
    import uniPopup from "../../components/uni-popup/uni-popup.vue";//这两个组件自己uniapp插件市场去下载
    import lPainter from '../../components/lime-painter/index.vue'//这两个组件自己uniapp插件
    export default {
        components: {
            lPainter,
            uniPopup
        },
        data() {
            return {
                backimage:imgUrl+'/uploads/20230424/8f348d0fe75226add117772a6e2de9b7.png',
                show_poster:false,//显示海报
                shareCode:'',
                path: '', //生成的图片地址
                posterObj: {
                    width: '664rpx',
                    height: '1128.6rpx',
                    background: '#fff',
                    borderRadius: '16rpx',
                    views: [
                        {
                            type: 'image',

                            src: imgUrl+'/uploads/20230424/f4a4fc5a2518c8bb616adb702027f896.jpg',
                            css: {
                                left: '0rpx',
                                top: '0rpx',
                                width: '664rpx',
                                height: '100%',
                                borderRadius: '16rpx'
                            }
                        },
                        {
                            type: 'image',
 
                            src: imgUrl+'/uploads/20230410/3f74995f5a4f9205580c93fdd76e31a1.png',
                            css: {
                                top: '1021rpx',
                                left: '535rpx',
                                width: '30rpx',
                                height: '30rpx',
                                
                            }
                        },
        
                        {
                            type: 'qrcode',
                            text: '小程序的分享链接到小程序平台自己生成例子：http://www.baidu.com/weixin?sharecode=ci1snw',
                            css: {
                                left: '485rpx',
                                top: '971rpx',
                                width: '130rpx',
                                height: '130rpx',
                                border:'5px solid #FFFFFF'
                            }
                        },
                        
    
                    ]
                }, //画板数据
                check_idx: 0, //底部选中的下标
            }
        },
        mounted(options) {

        },
        onLoad() {
            let userinfo=uni.getStorageSync("userinfo");
            if(userinfo.shareCode){
                this.shareCode=userinfo.shareCode
                this.posterObj.views[1].text='http://h5.fjyxlife.com/weixin?sharecode='+this.shareCode
                //this.posterObj.views[2].text='我的邀请码：'+this.shareCode
            }

        },
        watch: {
            // check_idx(newVal,oldVal){
            //     console.log(111,newVal);
            //     console.log(222,oldVal);
            // }
        },
        methods: {
            previewImg(){
                // #ifdef H5
                return;
                // #endif
                uni.previewImage({
                    current:this.path,
                    urls: [this.path]
                });
            },
            closePopup(){
                this.$refs.posterImg.close();
                this.show_poster=false;
            },
            toSave() {
                uni.showLoading({
                    title:'海报生成中',
                })
                const painter = this.$refs.painter;
                painter.canvasToTempFilePath().then(res => {
                    this.path = res.tempFilePath;
                    this.$refs.posterImg.open();
                    this.show_poster=true;
                    uni.hideLoading()
                });
            },
            getImg(r) {

            },
            toChoose(index) {
                this.check_idx = index;
            },
        }
    }
</script>

<style lang="scss" scoped>
page{
    background-color: #F2F4F8;
}
.page{
    /deep/ .uni-transition{
    }

      background: url('https://www.fjyxlife.com/imgss/uploads/20230424/8f348d0fe75226add117772a6e2de9b7.png') no-repeat;
      background-size: cover;
      position: absolute;
      overflow: hidden;
    .poster-img{
        width: 634rpx;
        height: 1128.6rpx;
        position: relative;
        text{
            
            background-size: 100% 100%;
            display: inline-block;
            width: 50rpx;
            height: 50rpx;
            position: absolute;
            top: -60rpx;
            right: 0;
        }
        image{
            width: 100%;
            height: 100%;
        }
        view{
            font-size: 32rpx;
            font-family: PingFang-SC-Bold, PingFang-SC;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 32rpx;
            text-align: center;
            margin-top: 28rpx;
        }
    }
    .poster{
        padding: 24rpx 40rpx;
        
        
        .footer-btn{
            margin-top: 24rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            view{
                width: 319rpx;
                height: 66rpx;
                border-radius: 40rpx;
                border: 1px solid #4070FF;
                font-size: 26rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #4070FF;
                line-height: 66rpx;
                text-align: center;
            }
            .save{
                background: #1E85E8;
                color: #FFFFFF;
                margin: auto;
                text-align: center;
                width: 405rpx;
                height: 70rpx;
            }
        }
    }
    .mycode{
        text-align: center;
    }
    .poster-btn{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 140rpx;
        background: #FFFFFF;
        border-radius: 32rpx 32rpx 0px 0px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        >view{
            width: 80rpx;
            height: 80rpx;
            position: relative;
            border-radius: 10rpx;
            border: 4rpx solid #fff;
            &.is-check{
                border: 4rpx solid #4070FF;
            }
            image{
                width: 100%;
                height: 100%;
            }
            view{
                width: 30rpx;
                height: 30rpx;
                position: absolute;
                right: -15rpx;
                bottom: -15rpx;
                background: url('https://s.yun-live.com/images/20210201/311c01265c1aa508418f6bae10d67602.png') no-repeat;
                background-size: 100% 100%;
            }
        }
    }
}
</style>