businessCard/xiaochengxu/pages/mySet/poster.vue

<template>
	<view class="page">
		<view class="poster" v-if="!show_poster">
			<view class="canvas-content" style="text-align:center;position:relative;" :style='{background:(posterObj1.backgroundType=="rgb"? posterObj1.background:"url("+posterObj1.background+") no-repeat;background-size:100% 100%;"),borderRadius:posterObj1.borderRadius,padding:(check_idx==2?"80rpx 68rpx":"40rpx 36rpx 80rpx")}'>
				<image v-if='check_idx==1' style='position:absolute;width:103rpx;height:103rpx;bottom: 0;left: 0;' src="https://s.yun-live.com/images/20210201/d88d56843d43b917e2a28550b2a62723.png"></image>
				<image v-if='check_idx==1' style='position:absolute;width:56.4rpx;height:56.4rpx;right:0rpx;top:50%;' src="https://s.yun-live.com/images/20210201/247736ffd279276b891ec14db8ed0fd0.png"></image>
				<image :style='{width:posterObj1.width,height:posterObj1.height,borderRadius:posterObj1.imageBorderRadius}' :src="posterObj1.image"></image>
				<view :style='{fontSize:posterObj1.titleCssFontSize,fontWeight:posterObj1.titleCssFontWeight,color:posterObj1.titleCssColor,lineWeight:posterObj1.titleCssLineHeight
				}' class="title">{{posterObj1.title}}</view>
				<view class='flex justify-space-between' style='align-items: flex-start;margin-top:18rpx;'>
					<view style='text-align:left;margin-top:30rpx;'>
						<view :style='{fontSize:posterObj1.title1CssFontSize,fontWeight:posterObj1.title1CssFontWeight,color:posterObj1.title1CssColor,lineWeight:posterObj1.title1CssLineHeight
						}' class="title1">{{posterObj1.title1}}</view>
						<view :style='{fontSize:posterObj1.title2CssFontSize,color:posterObj1.title2CssColor,lineWeight:posterObj1.title2CssLineHeight
						}' class="title2">{{posterObj1.title2}}</view>
					</view>		
					<view>
						<image :style='{width:posterObj1.qrcodeWidth,height:posterObj1.qrcodeHeight,}' :src="posterObj1.qrcode"></image>
					</view>
				</view>
			</view>
			<view class="footer-btn">
				<view class="">
					返回
				</view>
				<view class="save" @click="toSave">
					保存
				</view>
			</view>
		</view>
		<view class="poster-btn">
			<view class='diy_image'>
				上传图片
				<view>
					<u-radio-group @change='imagechange($event)' v-model="imageValue">
						<u-radio shape="square" name='自定义图片' label="自定义图片"></u-radio>
						<u-radio shape="square" name='选择名片' label="选择名片"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<view style='color:red;font-size:24rpx;padding: 20rpx 20rpx 0;'>注：如勾选“选择名片”，其他用户扫描海报二维码后会自动与您交换名片。</view>
			<view class='diy_title'>
				编辑内容
				<view> 
				<u--input v-model="value" @focus='titleclick' placeholder="请输入内容" border="bottom" clearable></u--input></view>
			</view>
			<view class='check_bg'>
				<view style='font-size:28rpx'>定义背景</view>
				<view :class="{'is-check':check_idx==index}" v-for="(item,index) in footer_arr" :key="index" @click="toChoose(index)">
					<image :src="item" mode=""></image>
					<view v-if="check_idx==index"></view>
				</view>	
			</view>
			
			
		</view>
		<!-- 生成的图片 -->
		<uni-popup type="center" ref="posterImg" :maskClick="false">
			<view class="poster-img">
				<text @click="closePopup"></text>
				<view style='overflow: scroll;width: 670rpx;height: 928rpx;'>
					<image :src="path" mode="widthFix" @click="previewImg"></image>
				</view>
				<!-- #ifdef H5 -->
				<view class="">
					长按图片保存到手机
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<view class="">
					点击图片保存到手机
				</view>
				<!-- #endif -->
			</view>
		</uni-popup>
		<u-popup :show="titleStatus"  :round="10" mode="center" @close="close" @open="open">
		    <view style='width:600rpx;padding:20rpx;'>
		        <u--textarea v-model="value" maxlength='300' count placeholder="请输入内容" ></u--textarea>
				<view style='margin:20rpx 0rpx 0;'>
					<u-button @click='confirm' type="success" text="确定"></u-button>
				</view>
		    </view>
		</u-popup>
		<u-picker :immediateChange="true" keyName="cardBusiness" confirmText='确定' title="选择名片" @cancel="show1=false"
			closeOnClickOverlay @confirm="cardConfirm" :show="show1" :columns="cardList"></u-picker>
		<poster :data="canvasData" background-color="#FFF" :width='948' :height='534' @on-success="posterSuccess"
			ref="poster" @on-error="posterError"></poster>
		<lPainter :board="posterObj" ref="painter"></lPainter>
		<canvas id="canvasId" 
		:type="type" 
		style="width:0;height:0;"></canvas>
	</view>
