uni-app 分享给好友，生成小程序二维码海报-蒲公英云

uni-app 分享给好友，生成小程序二维码海报

忘是亡心i 2023-05-29 06:58 104阅读 0赞

插件地址：https://ext.dcloud.net.cn/plugin?id=586

<template>
    <view>
        <view class="sharecontent">
            <button class="share-btn" @tap="shareEvn">分享</button>
            <!-- 分享弹窗-->
            <view class="share-pro">
                <view class="share-pro-mask" v-if="deliveryFlag"></view>
                <view class="share-pro-dialog" :class="deliveryFlag?'open':'close'" style="">
                    <view class="close-btn" @tap="closeShareEvn">
                        <span class="font_family"></span>
                    </view>
                    <view class="share-pro-title">分享</view>
                    <view class="share-pro-body">
                        <view class="share-item">
                            <button open-type="share">
                                <view class="font_family share-icon"></view>
                                <view>分享给好友</view>
                            </button>
                        </view>
                        <view class="share-item" @tap="createCanvasImageEvn">
                            <view class="font_family share-icon"></view>
                            <view>生成分享图片</view>
                        </view>
                    </view>
                </view>
            </view>
            <hchPoster ref="hchPoster" :canvasFlag.sync="canvasFlag" @cancel="canvasCancel" :posterObj.sync="posterData" />
            <view :hidden="canvasFlag">
                <!-- 海报 要放外面放组件里面 会找不到 canvas-->
                <canvas class="canvas" canvas-id="myCanvas"></canvas>
                <!-- 海报 -->
            </view>
        </view>
    </view>
</template>
<script>
    import hchPoster from '../../components/hch-poster/hch-poster.vue'
    export default {
        components: {
            hchPoster,
        },
        data() {
            return {
                imgone: '', //图片
                deliveryFlag: false,
                canvasFlag: true,
                posterData: {}
            }
        },
        onLoad: function(options) {
        },
        // 分享
        // #ifdef MP-WEIXIN
        onShareAppMessage: function(res) {
            if(res.from === 'button') {
                // 来自页面内转发按钮
                console.log(res.target)
            }
            var _self = this;
            var openid = uni.getStorageSync('_openid');
            var token = uni.getStorageSync('_token');
            uni.request({
                url: _self._apiurl + "/app/goods/sharegoods",
                method: 'POST',
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                },
                data: {
                    openid: openid,
                    token: token,
                    goods_id: _self.goodsid
                },
                success: (res) => {
                    console.log(res);
                    _self._isplogin(res, function() {
                        var data = res.data.data;
                    })
                }
            });
            return {
                title: "清仓处理 " + _self.name + " " + _self.brand + " " + _self.price + "元",
                path: '/pages/class/class?goods_id=' + _self.goodsid + "&fuser_id=" + _self.myuser_id,
                imageUrl: _self.imgone
            }
        },
        //#endif
        methods: {
            createCanvasImageEvn() {
                var _self = this;
                uni.request({
                    url: _self._apiurl + "/app/index/getminicode",
                    method: 'POST',
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    data: {
                        openid: _self.openid,
                        token: _self.token,
                        goods_id: _self.goodsid, //自己的参数
                        fuser_id: _self.myuser_id, //自己的参数
                        page: "pages/class/class", //想要生成小程序码的页面地址
                        width: 128, //小程序码大小
                    },
                    success: (res) => {
                        console.log(res);
                        _self._isplogin(res, function() {
                            var data = res.data.data.url;
                            console.log(data);
                            Object.assign(_self.posterData, {
                                url: _self.imgone[0].img, //商品主图
                                icon: 'https://courier.oss-cn-shenzhen.aliyuncs.com/jpy/static/thj.png', //醉品价图标
                                title: "清仓处理 " + _self.name + " " + _self.brand, //标题
                                discountPrice: _self.price, //折后价格
                                orignPrice: _self.yprice, //原价
                                code: data, //小程序码
                            })
                            _self.$forceUpdate(); //强制渲染数据
                            setTimeout(() => {
                                _self.canvasFlag = false; //显示canvas海报
                                _self.deliveryFlag = false; //关闭分享弹窗
                                _self.$refs.hchPoster.createCanvasImage(); //调用子组件的方法
                            }, 500)
                        })
                    }
                })
            },
            // 分享弹窗
            shareEvn() {
                this.deliveryFlag = true;
            },
            // 关闭分享弹窗
            closeShareEvn() {
                this.deliveryFlag = false;
            },
            // 取消海报
            canvasCancel(val) {
                this.canvasFlag = val;
            },
        }
    }
</script>