yicangzongtai_app_240321/pages/user/merchant/invitationCode.vue

<template>
	<view class="container">
		<navbar :config="config" backColor="#666666"></navbar>

		<view class="bg">
			<!-- <image class="bgImg" :src="imgUrl+'/bg.png'"></image> -->
			<view class="position-ab">
				<view style="color: #000000;" class="u-FFF u-font44">绿马助残 · 就业创业 · 共同富裕</view>
				<view class="mt64">
					<view class="code-top-bg">
						<!-- <image :src="imgUrl+'/code-top-bg.png'"></image> -->
						<div class="bg Poster"></div>
						<!--个人信息-->
						<view class="user">
							<image class="Poster" v-if="accountInfo.head_photo" :src="accountInfo.head_photo"></image>
							<image v-else :src="imgUrl+'/head-on.png'" mode=""></image>
							<view class="u-font30 u-mt15 u-text-width-two " style="text-align: center; margin: 0 auto;"
								v-if="accountInfo.nickname != ''">{{
                accountInfo.nickname
              }}</view>
							<view class="u-font30 u-mt15" v-if="accountInfo.nickname == ''">无名称</view>
							<view class="u-font24 u-mt20" @click="copy(accountInfo.invitation_code)">邀请码:
								<text class="u-mr30"> {{ accountInfo.invitation_code }}</text>
								复制
							</view>
						</view>
					</view>
					<view class="code-bt-bg">
						<image :src="imgUrl+'/code-bt-bg.png'"></image>
						<!--二维码-->
						<view class="code">
							<view class="itemcode">
								<uqrcode ref="uqrcode" :size="125" canvas-id="qrcode" :value="url"
									:options="{ margin: 10 }" @complete="uqrcodeComplete"></uqrcode>
							</view>
							<!-- <image :src="qrcode"></image> -->
							<view class="u-mt20 u-1A1A1A u-font30">我的分享二维码</view>
						</view>
					</view>
				</view>
				<canvas canvas-id="canvasId" style="width: 290px; height: 380px;" type="2d" id="canvasId"></canvas>
				<canvas canvas-id="myCanvas" style="width: 63px; height: 63px;" type="2d" id="myCanvas"></canvas>
				<view class="copy-btn u-mt50" @click="init()">
					<!-- @click="saveImg" -->
					<button class="u-btn-two u-font24">保存图片</button>
				</view>
			</view>
		</view>
		<!--页面加载动画-->
		<ldLoading isFullScreen :active="loading"></ldLoading>
	</view>
</template>

