project
/
wms-pda-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<!-- FontAwesome字体图标 -->
		<link type="text/css" href="../../js/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<style>
			.my-btn {
				width: 80px;
				height: 34px;
				margin: 10px auto;
			}
		</style>
		<style type="text/css">
			body {
				background-color: #efeff4;
			}
			
			.mui-content {}
			
			.mui-content a {
				color: #8F8F94;
			}
			
			.mui-content a.active {
				color: #007aff;
			}
			
			.mui-title {
				font-family: simhei;
			}
			
			.btn_2 {
				position: absolute;
				bottom: 85px;
				left: 10px;
				right: 10px;
			}
			
			.btn_1 {
				position: absolute;
				bottom: 10px;
				left: 10px;
				right: 10px;
			}
			
			.btn_3 {
				position: absolute;
				bottom: 140px;
				left: 10px;
				right: 10px;
			}
			
			.mui-btn-block {
				width: 90%;
				margin: 0 auto;
			}
			
			body {
				overflow: hidden;
			}
			
			.showimg {
				margin: 10px 10px auto 10px;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">商品拍照</h1>
		</header>

		<div class="mui-content">
			<form class="mui-input-group" onsubmit="return false">
				<!--
                	作者：1279246617@qq.com
                	时间：2019-07-22
                	描述：form 只有一个input时 回车会变成提交form 所以加一个隐藏的input
                -->
				<input style="display: none;" id="kenghuo" />

				<div class="mui-input-row">
					<label>商品条码</label>
					<input type="text" class="mui-input-clear allowClear" placeholder="扫描商品条码" id="barcode" name="barcode">
				</div>

				<div class="mui-input-row">
					<!--
                    	作者：1279246617@qq.com
                    	时间：2019-07-22
                    	描述：为了操作连贯性 不能每次提交后清空,也不能每次都选择. 只有当货主+条码不存在时才要求切换货主
                    -->
					<label>货主代码</label>
					<select id="customerCode" name="customerCode" placeholder="选择货主" onchange="countPicture()" class="readonlyInput" style="width:60%;float: left;">
					</select>
				</div>

				<div class="mui-input-row" style="width:100%;font-size: 9pt;height: 25px;line-height: 10px;">
					<label style="width: 100%;height: 20px;padding-top: 5px;padding-bottom: 0px;text-align: left;">
						<span id="tips"></span>
					</label>
				</div>
				<div class="mui-input-row" style="min-height: 160px;overflow-y: auto;">
					<div class="showimg" id="showimg"></div>
				</div>
			</form>

			<div class="mui-content-padded " style="text-align: center;height: 50px;">
				<button type="button" class="mui-btn mui-btn-primary my-btn" onclick="submitUpload()"><i class="fa fa-check">&nbsp;</i>提交</button>
				<button type="button" class="mui-btn mui-btn-danger my-btn" onclick="cleanAll()"><i class="fa fa-times">&nbsp;</i>清空</button>
			</div>

			<button type="button" class="mui-btn mui-btn-primary mui-btn-block  btn_1" onclick="galleryImgs()">从相册中选择图片</button>
			<br>
			<button type="button" class="mui-btn mui-btn-success mui-btn-block btn_2" onclick="cameraImages()">拍照</button>
		</div>
		<script src="../../js/mui.min.js"></script>

		<script type="text/javascript" src="../../js/jquery/jquery.min.js"></script>
		<script type="text/javascript" src="../../js/jquery/jquery.cookie.js"></script>

		<script type="text/javascript" src="../../js/wms/common.js"></script>
		<script type="text/javascript" src="../../js/wms/datefmt.js"></script>
		<script type="text/javascript" src="../../js/wms/formTransformEntity.js"></script>

		<script type="text/javascript" src="../../js/wms/appRequest.js"></script>
		<script type="text/javascript" src="../../js/other/product_picture.js"></script>

		<script src="../../js/photo/binaryajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/photo/exif.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/photo/canvasResize.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript" charset="utf-8">
			//$.noConflict()//jq 释放 $
			//mui初始化
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});

			(function($, doc) {
				$.init();

				$.plusReady(function() {
					document.addEventListener("netchange", checkNetwork, false);

					function checkNetwork() {
						if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
							mui.toast("网络异常，请检查网络设置！");
						}
					}
				});
			}(mui, document));

			// 全局数组对象，添加文件,用于压缩上传使用  
			var imgArray = new Array();

			//上传单张图片  
			function galleryImg() {
				//每次拍摄或选择图片前清空数组对象  
				imgArray.splice(0, imgArray.length);
				document.getElementsByClassName("showimg")[0].innerHTML = null;
				// 从相册中选择图片  
				mui.toast("从相册中选择一张图片");
				plus.gallery.pick(function(path) {
					showImg(path);
				}, function(e) {
					mui.toast("取消选择图片");
				}, {
					filter: "image",
					multiple: false
				});
			}

			//从相册选择多张图片
			function galleryImgs() {
				//每次拍摄或选择图片前清空数组对象  
				imgArray.splice(0, imgArray.length);
				document.getElementsByClassName("showimg")[0].innerHTML = null;

				// 从相册中选择图片  
				mui.toast("一次最多选择6张图片");
				plus.gallery.pick(function(e) {
					if(e.files.length < 1) {
						mui.toast('请最少选择一张图片');
						return false;
					}
					if(e.files.length > 6) {
						mui.toast('不能超过6张图片');
						return false;
					}
					for(var i in e.files) {
						showImg(e.files[i]);
					}
				}, function(e) {
					mui.toast("取消选择图片");
				}, {
					filter: "image",
					multiple: true
				});
			}

			// 拍照添加文件  
			function cameraImages() {
				//每次拍摄或选择图片前清空数组对象  

				//imgArray.splice(0, imgArray.length);
				//document.getElementsByClassName("showimg")[0].innerHTML = null;

				var cmr = plus.camera.getCamera();
				cmr.captureImage(function(p) {
					plus.io.resolveLocalFileSystemURL(p, function(entry) {
						var localurl = entry.toLocalURL(); //把拍照的目录路径，变成本地url路径，例如file:///........之类的。  
						showImg(localurl);
					});
				}, function(e) {
					mui.toast("很抱歉，调用摄像头失败 ");
				});
			}

			//显示预览图片
			function showImg(url) {
				// 兼容以“file:”开头的情况
				if(0 != url.toString().indexOf("file://")) {
					url = "file://" + url;
				}
				var div = document.getElementsByClassName("showimg")[0];

				var img = new Image();
				img.src = url; // 传过来的图片路径在这里用。
				img.onclick = function() {
					plus.runtime.openFile(url);
				};
				img.onload = function() {

					var tmph = img.height;
					var tmpw = img.width;

					var isHengTu = tmpw > tmph;
					var max = Math.max(tmpw, tmph);
					var min = Math.min(tmpw, tmph);
					var bili = min / max;
					if(max > 1200) {
						max = 1200;
						min = Math.floor(bili * max);
					}
					tmph = isHengTu ? min : max;
					tmpw = isHengTu ? max : min;
					img.style.border = "1px solid rgb(200,199,204)";
					img.style.margin = "10px";
					img.style.width = "100px";
					img.style.height = "100px";
					img.onload = null;

					plus.io.resolveLocalFileSystemURL(url, function(entry) {
							entry.file(function(file) {
								console.log(file.size + '--' + file.name);
								canvasResize(file, {
									width: tmpw,
									height: tmph,
									crop: false,
									quality: 50, //压缩质量
									rotate: 0,
									callback: function(data, width, height) {

										imgArray.push(data);
										img.src = data;

										div.appendChild(img);

										plus.nativeUI.closeWaiting();
									}
								});
							});
						},
						function(e) {
							plus.nativeUI.closeWaiting();
							console.log(e.message);
						});
				};
			};
		</script>
	</body>

</html>