zhoufan
/
SQZC12345_Web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843
							<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>我要投诉</title>
		<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">
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/mui.picker.css" rel="stylesheet" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />
		<link href="css/feedback-page.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/webuploader.css" />
		<style>
			body {
				font-size: 14px;
			}
			
			.mui-bar-popover {
				width: 30%;
			}
			
			.mui-popover.mui-bar-popover .mui-table-view {
				width: 100%;
			}
			
			.mui-table-view .mui-table-view-cell>a:not(.mui-btn) {
				text-align: center;
			}
			
			.mui-table-view-cell {
				padding: 1px 15px!important;
			}
			
			.san {
				font-size: 14px;
				margin-right: 5px;
			}
			
			.nav_a {
				border-right: 1px solid #ccc;
			}
			
			.radio_box {
				display: inline-block;
			}
			
			.mui-radio input[type=radio]:before {
				font-size: 20px;
				vertical-align: middle;
			}
			
			.mui-radio.mui-left input[type=radio] {
				line-height: 24px!important;
			}
			
			.mui-radio.mui-left label {
				padding-right: 1px!important;
				padding-left: 51px!important;
			}
			
			.ztext {
				width: 100%;
				margin: 0;
				border: 0;
			}
			
			.action {
				padding: 5px 15px;
			}
			
			.type_down {
				float: right!important;
				display: inline-block!important;
				vertical-align: middle!important;
				line-height: 42px;
			}
			
			.type_con {
				width: 55%!important;
				float: left!important;
				vertical-align: middle!important;
				display: inline-block!important;
				padding: 10px 0!important;
			}
			
			.label {
				width: 30%!important;
				padding: 11px 0px!important;
			}
			
			.get_yzm {
				padding: 5px!important;
				width: auto!important;
			}
			
			.yzm_con {
				float: left!important;
				width: 40%!important;
			}
			
			.mui-bar-nav {
				background-color: #00a1cb;
			}
			
			.mui-input-row label {
				text-align: -webkit-right;
			}
			
			.mui-btn-block {
				padding: 10px;
				width: 100%;
			}
			
			a {
				color: #000;
			}
			
			.size-14 {
				font-size: 14px;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			{
				line-height: 1.1;
				font-size: 14px;
			}
			
			.iconfont_add {
				font-family: "iconfont";
				font-size: 20px;
				color: #13a7f1;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-webkit-text-stroke-width: 0.2px;
				-moz-osx-font-smoothing: grayscale;
				/* padding-left:20px*/
			}
			
			@font-face {
				font-family: 'iconfont';
				/* project id 280843 */
				src: url('//at.alicdn.com/t/font_280843_7m2gttvpislfecdi.eot');
				src: url('//at.alicdn.com/t/font_280843_7m2gttvpislfecdi.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_280843_7m2gttvpislfecdi.woff') format('woff'), url('//at.alicdn.com/t/font_280843_7m2gttvpislfecdi.ttf') format('truetype'), url('//at.alicdn.com/t/font_280843_7m2gttvpislfecdi.svg#iconfont') format('svg');
			}
			
			.iconfont {
				font-family: "iconfont";
				font-size: 20px;
				color: #13a7f1;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-webkit-text-stroke-width: 0.2px;
				-moz-osx-font-smoothing: grayscale;
				/* padding-left:20px*/
			}
			
			.image-list {
				width: 100%;
				background-size: cover;
				padding: 10px 10px;
				overflow: hidden;
			}
			
			#image-list {
				display: none;
			}
			/*自定义CSS*/
			
			.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			
			.mui-preview-loading.mui-active {
				display: block;
			}
			
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			
			p img {
				max-width: 100%;
				height: auto;
			}
			
			.mui-content>.mui-table-view:first-child {
				margin-top: 5px;
			}
			
			.mui-icon-clear {
				position: absolute;
				right: 0;
				line-height: 40px;
				color: #999;
				font-size: 20px;
			}
			
			.Hides {
				display: none!important;
			}
			
			.SHOW {
				display: block!important;
			}
			
			#Appointtime {
				width: -webkit-calc(65% - 20px)!important;
				width: -moz-calc(65%-20px)!important;
				width: calc(65% - 20px)!important;
				float: none;
			}
			
			#Repairtime {
				width: -webkit-calc(65% - 20px)!important;
				width: -moz-calc(65%-20px)!important;
				width: calc(65% - 20px)!important;
				float: none;
			}
			
			.content-title {
				margin-bottom: 0;
				padding: 0 30px;
			}
			
			.mui-input-row label {
				line-height: normal!important;
			}
			
			.mui-input-row select {
				font-size: 14px;
				height: 40px!important;
				padding: 0;
			}
			
			#showZhuTiPickers {
				display: none;
			}
			
			.mui-radio input[type=radio] {
				top: 7px;
			}
			
			#userResult {
				width: 30%!important;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<ul class="mui-table-view ">
				<li class="mui-table-view-cell" id="showUserPicker">
					<div class="mui-input-row">
						<label class="label">诉求类型：</label>
						<input type="text" id='userResult' class="ui-alert type_con size-14" data-index="" readonly="readonly" />
						<a href=""><span class="type_down mui-icon mui-icon-arrowdown mui-pull-right"></span></a>
					</div>
				</li>
				<li class="mui-table-view-cell" id="showZhuTiPicker">
					<div class="mui-input-row">
						<label class="label">主题词：</label>
						<input type="text" id='zhuTiResult' class="ui-alert type_con size-14" data-index="" readonly="readonly" />
						<a href=""><span class="type_down mui-icon mui-icon-arrowdown mui-pull-right"></span></a>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label class="label">保密要求：</label>
						<div class="mui-input-row mui-radio mui-left radio_box">
							<label>保密</label>
							<input type="radio" type="radio" name="secret" value="1" class="size-14" />
						</div>
						<div class="mui-input-row mui-radio mui-left radio_box">
							<label>公开</label>
							<input type="radio" type="radio" name="secret" checked="checked" value="0" class="size-14" />
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label class="label">紧急程度：</label>
						<div class="mui-input-row mui-radio mui-left radio_box">
							<label>普通</label>
							<input type="radio" type="radio" name="jinji" value="1" class="size-14" />
						</div>
						<div class="mui-input-row mui-radio mui-left radio_box">
							<label>紧急</label>
							<input type="radio" type="radio" name="jinji" checked="checked" value="2" class="size-14" />
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label class="label">诉求主题：</label>
						<input type="text" id="title" placeholder="请填写您的诉求主题" class="size-14">
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label class="label">内容：</label>
						<textarea class="ztext content size-14" name="" id="textarea" rows="3" cols="" placeholder="请详细描述您的问题和建议..."></textarea>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label class="label">联系人：</label>
						<input type="text" id="name" placeholder="请填写您的称呼" class="size-14">
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label class="label">联系电话：</label>
						<input type="text" id="phone" placeholder="请填写联系电话" class="size-14">
					</div>
				</li>

				<li class="mui-table-view-cell" id='showCityPicker3'>
					<div class="mui-input-row">
						<label class="label">事发地址：</label>
						<input type="text" id='cityResult3' data-index="" class="ui-alert type_con size-14" placeholder="请选择具体地址" readonly="readonly" />
						<a href=""><span class="type_down mui-icon mui-icon-arrowdown mui-pull-right"></span></a>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label class="label">街道：</label>
						<input type="text" id="detail_address" class="ui-alert size-14" placeholder="请填写详细地址" />
					</div>
				</li>
				<li class="">
					<div class="mui-input-row">
						<label class="label">故障图片：</label>
						<div id="filePicker">
							<i class="iconfont_add">&#xe61a;</i>
						</div>
						<div id='image-list' class="row image-list">
						</div>
					</div>
				</li>
			</ul>
			<!--<div class="feedback">
				<p>添加图片(选填,提供问题截图,单张10M以下)</p>
				<div id='image-list' class="row image-list"></div>
			</div>-->
			<p class="action">
				<i class="iconfont icon-gantanhao" style="margin-right: 5px;font-size: 20px;vertical-align: middle;"></i>
				<span style="color: #f81737;">以上内容都为必填内容，请如实填写</span>
			</p>
			<!--<button type="button" class="mui-btn mui-btn-primary mui-btn-block block_button">提交</button>-->
			<div style="padding: 10px;">
				<button type="button" data-loading-text="提交中" class="mui-btn mui-btn-primary mui-btn-block block_button submit" id="submit">提交</button>
			</div>
		</div>
		<script src="js/jquery.min.js"></script>
		<script src="js/mui.min.js?"></script>
		<script src="js/mui.picker.js"></script>
		<script src="js/mui.poppicker.js"></script>
		<!--<script src="js/city.data-3.js"></script>-->
		<script src="js/zepto.js"></script>
		<script src="js/mui.zoom.js"></script>
		<script src="js/mui.previewimage.js"></script>
		<script src="js/huayi.config.js"></script>
		<!--<script src="js/feedback-page.js"></script>-->
		<script src="js/webuploader.min.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: false,
			})
			mui.plusReady(function() {
				var wv = plus.webview.currentWebview();
				var usercode = localStorage.getItem("user"); //获取本地存储

				var files;
				var Str = '';
				var str_ary;
				var reg = /,$/gi;
				//提交按钮
				$('#submit').on('tap', function() {
					$(".image-box").each(function(i, n) {
						var a = $(n).attr("indexs");
						if(a) {
							Str += a + ',';
						}
					})
					str_ary = Str.substring(0, Str.length - 1);
					var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
					var str = $("#phone").val();
					if($('#name').val() == '') {
						mui.alert('请输入姓名！')
					} else if($('#phone').val() == '') {
						mui.alert('请输入联系电话！')
					} else if(!myreg.test(str)) {
						mui.alert('手机号格式不正确！')
					} else if($('#title').val() == '') {
						mui.alert('请输入诉求主题！')
					} else if($('.content').val() == '') {
						mui.alert('请输入诉求内容！')
					} else if($('#zhuTiResult').val() == '') {
						mui.alert('请选择主题词！')
					} else {
						$.ajax({
							type: "post",
							dataType: 'json',
							url: huayi.config.callcenter_url + '/APP/AddWorkOrder',
							async: true,
							data: {
								type: $('#userResult').attr('data-index'), //诉求类型
								keys: $('#zhuTiResult').attr('data-index'), //关键词
								isprotect: $('input[name="secret"]:checked').val(), //(0普通1保密)
								level: $('input[name="jinji"]:checked').val(), //=(1普通2紧急)
								title: $('#title').val(), //投诉主题
								content: $('.content').val(), //投诉内容
								cusname: $('#name').val(), //投诉人姓名
								cusphone: $('#phone').val(), //投诉人电话			  				  		
								sourcearea: $('#cityResult3').attr('data-index'), //事发地域id
								sourceaddress: $('#detail_address').val(), //详细地址
								//			  		issubmit:1, //=（0保存1保存并提交）
								files: str_ary,
								usercode: usercode,
							},
							success: function(data) {
								if(data.state == "success") {
									mui.toast('投诉成功！');
									$("#name").val('');
									$("#phone").val('');
									$("#title").val('');
									$(".content").val('');
									$("#cityResult3").val('');
									$("#zhuTiResult").val('');
									$("#userResult").val('');
									$('#detail_address').val('');
									$('input[name="secret"][value="0"]').prop("checked", "checked");
									window.location.reload();
								} else {

									mui.toast(data.message);
								}
							}
						});
					}
				});
				//上传图片
				var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
				var $ = jQuery;
				$list = $('#image-list'),
					// 优化retina, 在retina下这个值是2
					ratio = window.devicePixelRatio || 1,
					//				// 缩略图大小
					thumbnailWidth = 50 * ratio,
					thumbnailHeight = 50 * ratio,
					// Web Uploader实例
					//添加图片
					$(function() {
						uploader = WebUploader.create({
							// 自动上传。
							auto: true,
							// swf文件路径
							swf: '../js/Uploader.swf',

							// 文件接收服务端。
							//							http://12345.shangqiu.gov.cn:8819/Web/Upload64
							//server: 'http://192.168.4.18:4120/WxLogin/UpdateFile',
							server: huayi.config.callcenter_url + 'Web/Upload64',
							// 选择文件的按钮。可选。
							// 内部根据当前运行是创建，可能是input元素，也可能是flash.
							pick: '#filePicker',
							// 图片数量限制
							fileNumLimit: 4,
							formData: {
								uploadtype: "Works"
							},
							//可以重复上传
							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) {
							$('#image-list').addClass('SHOW');
							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);
							var IMGLIST = $(".thumbnail");
							$(".image-close").on('tap', function() {
								event.stopPropagation();
								$(this).parent().remove();
								file_num()
							});
						});
						// 文件上传成功，给item添加成功class, 用样式标记上传成功。
						uploader.on('uploadSuccess', function(file, response) {
							$.each(response.data, function(i, j) {
								var $img = $('#' + file.id).find('img');
								var img = j.fileurl;
								//						console.log(img);
								$('#' + file.id).attr({
									'data-filename': j.filename,
									'data-fileext': j.fileext,
									'data-filemd5': j.filemd5,
									'data-filesize': j.filesize,
									'data-fileurl': j.fileurl
								});
								uploader.makeThumb(file, function(error, src) {
									if(error) {
										$img.replaceWith('<span class="Phone">' + file.ext + '</span>');
										return;
									}
									$img.attr('src', j.fileurl);
									$img.attr('data-preview-src', '');
									$img.addClass('image-item');
									$img.attr('data-preview-group', "1");
								}, thumbnailWidth, thumbnailHeight);
							});
							$('#' + file.id).addClass('upload-state-done');
							file_num()
						});
						// 文件上传失败，现实上传出错。
						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();
						});
					});

				function file_num() {
					var arr = [];
					$('#image-list').find('.thumbnail').each(function(j, m) {
						var obj = {
							'filename': $(m).attr("data-filename"),
							'fileext': $(m).attr("data-fileext"),
							'filemd5': $(m).attr("data-filemd5"),
							'filesize': $(m).attr("data-filesize"),
							'fileurl': $(m).attr("data-fileurl")
						}
						arr.push(obj)
					})
					window['Faultpic'] = arr;
					console.log(Faultpic);
				}

				//工单类型
				var typeList = [];
				$.ajax({
					type: "get",
					url: huayi.config.callcenter_url + 'Dictionary/GetDicValueListById?',
					async: false,
					data: {
						id: 2
					},
					dataType: 'json',
					success: function(data) {
						var type_data = data.data;
						$(type_data).each(function(i, n) {
							var obj = {};
							obj.value = n.F_ValueId;
							obj.text = n.F_Value;
							typeList.push(obj)
						})
					}
				});
				//事发地域
				var areaList = [];
				$.ajax({
					type: "get",
					url: huayi.config.callcenter_url + 'web/GetWebAreaList',
					async: false,
					data: {},
					dataType: 'json',
					success: function(data) {
						var area_data = data.data;
						//        	area_data = JSON.stringify(area_data);
						console.log(area_data);
						$(area_data).each(function(i, n) {
							var obj = {};
							obj.value = n.F_AreaId;
							obj.text = n.F_AreaName;
							areaList.push(obj)
							console.log(obj);
						})

					}
				});
				//主题词
				var keyList = [];
				$.ajax({
					type: "get",
					url: huayi.config.callcenter_url + 'Dictionary/GetDicValueListById?',
					async: false,
					data: {
						id: 3
					},
					dataType: 'json',
					success: function(data) {
						var key_data = data.data;
						$(key_data).each(function(i, n) {
							var obj = {};
							obj.value = n.F_ValueId;
							obj.text = n.F_Value;
							keyList.push(obj)
						})
					}
				});

				(function($, doc) {
					$.init();
					$.ready(function() {
						//诉求类型
						var userPicker = new $.PopPicker();
						userPicker.setData(typeList);
						var showUserPickerButton = doc.getElementById('showUserPicker');
						var userResult = doc.getElementById('userResult');
						showUserPickerButton.addEventListener('tap', function(event) {
							userPicker.show(function(items) {
								console.log(items)
								userResult.value = items[0].text;
								userResult.setAttribute("data-index", items[0].value);
								//返回 false 可以阻止选择框的关闭
								//return false;
							});
						}, false);
						//主题词
						var zhuTiPicker = new $.PopPicker();
						zhuTiPicker.setData(keyList);
						var showZhuTiPickerButton = doc.getElementById('showZhuTiPicker');
						var zhuTiResult = doc.getElementById('zhuTiResult');
						showZhuTiPickerButton.addEventListener('tap', function(event) {
							zhuTiPicker.show(function(items) {
								console.log(items)
								zhuTiResult.value = items[0].text;
								zhuTiResult.setAttribute("data-index", items[0].value);
								//返回 false 可以阻止选择框的关闭
								//return false;
							});
						}, false);
						//事件地址
						var cityPicker3 = new $.PopPicker();
						cityPicker3.setData(areaList);
						var showCityPickerButton = doc.getElementById('showCityPicker3');
						var cityResult3 = doc.getElementById('cityResult3');
						showCityPickerButton.addEventListener('tap', function(event) {
							cityPicker3.show(function(items) {
								cityResult3.value = items[0].text;
								cityResult3.setAttribute("data-index", items[0].value);
								//返回 false 可以阻止选择框的关闭
								//return false;
							});
						}, false);

					})
				})(mui, document);
			});
		</script>
	</body>

</html>