<script>
	// import ayQrcode from "../../components/ay-qrcode/ay-qrcode.vue"
	import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue";
	export default {
		components: {
			ayQrcode,
		},
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: "我的邀请码",
					color: "#1A1A1A",
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#FFF"],
					statusBarFontColor: "#1A1A1A",
				},
				modal_qr: false,
				url: "",
				loading: true,
				accountInfo: {},
				qrcode: "",
				imgUrl: this.$mConfig.staticUrl,
				rpx: 0,
				systemInfo:{},
				qrcodeUrl:""
			};
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.systemInfo = res
				}
			})
			//获取用户信息
			this.$http.get("/account/getAccountInfo").then((res) => {
				if (res && res.code == 200) {
					this.accountInfo = res.data;
					// this.url = "https://www.baidu.com"
					//扫描之后跳到了h5的注册页面去了
					this.url = this.$mConfig.hostUrl + "/pages/register?code=" + this.accountInfo.invitation_code;
					this.loading = false;
				}
			});
		},
		methods: {
			onSuccess(e) {
				console.log(e)
			},
			init() {
				if(!this.qrcodeUrl){
					uni.showToast({
						title: "暂无分享码",
						icon: "none",
					});
					return
				}
				uni.showLoading({
					title: '保存中'
				});
				this.getArcImg().then(res => {
					uni.getImageInfo({
						src: '/static/code-bt-bg.jpg',
						success: (image)=>{
							let context = uni.createCanvasContext('canvasId');
							context.setStrokeStyle("#0B844A")
							context.beginPath();
							context.arc(10, 10, 10, -Math.PI, -Math.PI / 2);
							context.lineTo(280, 0);
							context.arc(280, 10, 10, -Math.PI / 2, 0);
							context.lineTo(290, 182);
							context.lineTo(0, 182);
							context.lineTo(0, 10);
							context.fillStyle = "#0B844A";
							context.fill();
							context.stroke()
							context.drawImage(res, 115, 20, 63, 63);
							context.font = "400 15px Arial";
							context.fillStyle = "#fff";
							context.textAlign = "center"
							context.fillText(this.accountInfo.nickname, 290/2, 100);
							let codeText='邀请码:'+this.accountInfo.invitation_code;
							context.font = "400 13px Arial";
							context.fillText(codeText, 290/2, 130);
							context.textAlign = "center";
							context.drawImage(image.path, 0, 163, 290, 220);
							context.drawImage(this.qrcodeUrl, (290-125)/2, 188, 125, 125);
							context.fillStyle = "black";
							context.font = "400 15px Arial";
							context.fillText('我的分享二维码', 290/2, 340);
							context.clip();
							context.draw(false, () => {
								// 返回canvas图片信息
								uni.canvasToTempFilePath({
									canvasId: 'canvasId',
									success: (res) => {
										uni.saveImageToPhotosAlbum({
											filePath:res.tempFilePath,
											success() {
												uni.hideLoading();
												uni.showModal({
													title: "保存成功",
													content: "图片已成功保存到相册",
													showCancel: false
												})
											},
											fail(e) {
												console.log(e)
											}
										})
									},
									fail: function(err) {
										console.log(err)
										uni.hideLoading();
									}
								})
							})
						}
					})
				})

			},
			getArcImg() {
				return new Promise((resolve, ret )=> {
					uni.getImageInfo({
						src: '/static/head-on.png',
						success:(image)=>{
							let ctx = uni.createCanvasContext('myCanvas', this);
							ctx.save();
							ctx.setStrokeStyle("#fff")
							ctx.beginPath(); //开始绘制
							//先画个圆   x,y是圆心的(x,y） 坐标 r是圆的半径 第四个参数是起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）  第五个参数是结束角，以弧度计  最后是绘图方向  默认是false，即顺时针
							ctx.arc(32, 32, 30, 0, Math.PI * 2, false);
							ctx.setLineWidth(3)
							ctx.stroke()
							ctx.clip(); //画好了圆 开始剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
							// drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
							//path 是用uni.getImageInfo 获取的地址
							ctx.drawImage(this.accountInfo.head_photo||image.path, 0, 0, 63, 63); // 推进去图片，必须是https图片
							ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
							
							ctx.draw(false, (ret) => { // draw方法 把以上内容画到 canvas 中。
								uni.canvasToTempFilePath({
									canvasId: 'myCanvas',
									success: (re) => {
										// that.imgUrl = res.tempFilePath;
										resolve(re.tempFilePath)
										console.log(re)
									},
									fail: function(err) {
										console.log(err)
									}
								})
							});
						}
						})
				})
			},
			//传入组件的方法
			hideQrcode() {
				this.modal_qr = false;
			},

			//复制邀请码
			copy(code) {
				uni.setClipboardData({
					data: code,
					success: () => {
						uni.showToast({
							title: "复制成功",
						});
					},
				});
			},
			uqrcodeComplete(){
				this.$refs.uqrcode.toTempFilePath({
				  success: res => {
					  this.qrcodeUrl=res.tempFilePath;
				  },
				});
			},
		},
	};
</script>

<style lang="scss">
	page {
		height: 100vh;
	}

	.bg {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		.bgImg {
			width: 100%;
			height: 100vh;
			vertical-align: bottom;
			overflow: hidden;
		}

		.position-ab {
			position: absolute;
			top: 272rpx;
			left: 0;
			right: 0;
			text-align: center;

			.mt64 {
				margin-top: 64rpx;
			}

			.code-top-bg {
				position: relative;
				height: 365rpx;

				// display: flex;
				// justify-content: center;
				.bg {
					height: 365rpx;
					background: #0B844A;
					width: 581rpx;
					margin-left: 50%;
					transform: translateX(-50%);
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
				}
			}

			.code-top-bg image {
				height: 365rpx;
				vertical-align: bottom;
			}

			.user {
				position: absolute;
				top: 46rpx;
				left: 0;
				right: 0;
				text-align: center;
				color: #ffffff;

				image {
					width: 126rpx;
					height: 126rpx;
					border-radius: 50%;
					border: 4rpx solid #fff;
				}
			}

			.code-bt-bg {
				position: relative;

				image {
					height: 396rpx;
					vertical-align: bottom;
					transform: rotate(180deg);
					width: 581rpx;
				}

				.code {
					position: absolute;
					top: 50rpx;
					left: 0;
					right: 0;
					text-align: center;

					.itemcode {
						display: flex;
						justify-content: center;
					}

					image {
						width: 196rpx;
						height: 196rpx;
					}
				}
			}

			.copy-btn {
				width: 294rpx;
				margin: 60rpx auto 0;
			}

			.copy-btn button {
				height: 60rpx;
				line-height: 60rpx;
				background: #0B844A;
				color: #ffffff;
				// border: 1rpx solid #0B844A;
			}
		}
	}

	#canvasId{
		width: 580rpx;
		height: 742rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		position: fixed;
		right: -99999rpx;
	}
	#myCanvas{
		position: absolute;
		left: -99999rpx;
	}
</style>