From f00203362583d709e89f6e5339d4d4af3d8d5ca2 Mon Sep 17 00:00:00 2001
From: yanyan <evelyn_yanyan@sina.cn>
Date: Fri, 15 Mar 2024 15:43:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=B7=E6=8A=A5=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 subpkg/complete/complete.vue | 217 +++++++++++++++++++++++++++++++++--
 1 file changed, 210 insertions(+), 7 deletions(-)

diff --git a/subpkg/complete/complete.vue b/subpkg/complete/complete.vue
index b798dd9..532e582 100644
--- a/subpkg/complete/complete.vue
+++ b/subpkg/complete/complete.vue
@@ -62,15 +62,21 @@
 			<view @click=""><label><button open-type="share"></button><image src="/static/images/btn-wx.png"></image></label>分享给微信好友</view>
 		  </view>
 		  <view class="myitem"> 
-			<view @click=""><label><button @tap="share"></button><image src="/static/images/btn-pyq.png"></image></label>分享到朋友圈</view>
-		  </view>
-		  <view class="myitem"> 
-			<view @click=""><label><image src="/static/images/btn-ma.png"></image></label>二维码邀请</view>
+		  	<view @click="formSubmit()"><label><image src="/static/images/btn-ma.png"></image></label>二维码邀请</view>
 		  </view>
 		</view>
 	</view>
-	</view>
+	<canvas class="shengcheng" id="photo" type="2d" style="width: 600rpx;height: 1000rpx"></canvas>
+		<!--生成海报后的图  -->
+		<view v-if="showLoad">
+			<view class='imagePathBox'>
+			<!--  <image :src="tempFilePath" class='shengcheng' show-menu-by-longpress="true"></image> -->
+			  <button class='baocun' @click="saveImage()">保存至相册</button>
+			</view>
+			<view class="mask"></view> 
+	    </view> 
 
+	</view>
 </template>
 
 <script>
@@ -92,6 +98,10 @@
 			   "showAnlysisc":false,
 			   "showMedal":true,
 			   "showShare":false,
+			   "showLoad":false,
+			   canvas: null,  //canvas 对象
+			   tempFilePath: "",
+			   "imageQR":''
 			};
 		},
 		//分享到好友
@@ -118,12 +128,13 @@
 			  this.showLayer = false
 			  clearTimeout(this.timer)
 			}, 5000)
-			this.roleId = options.roleId
-			this.questionFreId = options.questionFreId
+			this.roleId = options.roleId !=null ? options.roleId : this.roleId
+			this.questionFreId = options.questionFreId!=null ? options.questionFreId : this.questionFreId
 			this.sceneId = options.sceneId;
 			this.getQuestionList()
 			this.getRecordList()
 			this.editUserMedal();
+			this.getQR();
 		},
 		computed: {
 			...mapState('m_user', ['userId'])
@@ -180,6 +191,14 @@
 
 				//uni.$showMsg('数据请求成功！')
 			},
