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

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

插件地址：[https://ext.dcloud.net.cn/plugin?id=586][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 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>

[https_ext.dcloud.net.cn_plugin_id_586]: https://ext.dcloud.net.cn/plugin?id=586