李万涛 1 年之前
父节点
当前提交
f5afe5c5d0
共有 4 个文件被更改,包括 984 次插入121 次删除
  1. 316 112
      pages/painting/details.vue
  2. 342 7
      pages/painting/generate.vue
  3. 325 1
      pages/painting/ys.vue
  4. 1 1
      pages/user/commission/index.vue

+ 316 - 112
pages/painting/details.vue

xqd xqd xqd xqd xqd xqd xqd xqd xqd xqd xqd xqd xqd xqd xqd xqd
@@ -17,35 +17,20 @@
 				<view v-if="showprogress" class="progress">
 					<u-line-progress :percentage="percentage" activeColor="#9b59b6" height="18"></u-line-progress>
 				</view>
-				<!-- <image src="../../static/images/head.jpg" ></image> -->
 			</view>
 		</block>
 
-		<!-- 页面内容 -->
 		<swiper class="card-swiper" :circular="false" :autoplay="true" duration="500" interval="12000"
 			@change="cardSwiper">
 			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
-				<!-- <view class="swiper-item image-banner" :style="'background-image:url('+ item.url + ');background-size: cover;'"> -->
-				<!-- <view class="swiper-item image-banner"> -->
-				<!-- <image :src="item.url" mode="widthFix"></image> -->
-				<!-- @click.stop="preview(item.url)" -->
 				<view class="lazy-load" :style="{height: windowHeight+'px'}">
 					<u--image @load="previewload" @error="previewerror" width="100%" height="100%" :src="item.url"
 						mode="widthFix">
-						<!-- <template v-slot:loading>
-							<view class="flxe align-center justify-center">
-								<u-loading-icon size="50" :vertical="true" color="#fff" text="图片渲染中..."></u-loading-icon>
-							</view>
-							
-						</template> -->
 						<view slot="error" style="font-size: 32rpx;text-align: center;">
 							图片加载失败
 						</view>
 					</u--image>
 				</view>
-
-
-				<!-- </view> -->
 			</swiper-item>
 		</swiper>
 		<view class="indication">
@@ -54,14 +39,11 @@
 			</block>
 		</view>
 
-
-		<!-- 底部tabbar start-->
 		<view class="tabbar footerfixed dd-glass tn-color-white" style="border-radius: 100rpx;">
 			<view class="action" @click="getisback">
 				<view class="bar-icon">
 					<view class="tn-icon-left-circle">
 					</view>
-					<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/a1.png'></image> -->
 				</view>
 				<view class="">立即返回</view>
 			</view>
@@ -69,7 +51,6 @@
 				<view class="bar-icon">
 					<view class="tn-icon-download">
 					</view>
-					<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/k2.png'></image> -->
 				</view>
 				<view class="">下载/分享</view>
 			</view>
@@ -79,7 +60,6 @@
 				<view class="bar-icon">
 					<view class="tn-icon-creative">
 					</view>
-					<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/i2.png'></image> -->
 				</view>
 				<view class="">绘画参数</view>
 			</view>
@@ -109,7 +89,6 @@
 					<view class="bar-icon">
 						<view class="tn-icon-write">
 						</view>
-						<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/d2.png'></image> -->
 					</view>
 					<view class="">创作相似</view>
 				</view>
@@ -119,14 +98,12 @@
 					<view class="bar-icon">
 						<view class="tn-icon-up-circle">
 						</view>
-						<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/d2.png'></image> -->
 					</view>
 					<view class="">{{showopen?'已公开':'公开作品'}}</view>
 				</view>
 			</view>
 		</view>
 
-		<!-- 压屏窗-->
 		<tn-landscape :show="show1" @close="closeLandscape" closePosition="bottom" :closeSize="60">
 			<view class="tn-color-white" style="width: 100vw;">
 
@@ -141,7 +118,6 @@
 					<view v-if="form.keywords"
 						class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-xl tn-text-justify">
 						<text class="">描述词:{{form.keywords}}</text>
-						<!-- <text class="">描述词:{{sd_keywords}}</text> -->
 					</view>
 					<view v-if="parameter.model_name"
 						class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-xl tn-text-justify">
@@ -166,11 +142,7 @@
 			</view>
 		</u-popup>
 
-		<!-- 	<div class="shareBox">
-			shareBox
-		</div> -->
-
-		<XQ-GeneratePoster ref="draw" @genSuc="receiveUrl" />
+		<wike-painter style="display: none;" :board="posterObj" @done="posterSuccess" ref="painter"></wike-painter>
 	</view>
 </template>
 
