From a71dcd33d8dd395e08331921a2b7e9003e60cdb2 Mon Sep 17 00:00:00 2001
From: fanfan <franceesfan@163.com>
Date: Tue, 6 Aug 2024 22:08:40 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/invite/index.vue | 189 +++++++++++++++++++++++++++++++++--------
 1 file changed, 154 insertions(+), 35 deletions(-)

diff --git a/pages/invite/index.vue b/pages/invite/index.vue
index ad72795..bec5c0c 100644
--- a/pages/invite/index.vue
+++ b/pages/invite/index.vue
@@ -27,7 +27,10 @@
 				</view>
 			</view>
 			<view class="a">
-				<view class="title"><image src="https://www.amiami.com.cn/static/news1/zuo@2x.png"></image>怎么邀请好友<image src="https://www.amiami.com.cn/static/news1/you@2x.png"></image></view>
+				<view class="title">
+					<image src="https://www.amiami.com.cn/static/news1/zuo@2x.png"></image>怎么邀请好友<image
+						src="https://www.amiami.com.cn/static/news1/you@2x.png"></image>
+				</view>
 				<view class="content" style="margin-top: 30rpx;">
 					<view class="item">
 						<image src="https://www.amiami.com.cn/static/news1/4@2x.png"></image>
@@ -44,7 +47,10 @@
 				</view>
 			</view>
 			<view class="a">
-				<view class="title"><image src="https://www.amiami.com.cn/static/news1/zuo@2x.png"></image>邀请小技巧<image src="https://www.amiami.com.cn/static/news1/you@2x.png"></image></view>
+				<view class="title">
+					<image src="https://www.amiami.com.cn/static/news1/zuo@2x.png"></image>邀请小技巧<image
+						src="https://www.amiami.com.cn/static/news1/you@2x.png"></image>
+				</view>
 				<view class="desc1">邀请成功率提高200%</view>
 				<view class="content">
 					<view class="li">邀请您的同行，跨行商家，成功率高</view>
@@ -55,20 +61,24 @@
 		</view>
 		<view class="invite-popup" v-if="isPopup">
 			<view class="popup">
-				<image class="bg" mode="widthFix" show-menu-by-longpress :src="qrcode"></image>
+				<image class="bg" mode="heightFix" show-menu-by-longpress :src="qrcode1"></image>
 				<view class="tips">
 					<view class="cancle" @click="download(1)">取消</view>
-					<view class="sure"  @click="download(2)">保存到相册</view>
+					<view class="sure" @click="download(2)">保存到相册</view>
 				</view>
 			</view>
 		</view>
+		<canvas id="myCanvas" class="myCanvas" canvas-id="myCanvas"
+			:style="{'width': 702/devicePixelRatio+'px',' height': 1248/devicePixelRatio+'px',position: 'absolute',left:'-100000px',top:'-100000px'}"></canvas>
 		<view class="invite-fd">
-			<view class="btn" @click="openPage(3)">立即邀请</view></view>
+			<view class="btn" @click="openPage(3)">立即邀请</view>
+		</view>
 		<addShuiyin />
 	</view>
 </template>
 
 <script>
+	const ctx = uni.createCanvasContext('myCanvas')
 	import {
 		createQrCodeImg
 	} from '@/utils/qrcode'
