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

<template>
	<view class="pages">
		<!-- 画板 -->		
		<l-painter ref="painter" :board="base"/>
		<view class="bottom-btn-wrap">
			<view class="bottom-btn-wrap-bg">
				<view class="bottom-btn btn" @click="download">
					下载图片
				</view>
			</view>
		</view>
		<!-- <button class="generate-btn" id="mycanvas" @click="download()"></button> -->
		<!-- <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>
		</view> -->
	</view>
</template>

<script>
	import lPainter from '@/components/lime-painter/index.vue';	
	export default {
		components:{
			lPainter
		},
		data() {
			return {
				$getimg:this.$getimg,
				thetoken:'',
				orderid:'',
				item:[],
				path:'',
				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: '',
							css: {
								left: '100rpx',
								top: '350rpx',
								width: '550rpx',
								color:'#26D18B',
								textAlign: 'center',
								display:'block',
							}
						},
						{
							type: 'text',
							text: '',
							css: {
								left: '100rpx',
								top: '398rpx',
								width: '550rpx',
								fontSize: '28rpx',
								lineHeight: '36rpx',
								color:'#333',
								textAlign: 'left',
							}
						},
						{
							type: 'text',
							text: '',
							css: {
								width: '550rpx',
								left: '100rpx',
								top: '446rpx',
								fontSize: '28rpx',
								lineHeight: '36rpx',
								color:'#333',
								textAlign: 'left',
								textIndent: '2em'
							}
						},
						{
							type: 'text',
							text: '该笔碳汇可用于抵消您的碳排放',
							css: {
								width: '550rpx',
								left: '100rpx',
								top: '566rpx',
								fontSize: '28rpx',
								lineHeight: '36rpx',
								color:'#333',
								textAlign: 'left',
								textIndent: '2em'
							}
						},
						{
							type: 'text',
							text: '感谢您为生态文明建设和全球应对气候变化所做出的贡献',
							css: {
								width: '550rpx',
								left: '100rpx',
								top: '614rpx',
								fontSize: '28rpx',
								lineHeight: '36rpx',
								color:'#333',
								textAlign: 'left',
								textIndent: '2em'
							}
						},
					]
				}
				
			}
		},
		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('this.base.views',this.base.views);
				this.base.views[1].text = `证书编号:${res.data.retBody.credentialNo}`;
				this.base.views[2].text = `尊敬的 ${res.data.retBody.customerName}:`;
				this.base.views[3].text = `感谢您对“碳汇+”生态产品价值实现的支持，您购买了 ${res.data.retBody.year}年度碳汇量${res.data.retBody.carbonAmount}kg，您购碳资金${res.data.retBody.orderAmount}元，已全额转入${res.data.retBody.farmerName}的银行账户。`;
				console.log('res',JSON.parse(JSON.stringify(res.data.retBody)));
			}).catch(err =>{
				console.log('err',err)
			});

		},
		methods: {
			onRender() {
				// 支持通过调用render传入参数
				const painter = this.$refs.painter
				painter.render(this.base)
			},
			// canvasToTempFilePath() {
			// 	const painter = this.$refs.painter
			// 	// 支持通过调用canvasToTempFilePath方法传入参数 调取生成图片
			// 	painter.canvasToTempFilePath().then(res => this.path = res.tempFilePath)
			// },
			// // 支持通过调用canvasToTempFilePath方法传入参数 调取生成图片
			// onCanvasToTempFilePath() {
			// 	const painter = this.$refs.custom
			// 	painter.canvasToTempFilePath({dpr:2}).then(res => this.path = res.tempFilePath)
				
			// },
			download(){
				let self = this;
				const painter = this.$refs.painter;
				painter.canvasToTempFilePath().then(res => this.path = res.tempFilePath);
				console.log('this.path',this.path);
				uni.showLoading({
					title: '生成中'
				});
				setTimeout(this.saveImg,500);
			},
			saveImg(){
				let self = this;
				uni.saveImageToPhotosAlbum({
					filePath:this.path,
					success:function(res){
						uni.hideLoading();
						self.$api.msg('生成成功');
					},
					fail:function(err){						
						uni.hideLoading();
						if(err.errMsg =="saveImageToPhotosAlbum:fail cancel"){
							return true;
						}
						self.$api.msg('生成失败请重试!');
						// self.$api.msg(err.errMsg);
						// if(err.errMsg == 'saveImageToPhotosAlbum:fail The "path" argument must be of type string. Received type object'){
						// 	self.$api.msg('生成失败请重试!')
						// }
						console.log('err',err)
					}
				});				
			}

		}
	}
</script>

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