@@ -190,29 +162,7 @@
 	export default {
 		data() {
 			return {
-				option: {
-					//绘制海报内容
-					codeUrl: 'https://pic1.zhimg.com/80/v2-2714df42147132464a71af391ed04be4_720w.jpg', //小程序太阳码
-					picUrl: 'https://pic1.zhimg.com/80/v2-2714df42147132464a71af391ed04be4_720w.jpg', //题库图片
-					headUrl: 'https://pic1.zhimg.com/80/v2-b9df1fdfe67f2177d5c84af90dcadfc1_720w.jpg?source=1940ef5c', //头像
-					bgUrl: require('@/static/shareBg.png'), //图片背景填充,和 fillStyle 只能传一个,bgUrl 优先级高于 fillStyle
-					fillStyle: '#0688ff', //纯色背景填充颜色
-					nickName: 'X艾拉', //授权登录的用户名
-					miniName: '', //小程序名称
-					tkName: '免费体验Al生成个人质感艺术照', //题库名称
-					tkAuthor: '设计微信/抖音/小红书专属头像', //题库作者
-					tkType: '考试', //题库类型
-					cost: '免费', //是否需要收费   免费/付费
-					isPub: '公开' //公开 还是 私有
-				},
-
-
-
-
-				showShare: true,
-
 				tobheight: 45,
-				platform: this.$platform.get(),
 				showdrawing: true,
 				showprogress: true,
 				drawingtitle: '正在努力绘制中...',
@@ -231,45 +181,46 @@
 				showopen: false,
 				failnum: 0,
 				windowHeight: 0,
-
 				engin: '',
-
 				progress: 0,
 				isDowload: false,
 				show: false,
-
 				sd_keywords: '',
+				
 
+				// 生成海报data
+				platform: this.$platform.get(),
+				
+				qrcode:'',
 				spmplatform: 0,
-
+				posterObj: {},
+				info:{
+					// poster_bg_img_path:"",
+					
+					poster_bg_width:347,
+					poster_bg_height:574,
+					
+					poster_qrcode_x:278,
+					poster_qrcode_y:495,
+					poster_qrcode_width:52,
+					poster_qrcode_height:52,
+				},
 			}
 		},
+		
+		// 生成海报需要的数据由此开始
 		computed: {
 			...mapGetters(['appInfo', 'homeTemplate', 'isLogin', 'userInfo', 'userData'])
 		},
-		onUnload() {
-			clearTimeout(timingr);
-			clearTimeout(asynchronous);
-		},
 		onShow() {
-			this.option.headUrl = this.userInfo.avatar
-			this.option.nickName = this.userInfo.nickname
 			console.log('this.userInfo-----------------', this.option, this.userInfo);
 		},
 		onLoad(o) {
 			this.spmplatform = ['H5', 'wxOfficialAccount', 'wxMiniProgram', 'App'].indexOf(this.platform) + 1;
 			this.commonqrcodePath()
-
-
-
-			// if (o.keywords) {
-			// 	this.sd_refImg = o.keywords
-			// 	console.log('sd绘画关键词', this.sd_refImg);
-			// }
-
+		
 			var that = this;
 			this.windowHeight = uni.$u.sys().windowHeight - 60
-			// console.log(this.windowHeight);
 			this.engin = that.$Route.query.from
 			if (that.$Route.query.urls) {
 				this.showprogress = false
@@ -280,26 +231,34 @@
 				this.form = that.$Route.query.form
 				console.log('生成绘画的参数:', this.form);
 				this.parameter.refImg = this.form.refer_img
-
 				this.parameter.prompt = this.form.init_image + this.form.prompt
-
-
 				this.parameter.model_name = this.form.model_id
 				this.parameter.width = this.form.width
 				this.parameter.height = this.form.height
 				this.parameter.engine = 'sd'
 				this.show2 = false
-				// this.parameter = that.$Route.query.form
-
-
 				this.sd_keywords = this.form.keywords
-				// console.log('sd绘画关键词', this.sd_keywords);
-				// console.log('sd绘画关键词--------------------');
 				this.aiPlay();
 			}
-			// this.sd_keywords = this.form.keywords
 		},
 		methods: {
+			downloadPic(e) {
+				return new Promise((resolve, reject) => {
+					uni.request({
+						url: e,
+						method: 'GET',
+						responseType: 'arraybuffer',
+						success: ress => {
+							let base64 = uni.arrayBufferToBase64(ress.data);
+							base64 = 'data:image/jpeg;base64,' + base64
+							resolve(base64);
+						},
+						fail: (e) => {
+							resolve('fail');
+						}
+					})
+				});
+			},
 			commonqrcodePath() {
 				let spm = this.userInfo.id + '.1.0.' + this.spmplatform + '.1';
 				// console.log(spm);
@@ -307,38 +266,273 @@
 					spm: spm
 				}).then(res => {
 					if (res.code == 0) {
-						this.option.codeUrl = res.data;
-
-						console.log('二维码地址=============', this.option.codeUrl);
-
+						this.qrcode= res.data;
+						// this.createPoster()
+						console.log('二维码需要包含的url信息=============', this.qrcode);
 					}
 				});
 			},
