QRCode_wev8.js 5.72 KB
if(typeof(MEC_NS) == 'undefined'){
	MEC_NS = {};
}

MEC_NS.QRCode = function(type, id, mecJson){
	this.type = type;
	if(!id){
		id = new UUID().toString();
	}
	this.id = id;
	if(!mecJson){
		mecJson = this.getDefaultMecJson();
	}
	this.mecJson = mecJson;
    var that = this;
    require(['mec'], function(mec){
        that.remark = function(){
            return mec.remark(that.mecJson.content);
        };
    });
}

/*获取id。 必需的方法*/
MEC_NS.QRCode.prototype.getID = function(){
	return this.id;
};

MEC_NS.QRCode.prototype.runWhenPageOnLoad = function(){
	this.afterDesignHtmlBuild();
};

/*获取设计的html, 页面上怎么显示控件完全依赖于此方法。 必需的方法*/
MEC_NS.QRCode.prototype.getDesignHtml = function(){
	return getDesignHtml(this);
};

/*页面上显示控件完成后调用此方法,主要用于一些必须要使用js对页面进行后置操作时,无需要此方法可至空。 不必需的方法,有此方法系统自动调用*/
MEC_NS.QRCode.prototype.afterDesignHtmlBuild = function(){
	var theId = this.id;

	var p = this.mecJson;
	p["id"] = theId;

	MADQRCode_init(p);
};

/*获取构建属性编辑窗体的html,添加和单击控件后会调用此方法,由此方法去构建属性编辑窗体。 必需的方法*/
MEC_NS.QRCode.prototype.getAttrDlgHtml = function(){
	var theId = this.id;

	var htm = "<div id=\"MADQR_"+theId+"\">";
	htm += "<div class=\"title\">"+SystemEnv.getHtmlNoteName(4650)+"</div>";
	htm += "<div class=\"form-group\">"
		   	+ "<div class=\"row\">"
		   		+ "<textarea id=\"content_"+theId+"\" data-autobind='content' class=\"area-control\" placeholder=\""+SystemEnv.getHtmlNoteName(4314)+"\"></textarea>"  //在此处键入二维码的内容,此内容可以是任意字符串
		   	+ "</div>"
		   	+ "<div class=\"row\">"
		   		+ "<span class=\"col-2 span-control\">"+SystemEnv.getHtmlNoteName(4474)+"</span> "  //尺寸:
		   		+ "<div class=\"col-m-8\">"
			   		+ "<input type=\"text\" id=\"width_"+theId+"\" data-autobind='width' class=\"form-control\"/>"
		   		+ "</div>"
		   	+ "</div>"
		   	+ "<div class=\"row\">"
		   		+ "<span class=\"col-2 span-control\">"+SystemEnv.getHtmlNoteName(4955)+"</span> "  //logo图片:
		   		+ "<div class=\"col-m-8\" style=\"position: relative;\">"
			   		+ "<input type=\"text\" id=\"logo_"+theId+"\" class=\"form-control\" style=\"padding-right:54px;box-sizing: border-box;\"/>"
			   		+ "<div onclick=\"MADQRCode_PicSet('"+theId+"');\" class=\"form-control-inline-btn\">"+SystemEnv.getHtmlNoteName(5081)+"</div>"	//上传
		   		+ "</div>"
		   	+ "</div>"
		   	+ "<div class=\"row\">"
		   		+ "<span class=\"col-2 span-control\">"+SystemEnv.getHtmlNoteName(4956)+"</span> "  //logo宽高:
		   		+ "<div class=\"col-m-8\">"
			   		+ "<input type=\"text\" id=\"logoWidth_"+theId+"\" data-autobind='logoWidth' class=\"form-control\" style=\"width:45%;display:inline;\"/>"
			   		+ "<span style=\"width: 10%;display: inline-block;text-align: center;font-size: 16px;\">-</span>"
			   		+ "<input type=\"text\" id=\"logoHeight_"+theId+"\" data-autobind='logoHeight' class=\"form-control\" style=\"width:45%;display:inline;\"/>"
		   		+ "</div>"
		   	+ "</div>"
		 + "</div>";
	htm += "<div class=\"bottom\"><div class=\"save-btn\" onclick=\"refreshMecDesign('"+theId+"');\">"+SystemEnv.getHtmlNoteName(3451)+"</div></div>";  //确定
	htm += "</div>";

	htm += "<div class=\"MAD_Alert\">"+SystemEnv.getHtmlNoteName(4115)+"</div>";  //已生成到布局

	return htm;
};

/*构建属性编辑窗体完成后调用此方法,主要用于一些必须要使用js对页面进行后置操作时,无需要此方法可至空。 不必需的方法,有此方法系统自动调用*/
MEC_NS.QRCode.prototype.afterAttrDlgBuild = function(){
	var theId = this.id;

	var width = this.mecJson["width"];
	var content = this.mecJson["content"];
	var logo = this.mecJson["logo"];
	var logoWidth = this.mecJson["logoWidth"];
	var logoHeight = this.mecJson["logoHeight"];

	$("#width_"+theId).val(width);
	$("#logo_"+theId).val(logo);
	$("#logoWidth_"+theId).val(logoWidth);
	$("#logoHeight_"+theId).val(logoHeight);
	$("#content_"+theId)[0].value = content;
};

/*获取JSON*/
MEC_NS.QRCode.prototype.getMecJson = function(){
	var theId = this.id;

	this.mecJson["id"] = theId;
	this.mecJson["mectype"] = this.type;

	var $attrContainer = $("#MAD_"+theId);
	if($attrContainer.length > 0){
		this.mecJson["width"] = $("#width_"+theId).val();
		this.mecJson["content"] = $("#content_"+theId).val();
		this.mecJson["logo"] = $("#logo_"+theId).val();
		this.mecJson["logoWidth"] = $("#logoWidth_"+theId).val();
		this.mecJson["logoHeight"] = $("#logoHeight_"+theId).val();
	}
	return this.mecJson;
};

MEC_NS.QRCode.prototype.getDefaultMecJson = function(){
	return {
		id: this.id,
		mectype: this.type,
		content: SystemEnv.getHtmlNoteName(5215), // 二维码内容
		width: "256",
		logoWidth: "32",
		logoHeight: "32"
	};
};

function MADQRCode_PicSet(mec_id){
	var pic_pathV = $("#logo_"+mec_id).val();
	var params = "pic_path=" + encodeURIComponent(pic_pathV);
	var mecHandler = MECHandlerPool.getHandler(mec_id);

	showPicsetModal(params, function(result){
		var picPath = result["pic_path"];
		$("#logo_"+mec_id).val(picPath);
		mecHandler.autobind.update();
	});
};

function MADQRCode_init (p) {
	var content = p.content;

	if (!content) return;

	$("#NMEC_" + p.id).html("").qrcode({
		render: "canvas",    //设置渲染方式,有table和canvas,使用canvas方式渲染性能相对来说比较好
		text: content,
		width: p.width,               //二维码的宽度
		height: p.width,              //二维码的高度
		src: p.logo,             //二维码中间的图片
		imgWidth: p.logoWidth,       //二维码图片的宽度
		imgHeight: p.logoHeight        //二维码图片的高度
	});
}