duhongyu
/
AnYang_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672
							<!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">
		<link rel="stylesheet" href="../layui/css/layui.mobile.css" />
		<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/iconfont.css" />
		<link rel="stylesheet" href="../css/inits.css" />
		<title>添加工单</title>
		<style>
			.mui-input-row {
				border-bottom: 1px solid #c9c9c9;
			}

			.mui-card {
				margin: 0;
			}

			.mui-card-content {
				padding: 0 20px;
			}

			.mui-input-row {
				height: 75px;
			}

			#phone,
			#code {
				height: 50%;
			}
			.mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea{
				width: 90% !important;
			}
			label,
			input,
			textarea {
				float: none !important;
			}

			.mui-input-row input,
			textarea {
				/*padding: 0 15px !important;*/
			}

			.mui-input-row label,
			.reaction {
				display: block;
				font-weight: 600;
				padding: 13px 15px 8px;
			}

			.mui-radio {
				display: inline-block;
			}

			.line,
			.codeTX {
				display: inline-block;
				border-left: 1px solid #1ba3c9;
				padding-left: 10px;
				height: 25px;
				position: absolute;
				right: 10px;
				color: #1ba3c9;
				font-size: 16px;
				font-weight: 600;
			}

			.btns {
				width: 90%;
				margin: 20px auto;
				text-align: center;
			}

			.btn {
				/* width: 90%; */

				background-color: #1ba3c9;
				outline: none;
				border: none;
				padding: 5px 45px;
				/* display: block; */
				border-radius: 10px;
				font-size: 16px;
				color: #fff;
			}

			.titleW {
				padding: 5px 0px;
				margin-bottom: 5px;
			}

			.mui-icon-info-filled {
				color: rgb(253, 193, 30);
			}

			.warning {
				font-size: 15px;
				margin-bottom: 5px;
				font-weight: 600;
			}

			.mui-radio input[type=radio]:before {
				font-size: 20px;
				vertical-align: middle;
			}

			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 0 !important;
			}

			.mui-checkbox.mui-left label,
			.mui-radio.mui-left label {
				padding: 0 0 0 45px;
				vertical-align: middle;
			}

			.content {
				height: 125px;
				border-bottom: none;
			}

			.mui-input-row label~textarea {
				float: none;
				width: 100% !important;
				height: 70%;
				background-color: rgb(246, 246, 246);
			}

			.ztext {
				padding: 10px 64px 10px 15px !important;
			}

			.feedback {
				height: auto;
				border: none;
			}

			.space {
				background-color: rgb(246, 246, 246);
			}

			.btnLeft {
				background-color: rgb(254, 150, 3);
				margin-right: 40px;
			}

			.btnRight {
				background-color: #1ba3c9;
			}

			.result {
				position: absolute;
				right: -4px;
				top: 30px;
				display: inline-block;
				width: 85px;
				padding: 5px 0;
				color: #fff;
				text-align: center;
				border-radius: 20px 0 0 20px;
				background-color: rgb(17, 211, 169);
			}

			i {
				color: #FF0000;
			}

			.feedback .image-item {
				border: none;
				margin-left: 5px;
				float: left;
			}

			.feedback label {
				width: 125%;
			}

			.feedback span {
				font-weight: 100;
			}

			.filesHandle {
				background-color: antiquewhite;
				display: inline-block;
				padding: 2px 10px;
				margin-right: 5px;
				margin-bottom: 5px;
			}

			.del_file {
				margin-left: 5px;
				font-weight: 600;
			}
			.limit{
				position: absolute;
			    right: 4px;
			    color: #222;
			    z-index: 10;
			    top: 52px;
			    color: rgb(176,176,176);
			}
		</style>
	</head>
	<body>
		<!-- <header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">添加工单</h1>
		</header> -->
		<div class="mui-content">
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="titleW">
						<span class="mui-icon mui-icon-info-filled"></span>
						<span class="warning">请填写真实信息，带 “ <i>*</i> ” 为必填项</span>
						<span class="result" onclick="seeResult()">查看结果</span>
					</div>
					<div style="margin: 10px 0;">
						<label class="label reaction" style="display: block;"><i>*</i>反映类型</label>
						<div class="mui-radio mui-left radio_box">
							<input type="radio" name="phoneType" value="9" checked="checked"/>
							<label>咨询</label>
						</div>
						<div class="mui-radio mui-left radio_box">
							<input type="radio" name="phoneType" value="10" />
							<label>求助</label>
						</div>
						<div class="mui-radio mui-left radio_box">
							<input type="radio" name="phoneType" value="11" />
							<label>投诉</label>
						</div>
						<div class="mui-radio mui-left radio_box">
							<input type="radio" name="phoneType" value="12" />
							<label>建议</label>
						</div>
						<div class="mui-radio mui-left radio_box">
							<input type="radio" name="phoneType" value="13" />
							<label>表扬</label>
						</div>
						<div class="mui-radio mui-left radio_box">
							<input type="radio" name="phoneType" value="89" />
							<label>举报</label>
						</div>
						<div class="mui-radio mui-left radio_box">
							<input type="radio"  name="phoneType" value="90" />
							<label>其他</label>
						</div>
						<div class="mui-radio mui-left radio_box">
							<input type="radio"  name="phoneType" value="4241" />
							<label>大气污染防治有奖举报</label>
						</div>
					</div>
					<div class="mui-input-row phone">
						<label>姓名</label>
						<input type="text" placeholder="请输入姓名" id="cusname">
					</div>
					<div class="mui-input-row phone">
						<label><i>*</i> 手机号</label>
						<input type="text" placeholder="请输入手机号" id="cusphone">
						<span class="line" onclick="getCode()">获取验证码</span>
						<span class="codeTX">60s</span>
					</div>
					<div class="mui-input-row">
						<label><i>*</i> 验证码</label>
						<input type="text" class="mui-input-clear" placeholder="请输入验证码" id="code">
						
					</div>
					<div class="mui-input-row phone">
						<label><i>*</i> 反映标题</label>
						<input type="text" placeholder="请简要概述您的问题" id="title" maxlength="30" oninput="getTitleNum()"> 
						<div class="limit">
							<span id="titlenum">0</span><span>/30</span>
						</div>
					</div>
					<div class="mui-input-row content">
						<label><i>*</i> 反映内容</label>
						<textarea class="ztext" name="" id="cont" placeholder="请您一事一诉，请勿重复提交；
