a77/pages/my/invitation/inv1.vue

<template>
	<view class="container index">
		<u-popup :show="show" @close="close" @open="open" mode="center" round="24">
			<view class="top">
				<view class="" @click="back">
					<image src="/static/2.png" mode="widthFix" style="width: 40rpx;margin-top: 30rpx;"></image>
				</view>
				<view class="">

				</view>
				<view class="" @click="href('/pages/my/invitation/details')" style="color: #fff;">
					邀请规则
				</view>
			</view>
			<view class="invint">
				<view class="">
					<view class="">
						<xinyu-canvas-drawer ref="poster" :width="540" :height="960">
							<template v-slot="{src}">
								<!-- #ifdef APP-PLUS -->
								<image :src="src" style="width: 640rpx;height: 960rpx;"></image>
								<!-- #endif -->
								<!-- #ifdef H5 -->
								<img :src="src" style="width: 665rpx;height: 960rpx;"></img>
								<!-- #endif -->
							</template>
						</xinyu-canvas-drawer>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import aQrcode from '@/uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue';
	// import uQrcode from "@/uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode.vue"
	import navHeader from "@/components/my/nav_header.vue"
	import XinyuCanvasDrawer from "@/components/xinyu-canvas-drawer/index.vue";
	export default {
		components: {
			navHeader,
			// aQrcode,
			XinyuCanvasDrawer
		},
		data() {
			return {
				show: true, //切换页面状态
				team_list: [],
				link: "", //跳转路径
				img: '', //海报地址
				coderich: "",
				posterRef: "",
				invcode: ''
			}
		},

		onLoad(e) {
			//获取其他路径过来的图片
			if (e.img == null || e.img == "undefined") {
				this.img = uni.getStorageSync("user_info").sharBg
				this.img = this.img.replace("admin", "www")
				// alert(this.img.replace("admin.",""))
			} else {
				this.img = e.img
			}


			//获取团队列表
			this.invcode = uni.getStorageSync('user_info').invite_code
			this.get_team()
			this.link = uni.baseUrl + '#/pages/login/register?code=' + uni.getStorageSync("user_info")
				.invite_code
		},
		onReady() {
			this.initcavas()
		},

		methods: {
			copy(val) {
				this.$api.setclip(val)
			},
			async initcavas() {
				console.log(this.img)

				var that = this

				this.posterRef = this.$refs.poster;
				uni.showLoading({
					title: "渲染海报中"
				});
				var img = await this.posterRef
					.addImage(require("@/static/my/a15.png"), 0, 0, 540,
					960) //绘制云端图片时第一个参数直接传云端图片地址即可，不需要require。注意不要跨域
					.addRect(35, 700, 470, 200, "#fff") //绘制矩形
					.addQRCode(that.link, 50, 730, 130, 130) //绘制二维码（不要太长否则会扫不出来）
					.addText("我的邀请码", 210, 730, 20, "#000", 453, false)
					.addText(that.invcode, 210, 780, 32, "#000", 453, false)
					.addText("扫描二维码 多重好礼在等你~", 210, 840, 20, "#000", 453, false)
					.draw();
				this.posterRef = this.$refs.poster;
				uni.hideLoading();
			},
			save() {
				this.posterRef.saveImageToPhotosAlbum();
				uni.showToast({
					title: "已保存到相册"
				})
			},
			complete(e, refName) {
				if (e.success) {
					console.log(refName + '生成成功');
				} else {
					console.log(refName + '生成失败');
				}
			},
			poster() {
				let platform = uni.getSystemInfoSync().platform
				if (platform == 'ios') {
					this.$api.pop("请长按电源键 + 音量上键")
					console.log('我是iOS')
				} else if (platform == 'android') {
					this.$api.pop("请长按电源键 + 音量下键")
					console.log('我是安卓')
				}
			},
			get_team() {
				this.api.team().then(res => {
					this.team_list = res.data.data
					console.log(res)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.index {
		box-sizing: border-box;
		position: relative;
	}

	.top {
		display: flex;
		justify-content: space-between;
		padding: 0 32rpx;
		color: #000;
		font-size: 32rpx;
		line-height: 90rpx;
		width: 680rpx;
		z-index: 999;
		text-align: center;
		margin-top: -100rpx;
	}

	.center_first {
		position: relative;
	}

	.center {
		position: absolute;
		color: #000;
		top: 95%;
		left: 42.5%;
		z-index: 999;
	}

	.bot {
		width: 750rpx;

		.bottom {
			background: #fff;
			width: 686rpx;
			margin: 32rpx auto;
			border-radius: 32rpx;

			.bsn {
				width: 348rpx;
				margin: 32rpx auto;
			}

			.top1 {
				display: flex;
				color: #FFEC01;
				align-items: center;
				justify-content: center;
				font-size: 40rpx;

				>view:first-child,
				>view:last-child {
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					margin: 0 15rpx;
				}
			}

			.num {
				color: #000;
				text-align: center;
				font-size: 32rpx;
				margin-top: ;
				border-bottom: 1px solid #F0F0F0;
				width: 590rpx;
				margin: 46rpx auto 0;
				padding-bottom: 20rpx;
				font-weight: bold;
			}

			.people {
				width: 590rpx;
				height: 622rpx;
				margin: 20rpx auto 0;
				border-radius: 24rpx;
				font-size: 28rpx;

				.top2 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 88rpx;
					// background: #F6E9C7;
					border-radius: 24rpx 24rpx 0 0;
					padding: 0 42rpx 0 70rpx;
					border-bottom: 1px solid #F0F0F0;
				}

				.bot1 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 12rpx 70rpx 32rpx 84rpx;
					border-bottom: 1px solid #F0F0F0;
				}

			}

		}

		.bsn {
			width: 348rpx;
			margin: 32rpx auto 48rpx;
		}

		.down {
			width: 645rpx;
			height: 96rpx;
			margin: 0 auto 86rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 28rpx;
			background: url(/static/index/011.png) no-repeat;
			background-size: 100% 100%;

			>view {
				// border: 1px solid #937D63;
				width: 500rpx;
				height: 108rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				// padding: 0 32rpx;

				>view {
					display: flex;
					// flex-direction: column;
					align-items: center;
				}

				>view:nth-child(2) {
					border-left: 1px solid #fff;
					height: 40rpx;
				}
			}
		}


	}

	.invint {
		width: 670rpx;
		height: 1028rpx;
		margin: 100rpx auto 0;
	}

	/deep/ .u-popup__content {
		background: transparent;
	}
</style>