From c7b361273a0cae7dc551fee41263f1fe9c6554cd Mon Sep 17 00:00:00 2001
From: shuxiaoquan <853623962@qq.com>
Date: Tue, 16 Apr 2024 17:13:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E5=88=86=E9=94=80=E7=A0=81?=
 =?UTF-8?q?=E4=B8=8E=E4=BC=9A=E5=91=98=E7=A0=81=E5=B1=95=E7=A4=BA+?=
 =?UTF-8?q?=E9=82=80=E8=AF=B7=E5=A5=BD=E5=8F=8B=E6=B5=B7=E6=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .hbuilderx/launch.json |   2 +-
 pages/invite/index.vue | 125 ++++++++++++++++++++++++++++++++---------
 pages/user/index.vue   |  70 +++++++++++++++++++++--
 3 files changed, 167 insertions(+), 30 deletions(-)

diff --git a/.hbuilderx/launch.json b/.hbuilderx/launch.json
index a7540fc..26019fd 100644
--- a/.hbuilderx/launch.json
+++ b/.hbuilderx/launch.json
@@ -20,7 +20,7 @@
      	},
      	"mp-weixin" : 
      	{
-     		"launchtype" : "remote"
+     		"launchtype" : "local"
      	},
      	"type" : "uniCloud"
      }
diff --git a/pages/invite/index.vue b/pages/invite/index.vue
index 7d493a6..895fd25 100644
--- a/pages/invite/index.vue
+++ b/pages/invite/index.vue
@@ -5,7 +5,8 @@
 		</view>
 		<view class="invite-hd">
 			<!-- <image :src="$picUrl+'/static/news/invite-bg.png'"></image> -->
-			<view class="btn" @click="openPage(3)"></view>
+			<view class="btn" @click="createImge">
+			</view>
 			<view class="rule" @click="openPage(4)"></view>
 		</view>
 		<view class="invite-bd">
@@ -70,17 +71,21 @@
 		<!--  -->
 		<view class="invite-popup" v-if="isPopup">
 			<view class="popup">
-				<image class="bg" show-menu-by-longpress :src="qrcode"></image>
+				<image class="bg" show-menu-by-longpress src="https://www.royaum.com.cn/static/3@2x.png"></image>
+				<image class="code" show-menu-by-longpress :src="qrcode"></image>
+				<view class="qrcode">{{userInfo.user_id}}</view>
 				<view class="tips">
 					<view class="cancle" @click="download(1)">取消</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'}" ></canvas>
 	</view>
 </template>
 
 <script>
+	const ctx = uni.createCanvasContext('myCanvas')
 	import {
 		createQrCodeImg
 	} from '@/utils/qrcode'