请说明您的主要诉求。" maxlength="500"  oninput="getConNum()"></textarea>
						<div class="limit" style="top: 100px;">
							<span id="contnum">0</span><span>/500</span>
						</div>
					</div>
					<li class="mui-input-row" id="showCityPicker3">
						<label><i>*</i> 事发区域</label>
						<input type="text" id='cityResult3' data-index="" class="ui-alert type_con" placeholder="请选择区域"
							readonly="readonly" />
						<a href="javascript:void(0)"><span
								class="type_down mui-icon mui-icon-arrowdown mui-pull-right"></span></a>
					</li>
					<li class="mui-input-row" id="showCityPicker2">
						<label>乡镇</label>
						<input type="text" id='cityResult2' data-index="" class="ui-alert type_con" placeholder="请选择乡镇"
							readonly="readonly" />
						<a href="javascript:void(0)"><span
								class="type_down mui-icon mui-icon-arrowdown mui-pull-right"></span></a>
					</li>
					<li class="mui-input-row" id="showCityPicker1">
						<label>村</label>
						<input type="text" id='cityResult1' data-index="" class="ui-alert type_con" placeholder="请选择村"
							readonly="readonly" />
						<a href="javascript:void(0)"><span
								class="type_down mui-icon mui-icon-arrowdown mui-pull-right"></span></a>
					</li>
					<div class="mui-input-row content">
						<label>详细地址</label>
						<textarea class="ztext" name="" id="cusaddress" placeholder="请输入详细地址..."></textarea>
					</div>
					<div class="mui-input-row feedback">

						<label>添加附件 <span
								style="color: rgb(176,176,176);">（文件格式为jpg，png，mp4，avi，wmv，mp3，pdf，doc，docx，xls，xlsx）</span></label>
						<!-- <label>添加附件</label> -->
						<!-- <div id='image-list' class="row image-list"></div> -->
						<input class="input" type="file" name="upFile" id="upFileHandle" multiple="multiple"
							style="display: none;">
						<div class="showFile">
							<div id='scwjHandle' class="row image-item"></div>
							<div class="fileBoxHandle" style="margin-left: 5px;float: left;width: 78%;">

							</div>
						</div>
						<input type="hidden" id="fileHandle" />
					</div>
					<div style="margin: 10px 0;border-bottom: 1px solid #c9c9c9;padding-bottom: 20px;">
						<div style="font-weight: 600; padding: 13px 15px 8px;"><i>*</i>是否匿名？</div>
						<div class="mui-radio mui-left radio_box">
							<input type="radio"  name="select" value="1" checked="checked"/>
							<label>个人信息保密</label>
						</div>
						<div class="mui-radio mui-left radio_box">
							<input type="radio"  name="select" value="0" />
							<label>个人信息公开</label>
						</div>
						
					</div>
					<div class="btns">
						<button type="button" class="btn btnLeft" onclick="Reset()">重置</button>
						<button type="button" class="btn btnRight" onclick="Submit()">提交</button>
					</div>
				</div>
			</div>
		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.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="../layui/layui.js"></script>
		<script>
			$('.codeTX').css('display', 'none')
			var areaList = [],
				townList = [];
			var area = 0,town = 0,village = 0;
			getArea() //获取事发区域

			//附件
			$("#scwjHandle").click(function() {
				$("#upFileHandle").trigger("click");
			})
			$("#upFileHandle").change(function() {
				uploadHandle();
			})
			function getTitleNum() {
				if($('#title').val().length<= 30){
					$('#titlenum').text($('#title').val().length)
				}
			}
			function getConNum() {
				if($('#cont').val().length<= 500){
					$('#contnum').text($('#cont').val().length)
				}
			}
			function getCode() {
				if (!$('#cusphone').val()) {
					mui.alert('请输入联系电话！');
					return;
				} else {
					if(!(/^1[0-9]\d{9}$/.test($('#cusphone').val()))){
						mui.alert("请输入正确的手机号");  
						return false; 
					}
				}
				$.ajax({
				 type: "get",
					url: huayi.config.callcenter_url + 'WxLogin/SendCode',
					async: true,
					dataType: 'json',
					data: {
						mobile: $('#cusphone').val()
					},
					success: function(res) {
						if (res.state == 'success') {
							let num = 60
							$('.line').css('display', 'none')
							$('.codeTX').css('display', 'inline-block')
							var fq = setInterval(function() {
								num -= 1
								$('.codeTX').text(num+'s')
								console.log(num)
								if (num == 0) {
									clearInterval(fq)
									$('.codeTX').css('display', 'none')
									$('.line').css('display', 'inline-block')
								}
						
							}, 1000)
						}
					}
				})
			}

			function getArea() {
				$.ajax({
					type: "post",
					url: huayi.config.callcenter_url + 'Area/GetAreaListById',
					dataType: 'json',
					async: false,
					data: {},
					success: function(res) {
						res.data.forEach(function(v, n) {
							if(v.F_AreaName != '市区'){
								var obj = {};
								obj.value = v.F_AreaId;
								obj.text = v.F_AreaName;
								areaList.push(obj)
							}
							
						})

					}
				});
			}

			function getAreaChildren(id) {
				$.ajax({
					type: "post",
					url: huayi.config.callcenter_url + 'Area/GetAreaChildren',
					dataType: 'json',
					async: false,
					data: {
						parentid: id
					},
					success: function(res) {
						townList = []
						res.data.forEach(function(v, n) {
							var objC = {};
							objC.value = v.F_AreaId;
							objC.text = v.F_AreaName;
							townList.push(objC)
						})

					}
				});
			}

			function Reset() {
				window.location.reload();
			}

			function Submit() {
				if (!$('input[name="phoneType"]:checked').val()) {
					mui.alert('请输入反映类型！');
					return;
				}

				if (!$('#cusphone').val()) {
					mui.alert('请输入联系电话！');
					return;
				} else {
					if(!(/^[1]([2-9])[0-9]{9}$/.test($('#cusphone').val()))){
						mui.alert("请输入正确的手机号");  
						return false; 
					}
				}

				if (!$('#code').val()) {
					mui.alert('请输入手机验证码！');
					return;
				}

				if (!$('#title').val()) {
					mui.alert('请输入反映标题！');
					return;
				}

				if (!$('#cont').val()) {
					mui.alert('请输入反映内容！');
					return;
				}

				if ($('#cityResult3').val() == '') {
					mui.alert('请选择事发区域！');
					return;
				}
				
				if (!$('input[name="select"]:checked').val()) {
					mui.alert('请选择姓名公开！');
					return;
				}
				
				$.ajax({
					type: "post",
					url: huayi.config.callcenter_url + 'APP/AddWorkOrder',
					async: true,
					dataType: 'json',
					contentType: 'application/x-www-form-urlencoded',
					data: {
						source: '5',
						type: $('input[name="phoneType"]:checked').val(), // 反应类别
						cusname: $('#cusname').val(), //姓名
						sourceaddress: $('#cusaddress').val(), //详情
						cusphone: $('#cusphone').val(), //电话
						code: $('#code').val(), //验证码
						title: $('#title').val(), //标题
						content: $('#cont').val(), //n内容
						sourcearea: area, //事发区域
						township: town, //乡镇
						village: village, //村
						sourceaddress: $('#cusaddress').val(), 
						files: $("#fileHandle").val(), //附件
						isprotect: $('input[name="select"]:checked').val() //保密

					},
					success: function(data) {
						if (data.state == "success") {
							mui.alert('提交成功！')
							window.location.reload();
						}
					}
				});
			}
			//查看结果
			function seeResult(){
				window.location.replace("../html/login.html");
			}
			//上传文件
			function uploadHandle() {
				var Files = document.getElementById("upFileHandle").files;
				console.log(Files);
				if (Files.length > 0) {
					var formData = new FormData();
					for (var i = 0; i < Files.length; i++) {
						formData.append('file' + i, Files[i]);
					}
					var typeName = Files[0].name.split('.')[Files[0].name.split('.').length - 1].toLowerCase();
					if (typeName == "png" || typeName == 'jpg' || typeName == 'mp4' || typeName == 'avi' || typeName ==
						'wmv' || typeName == 'mp3' || typeName == 'pdf' || typeName == 'doc' || typeName == 'docx' ||
						typeName == 'xls' || typeName == 'xlsx') {
						$.ajax({
							url: huayi.config.callcenter_url + "Web/UploadFile",
							type: "POST",
							data: formData,
							/**
							 *必须false才会自动加上正确的Content-Type
							 */
							contentType: false,
							/**
							 * 必须false才会避开jQuery对 formdata 的默认处理
							 * XMLHttpRequest会对 formdata 进行正确的处理
							 */
							processData: false,
							success: function(result) {
								document.getElementById("upFileHandle").outerHTML = document.getElementById(
									"upFileHandle").outerHTML;
								$("#upFileHandle").change(function() {
									uploadHandle();
								});
								var r = $.parseJSON(result);
								if (r.state.toLowerCase() == "success") {
									var a = r.data;
									$(a).each(function(i, n) {
										// var strs = '<div class="imgC"><img src='+huayi.config.callcenter_url+n.F_FileUrl+' fiel-num="' + n.F_FileId +'" /><span class="del_file">X</span></div>'
										var strs = '<span class="filesHandle" fiel-num="' + n.F_FileId +
											'">' + n.F_FileName.substring(19) +
											'<span class="del_file">X</i></span>'
										$(strs).appendTo($('.fileBoxHandle')).find('.del_file').click(
											function(event) {
												event.stopPropagation();
												$(this).parent().remove();
												file_numHandle()
											})
									})
									file_numHandle();
								}
							}
						});
					} else {
						layer.msg("格式不正确");
					}

				} else {
					layer.confirm('请上传文件！', {
						btn: ['确定']
					});
				}
			}

			function file_numHandle() {
				var str = '';
				var Str;
				$('.fileBoxHandle .filesHandle').each(function(j, m) {
					var aa = $(m).attr("fiel-num")
					console.log(aa);
					str += aa + ",";
					Str = (str.substring(str.length - 1) == ',') ? str.substring(0, str.length - 1) : str;
				})
				console.log(Str)
				$("#fileHandle").val(Str);
			}
			(function($, doc) {
				$.init();
				$.ready(function() {
					var cityPicker3 = new $.PopPicker({
						layer: 1
					});
					var townPicker = new $.PopPicker({
						layer: 1
					});
					var valPicker = new $.PopPicker({
						layer: 1
					});
					cityPicker3.setData(areaList);
					var showCityPickerButton = doc.getElementById('showCityPicker3');
					var cityResult3 = doc.getElementById('cityResult3');
					var townPickerPickerButton = doc.getElementById('showCityPicker2');
					var townResult = doc.getElementById('cityResult2');
					var valPickerPickerButton = doc.getElementById('showCityPicker1');
					var valResult = doc.getElementById('cityResult1');
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker3.show(function(items) {
							cityResult3.value = (items[0].text ? items[0].text : "");
							area = items[0].value
							cityResult3.setAttribute("data-index", items[0].value);
							getAreaChildren(items[0].value)
							townPicker.setData(townList);
							townResult.value=''
							valResult.value=''
							townPickerPickerButton.addEventListener('tap', function(event) {
								townPicker.show(function(items) {
									townResult.value = (items[0].text ? items[0].text : "");
									town = items[0].value
									townResult.setAttribute("data-index", items[0].value);
									getAreaChildren(items[0].value)
									valPicker.setData(townList);
									valResult.value=''
									valPickerPickerButton.addEventListener('tap', function(event) {
										valPicker.show(function(items) {
											valResult.value = (items[0].text ? items[0].text : "");
											village = items[0].value
											valResult.setAttribute("data-index", items[0].value);
										});
									}, false);
								});
							}, false);
						});
					}, false);
					//街道

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