</template>

<script>
	var that;
	import uploadImage from '@/components/ossutil/uploadFile.js';
	import uniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
	import lPainter from '@/components/lime-painter/index.vue';
	import { Layout } from '@/components/lime-painter/layout';
	import Poster from '../../components/zhangyuhao-poster/Poster.vue';
	import { toPx, isNumber, getImageInfo, base64ToPath, compareVersion  } from '@/components/lime-painter/utils'
	import { adaptor, expand } from '@/components/lime-painter/canvas';
	export default {
		components: {
			lPainter,
			uniPopup,
			Poster,
		},
		data() {
			return {
				imageValue:'',
				canvasData:{},
				value:'云现场 | 2020年 麓客城市 WO-LUNTEER创想礼·麓客共创之夜',
				show_poster:false,//显示海报
				path: '', //生成的图片地址
				image:'',
				show1:false,
				cardList: [],
				list:[],
				theight:0,
				canvas1:'',
				poster:'',
				type:'2d',
				height:0,
				use2dCanvas:false,
				layout1: new Layout(),
				titleStatus:false,
				posterObj1:{
					background:'#fff',
					backgroundType:'rgb',
					borderRadius: '16rpx',
					image:'https://s.yun-live.com/images/20210201/eb694718fa6c7b90d60a2c250847a192.jpg',
					width: '606rpx',
					height: '341rpx',
					imageBorderRadius:'16rpx',
					title:'云现场 | 2020年 麓客城市 WO-LUNTEER创想礼·麓客共创之夜',
					titleCssFontSize: '32rpx',
					titleCssColor: '#1A2033',
					titleCssFontWeight: 'bold',
					titleCssLineHeight: '45rpx',
					title1:'厦门吴彦祖',
					title1CssFontSize: '28rpx',
					title1CssColor: '#1A2033',
					title1CssFontWeight: 'bold',
					title1CssLineHeight: '28rpx',
					title2:'扫描识别二维码',
					title2CssFontSize: '24rpx',
					title2CssColor: '#4070FF',
					title2CssLineHeight: '24rpx',
					qrcode:'../../static/imgs/qrcode.jpg',
					qrcodeWidth: '240rpx',
					qrcodeHeight: '240rpx',
				},
				posterObj: {
					width: '670rpx',
					height: '890rpx',
					background: '#fff',
					borderRadius: '16rpx',
					views: [
						// {
						// 	type: 'image',
						// 	src: 'https://s.yun-live.com/images/20210201/9a4e7df322dc5c9f30ea9b126d3269a6.png',
						// 	css: {
						// 		width: '128rpx',
						// 		height: '50rpx',
						// 		left: '542rpx',
						// 		top: '0rpx',
						// 	}
						// },
						// {
						// 	type: 'image',
						// 	src: 'https://s.yun-live.com/images/20210201/eb694718fa6c7b90d60a2c250847a192.jpg',
						// 	css: {
						// 		left: '32rpx',
						// 		top: '480rpx',
						// 		borderRadius: '50%',
						// 		width: '80rpx',
						// 		height: '80rpx'
						// 	}
						// },
						{
							type: 'text',
							text: '云现场 | 2020年 麓客城市 WO-LUNTEER创想礼·麓客共创之夜',
							use:'title',
							css: {
								fontSize: '32rpx',
								color: '#1A2033',
								fontWeight: 'bold',
								lineHeight: '45rpx',
								left: '32rpx',
								top: '400rpx',
								width: '606rpx'
							}
						},
						{
							type: 'text',
							text: '厦门吴彦祖',
							use:'title1',
							css: {
								fontSize: '28rpx',
								fontWeight: 'bold',
								color: '#1A2033',
								lineHeight: '28rpx',
								left: '32rpx',
								top: '515rpx'
							}
						},
						{
							type: 'text',
							text: '扫描识别二维码',
							use:'title2',
							css: {
								fontSize: '24rpx',
								color: '#4070FF',
								lineHeight: '24rpx',
								left: '32rpx',
								top: '559rpx'
							}
						},
						{
							type: 'image',
							src: 'https://s.yun-live.com/images/20210201/eb694718fa6c7b90d60a2c250847a192.jpg',
							use:'dt',
							css: {
								left: '32rpx',
								top: '34rpx',
								width: '606rpx',
								height: '341rpx',
								borderRadius: '16rpx'
							}
						},
						
						{
							type: 'qrcode',
							text: 'https://www.yun-live.com/',
							css: {
								left: '445rpx',
								top: '500rpx',
								width: '200rpx',
								height: '200rpx',
							}
						},
						// {
						// 	type: 'text',
						// 	text: '————  由云现场提供技术支持  ————',
						// 	css: {
						// 		left: '0',
						// 		top: '863rpx',
						// 		width: '100%',
						// 		textAlign: 'center',
						// 		fontSize: '24rpx',
						// 		color: '#989FB3',
						// 		lineHeight: '33rpx'
						// 	}
						// }
					]
				}, //画板数据
				footer_arr: [
					'https://s.yun-live.com/images/20210201/d502979c734077930cee837739ee9285.png',
					'https://s.yun-live.com/images/20210201/0289000561415e1f9f6e542a3553906d.png',
					'https://s.yun-live.com/images/20210201/5d2e237728e1dd8727835ca95084721e.png',
					'https://s.yun-live.com/images/20210201/15075d31c26cc446333d569b0d2346e8.png',
					'https://s.yun-live.com/images/20210201/6e716c556d1a80e90ecb0260e0990add.png'
				], //底部选项
				check_idx: 0, //底部选中的下标
				dtindex:0,
				titleindex:0,
				title1index:0,
				title2index:0,
			}
		},
		onLoad() {
			that = this
		},
		onShow(){
			// #ifdef MP-WEIXIN
			const {SDKVersion, version, platform} = uni.getSystemInfoSync()
			// ios wx7.0.20 createImage bug
			this.use2dCanvas = (this.type === '2d' && compareVersion(SDKVersion, '2.9.2') >= 0) && !(/ios/.test(platform) && /7.0.20/.test(version));
			// #endif
			this.posterObj1.title1=uni.getStorageSync("userInfo").nickname+'推荐给你'
			this.$request.baseRequest('admin.unimall.cardManagementInfo', 'list', {
				commonId: uni.getStorageSync("userInfo").id
			}, failres => {
				uni.hideLoading()
				uni.showToast({
					icon: "none",
					title: failres.errmsg,
					duration: 3000
				});
			
			}).then(res => {
				this.list = res.data.items
				this.cardList = [res.data.items]
			})
		},
		watch: {
			// check_idx(newVal,oldVal){
			// 	console.log(111,newVal);
			// 	console.log(222,oldVal);
			// }
		},
		methods: {
			confirm(e){
				this.titleStatus=false
				this.posterObj1.title=this.value
			},
			titleclick(){
				this.titleStatus=true
			},
			posterError(err) {
				console.log(err)
				uni.hideLoading()
			},
			posterSuccess(url) {
				console.log("hahahah", url)
				// 生成成功，会把临时路径在这里返回
				this.poster = url;
				this.posterObj1.image = url
				this.posterObj1.qrcode=this.currectData.qrCodeMyself
				console.log(url)
				this.show1 = false
				// this.show=false
				uni.hideLoading()
			},
			cardConfirm(e) {
				console.log(e)
				this.currectData = e.value[0]
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				var data = [{
						type: 'image',
						path: this.currectData.currentBackground,
						use: 'bg',
						x: -24,
						y: -27,
						width: 1000,
						height: 600
					},
					{
						type: 'image',
						path: this.currectData.headSculpture ? this.currectData.headSculpture :
							'../../static/imgs/card/defaulthead.png',
						shape: 'circle',
						use: 'head',
						imageType: this.currectData.headSculpture ? 'wl' : 'bd',
						x: 60,
						y: 60,
						width: 150,
						height: 150
					},
					{
						type: 'text',
						text: this.currectData.name,
						use: 'name',
						x: 300,
						y: 80,
						size: 40,
						color: '#000'
			
					},
					{
						type: 'text',
						text: this.currectData.post,
						use: 'post',
						x: 440,
						y: 85,
						size: 32,
						color: '#666666'
			
					},
					{
						type: 'text',
						text: this.currectData.companyName,
						use: 'companyName',
						x: 300,
						y: 155,
						size: 32,
						color: '#000'
			
					},
					{
						type: 'image',
						path: '../../static/imgs/card/address1.png',
						use: 'address-icon',
						x: 300,
						y: 220,
						width: 30,
						height: 40
					},
					{
						type: 'textarea',
						text: this.currectData.province + this.currectData.city + this.currectData.area + this
							.currectData.detailedAddress,
						lineSpace: 1,
						width: 640,
						use: 'address',
						x: 345,
						y: 228,
						size: 28,
						color: '#000'
					},
					{
						type: 'image',
						path: '../../static/imgs/card/phone1.png',
						use: 'phone-icon',
						x: 300,
						y: 280,
						width: 32,
						height: 32
					},
					{
						type: 'text',
						text: this.currectData.phone,
						use: 'phone',
						x: 345,
						y: 284,
						size: 28,
						color: '#000'
					},
					{
						type: 'image',
						path: '../../static/imgs/card/remark1.png',
						use: 'remark-icon',
						x: 300,
						y: 340,
						width: 26,
						height: 32
					},
					{
						type: 'textarea',
						text: this.currectData.remark ? this.currectData.remark : '单击添加备注',
						use: 'remark',
						lineSpace: 2,
						width: 200,
						x: 345,
						y: 345,
						size: 26,
						color: '#000'
					},
					{
						type: 'image',
						path: '../../static/imgs/card/bg3.png',
						use: 'bg1',
						x: 0,
						y: 418,
						width: 687,
						height: 120
					},
					{
						type: 'image',
						path: '../../static/imgs/card/bg4.png',
						use: 'bg2',
						x: 647,
						y: 418,
						width: 305,
						height: 120
					},
					{
						type: 'image',
						path: '../../static/imgs/card/home.png',
						use: 'home',
						x: 65,
						y: 455,
						width: 55,
						height: 55
					},
					{
						type: 'text',
						text: this.currectData.classifyName ? this.currectData.classifyName : '默',
						use: 'classify',
						x: 245,
						y: 460,
						size: 54,
						color: '#fff'
					},
					{
						type: 'image',
						path: '../../static/imgs/card/share.png',
						use: 'share',
						x: 435,
						y: 453,
						width: 66,
						height: 52
					},
				]
				console.log(this.currectData.cuttentTemplate, 111111)
				for (var i = 0; i < data.length; i++) {
					switch (this.currectData.cuttentTemplate) {
						case '2':
							if (data[i].use === 'name' ||
								data[i].use === 'companyName' ||
								data[i].use === 'address-icon' ||
								data[i].use === 'phone-icon' ||
								data[i].use === 'remark-icon') {
								data[i].x = 30
							}
							if (data[i].use === 'post') {
								data[i].x = 100
							}
							if (data[i].use === 'address' ||
								data[i].use === 'phone' ||
								data[i].use === 'remark') {
								data[i].x = 60
							}
							if (data[i].use == 'head') {
								data[i].x = 370
							}
							break;
						case '3':
							if (data[i].use === 'name') {
								data[i].x = 30
								data[i].y = 150
							}
							if (data[i].use === 'companyName') {
								data[i].x = 30
								data[i].y = 180
							}
							if (data[i].use === 'post') {
								data[i].x = 100
								data[i].y = 153
							}
							if (data[i].use === 'address-icon' ||
								data[i].use === 'phone-icon' ||
								data[i].use === 'remark-icon') {
								data[i].x = 170
							}
							if (data[i].use === 'address-icon') {
								data[i].y = 150
							}
							if (data[i].use === 'address') {
								data[i].y = 155;
								data[i].width = 300
							}
							if (data[i].use === 'phone-icon') {
								data[i].y = 180
							}
							if (data[i].use === 'phone') {
								data[i].y = 183
							}
							if (data[i].use === 'remark-icon') {
								data[i].y = 210
							}
							if (data[i].use === 'remark') {
								data[i].y = 212
							}
							if (data[i].use === 'address' ||
								data[i].use === 'phone' ||
								data[i].use === 'remark') {
								data[i].x = 190
							}
							break;
						case '4':
							if (data[i].use === 'name' ||
								data[i].use === 'companyName') {
								data[i].x = 30
							}
							if (data[i].use === 'companyName') {
								data[i].y = 90
							}
							if (data[i].use === 'post') {
								data[i].x = 100
							}
							if (data[i].use == 'head') {
								data[i].x = 25
								data[i].y = 120
							}
							if (data[i].use === 'address-icon' ||
								data[i].use === 'phone-icon' ||
								data[i].use === 'remark-icon') {
								data[i].x = 170
							}
							if (data[i].use === 'address') {
								data[i].width = 300
							}
							if (data[i].use === 'address' ||
								data[i].use === 'phone' ||
								data[i].use === 'remark') {
								data[i].x = 190
							}
							break;
						default:
					}
				}
				this.canvasData = {
					clicknum: this.clicknum++,
					list: data
				}
			},
			open() {
			        // console.log('open');
			},
			close() {
			    this.show = false
			        // console.log('close');
			},
			
			imagechange(e){
				console.log(e,1111)
				if(e=='自定义图片'){
					uni.showActionSheet({
					    itemList: ["拍照", "从手机相册选择"],
					    success(res) {
					        let sourceType = "camera";
					        if (res.tapIndex == 0) {
					            sourceType = "camera";
					        } else if (res.tapIndex == 1) {
					            sourceType = "album";
					        }
					        uni.chooseImage({
					            count: 1, //最多可以选择的图片张数，默认9
					            sizeType: ["original", "compressed"],   //original 原图，compressed 压缩图，默认二者都有
					            sourceType: [sourceType], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					            success: function(res) {
					                let tempFilePaths = res.tempFilePaths;
									that.posterObj1.image = tempFilePaths[0]
									this.posterObj1.qrcode = '../../static/imgs/qrcode.jpg'
					               console.log(tempFilePaths)
					            }
					          });
					        }
					      });

				}else{
					if(this.list.length>0){
						this.show1=true
					}else{
						uni.showToast({
							icon: "none",
							title: '您还未创建名片',
							duration: 3000
						})
					}
				}
			},
			
			previewImg(){
				// #ifdef H5
				return;
				// #endif
				uni.previewImage({
					current:this.path,
					urls: [this.path]
				});
			},
			closePopup(){
				this.$refs.posterImg.close();
				this.show_poster=false;
			},
			async toSave() {
			var that = this
			//写个同步方法 把所谓 高度宽度 位置 都算好
			let query = wx.createSelectorQuery();
			await query.select('.canvas-content').boundingClientRect(rect=>{
			  this.height = rect.height;
			}).exec()
			await query.select('.title').boundingClientRect(rect=>{
			  this.theight = rect.height;
			}).exec()
		
			setTimeout(()=>{
				var posterObj = this.$request.makeCanvasData(this.check_idx,this.height,this.posterObj1,this.theight)
				uni.showLoading({
					title:'海报生成中',
				})
				this.posterObj = posterObj
				setTimeout(()=>{
				const painter = this.$refs.painter;
				console.log(painter)
					painter.canvasToTempFilePath().then(res => {
						console.log(res.tempFilePath,'path')
						this.path = res.tempFilePath;
						this.$refs.posterImg.open();
						this.show_poster=true;
						uni.hideLoading()
					});
				},4000)
			},1000)
				
			
				console.log(this.posterObj)
				
				console.log(this.check_idx)
				if (this.check_idx == 4) return;
				// switch (this.check_idx) {
				// 	case 0:

				// 		this.posterObj.background = '#fff';
				// 		this.posterObj.views=[
					
				// 				{
				// 					type: 'text',
				// 					text: this.posterObj1.title,
				// 					use:'title',
				// 					css: {
				// 						fontSize: '32rpx',
				// 						color: '#1A2033',
				// 						fontWeight: 'bold',
				// 						lineHeight: '45rpx',
				// 						left: '32rpx',
				// 						top: '400rpx',
				// 						width: '606rpx'
				// 					}
				// 				},
				// 				{
				// 					type: 'text',
				// 					text:  this.posterObj1.title1,
				// 					use:'title1',
				// 					css: {
				// 						fontSize: '28rpx',
				// 						fontWeight: 'bold',
				// 						color: '#1A2033',
				// 						lineHeight: '28rpx',
				// 						left: '32rpx',
				// 						top: '515rpx'
				// 					}
				// 				},
				// 				{
				// 					type: 'text',
				// 					text: '长按或扫描识别二维码',
				// 					use:'title2',
				// 					css: {
				// 						fontSize: '24rpx',
				// 						color: '#4070FF',
				// 						lineHeight: '24rpx',
				// 						left: '32rpx',
				// 						top: '559rpx'
				// 					}
				// 				},
				// 				{
				// 					type: 'image',
				// 					src: 'https://s.yun-live.com/images/20210201/eb694718fa6c7b90d60a2c250847a192.jpg',
				// 					use:'dt',
				// 					css: {
				// 						left: '32rpx',
				// 						top: '34rpx',
				// 						width: '606rpx',
				// 						height: '341rpx',
				// 						borderRadius: '16rpx'
				// 					}
				// 				},
								
				// 				{
				// 					type: 'qrcode',
				// 					text: 'https://www.yun-live.com/',
				// 					css: {
				// 						left: '445rpx',
				// 						top: '500rpx',
				// 						width: '200rpx',
				// 						height: '200rpx',
				// 					}
				// 				},
				// 				// {
				// 				// 	type: 'text',
				// 				// 	text: '————  由云现场提供技术支持  ————',
				// 				// 	css: {
				// 				// 		left: '0',
				// 				// 		top: '863rpx',
				// 				// 		width: '100%',
				// 				// 		textAlign: 'center',
				// 				// 		fontSize: '24rpx',
				// 				// 		color: '#989FB3',
				// 				// 		lineHeight: '33rpx'
				// 				// 	}
				// 				// }
				// 			]
				// 		break;
				// 	case 1:
				// 	this.posterObj.height=(this.height*2)+'rpx'
				// 	this.posterObj.views=[{
				// 				type: 'image',
				// 				use:'bg',
				// 				src: 'https://s.yun-live.com/images/20210201/39ae4d9d8ad0b1acac7c224e845c641f.png',
				// 				css: {
				// 					left: '0',
				// 					top: '0',
				// 					width: '100%',
				// 					height: '100%'
				// 				}
				// 			},
				// 			{
				// 				type: 'image',
				// 				src: 'https://s.yun-live.com/images/20210201/eb694718fa6c7b90d60a2c250847a192.jpg',
				// 				css: {
				// 					left: '32rpx',
				// 					top: '34rpx',
				// 					width: '606rpx',
				// 					height: '341rpx',
				// 					borderRadius: '16rpx'
				// 				}
				// 			},
				// 			{
				// 				type: 'text',
				// 				text: this.posterObj1.title,
				// 				use:'title',
				// 				css: {
				// 					fontSize: '32rpx',
				// 					color: '#fff',
				// 					fontWeight: 'bold',
				// 					lineHeight: '45rpx',
				// 					left: '32rpx',
				// 					top: '400rpx',
				// 					width: '606rpx'
				// 				}
				// 			},
				// 			{
				// 				type: 'text',
				// 				text: this.posterObj1.title1,
				// 				use:'title1',
				// 				css: {
				// 					fontSize: '28rpx',
				// 					fontWeight: 'bold',
				// 					color: '#D8AB87',
				// 					lineHeight: '28rpx',
				// 					left: '32rpx',
				// 					top: '515rpx'
				// 				}
				// 			},
				// 			{
				// 				type: 'text',
				// 				text: '长按或扫描识别二维码',
				// 				use:'title2',
				// 				css: {
				// 					fontSize: '24rpx',
				// 					color: '#FFFFFF',
				// 					lineHeight: '24rpx',
				// 					left: '32rpx',
				// 					top: '559rpx'
				// 				}
				// 			},
							
				// 			{
				// 				type: 'image',
				// 				src: 'https://s.yun-live.com/images/20210201/d88d56843d43b917e2a28550b2a62723.png',
				// 				css: {
				// 					left: '551rpx',
				// 					top: '111rpx',
				// 					width: '103rpx',
				// 					height: '103rpx',
				// 				}
				// 			},
				// 			{
				// 				type: 'image',
				// 				src: 'https://s.yun-live.com/images/20210201/247736ffd279276b891ec14db8ed0fd0.png',
				// 				css: {
				// 					left: '43rpx',
				// 					top: '432rpx',
				// 					width: '56.4rpx',
				// 					height: '56.4rpx',
				// 				}
				// 			},
							
				// 			{
				// 				type: 'image',
				// 				src: 'https://s.yun-live.com/images/20210201/63a9b504fb745b43b9fe5c0adef8fddb.png',
				// 				css: {
				// 					left: '50%',
				// 					top: '750rpx',
				// 					transform: 'translate(-50%,0)',
				// 					width: '192rpx',
				// 					height: '78rpx',
				// 				}
				// 			},
				// 			{
				// 				type: 'view',
				// 				use:'qrcode-view',
				// 				css: {
				// 					left: '445rpx',
				// 					top: '500rpx',
				// 					width: '200rpx',
				// 					height: '200rpx',
				// 					background: '#fff',
				// 				}
				// 			},
				// 			{
				// 				type: 'image',
				// 				src:this.posterObj1.qrcode,
				// 				use:'qrcode',
				// 				css: {
				// 					left: '455rpx',
				// 					top: '510rpx',
				// 					// transform: 'translate(-50%,0)',
				// 					width: '180rpx',
				// 					height: '180rpx',
				// 				}
				// 			},

				// 		]
						
				// 		break;
				// 	case 2:
				// 		this.posterObj1.backgroundType='image'
				// 		this.posterObj1.background='https://s.yun-live.com/images/20210201/78f227bd701da20676c9da9166ce3144.png';
				// 		this.posterObj1.width='540rpx',
				// 		this.posterObj1.height='303rpx',
				// 		this.posterObj1.titleCssColor='#1D1D25'
				// 		this.posterObj1.title1CssColor='#1D1D25'
				// 		this.posterObj1.title2CssColor='#6CB37A'
				// 		break;
				// 	case 3:
				// 		this.posterObj1.backgroundType='image'
				// 		this.posterObj1.background='https://s.yun-live.com/images/20210201/524ab6a41fe8c7eb57b35df9a547d388.png';
				// 		this.posterObj1.width='606rpx',
				// 		this.posterObj1.height='341rpx',
				// 		this.posterObj1.titleCssColor='#1D1D25'
				// 		this.posterObj1.title1CssColor='#1D1D25'
				// 		this.posterObj1.title2CssColor='#6CB37A'
				// 		break;
				// 	default:
				// 		break;
				// }
				// var node = await this.layout1.calcNode(this.posterObj)
				// console.log(node,'node')
				// if(node&&node.children.length===this.posterObj.views.length){
					// for(var i=0;i<node.children.length;i++){
					// 	if(node.children[i].use==='title'){
					// 		dth=node.children[i].layoutBox.height-48
					// 	}
					// 	if(node.children[i].use==='title'||node.children[i].use==='title1'||node.children[i].use==='title2'){
					// 		h+=node.children[i].layoutBox.height
					// 	}
					// }
					// console.log(h,h+780,'h打印')
					// for(var i=0;i<this.posterObj.views.length;i++){
					// 	if(this.posterObj.views[i].use==='title1'||this.posterObj.views[i].use==='title2'
					// 	||this.posterObj.views[i].use==='qrcode-view'||this.posterObj.views[i].use==='qrcode'){
					// 		var top=this.posterObj.views[i].css.top.split('r')[0]
					// 		this.posterObj.views[i].css.top=(Number(top)+Number(dth*2))+'rpx'
					// 	}
					// }
					// this.posterObj.width='670rpx'
					
					// console.log(this.posterObj,'posterObj')
					// uni.showLoading({
					// 	title:'海报生成中',
					// })
					// const painter = this.$refs.painter;
					// setTimeout(()=>{
					// 	console.log(this.height*2,'height')
					// 	painter.canvasToTempFilePath().then(res => {
					// 		console.log(res.tempFilePath,'path')
					// 		this.path = res.tempFilePath;
					// 		this.$refs.posterImg.open();
					// 		this.show_poster=true;
					// 		uni.hideLoading()
					// 	});
					// },1000)
				// }
				
				
			},
			toChoose(index) {
				if (index == 4) return;
				this.check_idx = index;
				switch (index) {
					case 0:
						this.posterObj1.background='#fff';
						this.posterObj1.backgroundType='rgb'
						this.posterObj1.width='606rpx',
						this.posterObj1.height='341rpx',
						this.posterObj1.titleCssColor='#1A2033'
						this.posterObj1.title1CssColor='#1A2033'
						this.posterObj1.title2CssColor='#4070FF'
						break;
					case 1:
						this.posterObj1.backgroundType='image'
						this.posterObj1.background='https://s.yun-live.com/images/20210201/39ae4d9d8ad0b1acac7c224e845c641f.png';
						this.posterObj1.width='606rpx',
						this.posterObj1.height='341rpx',
						this.posterObj1.titleCssColor='#fff'
						this.posterObj1.title1CssColor='#D8AB87'
						this.posterObj1.title2CssColor='#fff'
						break;
					case 2:
						this.posterObj1.backgroundType='image'
						this.posterObj1.background='https://s.yun-live.com/images/20210201/78f227bd701da20676c9da9166ce3144.png';
						this.posterObj1.width='540rpx',
						this.posterObj1.height='303rpx',
						this.posterObj1.titleCssColor='#1D1D25'
						this.posterObj1.title1CssColor='#1D1D25'
						this.posterObj1.title2CssColor='#6CB37A'
						break;
					case 3:
						this.posterObj1.backgroundType='image'
						this.posterObj1.background='https://s.yun-live.com/images/20210201/524ab6a41fe8c7eb57b35df9a547d388.png';
						this.posterObj1.width='606rpx',
						this.posterObj1.height='341rpx',
						this.posterObj1.titleCssColor='#1D1D25'
						this.posterObj1.title1CssColor='#1D1D25'
						this.posterObj1.title2CssColor='#6CB37A'
						break;
					default:
						break;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F2F4F8;
	}
	.page{
		/deep/ .uni-transition{
			background-color:rgba(0, 0, 0, 0.6)
		}
		.poster-img{
			width: 670rpx;
			height: 928rpx;
			position: relative;
			text{
				background: url('https://s.yun-live.com/images/20210201/5c4ef9d86bc5eec90f2f915683d9db08.png') no-repeat;
				background-size: 100% 100%;
				display: inline-block;
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				top: -60rpx;
				right: 0;
			}
			image{
				width: 100%;
				height: 100%;
			}
			view{
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 32rpx;
				text-align: center;
				margin-top: 28rpx;
			}
		}
		.poster{
			padding: 24rpx 40rpx 410rpx;
			
			.footer-btn{
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				view{
					width: 319rpx;
					height: 66rpx;
					border-radius: 40rpx;
					border: 1px solid #4070FF;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #4070FF;
					line-height: 66rpx;
					text-align: center;
				}
				.save{
					background: #4070FF;
					color: #FFFFFF;
				}
			}
		}
		.poster-btn{
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 364rpx;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0px 0px;
			>.check_bg{
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding-top:25rpx;
				>view{
					width: 80rpx;
					height: 80rpx;
					position: relative;
					border-radius: 10rpx;
					border: 4rpx solid #fff;
					&.is-check{
						border: 4rpx solid #4070FF;
					}
					image{
						width: 100%;
						height: 100%;
					}
					view{
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						right: -15rpx;
						bottom: -15rpx;
						background: url('https://s.yun-live.com/images/20210201/311c01265c1aa508418f6bae10d67602.png') no-repeat;
						background-size: 100% 100%;
					}
				}
			}
			/deep/.u-radio{
				margin-left: 10px;
			}
			.diy_title,.diy_image{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 20rpx 0;
				font-size:28rpx;
			}
			.diy_title{
				padding: 10rpx 20rpx 0;
			}
		}
	}
	.poster{
		position:relative;
	}
	.poster .title{
		text-align:left;
		margin-top:20rpx;
		word-break: break-word;
	}
	.poster .title1{
		margin-bottom:10rpx;
	}
</style>