-			receiveUrl(e) {
-				// console.log('接收到的海报url------', e);
-				uni.showModal({
-					title: '提示',
-					content: '请查看图片后长按图片保存',
-					confirmText: '查看',
-					confirmColor: '#1F79F0',
-					success: function(res) {
-						if (res.confirm) {
-							uni.previewImage({
-								urls: [e],
-								longPressActions: {
-									itemList: ['发送给朋友', '保存图片', '收藏'],
-									success: function(data) {},
-									fail: function(err) {
-										console.log(err.errMsg);
+			async createPoster(e) {
+				let that = this;
+				
+				let avatarUrl = '';
+				let mainUrl = '';
+				uni.showLoading({
+					title: '海报渲染中'
+				});
+				
+				console.log("that.swiperList[0].url,that.userInfo.avatar",that.userInfo,that.swiperList[0].url,that.userInfo.avatar);
+		
+		if (that.swiperList[0].url.indexOf("https") < 0) {
+			mainUrl = await that.downloadPic(that.swiperList[0].url.replace("http:", "https:"));
+		} else {
+			mainUrl = await that.downloadPic(that.swiperList[0].url);
+		}
+		if (mainUrl == 'fail') {
+			uni.hideLoading();
+			uni.showToast({
+				title: '生成失败',
+				icon: 'none'
+			})
+			return;
+		}
+		// that.userInfo.avatar="https://face.cdn.zhishuyun.com/attachments/1133012400174534792/1204009950465101866/0d47db66-1faf-42df-a732-22cf18697a65_ins.png?ex=65d32ca5&is=65c0b7a5&hm=7219a0f250453314cfbf9eefaf2e927ba8d6adea944774b3fe32e67c0787a877&"
+				if (that.userInfo.avatar.indexOf("https") < 0) {
+					avatarUrl = await that.downloadPic(that.userInfo.avatar.replace("http:", "https:"));
+				} else {
+					avatarUrl = await that.downloadPic(that.userInfo.avatar);
+				}
+				if (avatarUrl == 'fail') {
+					uni.hideLoading();
+					uni.showToast({
+						title: '生成失败',
+						icon: 'none'
+					})
+					return;
+				}
+				let proportionally = this.info.poster_bg_width / uni.$u.sys().windowWidth;
+				(this.posterObj = {
+					width: (this.info.poster_bg_width / proportionally) + 'px',
+					height: (this.info.poster_bg_height / proportionally) + 'px',
+					background: 'rgba(0,0,0,0)',
+					borderRadius: '16rpx',
+			views: [
+				// 背景图
+				{
+					src:'/static/shareBg.png',
+					type: "image",
+					css: {
+							width: (this.info.poster_bg_width / proportionally) + 'px',
+							height: (this.info.poster_bg_height / proportionally) + 'px',
+						}
+				},
+				// 主图
+				{
+					type: 'view',
+						css: {
+							position:'absolute',
+							left: '24rpx',
+							top: '24rpx',	
+							},
+							views: [
+									{
+										src: mainUrl,
+										type: "image",
+										css: {
+												width: 705 + 'rpx',
+												height:936+ 'rpx',
+												borderRadius: '28rpx',
+											}
+									},
+								],
+				},
+							
+				// 头像
+				{
+					type: 'view',
+						css: {
+							display: 'flex',
+							position:'absolute',
+							left: '24rpx',
+							top: '1060rpx',
+									
+							},
+							views: [
+									{
+									type: 'image',
+									src:  avatarUrl,
+									css: {
+										marginTop: '-80rpx',
+										borderRadius: '50%',
+										width: '94rpx',
+										height: '94rpx',
+										objectFit: 'cover'
+										}
+									},
+								],
+				},
+				// 昵称
+				{
+					type: 'view',
+						css: {
+							display: 'flex',
+							position:'absolute',
+							left: '140rpx',
+							bottom: '196rpx',
+									
+							},
+							views: [
+									{
+										type: 'text',
+										text: that.userInfo.nickname,
+										css: {
+											fontSize: '28rpx',
+											color: '#333333',
+										}
+									}
+								],
+				},
+				
+				// 海报文案1
+				{
+					type: 'view',
+						css: {
+							display: 'flex',
+							position:'absolute',
+							left: '24rpx',
+							bottom: '96rpx',
+									
+							},
+							views: [
+									{
+										type: 'text',
+										text: '免费体验Al生成个人质感艺术照',
+										css: {
+											fontSize: '32rpx',
+											color: '#333333',
+										}
+									}
+								],
+				},
+				// 海报文案2
+				{
+					type: 'view',
+						css: {
+							display: 'flex',
+							position:'absolute',
+							left: '24rpx',
+							bottom: '44rpx',
+									
+							},
+							views: [
+									{
+										type: 'text',
+										text: '设计微信/抖音/小红书专属头像',
+										css: {
+											fontSize: '32rpx',
+											color: '#333333',
+										}
+									}
+								],
+				},
+									
+			// 二维码上方文案
+			{
+				type: 'view',
+					css: {
+						position:'absolute',
+						right: '40rpx',
+						bottom: '196rpx',	
+						},
+						views: [
+								{
+									type: 'text',
+									text: '微信扫码',
+									css: {
+										fontSize: '24rpx',
+										color: '#333333',
 									}
 								}
-							});
-						} else if (res.cancel) {
-							console.log('用户点击取消');
-						}
-					}
-				});
+							],
 			},
+				{
+				   type: 'view',
+					css: {
+						left: (this.info.poster_qrcode_x / proportionally) + 'px',
+						top: (this.info.poster_qrcode_y / proportionally) + 'px',
+						position: 'fixed',
+					
+						},
+						views: [{
+								type: 'qrcode',
+								text: this.qrcode,
+								css: {
+										width: (this.info.poster_qrcode_width / proportionally) + 'px',
+										height: (this.info.poster_qrcode_width / proportionally) + 'px',
+										background: '#fff'
+									}
+								},
+								{
+									src: '/static/images/fanyunLogo.png',
+									type: "image",
+									css: {
+										position:'absolute',
+											width: 30 + 'rpx',
+											height: 30 + 'rpx',
+											
+											left:'44rpx',
+											top:'44rpx',
+											
+										}
+								}
+								],
+				},
+			]
+				}),
+				(
+					this.showPoster = true,
+					// this.revertUrl()
+			
+					setTimeout(() => {
+						that.$refs.painter.canvasToTempFilePathSync({
+							// 在nvue里是jpeg
+							fileType: 'jpg',
+							quality: 1,
+							success: res => {
+								console.log('res.tempFilePath', res.tempFilePath);
+								uni.showModal({
+									title: '提示',
+									content: '请查看图片后长按图片保存',
+									confirmText: '查看',
+									confirmColor: '#1F79F0',
+									success: function(res2) {
+										if (res2.confirm) {
+											uni.previewImage({
+												urls: [res.tempFilePath],
+												longPressActions: {
+													itemList: ['发送给朋友', '保存图片', '收藏'],
+													success: function(data) {},
+													fail: function(err) {
+														console.log(err.errMsg);
+													}
+												}
+											});
+										} else if (res2.cancel) {
+											console.log('用户点击取消');
+										}
+									}
+								});
+							}
+						})
+					}, 1000)
+				);
+			},
+			posterSuccess() {
+				uni.hideLoading();
+			},
+			// 生成海报需要的数据到此为止
+			
+
 			preViewImg(type) {
 				if (type == 1) {
 					uni.previewImage({
@@ -450,6 +644,8 @@
 
 							console.log("this.engin == 'rh'====", res.data.imgs_file, that.swiperList);
 							this.done = true
+							
+							// this.commonqrcodePath()
 						}
 
 						console.log('获取到的图片详情返回值:', res);
@@ -638,12 +834,6 @@
 			},
 			//下载分享
 			getdownload(index) {
-				this.$nextTick(() => {
-					this.$refs.draw.share_qrcode(this.option);
-				})
-				return
-
-
 				if (this.showdrawing) {
 					uni.showToast({
 						title: '图片生成中',
@@ -651,6 +841,16 @@
 					})
 					return;
 				}
+				if(!this.is_weixin()){
+					return uni.showModal({
+						showCancel: false,
+						title: '提示',
+						content: '请在微信内置浏览器打开,长按图片下载/分享',
+						confirmColor: '#207CF7'
+					})
+				}
+				this.createPoster()
+				return
 
 				uni.showModal({
 					showCancel: false,
@@ -807,7 +1007,11 @@
 			closeLandscape() {
 				this.show1 = false
 			},
-		}
+		},
+		onUnload() {
+			clearTimeout(timingr);
+			clearTimeout(asynchronous);
+		},
 	}
 </script>
 

+ 342 - 7
pages/painting/generate.vue

xqd xqd xqd xqd xqd xqd
@@ -138,6 +138,8 @@
 				</view>
 			</view>
 		</u-modal>
+		
+		<wike-painter style="display: none;" :board="posterObj" @done="posterSuccess" ref="painter"></wike-painter>
 	</view>
 </template>
 
@@ -213,7 +215,23 @@
 
 				mj_refImg: '',
 				showparameters: false,
-				keywords: ''
+				keywords: '',
+				
+				
+				qrcode:'',
+				spmplatform: 0,
+				posterObj: {},
+				info:{
+					// poster_bg_img_path:"",
+					
+					poster_bg_width:347,
+					poster_bg_height:574,
+					
+					poster_qrcode_x:278,
+					poster_qrcode_y:495,
+					poster_qrcode_width:52,
+					poster_qrcode_height:52,
+				},
 			}
 		},
 		computed: {
@@ -223,6 +241,10 @@
 			clearTimeout(asynchronous);
 		},
 		onLoad(o) {
+			this.spmplatform = ['H5', 'wxOfficialAccount', 'wxMiniProgram', 'App'].indexOf(this.platform) + 1;
+			this.commonqrcodePath()
+			
+			
 			if (o.refImg) {
 				this.mj_refImg = o.refImg
 				console.log('mj参考图:', this.mj_refImg);
@@ -279,6 +301,298 @@
 		},
 		methods: {
 			...mapActions(['appInit', 'logout', 'getUserInfo', 'getUserData']),
+			
+			downloadPic(e) {
+					return new Promise((resolve, reject) => {
+						uni.request({
+							url: e,
+							method: 'GET',
+							responseType: 'arraybuffer',
+							timeout:999999,
+							success: ress => {
+								let base64 = uni.arrayBufferToBase64(ress.data);
+								base64 = 'data:image/jpeg;base64,' + base64
+								resolve(base64);
+							},
+							fail: (e) => {
+								resolve('fail');
+							}
+						})
+					});
+				},
+				commonqrcodePath() {
+					let spm = this.userInfo.id + '.1.0.' + this.spmplatform + '.1';
+					// console.log(spm);
+					this.$http('common.qrcodePath', {
+						spm: spm
+					}).then(res => {
+						if (res.code == 0) {
+							this.qrcode= res.data;
+							// this.createPoster()
+							console.log('二维码需要包含的url信息=============', this.qrcode);
+						}
+					});
+				},
+				async createPoster(e) {
+					let that = this;
+					
+					let avatarUrl = '';
+					let mainUrl = '';
+					uni.showLoading({
+						title: '海报渲染中'
+					});
+					
+					console.log("that.swiperList[0].url,that.userInfo.avatar",that.userInfo,that.mjurl,that.userInfo.avatar);
+			
+			// that.mjurl="https://midjourney.cdn.zhishuyun.com/attachments/1124768570157564029/1204440835731751012/kylejohnsongfa8_Very_detailed_CGUnity8K_wallpaper_masterpiece_b_796b67e5-8890-434b-937d-2c36d1d0a371.png?ex=65d4bdf0&is=65c248f0&hm=81256bc90f3a9bc1a51538da2654bb885db81ea1d28fa136417c8a30d356584a&width=1024&height=1024"
+			// if (that.mjurl.indexOf("https") < 0) {
+			// 	mainUrl = await that.downloadPic(that.mjurl.replace("http:", "https:"));
+			// } else {
+				mainUrl = await that.downloadPic(that.mjurl);
+			// }
+			if (mainUrl == 'fail') {
+				uni.hideLoading();
+				uni.showToast({
+					title: '生成失败',
+					icon: 'none'
+				})
+				return;
+			}
+			// that.userInfo.avatar="https://face.cdn.zhishuyun.com/attachments/1133012400174534792/1204009950465101866/0d47db66-1faf-42df-a732-22cf18697a65_ins.png?ex=65d32ca5&is=65c0b7a5&hm=7219a0f250453314cfbf9eefaf2e927ba8d6adea944774b3fe32e67c0787a877&"
+					if (that.userInfo.avatar.indexOf("https") < 0) {
+						avatarUrl = await that.downloadPic(that.userInfo.avatar.replace("http:", "https:"));
+					} else {
+						avatarUrl = await that.downloadPic(that.userInfo.avatar);
+					}
+					if (avatarUrl == 'fail') {
+						uni.hideLoading();
+						uni.showToast({
+							title: '生成失败',
+							icon: 'none'
+						})
+						return;
+					}
+					let proportionally = this.info.poster_bg_width / uni.$u.sys().windowWidth;
+					(this.posterObj = {
+						width: (this.info.poster_bg_width / proportionally) + 'px',
+						height: (this.info.poster_bg_height / proportionally) + 'px',
+						background: 'rgba(0,0,0,0)',
+						borderRadius: '16rpx',
+				views: [
+					// 背景图
+					{
+						src:'/static/shareBg.png',
+						type: "image",
+						css: {
+								width: (this.info.poster_bg_width / proportionally) + 'px',
+								height: (this.info.poster_bg_height / proportionally) + 'px',
+							}
+					},
+					// 主图
+					{
+						type: 'view',
+							css: {
+								position:'absolute',
+								left: '24rpx',
+								top: '24rpx',	
+								},
+								views: [
+										{
+											src: mainUrl,
+											type: "image",
+											css: {
+													width: 705 + 'rpx',
+													height:936+ 'rpx',
+													borderRadius: '28rpx',
+												}
+										},
+									],
+					},
+								
+					// 头像
+					{
+						type: 'view',
+							css: {
+								display: 'flex',
+								position:'absolute',
+								left: '24rpx',
+								top: '1060rpx',
+										
+								},
+								views: [
+										{
+										type: 'image',
+										src:  avatarUrl,
+										css: {
+											marginTop: '-80rpx',
+											borderRadius: '50%',
+											width: '94rpx',
+											height: '94rpx',
+											objectFit: 'cover'
+											}
+										},
+									],
+					},
+					// 昵称
+					{
+						type: 'view',
+							css: {
+								display: 'flex',
+								position:'absolute',
+								left: '140rpx',
+								bottom: '196rpx',
+										
+								},
+								views: [
+										{
+											type: 'text',
+											text: that.userInfo.nickname,
+											css: {
+												fontSize: '28rpx',
+												color: '#333333',
+											}
+										}
+									],
+					},
+					
+					// 海报文案1
+					{
+						type: 'view',
+							css: {
+								display: 'flex',
+								position:'absolute',
+								left: '24rpx',
+								bottom: '96rpx',
+										
+								},
+								views: [
+										{
+											type: 'text',
+											text: '免费体验Al生成个人质感艺术照',
+											css: {
+												fontSize: '32rpx',
+												color: '#333333',
+											}
+										}
+									],
+					},
+					// 海报文案2
+					{
+						type: 'view',
+							css: {
+								display: 'flex',
+								position:'absolute',
+								left: '24rpx',
+								bottom: '44rpx',
+										
+								},
+								views: [
+										{
+											type: 'text',
+											text: '设计微信/抖音/小红书专属头像',
+											css: {
+												fontSize: '32rpx',
+												color: '#333333',
+											}
+										}
+									],
+					},
+										
+				// 二维码上方文案
+				{
+					type: 'view',
+						css: {
+							position:'absolute',
+							right: '40rpx',
+							bottom: '196rpx',	
+							},
+							views: [
+									{
+										type: 'text',
+										text: '微信扫码',
+										css: {
+											fontSize: '24rpx',
+											color: '#333333',
+										}
+									}
+								],
+				},
+					{
+					   type: 'view',
+						css: {
+							left: (this.info.poster_qrcode_x / proportionally) + 'px',
+							top: (this.info.poster_qrcode_y / proportionally) + 'px',
+							position: 'fixed',
+						
+							},
+							views: [{
+									type: 'qrcode',
+									text: this.qrcode,
+									css: {
+											width: (this.info.poster_qrcode_width / proportionally) + 'px',
+											height: (this.info.poster_qrcode_width / proportionally) + 'px',
+											background: '#fff'
+										}
+									},
+									{
+										src: '/static/images/fanyunLogo.png',
+										type: "image",
+										css: {
+											position:'absolute',
+												width: 30 + 'rpx',
+												height: 30 + 'rpx',
+												
+												left:'44rpx',
+												top:'44rpx',
+												
+											}
+									}
+									],
+					},
+				]
+					}),
+					(
+						this.showPoster = true,
+						// this.revertUrl()
+				
+						setTimeout(() => {
+							that.$refs.painter.canvasToTempFilePathSync({
+								// 在nvue里是jpeg
+								fileType: 'jpg',
+								quality: 1,
+								success: res => {
+									console.log('res.tempFilePath', res.tempFilePath);
+									uni.showModal({
+										title: '提示',
+										content: '请查看图片后长按图片保存',
+										confirmText: '查看',
+										confirmColor: '#1F79F0',
+										success: function(res2) {
+											if (res2.confirm) {
+												uni.previewImage({
+													urls: [res.tempFilePath],
+													longPressActions: {
+														itemList: ['发送给朋友', '保存图片', '收藏'],
+														success: function(data) {},
+														fail: function(err) {
+															console.log(err.errMsg);
+														}
+													}
+												});
+											} else if (res2.cancel) {
+												console.log('用户点击取消');
+											}
+										}
+									});
+								}
+							})
+						}, 1000)
+					);
+				},
+				posterSuccess() {
+					uni.hideLoading();
+				},
+				// 生成海报需要的数据到此为止
 			preViewImg() {
 				uni.previewImage({
 					urls: [this.mj_refImg],
@@ -798,6 +1112,16 @@
 					}, 800);
 				}
 			},
+			is_weixin() {
+				var ua = window.navigator.userAgent.toLowerCase();
+				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
+					console.log('微信浏览器');
+					return true;
+				} else {
+					console.log("不是微信浏览器");
+					return false;
+				}
+			},
 			//下载分享
 			getdownload() {
 				if (!this.done) {
@@ -807,13 +1131,24 @@
 					})
 					return;
 				}
+				
+				// if(!this.is_weixin()){
+				// 	return uni.showModal({
+				// 		showCancel: false,
+				// 		title: '提示',
+				// 		content: '请在微信内置浏览器打开,长按图片下载/分享',
+				// 		confirmColor: '#207CF7'
+				// 	})
+				// }
+				this.createPoster()
+				return
 
-				uni.showModal({
-					showCancel: false,
-					title: '提示',
-					content: '请在微信内置浏览器打开,长按图片下载/分享',
-					confirmColor: '#207cf7'
-				})
+				// uni.showModal({
+				// 	showCancel: false,
+				// 	title: '提示',
+				// 	content: '请在微信内置浏览器打开,长按图片下载/分享',
+				// 	confirmColor: '#207cf7'
+				// })
 
 			},
 		}

