<template>
	<view>
		<view class="topdaohang" @click="fanhui">
			<uni-icons type="left" size="18" color="white"></uni-icons>
			<text>邀请返佣</text>
		</view>
		<view class="hbbox">
			<image :src="url" class="hbimg" mode=""></image>
			<liu-poster ref="liuPoster" :width="750" :height="1200" @change="change"></liu-poster>
		</view>
		<view class="fxbox">
			<view class="" @click="savePosterPath">
				<image class="iamg" src="@/static/img/保存海报.png" mode=""></image>
				<view class="colorhui1">保存海报</view>
			</view>
			<button class="" @click="fxwx" open-type="share" style="background: radial-gradient(black, transparent);">
				<image class="iamg" src="@/static/img/微信好友.png" mode=""></image>
				<view class="colorhui1">微信好友</view>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		routineCode,
		spreadMsg
	} from '@/api/user.js';
	
	export default {
		data() {
			return {
			posterImage:'',
			codeimage:{},
			canvasList: [
				{
				    type: 'color', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
				    width: 760, //宽度(rpx)
				    height: 1200, //高度(rpx)
				    x: 0, //x轴位置(离左边的距离rpx)
				    y: 0, //y轴位置(离上边的距离rpx)
				    radius: 10, //圆角(rpx)
				    colorObj: {
				        colorList: ['#1F1E21'], //传入1个值为纯色，2个值为渐变色
				        direction: 2 //渐变色绘制方向(1:从左到右;2:从上到下;3:左上角到右下角;4:右上角到左下角)
				    }, //type为color时必填
				    childs:[
						{
						   type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
						   width: 660, //宽度(rpx)
						   height: 800, //高度(rpx)
						   x: 50, //x轴位置(离左边的距离rpx)
						   y: 50, //y轴位置(离上边的距离rpx)
							path: '', //图片地址(type为image时必填)//type为color时必填
							childs: [
								{
								    type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
								    width: 200, //宽度(rpx)
								    height: 200, //高度(rpx)
								    x: 500, //x轴位置(离左边的距离rpx)
								    y: 900, //y轴位置(离上边的距离rpx)
								    radius: 20, //圆角(rpx)
								    lineWidth: 12, //边框宽度(rpx)
								    lineColor: '#FFFFFF', //边框颜色
								    path: '', //图片地址(type为image时必填)
								},
								{
								    type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
								    width: 120, //宽度(rpx)
								    height: 100, //高度(rpx)
								    x: 50, //x轴位置(离左边的距离rpx)
								    y: 900, //y轴位置(离上边的距离rpx)
								    radius: 55, //圆角(rpx)
								    lineWidth: 12, //边框宽度(rpx)
								    lineColor: '#FFFFFF', //边框颜色
								    path: '', //图片地址(type为image时必填)
								},
								{
								    type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
								    width: 400, //文本宽度(rpx)
								    height: 40, //文本高度(rpx)
								    x: 200, //x轴位置(离左边的距离rpx)
								    y: 950, //y轴位置(离上边的距离rpx)
								    color: '#FFFFFF', //文本颜色
								    fontSize: 36, //文字大小(rpx)
								    lineHeight: 36, //文字行高(rpx)
								    bold: true, //文字是否加粗
								    content: '', //文本内容(type为text时必填)
								},
								{
								    type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
								    width: 400, //文本宽度(rpx)
								    height: 40, //文本高度(rpx)
								    x: 50, //x轴位置(离左边的距离rpx)
								    y: 1050, //y轴位置(离上边的距离rpx)
								    color: '#7B7A7F', //文本颜色
								    fontSize: 36, //文字大小(rpx)
								    lineHeight: 36, //文字行高(rpx)
								    bold: true, //文字是否加粗
								    content: '', //文本内容(type为text时必填)
								}
							]
							}
					],//在背景色上绘制的内容放在childs里面即可
				},
				// {
			 //    type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
			 //    width: 750, //宽度(rpx)
			 //    height: 1000, //高度(rpx)
			 //    x: 0, //x轴位置(离左边的距离rpx)
			 //    y: 0, //y轴位置(离上边的距离rpx)
				// path: '', //图片地址(type为image时必填)//type为color时必填
				// lineWidth: 30, //边框宽度(rpx)
				//  lineColor: '#1F1E21', //边框颜色
				// childs: [
				// 	{
				// 	    type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
				// 	    width: 200, //宽度(rpx)
				// 	    height: 200, //高度(rpx)
				// 	    x: 500, //x轴位置(离左边的距离rpx)
				// 	    y: 700, //y轴位置(离上边的距离rpx)
				// 	    radius: 20, //圆角(rpx)
				// 	    lineWidth: 12, //边框宽度(rpx)
				// 	    lineColor: '#FFFFFF', //边框颜色
				// 	    path: '', //图片地址(type为image时必填)
				// 	},
				// 	{
				// 	    type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
				// 	    width: 120, //宽度(rpx)
				// 	    height: 100, //高度(rpx)
				// 	    x: 50, //x轴位置(离左边的距离rpx)
				// 	    y: 700, //y轴位置(离上边的距离rpx)
				// 	    radius: 55, //圆角(rpx)
				// 	    lineWidth: 12, //边框宽度(rpx)
				// 	    lineColor: '#FFFFFF', //边框颜色
				// 	    path: '', //图片地址(type为image时必填)
				// 	},
				// 	{
				// 	    type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
				// 	    width: 400, //文本宽度(rpx)
				// 	    height: 40, //文本高度(rpx)
				// 	    x: 200, //x轴位置(离左边的距离rpx)
				// 	    y: 750, //y轴位置(离上边的距离rpx)
				// 	    color: '#FFFFFF', //文本颜色
				// 	    fontSize: 36, //文字大小(rpx)
				// 	    lineHeight: 36, //文字行高(rpx)
				// 	    bold: true, //文字是否加粗
				// 	    content: '', //文本内容(type为text时必填)
				// 	},
				// 	{
				// 	    type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
				// 	    width: 400, //文本宽度(rpx)
				// 	    height: 40, //文本高度(rpx)
				// 	    x: 50, //x轴位置(离左边的距离rpx)
				// 	    y: 850, //y轴位置(离上边的距离rpx)
				// 	    color: '#7B7A7F', //文本颜色
				// 	    fontSize: 36, //文字大小(rpx)
				// 	    lineHeight: 36, //文字行高(rpx)
				// 	    bold: true, //文字是否加粗
				// 	    content: '', //文本内容(type为text时必填)
				// 	}
				// ]
			// },
			
			],
			url:''
			}
		},
		 onLoad(options) {
		    // 检查是否有分享进入
			console.log('检查是否有分享进入',options);
		    if (options.scene === 1007) { // 1007 是小程序分享进入的场景值
		      // 进行页面跳转
		      uni.redirectTo({
		        url: 'pages/index/index' // 替换为你想要跳转的页面路径
		      });
		    }
		  },
		onShow(){
			this.codedata()
			//
		},
		methods: {
			open() {
				
				// console.log('this.canvasList[0]',this.canvasList);
			    this.$nextTick(() => {
			        this.$refs.liuPoster.init(this.canvasList)
			    })
			},
			//绘制成功返回生成的海报图片地址
			change(e) {
			    this.url = e
			},
			//预览生成的海报图片
			previewImg(url) {
			    if (!url) return
			    uni.previewImage({
			        urls: [url]
			    })
			},
			codedata(){
				
				spreadMsg().then(res=>{
					this.codeimage=res.data
					routineCode().then(res=>{
						this.posterImage=res.data.url
						if(this.posterImage!=''&&this.codeimage!={}){
							this.canvasList[0].childs[0].path=this.codeimage.spread[0].pic
							this.canvasList[0].childs[0].childs[0].path=this.posterImage
							this.canvasList[0].childs[0].childs[1].path=this.codeimage.avatar
							this.canvasList[0].childs[0].childs[2].content=this.codeimage.nickname
							this.canvasList[0].childs[0].childs[3].content='邀你加入'+this.codeimage.site_name
							this.open()
						}
						console.log(8987,this.codeimage);
						
					})
					
				})
				 
			},
			/*
			 * 保存到手机相册
			 */
			// #ifdef MP
			savePosterPath: function() {
				let that = this;
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									uni.saveImageToPhotosAlbum({
										filePath: that.url,
										success: function(res) {
											that.$util.Tips({
												title: '保存成功',
												icon: 'success'
											});
										},
										fail: function(res) {
											that.$util.Tips({
												title: '保存失败'
											});
										}
									})
								}
							})
						} else {
							uni.saveImageToPhotosAlbum({
								filePath: that.url,
								success: function(res) {
									that.$util.Tips({
										title: '保存成功',
										icon: 'success'
									});
								},
								fail: function(res) {
									that.$util.Tips({
										title: '保存失败'
									});
								},
							})
						}
					}
				})
			},
			// #endif
		
			fxwx() {
				var that=this
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 2,
					title: "分享",
					summary: "赶紧跟我一起来体验！",
					imageUrl:that.url,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			fanhui() {
				let pages = getCurrentPages(); // 获取当前打开过的页面路由数，
				let prevPage = pages[pages.length - 2];
				if (pages.length > 1) {
					uni.navigateBack()
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			},
		}
	}
</script>

<style scoped>
	.fxbox {
		display: flex;
		justify-content: space-around;
		margin-top: 128rpx;
	}

	.iamg {
		width: 130rpx;
		height: 130rpx;
	}

	.hbbox {
		text-align: center;
		margin-top: 200rpx;
	}

	.hbimg {
		width: 660rpx;
		height: 830rpx;
	}
</style>