demo.html 3.29 KB
<div id="fphoto" class="page out" data-title="拍照">
	<div class="page-content" id="fphoto_content">
		<div id="fphoto-header"></div>
		<div id="fphoto-form"></div>
		<div id="fphoto-photo"></div>
		<div id="fphoto-break"></div>
		<div id="fphoto-photo2"></div>
		<div id="fphoto-fbutton"></div>
	</div>
</div>
<script>
require(["NavHeader", "Form", "FPhoto", "FButton"], function(NavHeader, Form, FPhoto, FButton) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";

	if (!hasClsPicker) {
		new NavHeader({
			el: "fphoto-header",
			option: {
				title:"表单-拍照", 
				smallTitle:"fphoto"
			}
		}).render();
		
		new Form({
			el: "fphoto-form",
			option: {
				submit : {
					action : "/mobilemode/mobile/demo/plugin/Form/formAction.jsp",//提交地址
					validate : function(){
						//表单提交前验证脚本
					}
				}
			}
		}).render();
	}

	new FPhoto({
		el: "fphoto-photo",
		option: {
			form: "fphoto-form",
			field : {
				label : "拍照",		//显示名
				name : "photo",		//字段名
				value : "",		//字段值,数据库保存值,文档id,如427,428,429
			},
			compress : {
				quality : 1,  //质量:值越小,质量越低,图片压缩后体积越小,但图片也会越不清晰。该值设置介于0.1 至 1之间
				zoom : 1      //压缩时会以图片的原始宽高会乘以缩放比例,值越小,压缩后图片的宽高越小,体积也会越小。该值设置介于0.1 至 1之间
			},
			watermark: {
				add : true,	//是否添加水印
				position : 1,	//水印位置
				font : "Verdana",	//水印字体
				color : "#F8F8F8",	//字体颜色
				fontsize : "18",	//字体大小px
				fontweight : "normal",	//是否加粗
				content : "{CURRDATE} {CURRTIME}"	//水印内容
			},
			draw : true,		//是否绘制
			source : {			//照片来源
				browser : true,	//选择照片
				takephoto : true//拍照
			},
			limit : 0,			//最大图片张数,0表示不限制
			required : true,
			readonly : false
		}
	}).render().then(function() {
		if (!hasClsPicker) return;

		_u.vetically("#fphoto-photo");

		clsPicker.golalSetting({
			container: ".wev-comp-FPhoto",
			type: "FPhoto"
		});

		new clsPicker({
			selector: ".wev-field.vertical",
			text: ".wev-field.vertical",
			lineYSkew: 20
		});
		new clsPicker({
			selector: ".wev-field.vertical>div:nth-child(1)",
			text: " ",
			lineYSkew: 20,
		});
		new clsPicker({
			selector: ".wev-upload>span",
			text: " ",
			lineYSkew: 80,
		});
		new clsPicker({
			selector: ".wev-img-wrapper",
			text: ".wev-img-wrapper",
			lineYSkew: 50,
			skew: [3, ""]
		});
		new clsPicker({
			selector: ".wev-upload",
			text: ".wev-upload",
			lineYSkew: 50,
			skew: [1.2, ""],
			position: "top right"
		});
	});

	if (!hasClsPicker) {
		new FPhoto({
			el: "fphoto-photo2",
			option: {
				form: "fphoto-form",
				field : {
					name : "photo"		//字段名
				},
				limit : 3
			}
		}).render();
		
		new FButton({
			el: "fphoto-fbutton",
			container: "#fphoto",
			option: {
				form : "fphoto-form",
				btns : [
					{
						text : "重置",
						action : "reset"
					},
					{
						text : "提交",
						action : "submit",
						callback : function(billid) {
							console.log(billid);
						},
						remindMsg : "操作成功"
					}
				],
				fixed : true
			}
		}).render();
	}
});
</script>