youngee_b_api/pages/test/test.vue

<template>
	<view style="position: relative;">
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view :style="{marginTop:navH}"></view>
		<!-- <view>
			<l-painter isRenderImage :width="'686rpx'" :height="'930rpx'"
				custom-style="position: fixed; top:10px; left: 500%;" ref="painter" @success="poster($event)" />
		</view> -->
	</view>
</template>

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	// import lPainter from "@/components/lime-painter/index.vue"	
	// import lPainter from '@/utils/painter'

	export default {
		components: {
			mvBar,
			// 'l-painter': lPainter
		},
		data() {
			return {
				navH: getApp().globalData.navHeight,
				mysNavConfig: {
					/* 开启单页显示首页图标 */
					isHome: true,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "我的收益",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "normal", // 100 - 700
					},
					btnType: "type2",
					onLeftClick: "/pages/mycenter/mycenter",
					/* type2 按钮 */
					type2Config: {
						// 左图标
						leftPath: "/static/img/png2.png",
						// 右图标
						rightPath: "/static/img/png4.png",
						// 圆角
						radius: "40rpx",
					},
				},
			}
		},
		onLoad(){
			this.onShareLoad();
		},
		methods: {
			onShareLoad() {
				let that = this;
				let base = {
					width: '686rpx',
					height: '950rpx',
					views: [{
							css: {
								width: '686rpx',
								height: '500rpx',
								display: "inline-block",
							},
							views: [{
								type: 'image',
								src: '../../static/home.png',
								mode: 'scaleToFill',
								css: {
									radius: '32rpx 32rpx 0rpx 0rpx',
									left: '0rpx',
									top: '0rpx',
									width: '686rpx',
									height: '500rpx',
								}
							}],
							type: "view"
						},
						{
							css: {
								width: '686rpx',
								height: '190rpx',
								display: "inline-block",
								background: '#ffffff',
							},
							views: [{
									type: 'text',
									text: '￥',
									css: {
										color: '#FE4F02',
										left: '30rpx',
										top: '550rpx',
										fontSize: '26rpx',
										lineHeight: '45rpx'
									}
								},
								{
									type: 'text',
									text: '1688.00',
									css: {
										color: '#FE4F02',
										left: '60rpx',
										top: '550rpx',
										fontWerght: 'bold',
										fontSize: '52rpx',
										lineHeight: '45rpx'
									}
								},
								{
									type: 'text',
									text: 'uniapp使用l-painter画板,海报uniapp使用l-painter画板,海报',
									css: {
										maxLines: 1,
										width: '630rpx',
										color: '#1A1A1A',
										left: '32rpx',
										top: '620rpx',
										fontSize: '32rpx',
										fontWerght: 'bold',
										lineHeight: '45rpx'
									}
								}
							],
							type: "view"
						}, {
							css: {
								width: '686rpx',
								height: '52rpx',
								display: "inline-block",
							},
							views: [{
								type: 'image',
								src: '../../static/img/aimg1.png',
								mode: 'scaleToFill',
								css: {
									left: '0rpx',
									top: '690rpx',
									width: '686rpx',
									height: '52rpx',
								}
							}],
							type: "view"
						}, {
							css: {
								width: '686rpx',
								height: '180rpx',
								display: "inline-block",
								background: '#ffffff',
								radius: '0rpx 0rpx 32rpx 32rpx',
							},
							views: [{
									type: 'text',
									text: '购买热线',
									css: {
										left: '40rpx',
										top: '770rpx',
										fontSize: '28rpx',
										color: '#999999'
									}
								},
								{
									type: 'image',
									src: '../../static/img/icon4.png',
									mode: 'widthFix',
									css: {
										left: '184rpx',
										top: '770rpx',
										width: '36rpx',
										height: '36rpx',

									}
								},
								{
									type: 'text',
									text: '手机号码',
									css: {
										left: '240rpx',
										top: '770rpx',
										fontSize: '28rpx',
										fontWerght: 'bold',
									}
								},
								{
									type: 'text',
									text: '150-1234-4567',
									css: {
										left: '360rpx',
										top: '770rpx',
										fontSize: '28rpx',
										fontWerght: 'bold',
									}
								},
								{
									type: 'image',
									src: '../../static/img/sucess.png',
									mode: 'widthFix',
									css: {
										left: '184rpx',
										top: '840rpx',
										width: '36rpx',
										height: '36rpx',

									}
								},
								{
									type: 'text',
									text: '微信号码',
									css: {
										left: '240rpx',
										top: '840rpx',
										fontSize: '28rpx',
										fontWerght: 'bold',
									}
								},
								{
									type: 'text',
									text: 'csc1234',
									css: {
										left: '360rpx',
										top: '840rpx',
										fontSize: '28rpx',
										fontWerght: 'bold',
									}
								},
							],
							type: "view"
						},
						{
							css: {
								top: '360rpx',
								left: '480rpx',
								width: '170rpx',
								height: '220rpx',
								display: "inline-block",
								background: '#ffffff',
								borderRadius: '16rpx',
								boxShadow: "0 20rpx 58rpx rgba(0,0,0,.15)"
							},
							views: [{
									type: 'text',
									text: '产品详情二维码',
									css: {
										width: '280rpx',
										top: '540rpx',
										left: '488rpx',
										fontSize: '22rpx',
										color: '#1A1A1A'
									}
								},
								{
									type: 'image',
									src: '../../static/img/deng2.png',
									mode: 'widthFix',
									css: {
										top: '370rpx',
										left: '484rpx',
										width: '160rpx',
										height: '160rpx',
										borderRadius: '50%'
									}
								}
							],
							type: "view"
						}
					]
				}
				const painter = that.$refs.painter;
				painter.render(base);
			},
			poster(event) {
				console.info(event)
				let path = event;
				let that = this;
				// #ifdef H5
				var eleLink = document.createElement('a');
				eleLink.download = "filename";
				eleLink.style.display = 'none';
				eleLink.href = path;
				document.body.appendChild(eleLink);
				eleLink.click();
				// 然后移除
				document.body.removeChild(eleLink);
				// #endif
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: path,
					success(res) {
						that.painterShow = false;
						that.show = false;
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000
						})
					}
				})
				// #endif
			},
		}
	}
</script>

<style>

</style>