cqcarbon
/
cert-create


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
							<!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();
      //是否是小程序端使用
      if(obj.isH5 === 0){
        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.companyName || obj.customerName || obj.nickName || '匿名用户', //购买者名字
					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>