bawangcan-shop/pages/my/shareFriends.vue

<template>
	<view class="container">
		<view class="bg" v-if="dengji != ''" v-bind:style="{backgroundImage: 'url('+toBase64Url+')'}">
			<text class="num" style="font-size: 32upx;color: #000000;margin-bottom: 10px">
				<text style="font-size: 32upx;font-weight: bold;color: #000000;margin-right:10upx;">当前等级</text>
				<text style="font-size: 30upx;font-weight: bold;margin-right:6upx;"> • </text>
				<text style="font-size: 50upx;font-weight: bold;font-weight: bold;">{{ dengji }}</text>
			</text>
		</view>

		<view style="text-align: left;color: #333333;font-size: 28upx;">
			<view style="margin-top: 16upx;background: #FFFFFF;border-radius: 16upx;padding: 26upx;margin: 12upx;">
				<view style="font-size: 32upx;font-weight: bold;margin-bottom: 16upx;">邀请规则</view>
				<view v-for="(item,index) in list">
					<view style="display: flex;padding: 10rpx;font-size: 28rpx;">
						<view>{{index + 1}}
							、{{item.teamName}}需要邀请{{item.personNum}}人，成为{{item.teamName}}后一级成员每单返{{item.oneMoney}}积分，二级成员每单返{{item.twoMoney}}积分
						</view>
					</view>
				</view>
			</view>

			<view style="margin-top: 16upx;background: #FFFFFF;border-radius: 16upx;padding: 26upx;margin: 12upx;">
				<view style="font-size: 32upx;font-weight: bold;margin-bottom: 16upx;margin-top: 16upx;">邀请方式</view>
				<view>1、点击下方【保存海报】，将海报分享好友、群或朋友圈，让好友扫码即可升级</view>
				<view style="margin-top: 8upx;">2、点击下方【分享好友】生成专属推广链接，分享好友、群，让好友注册即可升级</view>
			</view>
		</view>

		<view style="display: flex;margin-top: 40upx;margin-left: 16rpx;margin-right: 16rpx;margin-bottom: 30rpx;">
			<button open-type="share"
				style="margin-right: 32upx;text-align: center;width:49%;background: #FFCB49;font-size: 32upx;color: white;border-radius: 20upx;height: 80upx;line-height: 80upx">
				分享好友
			</button>
			<button @click="showModal()"
				style="text-align: center;width: 49%;background: #ED3113;font-size: 32upx;color: white;border-radius: 20upx;height: 80upx;line-height: 80upx">
				保存海报
			</button>
		</view>

		<!-- <view class="region-box">
			<view class="goods_info_box">
				<view class="img-wrap">
					<image class="goods_image" :src="backgroundImageUrl"></image>
					<view class="goods_info">
						<view class="poster_code_image">
							<view class="share_view">
								<button class="button_view" open-type="share">分享好友</button>
							</view>
						</view>
						<view class="poster_code_image">
							<view class="upload_view">
								<button class="button_view1" @click="showModal()">保存海报</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->

		<!-- 生成海报 -->
		<!-- 图片展示由自己实现 -->
		<view class="flex_row_c_c modalView" :class="qrShow?'show':''" @tap="hideQr()">
			<view class="flex_column">
				<view class="backgroundColor-white padding1vh border_radius_10px">
					<image :src="poster.finalPath || ''" mode="widthFix" class="posterImage"></image>
				</view>
				<view class="flex_row marginTop2vh">
					<!-- #ifdef H5 -->
					<button type="primary" size="mini">长按上方图片保存</button>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<button type="primary" size="mini" @tap.prevent.stop="saveImage()">保存图片</button>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<!-- 画布 -->
		<view class="hideCanvasView">
			<canvas class="hideCanvas" canvas-id="default_PosterCanvasId"
				:style="{width: (poster.width||10) + 'px', height: (poster.height||10) + 'px'}"></canvas>
		</view>
		<tki-qrcode ref="qrcode" :val="url" :size="200" background="#fff" foreground="#000" pdground="#000"
			:onval="true" :loadMake="true" @result="qrR" :show="false"></tki-qrcode>
		<view class="cu-modal" :class="modalName == 'Image' ? 'show' : ''" @tap="hideModal">
			<view class="cu-dialog" v-if="backgroundImageUrl && erweimapath && haibaoShow" @tap="hideModal">
				<view class="bg-img">
					<!-- <wm-poster @success="posterSuccess" :imgSrc="backgroundImageUrl" :Referrer="'我的邀请码:'+invitationCode"
						:QrSrc="url" :Title="tuiguang" :LineType="false"></wm-poster> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
	import appShare from '@/utils/share.js';
	// import wmPoster from '@/components/wm-poster/wm-posterorders.vue';
	import uQRCode from "../../js_sdk/Sansnn-uQRCode/uqrcode.js"
	import _app from '../../js_sdk/QuShe-SharerPoster/QS-SharePoster/app.js';
	export default {
		components: {
			tkiQrcode
			// wmPoster
		},
		data() {
			return {
				erweimapath: '',
				poster: {},
				qrShow: false,
				backgroundImageUrl: '',
				haibaoImg: null,
				dengji: '',
				haibaoShow: false,
				modalName: '',
				toBase64Url: 'https://h5.canmoujiang.com/img/20210610/e387564101ab414783a96a49246775bb.png',
				canvasId: 'default_PosterCanvasId',
				imageUrl: '',
				userImageUrl: '',
				isShowWxAPPShare: '否',
				nickName: '',
				list: [],
				invitationCode: '',
				tuiguang: '!',
				url: ''
			};
		},
		onShareAppMessage(res) {
			let that = this;
			let relation_id = that.$queue.getData('invitationCode');
			var image = '';
			var title = '';
			return {
				path: 'pages/index/index?userByinvitationId=' + relation_id, //这是为了传参   onload(data){let id=data.id;} 
				title: that.tuiguang,
				imageUrl: that.backgroundImageUrl
			}
		},
		onShow() {

			this.$Request.getT('/team/selectMemberConfigList').then(res => {
				if (res.code === 0) {
					// res.data.forEach(d =>{
					// 	this.list.push(d);
					// 	this.list.push(d);
					// });
					this.list = res.data;
				}
			});

			let token = this.$queue.getData('token');
			if (token) {
				this.getBackImageList();
				this.getQRCodeInfo();
				this.getUserInfo();
			} else {
				this.goLogin();
			}
		},
		methods: {
			getUserInfo() {
				let userId = this.$queue.getData('userId');
				this.$Request.postT("/app/selectUserById?userId=" + userId).then(res => {
					if (res.code === 0) {
						this.dengji = res.data.teamName ? res.data.teamName : '普通用户';
					}
					uni.hideLoading();
				});
			},
			posterSuccess(haibaoImg) {
				this.haibaoImg = haibaoImg;
				this.modalName = 'Image';
			},
			goLogin() {
				uni.navigateTo({
					url: '/pages/public/login'
				});
			},
			showModal() {
				let token = this.$queue.getData('token');
				if (token) {
					if (!this.haibaoImg) {
						this.haibaoShow = true;
						this.$queue.showLoading('海报生成中...');
					} else {
						this.modalName = 'Image';
					}
				} else {
					this.goLogin();
				}
			},
			hideModal() {
				this.modalName = null;
			},
			qrR(path) {
				this.erweimapath = path;
			},
			getBackImageList() {
				this.$Request.getT('/banner/selectInvitationBackground').then(res => {
					if (res.code === 0) {
						this.backgroundImageUrl = res.data.imageUrl;
						this.tuiguang = res.data.describes;
					}
				});
			},
			getQRCodeInfo() {
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/user/selectInviteAndPoster?userId=' + userId).then(res => {
					if (res.code === 0) {
						this.invitationCode = res.data.user.invitationCode;
						this.url = this.$queue.publicYuMingAll() +
							'/statistical/mpCreateQr?invitationCode=' + res.data.user.invitationCode;
					}
				});
			},
			async shareFc() {
				let _this = this;
				try {
					const d = await getSharePoster({
						type: 'testShareType',
						backgroundImage: _this.backgroundImageUrl,
						posterCanvasId: _this.canvasId, //canvasId
						delayTimeScale: 20, //延时系数
						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {
							const dx = bgObj.width * 0.3;
							const fontSize = bgObj.width * 0.045;
							const lineHeight = bgObj.height * 0.04;
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
								rs([{
										type: 'custom',
										setDraw(Context) {
											Context.setFillStyle('black');
											Context.setGlobalAlpha(0.3);
											Context.fillRect(0, bgObj.height - bgObj
												.height * 0.2, bgObj.width, bgObj
												.height * 0.2);
											Context.setGlobalAlpha(1);
										}
									},
									{
										type: 'text',
										fontStyle: 'italic',
										text: '邀请码:' + _this.invitationCode,
										size: fontSize,
										color: 'white',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width - textLength - fontSize,
												dy: bgObj.height - lineHeight * 3
											}
										},
										serialNum: 0,
										id: 'tag1' //自定义标识
									},
									{
										type: 'qrcode',
										text: _this.url,
										size: bgObj.width * 0.2,
										dx: bgObj.width * 0.05,
										dy: bgObj.height - bgObj.width * 0.25
									}
								]);
							})
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => { // 为动态设置画布宽高的方法，
							_this.poster = bgObj;
						}
					});
					//_app.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath)
					_this.poster.finalPath = d.poster.tempFilePath;
					_this.qrShow = true;
				} catch (e) {
					_app.hideLoading();
				}
			},
			saveImage() {
				uni.saveImageToPhotosAlbum({
					filePath: this.poster.finalPath,
					success(res) {
						_app.showToast('保存成功');
					}
				})
			},
			hideQr() {
				this.qrShow = false;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F0F0F0;
		width: 100%;
		height: 100%;
	}

	.bg {
		background-repeat: round;
		background-size: 100%;
		padding: 42upx;
		margin: 12upx;
	}

	button {
		font-size: 14px;
	}

	button::after {
		border: none;
	}

	.hideCanvasView {
		position: relative;
	}

	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}

	.flex_row_c_c {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.modalView {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		outline: 0;
		transform: scale(1.2);
		perspective: 2500upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all .3s ease-in-out;
		pointer-events: none;
		backface-visibility: hidden;
		z-index: 999;
	}

	button::after {
		border: none;
	}

	.modalView.show {
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
	}

	.flex_column {
		display: flex;
		flex-direction: column;
	}

	.backgroundColor-white {
		background-color: white;
	}

	.border_radius_10px {
		border-radius: 10px;
	}

	.padding1vh {
		padding: 1vh;
	}

	.posterImage {
		width: 60vw;
	}

	.flex_row {
		display: flex;
		flex-direction: row;
	}

	.marginTop2vh {
		margin-top: 2vh;
	}

	.container {
		width: 100%;
		height: 100%;

		.region-box {
			width: 100%;
			height: 100%;
			padding: 20upx 20upx 20upx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.goods_info_box {
				width: 100%;
				height: 100%;
				background: #FFF;
				border-radius: 15upx;
				position: relative;
				overflow: hidden;

				.img-wrap {
					width: 100%;
					height: 100%;
					position: absolute;

					.goods_image {
						width: 100%;
						height: 100%;
						display: block;
						position: absolute;
					}

					.goods_info {
						width: 100%;
						// height: 16%;
						padding: 0 20upx;
						position: absolute;
						bottom: 0;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.share_view {
							position: absolute;
							width: 335rpx;
							height: 88rpx;
							// background-image: url(../../static/img/my/share.png);
							background-size: 100%;
							outline: none;
						}

						.upload_view {
							position: absolute;
							width: 335rpx;
							height: 88rpx;
							// background-image: url(../../static/img/my/upload.png);
							background-size: 100%;
							outline: none;
						}

						.button_view {
							outline: none;
							background: none;
							margin-top: 15rpx;
							color: #FFFFFF;
							font-size: 26rpx;
							font-weight: 500;
						}

						.button_view1 {
							outline: none;
							background: none;
							margin-top: 16rpx;
							margin-left: 40rpx;
							color: #FFFFFF;
							font-size: 26rpx;
							font-weight: 500;
						}

						.poster_code_image {
							width: 49%;
							height: 100rpx;
							flex-shrink: 0;
							overflow: hidden;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}

				.goods_info_b {
					width: 100%;
					height: 12%;
					padding: 15rpx;
					position: absolute;
					bottom: 0;
				}
			}
		}
	}
</style>