+			async getQR() {
+				const {
+					data: res
+				} = await uni.$http.post('/small/scene/manage/getQRCode')
+				if (!res.success) return uni.$showMsg()
+				this.imageQR =  uni.$http.baseUrl + res.data
+				//uni.$showMsg('数据请求成功！')
+			},
 			backIndex() {
 				uni.switchTab({
 					url: '/pages/index/index'
@@ -204,6 +223,150 @@
 				this.showShare = false
 				this.showLayer = false
 			},
+			formSubmit(){
+			  wx.createSelectorQuery()
+			    .select('#photo') // 在 canvas的 id
+			    .fields({
+			      node: true,
+			      size: true
+			    })
+			    .exec((res) => {
+			      // Canvas 对象
+			      const canvas = res[0].node
+				  this.canvas = canvas
+			      // 渲染上下文
+			      const context = canvas.getContext('2d')
+			      // canvas 画布的实际绘制宽高
+			      const width = res[0].width
+			      const height = res[0].height
+                  // 初始化画布大小
+                  const dpr = wx.getWindowInfo().pixelRatio
+                  canvas.width = width * dpr
+                  canvas.height = height * dpr
+                  context.scale(dpr, dpr)
+                  // 清空画布
+                  context.clearRect(0, 0, width, height)
+                  //canvas背景色
+                  context.fillStyle = '#3c9cff';
+				  context.fillStyle ="#FFF" // 背景颜色
+				  context.fillRect(0, 0, 500, 800)              //  667 绘制一个矩形作为背景矩形x坐标、y坐标、图片宽、高   
+				  //绘制左下角文字
+				  context.fontSize = 12;
+				  context.fillStyle = '#333';
+				  context.textAlign ='left';
+				  context.fillText("长按识别小程序～", 10, 520);
+				  context.stroke();
+                  // 图片对象
+                 const image = canvas.createImage()
+                 image.src = '/static/images/share_bg.png'
+				 // 图片对象
+				 const imageQR = canvas.createImage()
+				 imageQR.src = this.imageQR 
+                 image.onload = () => {
+                 // 将图片绘制到 canvas 上
+                 context.drawImage(image, 0, 0, 350, 450)
+				 context.drawImage(imageQR, 200, 450, 130, 120)
+                }
+              })
+			   this.showLoad = true
+			   this.showShare = false
+			   this.showLayer = false 
+			},
+			saveImage() {
+			  uni.canvasToTempFilePath({
+			    canvasId: 'photo',
+			    destWidth: 286,
+			    destHeight: 417,
+			    canvas: this.canvas,
+			    success: (res) => {
+			      this.tempFilePath =  res.tempFilePath
+			      uni.saveImageToPhotosAlbum({
+			        filePath: res.tempFilePath,
+			        success: (res)=> {
+			          wx.showToast({
+			            title: '保存成功',
+			          })
+					  this.showLoad = false
+					  const canvas = this.canvas;
+					  const ctx = canvas.getContext("2d");
+					  ctx.clearRect(0, 0, 500, 800)    
+			        }
+			      })
+			    }
+			  });
+			},
+            formSubmit(){
+			  wx.createSelectorQuery()
+			    .select('#photo') // 在 canvas的 id
+			    .fields({
+			      node: true,
+			      size: true
+			    })
+			    .exec((res) => {
+			      // Canvas 对象
+			      const canvas = res[0].node
+				  this.canvas = canvas
+			      // 渲染上下文
+			      const context = canvas.getContext('2d')
+			      // canvas 画布的实际绘制宽高
+			      const width = res[0].width
+			      const height = res[0].height
+                  // 初始化画布大小
+                  const dpr = wx.getWindowInfo().pixelRatio
+                  canvas.width = width * dpr
+                  canvas.height = height * dpr
+                  context.scale(dpr, dpr)
+                  // 清空画布
+                  context.clearRect(0, 0, width, height)
+                  //canvas背景色
+                  context.fillStyle = '#3c9cff';
+				  context.fillStyle ="#FFF" // 背景颜色
+				  context.fillRect(0, 0, 500, 800)              //  667 绘制一个矩形作为背景矩形x坐标、y坐标、图片宽、高   
+				  //绘制左下角文字
+				  context.fontSize = 12;
+				  context.fillStyle = '#333';
+				  context.textAlign ='left';
+				  context.fillText("长按识别小程序～", 10, 520);
+				  context.stroke();
+                  // 图片对象
+                 const image = canvas.createImage()
+                 image.src = '/static/images/share_bg.png'
+				 // 图片对象
+				 const imageQR = canvas.createImage()
+				 imageQR.src = this.imageQR 
+                 image.onload = () => {
+                 // 将图片绘制到 canvas 上
+                 context.drawImage(image, 0, 0, 350, 450)
+				 context.drawImage(imageQR, 200, 450, 130, 120)
+                }
+              })
+			   this.showLoad = true
+			   this.showShare = false
+			   this.showLayer = false 
+			},
+			saveImage() {
+			  uni.canvasToTempFilePath({
+			    canvasId: 'photo',
+			    destWidth: 286,
+			    destHeight: 417,
+			    canvas: this.canvas,
+			    success: (res) => {
+			      this.tempFilePath =  res.tempFilePath
+			      uni.saveImageToPhotosAlbum({
+			        filePath: res.tempFilePath,
+			        success: (res)=> {
+			          wx.showToast({
+			            title: '保存成功',
+			          })
+					  this.showLoad = false
+					  const canvas = this.canvas;
+					  const ctx = canvas.getContext("2d");
+					  ctx.clearRect(0, 0, 500, 800)    
+			        }
+			      })
+			    }
+			  });
+			},
 			itemClickHandler(item) {
 				if (item !== "") {
 					this.ask = item.ask
@@ -472,4 +635,44 @@
 	  height: 4rpx;
 	  width: 24rpx;
 	}
+	
+	.imagePathBox{
+		  width: 100%;
+		  height: 100%;
+		  background: rgba(0,0,0,0.7);
+		  position: fixed;
+		  top: 0;
+		  left: 0;
+		  right: 0;
+		  bottom: 0;
+		  z-index: 100000;
+		}
+		.shengcheng{
+		  width: 86%;
+		  height: 60%;
+		  position: fixed;
+		  top: 18%;
+		  left: 50%;
+		  margin-left: -43%;
+		  z-index: 999;
+		}
+		.baocun{
+		  display: block;
+		  width: 80%;
+		  height: 75rpx;
+		  padding: 0;
+		  line-height: 75rpx;
+		  text-align: center;
+		  position: fixed;
+		  bottom: 50rpx;
+		  left: 10%;
+		  color: #fff;
+		  font-size: 32rpx;
+		  border-radius: 50rpx;
+		  background: #1367fe;
+		
+		}
+		button[class="baocun"]::after{
+		  border: 0;
+		}
 </style>
\ No newline at end of file