1

pages/order/after-sale/refunds.vue

@@ -206,7 +206,7 @@ export default {
     uploadSuccessHandler(data, index, lists) {
       console.log(JSON.parse(data));
       let r = JSON.parse(data);
-      this.forms.VoucherList.push(r.data.url);
+      this.forms.VoucherList.push(r.data);
     },
 	valChange(val){
 		this.forms.ReNumber = Number(val.value) ;

pages/share-qrcode/share-qrcode.vue

 <template>
 	<view class="qrcodeStyle" :style="{'height':contentHeight}">
-		<view style="width: 70%;margin-left: 15%;">
-			<image :src="qrcode.pic_url"  style="width: 100%;" mode='widthFix'></image>
-		</view>
+		<u-top-tips ref="uTips"></u-top-tips>
+	<img :src="tempPic" mode="widthFix" style="width: 320px;margin-top: 20px;" />
+		<canvas
+		  canvas-id="firstCanvas"
+		  class="sty-box"
+		  @error="canvasIdErrorCallback"
+		></canvas>
 		<view class="btn" :style="{background:mainColor}" @click="preservation">
 			<Text>保存图片分享赚钱</Text>
 		</view>
@@ -17,12 +21,18 @@
 				contentHeight:0,
 				mainColor:'',
 				qrcode:'',
+				fenxqrcode:'',
+				UserInfo:'',
+				tempPic:'',
 			}
 		},created(){
 			 this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
 			 this.mainColor = this.$uiConfig.mainColor;
 			 this.secondary = this.$uiConfig.secondary;
+			 this.UserInfo = uni.getStorageSync('mall_UserInfo') ?uni.getStorageSync('mall_UserInfo'):{}
+			 console.log(this.UserInfo)
 			 this.init()
+			 
 		},
 		mounted() {
 			
@@ -33,46 +43,179 @@
 		methods: {
 			init(){
 				uni.showNavigationBarLoading();
-				let h = this.apiheader();
-				
 				this.request2(
 				 {
-					url: '/api/AppletOrder/SetAppletOrderSendGoods',
-					data: that.forms
+					url: '/api/AppletUser/GetFenXiaoPoster',
+					data: {}
 				 },	
-							
 			  (res) => {
 				uni.hideNavigationBarLoading()
 				this.qrcode = res.data;
+				this.getWeiXinQRCode()
+			  }
+			);
+		  },	
+		  getWeiXinQRCode(){
+			  uni.showNavigationBarLoading();
+			  	this.request2(
+			  	 {
+			  		url: '/api/AppletUser/GetWeiXinQRCodeForApplet',
+			  		data: {
+						Path:'pages/index/index/pid='+this.UserInfo.UserId,
+						With:this.qrcode.QrCodeSize,
+					}
+			  	 },	
+			    (res) => {
+			  	uni.hideNavigationBarLoading()
+			  	this.fenxqrcode = this.host2+res.data;
+				// this.fenxqrcode = 'https://mallApi.oytour.com'+res.data;
+				
+				this.drawCtx();
+			    }
+			  );
+		  },
+		  drawCtx(){
+			  uni.showLoading({
+			    title: "正在生成海报",
+			  });
+			  let ctx = uni.createCanvasContext("firstCanvas", this);
+			  let that = this;
+			  uni.getImageInfo({
+			    src: that.qrcode.PosterBgImg,
+			    success: function (image) {
+			      ctx.drawImage(image.path, 0, 0, 750, 1344);//绘制图	
+				  if(that.qrcode.IsShowHead==0){
+					  that.drawTitle(ctx); //绘制文字
 				  }
+				  if(that.qrcode.IsShowNick==0){
+					  
+				  	uni.getImageInfo({//头像
+				  	  src: that.UserInfo.Photo,
+				  	  success: function (image) {
+				  			  ctx.save(); // 先保存状态 已便于画完圆再用
+				  			        ctx.beginPath(); //开始绘制
+				  			        //先画个圆
+				  			        ctx.arc(that.qrcode.HeadSize/2+that.qrcode.HeadPaddingLeft, that.qrcode.HeadSize/2+that.qrcode.HeadPaddingTop, that.qrcode.HeadSize/2, 0, Math.PI * 2, false);
+				  			        ctx.clip();//画了圆 再剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
+				  			         ctx.drawImage(image.path, that.qrcode.HeadPaddingLeft, that.qrcode.HeadPaddingTop, that.qrcode.HeadSize, that.qrcode.HeadSize);//绘制头像
+				  			        ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
+				  			        
+				  			    
+				  	   	
+						
+						if(that.qrcode.IsShowQrCode==0){ //二维码
+							  uni.getImageInfo({//头像
+								src: that.UserInfo.Photo,
+								success: function (image) {
+															
+								  ctx.drawImage(image.path, that.qrcode.QrCodePaddingLeft, that.qrcode.QrCodePaddingTop, that.qrcode.QrCodeSize, that.qrcode.QrCodeSize);//绘制头像	
+									that.drawQrCode(ctx)		
+								},
+							  });
+						}
+				  	  },
+				  	});
+				  }else{
+					  if(that.qrcode.IsShowQrCode==0){
+					  	  
+					  	  uni.getImageInfo({//头像
+					  		src: that.UserInfo.Photo,
+					  		success: function (image) {
+					  									
+					  		  ctx.drawImage(image.path, that.qrcode.QrCodePaddingLeft, that.qrcode.QrCodePaddingTop, that.qrcode.QrCodeSize, that.qrcode.QrCodeSize);//绘制头像	
+					  			that.drawQrCode(ctx)		
+					  		},
+					  	  });
+					  }
+				  }
+				
+
+			    },
+			  });	
+			
+			  
+			  
+		  },
+	
+		  drawTitle(ctx){
+			  let that = this
+			  let text = that.UserInfo.Name;
+			  ctx.setFillStyle = that.qrcode.NickColor; 
+			  ctx.setFontSize(that.qrcode.NickSize)
+			  ctx.fillText(text, that.qrcode.NickPaddingLeft, that.qrcode.NickPaddingTop);
+			  ctx.restore();
+		  },
+		  drawQrCode(ctx) {
+		    let that = this;
+		   ctx.draw(false, () => {
+		     uni.canvasToTempFilePath(
+		       {
+		         x: 0,
+		         y: 0,
+		         width: 750,
+		         height: 1344,
+		         destWidth: 750.0 ,
+		         destHeight: 1344.0 ,
+		         canvasId: "firstCanvas",
+		         success: (res) => {
+		           
+		           uni.hideLoading();
+		           that.tempPic = res.tempFilePath;
+		         },
+		         fail(e) {
+		           console.log(e);
+		         },
+		       },
+		       that
 		     );
+		   });
 		  },
+		  
 		  preservation(){
-			  console.log('保存')
 			  
-			  uni.downloadFile({
-			  		url: this.qrcode.pic_url,
-			  		success: (res) =>{
-			  			if (res.statusCode === 200){
-							console.log(res)
+			  
+			uni.showLoading({
+			  title: "正在生成海报",
+			});
+			let that = this;
+			uni.canvasToTempFilePath(
+			  {
+			    canvasId: "firstCanvas",
+			    success: (res) => {
+			      uni.hideLoading();
+			      uni.showLoading({
+			        title: "正在保存海报",
+			      });
 			      uni.saveImageToPhotosAlbum({
 			        filePath: res.tempFilePath,
-			  					success: function() {
+			        success: function () {
 			          uni.showToast({
 			            title: "保存成功",
-			  							icon: "none"
 			          });
 			        },
-			  					fail: function() {
-			  						uni.showToast({
+			        fail: function (e) {
+			          that.$refs.uTips.show({
 			            title: "保存失败，请稍后重试",
-			  							icon: "none"
+			            type: "error",
+			            duration: "2300",
 			          });
-			  					}
+			        },
+			        complete: function () {
+			          uni.hideLoading();
+			        },
 			      });
-			  			}
-			  		}
-				})
+			    },
+			    fail: function (e) {
+			      console.log(e);
+			      that.$refs.uTips.show({
+			        title: "生成失败，请稍后重试",
+			        type: "error",
+			        duration: "2300",
+			      });
+			    },
+			  },
+			  this
+			);
 		  }
 		}
 	}
@@ -81,16 +224,35 @@
 <style>
 .qrcodeStyle{
 	background: #f3f4f6;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }
 .qrcodeStyle .btn{
 	width: 80%;
 	height: 50px;
 	border-radius: 25px;
 	color: #fff;
-	margin-left: 10%;
+	
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	margin-top: 20px;
 }
+.qrcodeStyle .imgbox{
+	width: 70%;
+	height: 515px;
+	margin-left: 15%;
+	position: relative;
+	background-repeat:no-repeat;
+	background-size: 100% 515px;
+	
+}
+.qrcodeStyle .sty-box {
+  width: 750px;
+  height: 1344px;
+  position: absolute;
+  top: -1344px;
+  left: -750px;
+}
 </style>