+ 325 - 1
pages/painting/ys.vue

xqd xqd xqd xqd
@@ -81,6 +81,8 @@
 			</view> -->
 		</view>
 
+
+		<wike-painter style="display: none;" :board="posterObj" @done="posterSuccess" ref="painter"></wike-painter>
 	</view>
 </template>
 
@@ -135,10 +137,33 @@
 				sd_keywords: '',
 				timer: null,
 
-				faceId: -1
+				faceId: -1,
+				
+				
+				platform: this.$platform.get(),
+				qrcode:'',
+				spmplatform: 0,
+				posterObj: {},
+				info:{
+					// poster_bg_img_path:"",
+					
+					poster_bg_width:347,
+					poster_bg_height:574,
+					
+					poster_qrcode_x:278,
+					poster_qrcode_y:495,
+					poster_qrcode_width:52,
+					poster_qrcode_height:52,
+				},
 			}
 		},
+		computed: {
+			...mapGetters(['appInfo', 'homeTemplate', 'isLogin', 'userInfo', 'userData'])
+		},
 		async onLoad(o) {
+			this.spmplatform = ['H5', 'wxOfficialAccount', 'wxMiniProgram', 'App'].indexOf(this.platform) + 1;
+			this.commonqrcodePath()
+			
 			// this.parmas = JSON.parse(o.ysParmas)
 			this.parmas = getApp().ysParmas
 			var that = this;
@@ -176,6 +201,294 @@
 		},
 
 		methods: {
+			downloadPic(e) {
+					return new Promise((resolve, reject) => {
+						uni.request({
+							url: e,
+							method: 'GET',
+							responseType: 'arraybuffer',
+							success: ress => {
+								let base64 = uni.arrayBufferToBase64(ress.data);
+								base64 = 'data:image/jpeg;base64,' + base64
+								resolve(base64);
+							},
+							fail: (e) => {
+								resolve('fail');
+							}
+						})
+					});
+				},
+				commonqrcodePath() {
+					let spm = this.userInfo.id + '.1.0.' + this.spmplatform + '.1';
+					// console.log(spm);
+					this.$http('common.qrcodePath', {
+						spm: spm
+					}).then(res => {
+						if (res.code == 0) {
+							this.qrcode= res.data;
+							// this.createPoster()
+							console.log('二维码需要包含的url信息=============', this.qrcode);
+						}
+					});
+				},
+				async createPoster(e) {
+					let that = this;
+					
+					let avatarUrl = '';
+					let mainUrl = '';
+					uni.showLoading({
+						title: '海报渲染中'
+					});
+					
+					console.log("that.swiperList[0].url,that.userInfo.avatar",that.userInfo,that.swiperList[0],that.userInfo.avatar);
+			
+			if (that.swiperList[0].indexOf("https") < 0) {
+				mainUrl = await that.downloadPic(that.swiperList[0].replace("http:", "https:"));
+			} else {
+				mainUrl = await that.downloadPic(that.swiperList[0]);
+			}
+			if (mainUrl == 'fail') {
+				uni.hideLoading();
+				uni.showToast({
+					title: '生成失败',
+					icon: 'none'
+				})
+				return;
+			}
+			// that.userInfo.avatar="https://face.cdn.zhishuyun.com/attachments/1133012400174534792/1204009950465101866/0d47db66-1faf-42df-a732-22cf18697a65_ins.png?ex=65d32ca5&is=65c0b7a5&hm=7219a0f250453314cfbf9eefaf2e927ba8d6adea944774b3fe32e67c0787a877&"
+					if (that.userInfo.avatar.indexOf("https") < 0) {
+						avatarUrl = await that.downloadPic(that.userInfo.avatar.replace("http:", "https:"));
+					} else {
+						avatarUrl = await that.downloadPic(that.userInfo.avatar);
+					}
+					if (avatarUrl == 'fail') {
+						uni.hideLoading();
+						uni.showToast({
+							title: '生成失败',
+							icon: 'none'
+						})
+						return;
+					}
+					let proportionally = this.info.poster_bg_width / uni.$u.sys().windowWidth;
+					(this.posterObj = {
+						width: (this.info.poster_bg_width / proportionally) + 'px',
+						height: (this.info.poster_bg_height / proportionally) + 'px',
+						background: 'rgba(0,0,0,0)',
+						borderRadius: '16rpx',
+				views: [
+					// 背景图
+					{
+						src:'/static/shareBg.png',
+						type: "image",
+						css: {
+								width: (this.info.poster_bg_width / proportionally) + 'px',
+								height: (this.info.poster_bg_height / proportionally) + 'px',
+							}
+					},
+					// 主图
+					{
+						type: 'view',
+							css: {
+								position:'absolute',
+								left: '24rpx',
+								top: '24rpx',	
+								},
+								views: [
+										{
+											src: mainUrl,
+											type: "image",
+											css: {
+													width: 705 + 'rpx',
+													height:936+ 'rpx',
+													borderRadius: '28rpx',
+												}
+										},
+									],
+					},
+								
+					// 头像
+					{
+						type: 'view',
+							css: {
+								display: 'flex',
+								position:'absolute',
+								left: '24rpx',
+								top: '1060rpx',
+										
+								},
+								views: [
+										{
+										type: 'image',
+										src:  avatarUrl,
+										css: {
+											marginTop: '-80rpx',
+											borderRadius: '50%',
+											width: '94rpx',
+											height: '94rpx',
+											objectFit: 'cover'
+											}
+										},
+									],
+					},
+					// 昵称
+					{
+						type: 'view',
+							css: {
+								display: 'flex',
+								position:'absolute',
+								left: '140rpx',
+								bottom: '196rpx',
+										
+								},
+								views: [
+										{
+											type: 'text',
+											text: that.userInfo.nickname,
+											css: {
+												fontSize: '28rpx',
+												color: '#333333',
+											}
+										}
+									],
+					},
+					
+					// 海报文案1
+					{
+						type: 'view',
+							css: {
+								display: 'flex',
+								position:'absolute',
+								left: '24rpx',
+								bottom: '96rpx',
+										
+								},
+								views: [
+										{
+											type: 'text',
+											text: '免费体验Al生成个人质感艺术照',
+											css: {
+												fontSize: '32rpx',
+												color: '#333333',
+											}
+										}
+									],
+					},
+					// 海报文案2
+					{
+						type: 'view',
+							css: {
+								display: 'flex',
+								position:'absolute',
+								left: '24rpx',
+								bottom: '44rpx',
+										
+								},
+								views: [
+										{
+											type: 'text',
+											text: '设计微信/抖音/小红书专属头像',
+											css: {
+												fontSize: '32rpx',
+												color: '#333333',
+											}
+										}
+									],
+					},
+										
+				// 二维码上方文案
+				{
+					type: 'view',
+						css: {
+							position:'absolute',
+							right: '40rpx',
+							bottom: '196rpx',	
+							},
+							views: [
+									{
+										type: 'text',
+										text: '微信扫码',
+										css: {
+											fontSize: '24rpx',
+											color: '#333333',
+										}
+									}
+								],
+				},
+					{
+					   type: 'view',
+						css: {
+							left: (this.info.poster_qrcode_x / proportionally) + 'px',
+							top: (this.info.poster_qrcode_y / proportionally) + 'px',
+							position: 'fixed',
+						
+							},
+							views: [{
+									type: 'qrcode',
+									text: this.qrcode,
+									css: {
+											width: (this.info.poster_qrcode_width / proportionally) + 'px',
+											height: (this.info.poster_qrcode_width / proportionally) + 'px',
+											background: '#fff'
+										}
+									},
+									{
+										src: '/static/images/fanyunLogo.png',
+										type: "image",
+										css: {
+											position:'absolute',
+												width: 30 + 'rpx',
+												height: 30 + 'rpx',
+												
+												left:'44rpx',
+												top:'44rpx',
+												
+											}
+									}
+									],
+					},
+				]
+					}),
+					(
+						this.showPoster = true,
+						// this.revertUrl()
+				
+						setTimeout(() => {
+							that.$refs.painter.canvasToTempFilePathSync({
+								// 在nvue里是jpeg
+								fileType: 'jpg',
+								quality: 1,
+								success: res => {
+									console.log('res.tempFilePath', res.tempFilePath);
+									uni.showModal({
+										title: '提示',
+										content: '请查看图片后长按图片保存',
+										confirmText: '查看',
+										confirmColor: '#1F79F0',
+										success: function(res2) {
+											if (res2.confirm) {
+												uni.previewImage({
+													urls: [res.tempFilePath],
+													longPressActions: {
+														itemList: ['发送给朋友', '保存图片', '收藏'],
+														success: function(data) {},
+														fail: function(err) {
+															console.log(err.errMsg);
+														}
+													}
+												});
+											} else if (res2.cancel) {
+												console.log('用户点击取消');
+											}
+										}
+									});
+								}
+							})
+						}, 1000)
+					);
+				},
+				posterSuccess() {
+					uni.hideLoading();
+				},
 			async public() {
 				var that = this;
 				if (this.showdrawing) {
@@ -532,6 +845,17 @@
 					})
 					return;
 				}
+				
+				// if(!this.is_weixin()){
+				// 	return uni.showModal({
+				// 		showCancel: false,
+				// 		title: '提示',
+				// 		content: '请在微信内置浏览器打开,长按图片下载/分享',
+				// 		confirmColor: '#207CF7'
+				// 	})
+				// }
+				this.createPoster()
+				return
 
 				uni.showModal({
 					showCancel: false,

+ 1 - 1
pages/user/commission/index.vue

xqd
@@ -964,4 +964,4 @@
 
 <style lang="scss" scoped>
 	@import './index.scss';
-</style>
+</style>