@@ -89,7 +94,7 @@
 	export default {
 		data() {
 			return {
-				qrcode: "",
+				qrcode: "https://www.royaum.com.cn/temp/10001/qrcode_9771ee05d738a611504d2199eb7ee1df.png?t=1713240295",
 				userInfo: {},
 				backgroundBg: {
 					"background": "rgba(255,255,255,0.22)"
@@ -99,7 +104,8 @@
 				},
 				isPopup: false,
 				info: {},
-				list: []
+				list: [],
+				devicePixelRatio: uni.getSystemInfoSync().devicePixelRatio
 			}
 		},
 		onReady() {
@@ -116,6 +122,60 @@
 			}
 		},
 		methods: {
+			createImge() {
+				const that = this;
+				
+				ctx.fillRect(0, 0, 702/that.devicePixelRatio, 1248/that.devicePixelRatio);
+				uni.downloadFile({
+					url: 'https://www.royaum.com.cn/static/3@2x.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)
+									// uni.saveImageToPhotosAlbum({
+									// 	filePath: res.tempFilePath,
+									// 	success(data) {
+									// 		that.$success('保存成功')
+									// 	},
+									// 	fail(err) {
+									// 		if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
+									// 			that.$toast('请允许访问相册后重试 (右上角菜单 - 设置 - 相册)', 3000)
+									// 		}
+									// 	}
+									// })
+								  } 
+								})
+								
+							},
+						})
+
+					}
+				})
+
+				
+			},
 			// 获取预售规则
 			getCarousel() {
 				const app = this;
@@ -168,7 +228,10 @@
 				app.isPopup = false;
 				if(type == 1){
 					return ;
+				}else{
+					
 				}
+				return ;
 				uni.showLoading({
 					title: '加载中'
 				})
@@ -191,7 +254,6 @@
 			// 图片保存到相册
 			onSaveImage(tempFilePath) {
 				const app = this
-				// #ifndef H5
 				uni.saveImageToPhotosAlbum({
 					filePath: tempFilePath,
 					success(data) {
@@ -203,7 +265,6 @@
 						}
 					}
 				})
-				// #endif
 				// #ifdef H5
 				const names = tempFilePath.split('/')
 				const fileName = names[names.length - 1]
@@ -272,7 +333,13 @@
 	.invite {
 		background: url(https://www.royaum.com.cn/static/news/invite-bg.png?t=2) center top no-repeat;
 		background-size: 100% auto;
-
+		.myCanvas{
+			position: absolute;
+			left: 0;
+			top: 0;
+			z-index: -1;
+			opacity: 0;
+		}
 		&-popup {
 			width: 100%;
 			height: 100%;
@@ -283,43 +350,51 @@
 			z-index: 55;
 
 			.popup {
-				width: 672rpx;
-				height: 912rpx;
+				width: 702rpx;
+				height: 1370rpx;
 				position: absolute;
 				left: 50%;
-				margin-left: -336rpx;
+				margin-left: -351rpx;
 				top: 50%;
-				margin-top: -556rpx;
+				margin-top: -685rpx;
 				z-index: 2;
-
-				.bg {
-					width: 672rpx;
-					height: 100%;
-					border-radius: 26rpx;
+				.bg{
+					width: 702rpx;
+					height: 1248rpx;
+				}
+				.code {
+					width: 162rpx;
+					height: 162rpx;
+					border-radius: 50%;
+					position: absolute;
+					left: 50%;
+					bottom: 340rpx;
+					z-index: 2;
+					margin-left: -65rpx;
 				}
 
 				.qrcode {
 					width: 200rpx;
-					height: 200rpx;
+					height: 80rpx;
 					position: absolute;
-					right: 25rpx;
-					top: 670rpx;
-					border: 8rpx solid #FFFFFF;
+					left: 85px;
+					bottom: 125rpx;
 					z-index: 2;
-					border-radius: 5rpx;
+					font-size: 45rpx;
+					color: #cf100d;
+					text-align: center;
 				}
 
 				.tips {
-					width: 672rpx;
+					width: 100%;
 					height: 80rpx;
 					position: absolute;
 					text-align: center;
 					font-size: 30rpx;
 					line-height: 80rpx;
 					color: #212121;
-					left: 50%;
-					margin-left: -336rpx;
-					bottom: -120rpx;
+					left: 0;
+					bottom: 0;
 					z-index: 2;
 					display: flex;
 					align-items: center;
diff --git a/pages/user/index.vue b/pages/user/index.vue
index 579a143..9205a5a 100644
--- a/pages/user/index.vue
+++ b/pages/user/index.vue
@@ -546,8 +546,11 @@
 			<image :src="$picUrl+'/static/toTop.png?=1'"></image>
 		</view>
 		<view class="memberCode" v-if="memberCode" @click="memberCode=false">
-			<view class="codeMain">
-				<view class="myCode">
+			<view class="codeMain1" v-if="lookMemberType == 2">
+				<image class="bg" :show-menu-by-longpress="true" src="https://www.royaum.com.cn/static/1@2x.png"></image>
+				<image class="code" :show-menu-by-longpress="true" :src="qrcode"></image>
+				<view class="btn" @click.stop="goMember('hy')"></view>
+				<!-- <view class="myCode">
 					<text v-if="lookMemberType == 2">我的专属会员识别码</text>
 					<text v-if="lookMemberType == 3">我的专属分销识别码</text>
 				</view>
@@ -557,7 +560,12 @@
 				</view>
 				<view class="codeName">
 					{{userInfo.user_id}}
-				</view>
+				</view> -->
+			</view>
+			<view class="codeMain2" v-if="lookMemberType == 3">
+				<image class="bg" :show-menu-by-longpress="true" src="https://www.royaum.com.cn/static/2@2x.png"></image>
+				<image class="code" :show-menu-by-longpress="true" :src="qrcode"></image>
+				<view class="btn" @click.stop="goMember('fx')"></view>
 			</view>
 		</view>
 	</view>
@@ -2089,7 +2097,61 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-
+		.codeMain1{
+			width: 702rpx;
+			height: 702rpx;
+			position: relative;
+			.bg{
+				width: 100%;
+				height: 100%;
+			}
+			.code{
+				width: 170rpx;
+				height: 170rpx;
+				border-radius: 50%;
+				position: absolute;
+				right: 70rpx;
+				bottom: 55rpx;
+				z-index: 2;
+			}
+			.btn{
+				width: 220rpx;
+				height: 50rpx;
+				position: absolute;
+				left: 50%;
+				top: 172rpx;
+				margin-left: -110rpx;
+				z-index: 3;
+			}
+		}
+		.codeMain2{
+			width: 702rpx;
+			height: 889rpx;
+			position: relative;
+			.bg{
+				width: 100%;
+				height: 100%;
+			}
+			.code{
+				width: 150rpx;
+				height: 150rpx;
+				border-radius: 50%;
+				position: absolute;
+				left: 50%;
+				bottom: 105rpx;
+				margin-left: -75rpx;
+				z-index: 2;
+			}
+			.btn{
+				width: 400rpx;
+				height: 50rpx;
+				position: absolute;
+				left: 50%;
+				bottom: 10rpx;
+				margin-left: -200rpx;
+				z-index: 3;
+			}
+		}
 		.codeMain {
 			width: 560rpx;
 			height: 714rpx;