|
|
@@ -0,0 +1,233 @@
|
|
|
+<template>
|
|
|
+ <view class="pages">
|
|
|
+ <web-view :src="certificateUrl
|
|
|
+ +'credentialNo='+item.credentialNo
|
|
|
+ +'&customerName='+item.customerName
|
|
|
+ +'&year='+item.year
|
|
|
+ +'&carbonAmount='+item.carbonAmount
|
|
|
+ +'&orderAmount='+item.orderAmount
|
|
|
+ +'&buyDate='+item.buyDate
|
|
|
+ "></web-view>
|
|
|
+<!-- <view class="save-tip">
|
|
|
+ 长按保存
|
|
|
+ </view> -->
|
|
|
+ <!-- 画板 -->
|
|
|
+ <!-- <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,
|
|
|
+ certificateUrl:this.config.certificateUrl,
|
|
|
+ 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) {
|
|
|
+ console.log('config',this.config);
|
|
|
+ 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>
|