@@ -77,6 +87,7 @@
 	export default {
 		data() {
 			return {
+				qrcode1: "",
 				qrcode: "",
 				userInfo: {},
 				backgroundBg: {
@@ -88,7 +99,8 @@
 				isPopup: false,
 				info: {},
 				info1: {},
-				list: []
+				list: [],
+				devicePixelRatio: 750 / uni.getSystemInfoSync().windowHeight
 			}
 		},
 		onReady() {
@@ -138,25 +150,98 @@
 				return val.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
 					return arrEntities[t];
 				});
+			},
+			createImge() {
+				const that = this;
+				ctx.fillRect(0, 0, 702 / that.devicePixelRatio, 1248 / that.devicePixelRatio);
+				uni.downloadFile({
+					url: 'https://www.amiami.com.cn/static/news1/business.png',
+					success(res) {
+						ctx.drawImage(res.tempFilePath, 0, 0, 702 / that.devicePixelRatio, 1248 / that
+							.devicePixelRatio);
+						uni.downloadFile({
+							url: that.qrcode,
+							success: (res2) => {
+								ctx.save(); // 保存
+								ctx.beginPath(); // 开始绘制
+								ctx.arc(162 / that.devicePixelRatio / 2 + 285 / that.devicePixelRatio,
+									162 / that.devicePixelRatio / 2 + 870 / that.devicePixelRatio,
+									162 / that.devicePixelRatio / 2, 0, Math.PI * 2, false);
+								ctx.clip();
+								ctx.drawImage(res2.tempFilePath, 285 / that.devicePixelRatio, 870 /
+									that.devicePixelRatio, 162 / that.devicePixelRatio, 162 / that
+									.devicePixelRatio);
+								// 恢复之前保存的绘图上下文
+								ctx.restore();
+								// 邀请码
+								ctx.setFontSize(45 / that.devicePixelRatio);
+								ctx.setFillStyle('#cf100d');
+								ctx.fillText(that.userInfo.user_id, 200 / that.devicePixelRatio, 1213 /
+									that.devicePixelRatio);
+								ctx.draw()
+								uni.canvasToTempFilePath({
+									width: 702 / that.devicePixelRatio,
+									height: 1248 / that.devicePixelRatio,
+									destWidth: 702 / that.devicePixelRatio,
+									destHeight: 1248 / that.devicePixelRatio,
+									canvasId: 'myCanvas',
+									success: function(res) {
+										// 在H5平台下，tempFilePath 为 base64
+										console.log(res.tempFilePath)
+										that.qrcode1 = res.tempFilePath;
+										that.isPopup = true;
+										ctx.clearRect(0, 0, 702, 1248);
+										// uni.saveImageToPhotosAlbum({
+										// 	filePath: res.tempFilePath,
+										// 	success(data) {
+										// 		that.$success('保存成功')
+										// 	},
+										// 	fail(err) {
+										// 		if (err.errMsg ===
+										// 			'saveImageToPhotosAlbum:fail auth deny'
+										// 		) {
+										// 			that.$toast(
+										// 				'请允许访问相册后重试 (右上角菜单 - 设置 - 相册)',
+										// 				3000)
+										// 		}
+										// 	}
+										// })
+									}
+								})
+
+							},
+						})
+
+					}
+				})
+
+
 			},
 			//生成海报
 			async InviteUserPoster() {
 				const {
 					status,
 					data
-				} = await newFunApi.InviteUserPoster({type:2});
+				} = await newFunApi.InviteUserPoster({});
 				if (status == 200) {
 					console.log(data)
-					this.isPopup = true;
-					this.qrcode = data.imageUrl
+					this.qrcode = data.imageUrl;
+					this.createImge();
 				}
 			},
 			download(type) {
 				const app = this
 				app.isPopup = false;
-				if(type == 1){
-					return ;
+				if (type == 1) {
+					return;
+				} else {
+					uni.showLoading({
+						title: '加载中'
+					})
+					app.onSaveImage(app.qrcode1)
+					// this.createImge();
 				}
+				return;
 				uni.showLoading({
 					title: '加载中'
 				})
@@ -214,7 +299,7 @@
 				linkElement.click()
 			},
 			// #endif
-			
+
 			async getList1() {
 				const {
 					status,
@@ -254,7 +339,11 @@
 						url: "/pages/news/user/withdrawal?balance=" + this.userInfo.withdrawal_money
 					})
 				} else if (index == 3) {
-					this.InviteUserPoster();
+					if (!this.qrcode1) {
+						this.InviteUserPoster();
+					} else {
+						this.isPopup = true;
+					}
 				} else if (index == 4) {
 					uni.navigateTo({
 						url: "/pages/invite/rule"
@@ -272,8 +361,14 @@
 		background-size: 100% auto;
 		min-height: 100vh;
 		padding-bottom: 150rpx;
-		&-fd{
-			width: 100%; 
+
+		.myCanvas {
+			position: absolute;
+			z-index: -1;
+		}
+
+		&-fd {
+			width: 100%;
 			position: fixed;
 			left: 0;
 			bottom: 0;
@@ -283,7 +378,8 @@
 			box-sizing: border-box;
 			display: flex;
 			justify-content: center;
-			.btn{
+
+			.btn {
 				width: 642rpx;
 				line-height: 90rpx;
 				background: #F34A40;
@@ -294,6 +390,7 @@
 				color: #FFFFFF;
 			}
 		}
+
 		&-popup {
 			width: 100%;
 			height: 100%;
@@ -304,6 +401,9 @@
 			z-index: 55;
 
 			.popup {
+				display: flex;
+				justify-content: center;
+				/* 水平居中 */
 				width: 672rpx;
 				height: 912rpx;
 				position: absolute;
@@ -345,13 +445,15 @@
 					display: flex;
 					align-items: center;
 					justify-content: space-between;
-					.cancle{
+
+					.cancle {
 						flex: 1;
 						background-color: #FFFFFF;
 						margin-right: 30rpx;
 						border-radius: 10rpx;
 					}
-					.sure{
+
+					.sure {
 						border-radius: 10rpx;
 						flex: 1;
 						color: #FFFFFF;
@@ -371,11 +473,13 @@
 			}
 
 		}
+
 		&-hd {
 			width: 100%;
 			text-align: center;
 			height: 435rpx;
 			position: relative;
+
 			.rule {
 				width: 50rpx;
 				height: 170rpx;
@@ -414,6 +518,7 @@
 		&-bd {
 			padding: 0 24rpx 24rpx;
 			overflow: hidden;
+
 			.a {
 				width: 100%;
 				min-height: 290rpx;
@@ -422,7 +527,8 @@
 				margin-bottom: 20rpx;
 				padding-bottom: 50rpx;
 				overflow: hidden;
-				.title{
+
+				.title {
 					line-height: 100rpx;
 					font-weight: 400;
 					font-size: 36rpx;
@@ -430,69 +536,79 @@
 					display: flex;
 					align-items: center;
 					justify-content: center;
-					image{
+
+					image {
 						width: 52rpx;
 						height: 24rpx;
 						margin: 0 20rpx;
 					}
 				}
-				.desc1{
+
+				.desc1 {
 					text-align: center;
 					font-size: 28rpx;
 					color: #9A372D;
 					position: relative;
 				}
-				.desc{
+
+				.desc {
 					text-align: center;
 					font-size: 28rpx;
 					color: #9A372D;
 					position: relative;
-					&::after{
+
+					&::after {
 						content: "";
 						width: 100rpx;
 						height: 1px;
-						background-color:  #9A372D;
+						background-color: #9A372D;
 						position: absolute;
 						top: 50%;
 						left: 150rpx;
 						z-index: 2;
 					}
-					&::before{
+
+					&::before {
 						content: "";
 						width: 100rpx;
 						height: 1px;
-						background-color:  #9A372D;
+						background-color: #9A372D;
 						position: absolute;
 						top: 50%;
 						right: 150rpx;
 						z-index: 2;
 					}
 				}
-				.content{
+
+				.content {
 					width: 100%;
 					margin-top: 45rpx;
 					overflow: hidden;
-					.item{
+
+					.item {
 						width: 33.3%;
 						text-align: center;
 						font-size: 26rpx;
 						color: #9A372D;
 						float: left;
-						image{
+
+						image {
 							width: 122rpx;
 							height: 122rpx;
 							display: block;
 							margin: 0 auto 20rpx;
 						}
 					}
-					.li{
+
+					.li {
 						padding: 0 50rpx 0 80rpx;
 						position: relative;
 						font-weight: 400;
 						font-size: 26rpx;
 						color: #9A372D;
 						line-height: 45rpx;
-						&::after{
+
+						&::after {
 							content: "";
 							width: 10rpx;
 							height: 10rpx;
@@ -506,20 +622,23 @@
 						}
 					}
 				}
-				
+
 			}
-			.tixian{
+
+			.tixian {
 				width: 110rpx;
 				height: 110rpx;
 				background: #FFFFFF;
-				box-shadow: 0px 4rpx 12rpx 0px rgba(77,13,17,0.16);
+				box-shadow: 0px 4rpx 12rpx 0px rgba(77, 13, 17, 0.16);
 				border-radius: 50%;
-				image{
+
+				image {
 					width: 30rpx;
 					height: 30rpx;
 					display: block;
 					margin: 15rpx auto;
 				}
+
 				font-weight: 400;
 				font-size: 20rpx;
 				text-align: center;