zhengbingbing
/
XiXianDC_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
							<!doctype html>
<html lang="en" class="feedback">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>信息上传</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/feedback-page.css" />
		<link rel="stylesheet" href="../css/webuploader.css" />
		<link rel="stylesheet" type="text/css" href="../css/Common.css" />

		<style>
			.mui-input-row label {
				padding: 11px 3px;
				text-align: right;
				width: 28%;
			}
			
			.mui-input-row label~input {
				width: 71%;
			}
			
			.Phone {
				display: block;
				line-height: 65px;
				text-align: center;
			}
		</style>
	</head>

	<body>
			
		<div class="mui-content">
			<form class="mui-input-group" method="post" enctype="multipart/form-data" id="uploadForm">
				<div class="mui-input-row">
					<label>客户姓名：</label>
					<input type="text" class="mui-input-clear" id="Username" placeholder="请输入客户姓名">
				</div>
				<div class="mui-input-row">
					<label>电话：</label>
					<input type="text" class="mui-input-clear" id="Phone" placeholder="请输入电话">
				</div>
				
				
				<div class="mui-input-row">
					<label>地址：</label>
					<input type="text" class="mui-input-clear" id="t_address" placeholder="请输入地址">
				</div>

			</form>
			<div class="row mui-input-row">
				<textarea id='question' class="mui-input-clear question" placeholder="请详细描述你的问题和意见..."></textarea>
			</div>
			<div id='image-list' class="row image-list">
				<div id="filePicker">
				</div>
			</div>
			<div class="row image-list">
				
			</div>
			<div class="mui-button-row" id="Btns-box">
				<button type="button" id="submit" class="mui-btn mui-btn-primary" onclick="return false;">提交</button>&nbsp;&nbsp;
			</div>
		</div>
		<script src="../js/zepto.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="../Script/Common/huayi.config.js"></script>
		<script src="../Script/Common/huayi.http.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/webuploader.min.js"></script>
		<script type="text/javascript">
			mui.init();
			var openid = helper.cookies.get("openid");
			console.log(openid);
			var files;
			var Str = '';
			var str_ary;
			var reg = /,$/gi;
			$("#submit").on('tap', function() {
				$(".file-item").each(function(i, n) {
					var a = $(n).attr("upload-index");
					if(a) {
						Str += a + ',';

					}

					//					str_ary = Str.split("ed")[1];
					//					files = Str.split("ed")[1].replace(reg, "");
					str_ary = Str.substring(0, Str.length - 1);
				})

				console.log(str_ary);
				if(!$("#question").val()) {
					mui.toast("工单内容不能为空");
				} else if(!$("#Username").val()) {
					mui.toast("联系人不能为空");
				} else if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test($("#Phone").val()))) {
					mui.toast("输入正确的手机号");
				} else {
					$.ajax({
						type: "post",
						url: huayi.config.callcenter_url + 'WxLogin/AddWorkOrder',
						async: true,
						dataType: 'json',
						data: {
							cusname: $("#Username").val(), //联系人
							cusphone: $("#Phone").val(), //联系电话
							content: $("#question").val(), //信息内容
							files: str_ary,
							openid: 'oKOqcv31fh76rtNmJDjKc39oIsfA' //微信openid
							//					openid:openid
						},
						success: function(data) {
							if(data.state == "success") {
								Clean();
								mui.toast("添加成功");
								location.href = "WorkList.html";
							} else {
								files = '';
								mui.alert(data.message);
							}
						}
					});
				}

			})

			function Clean() {
				$("#Username").val('');
				$("#Phone").val('');
				$("#question").val('');
			}
			//			// 图片上传demo
			var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
			var $ = jQuery;
			var $ = jQuery,
				$list = $('#image-list'),
				// 优化retina, 在retina下这个值是2
				ratio = window.devicePixelRatio || 1,
				//				// 缩略图大小
				thumbnailWidth = 50 * ratio,
				thumbnailHeight = 50 * ratio,

				// Web Uploader实例
				uploader;

			// 初始化Web Uploader
			$(function() {
				uploader = WebUploader.create({
					// 自动上传。
					auto: true,
					// swf文件路径
					swf: '../js/Uploader.swf',

					// 文件接收服务端。
					//server: 'http://192.168.4.18:4120/WxLogin/UpdateFile',
					server: huayi.config.callcenter_url + '/WxLogin/UpLoadProcess',
					// 选择文件的按钮。可选。
					// 内部根据当前运行是创建，可能是input元素，也可能是flash.
					pick: '#filePicker',
					// 图片数量限制
					//				fileNumLimit: 4,
					//可以重复上传
					duplicate: true,
					// 只允许选择文件，可选。
					//					accept: {
					//						title: 'Images',
					//						extensions: 'gif,jpg,jpeg,bmp,png',
					//						mimeTypes: 'image/*'
					//					},
					resize: false
				});
				//上传图片提示
				uploader.on('error', function(handler) {
					if(handler == "Q_EXCEED_NUM_LIMIT") {
						mui.toast("超出最大文件数");
					}
				});
				// 当有文件添加进来的时候
				uploader.on('fileQueued', function(file) {
					console.log(file);
					var $li = $(
							'<div id="' + file.id + '" class="file-item thumbnail">' +
							'<div class="image-close">X</div>' +
							'<img>' +
							'<div class="info">' + file.name + '</div>' +
							'</div>'
						),
						$img = $li.find('img');

					$list.prepend($li);
					$(".image-close").on('tap', function() {
						event.stopPropagation();
						$(this).parent().remove();
					});
					// 创建缩略图
					uploader.makeThumb(file, function(error, src) {
						if(error) {
							$img.replaceWith('<span class="Phone">' + file.ext + '</span>');
							return;
						}

						$img.attr('src', src);
					}, thumbnailWidth, thumbnailHeight);
				});

				// 文件上传过程中创建进度条实时显示。
				uploader.on('uploadProgress', function(file, percentage) {
					var $li = $('#' + file.id),
						$percent = $li.find('.progress span');

					// 避免重复创建
					if(!$percent.length) {
						$percent = $('<p class="progress"><span></span></p>')
							.appendTo($li)
							.find('span');
					}

					$percent.css('width', percentage * 100 + '%');
				});

				// 文件上传成功，给item添加成功class, 用样式标记上传成功。
				uploader.on('uploadSuccess', function(file, response) {
					console.log(response);
					$('#' + file.id).addClass('upload-state-done');
					$('#' + file.id).attr('upload-index', response.data);
				});

				// 文件上传失败，现实上传出错。
				uploader.on('uploadError', function(file) {
					var $li = $('#' + file.id),
						$error = $li.find('div.error');
					// 避免重复创建
					if(!$error.length) {
						$error = $('<div class="error"></div>').appendTo($li);
					}

					$error.text('上传失败');
				});
				// 完成上传完了，成功或者失败，先删除进度条。
				uploader.on('uploadComplete', function(file) {
					$('#' + file.id).find('.progress').remove();
				});

			});
		</script>
	</body>

</html>