cqcarbonwxapp/pages/usercenter/certificateList/certificate/certificate.vue

<template>
	<view class="pages">
		<!-- <l-painter :board="base"/> 画板待调试 -->
		<view class="container" id="wrapper">
			<view class="image-wrapper draw">
			  <image :src="$getimg+'cqtanhui-cert.jpg'" class="draw page-bg" mode="scaleToFill"></image>
			</view>
			<view class="draw cart-no">证书编号:{{item.credentialNo}}</view>
			<view class="cart-text cart-name">
				尊敬的 {{item.customerName}}:
			</view>
			<view class="cart-text">
				感谢您对“碳汇+”生态产品价值实现的支持，您购买了{{item.year}}年度碳汇量{{item.carbonAmount}}kg，您购碳资金{{item.orderAmount}}元，已全额转入{{item.farmerName}}的银行账户。
			</view>
			<view class="cart-text">
				该笔碳汇可用于抵消您的碳排放
			</view>
			<view class="cart-text">
				感谢您为生态文明建设和全球应对气候变化所做出的贡献
			</view>
			
			
			
		 <!-- <text class="title draw" data-text="Hello there">Hello there</text>
		  <text class="info draw" data-text="小程序是一种新的开放能力，开发者可以快速地开发一个小程序。">
		   小程序是一种新的开放能力，开发者可以快速地开发一个小程序。
		  </text>
		  <view class="image-wrapper draw">
		    <image class="draw" :src="$getimg + 'guide02.png'"/>
			<image class="draw" src="../../../../static/img/icon_use_active.png"/>
		  </view> -->
		  
		  <!-- <button class="generate-btn" @click="drawCanvas">generate</button> -->
		</view>
		
		<canvas canvas-id="canvas" class="share-canvas"></canvas>
	</view>
</template>

<script>
	import lPainter from '@/components/lime-painter/index.vue';	
	export default {
		components:{
			lPainter
		},
		data() {
			return {
				$getimg:this.$getimg,
				thetoken:'',
				orderid:'',
				item:[],
				params:{
				},
				base: {
					width: '750rpx',
					height: '1130rpx',
					views: [
						{
							type: 'image',
							src: 'http://fqn.hongweisoft.com/cqcarbon/wxapp/cqtanhui-cert.jpg',
							css: {
								left: '0rpx',
								top: '0rpx',
								width: '100%',
								height: '1130rpx'
							}
						},
						{
							type: 'text',
							text: '左对齐,下划线\n无风才到地，有风还满空\n缘渠偏似雪，莫近鬓毛生',
							// 可以指定关键字颜色
							rules: {
								word: ['到地'],
								color: 'red'
							},
							css: {
								left: '0rpx',
								top: '10rpx',
								fontSize: '28rpx',
								lineHeight: '36rpx',
								textDecoration: 'underline'
							}
						},
					]
				}
				
			}
		},
		onShow() {
		
		},
		onLoad(e) {
			this.thetoken = 'Bearer' + ' ' + this.$store.state.token;
			this.orderid = e.orderid;
			uni.showLoading({
				title: '正在获取证书信息'
			});
			this.$api.http.get(this.config.apiBaseurl + '/carbon-h5/wap/order/getCredentialByOrderId?orderId='+this.orderid,{
				header: {
				Accept:'application/json',
				Authorization: this.thetoken, 
			},
			}).then(res => {
				uni.hideLoading();
				// this.info = Object.assign(this.info, data);
				// this.info.url = '/static/html2canvas/index.html?key=' + this.orderid;
				this.item = res.data.retBody;
				console.log('res',JSON.parse(JSON.stringify(res.data.retBody)));
			}).catch(err =>{
				console.log('err',err)
			});

		},
		methods: {
			drawCanvas: function() {
				const wrapperId = '#wrapper'
				const drawClassName = '.draw'
				const canvasId = 'canvas'
				
				wxml2canvas(wrapperId, drawClassName, canvasId).then(() => {
					uni.showLoading({
						title: '生成中'
					});
					uni.canvasToTempFilePath({
					  x: 0,
					  y: 0,
					  // width: 500,
					  // height: 500,
					  // destWidth: 100,
					  // destHeight: 100,
					  canvasId: 'canvas',
					  success: function(res) {
						uni.hideLoading();
						uni.showLoading({
							title: '保存中'
						});
					    console.log(res.tempFilePath);
						uni.saveImageToPhotosAlbum({
							filePath:res.tempFilePath,
							success:function(res){
								uni.hideLoading();
							}							
						})
					  } 
					})
				  // canvas has been drawn
				  // can save the image with wx.canvasToTempFilePath and wx.saveImageToPhotosAlbum 
				})
		  }

		}
	}
</script>

<style>
	@import url("./certificate.css");
</style>