cqcarbon
/
cert-create


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script type="text/javascript">
			/**
			 * URL参数转换为对象
			 */
			Location.prototype.searchObj = function(url) {
				var obj = {};
				var arr = (url || this.search).match(/[?&][^?&]+=[^?&]+/g);
				if (arr) {
					arr.forEach(function(item) {
						var tempArr = item.substring(1).split('=');
						obj[decodeURIComponent(tempArr[0])] = decodeURIComponent(tempArr[1]);
						length++;
					});
				}
				return obj;
			}
		</script>
		<style type="text/css">
			#credTpl {
				overflow: hidden;
				position: fixed;
				padding: 0;
				margin: 0;
				border: 0;
				height: 0;
				width: 0;
				top: 0;
				left: 0;
			}
			.showImg{
				position: fixed;
				padding: 0;
				margin: 0;
				border: 0;
				top: 1%;
				left: 5%;
				bottom: 18%;
				right: 5%;
			}
			#showImg {
				position: absolute;
				padding: 0;
				margin: 0;
				border: 0;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				width: 100%;
				height: 100%;
			}
			#loading{
				display:none;
				position:absolute;
				width:7em;
				height:7em;
				transition: 1s;
				left:50%;
				top:28%;
				margin-left:-4.2em;
				background:rgba(0,0,0,0.5);
				color:#fff;
				padding:15px 10px 2px 10px;
				text-align:center;
				font-size:12px;
				border-radius:6px;
				opacity:0;
			}
			#loading img{
				width:4em;
				height:4em;
			}
			#loading p{
				margin:0;
			}
      .noticeButton{
        display: none;
        position:fixed;
        bottom:10px;
        left:20px;
        right:20px;
        height: 40px;
        text-align:center;
        line-height:40px;
        background: #26D18B;
        font-size:14px;
        color:#fff;
        border-radius: 8px;
      }
		</style>
	</head>

	<body>
		<div class="showImg">
			<img src="bg.png" id="showImg">
		</div>
    <div class="noticeButton">长按证书保存</div>
		<div id="loading">
			<img src="./loading.gif">
			<p>证书生成中</p>
		</div>
		<iframe id="credTpl" name="credTpl" src="credTpl.html"></iframe>
	</body>

	<script type="text/javascript">
		let loadEle = document.getElementById("loading");
		let h5btn   = document.getElementsByClassName('noticeButton')[0]
			loadEle.style.display = 'block'
			setTimeout(function () {
			loadEle.style.opacity = 1;
		},.1);
			let imgSrcFun = function() {};
			let iframeOnload = function() {
				//取得证书信息缓存
				let obj = location.searchObj();
				// alert(obj.toString())
				// alert(JSON.stringify(obj))
				// console.log(obj.isH5 == 'true')
				// console.log(obj.isH5)
				  //是否是小程序端使用
				  if(obj.isH5 == 'true'){
					h5btn.style.display = 'block';
				  }else{
					h5btn.style.display = 'none';
				  }
				let credTpl = window.frames['credTpl'].window; //获取证书框架window
				let mycertificate = new credTpl.certificate({ //生成图片
					format: 'jpg',
					data: {
						code: obj.credentialNo || '', //编号
						name: obj.certName || '匿名用户', //购买者名字
						co2: obj.carbonAmount || 0, //碳汇量
						money: obj.orderAmount || 0, //购买多少钱
						date: obj.buyDate || '', //购买日期
						year:obj.year, //购买年度
						farmerName:obj.farmerName //农户姓名
					},
					success: function(_function) {
						imgSrcFun = _function('data');
						document.getElementById('showImg').src = imgSrcFun; //预览图片
						loadEle.style.opacity = 0;
						setTimeout(function () {
							loadEle.style.display = 'block'
						},900);
					}
				});
				mycertificate.down('A0');
			};
			/**
			 * 证书框架加载完毕开始生成
			 */
			let iframe = document.getElementById("credTpl");
			if (iframe.attachEvent) {
				iframe.attachEvent("onload", iframeOnload);
			} else {
				iframe.onload = iframeOnload;
			}
	</script>

</html>