duhongyu
/
AnYang_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
							<!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%;
			}

			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 {
				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 15px !important;
			}
			.feedback{
				height: 125px;
				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: 18px;
				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;
			}
		</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">查看结果</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" type="radio" name=""  value="咨询" />
						    <label>咨询</label>
						</div>
						<div class="mui-radio mui-left radio_box">
						    <input type="radio" type="radio" name="" value="求助" />
						    <label>求助</label>
						</div>
						<div class="mui-radio mui-left radio_box">
						    <input type="radio" type="radio" name="" value="投诉" />
						    <label>投诉</label>
						</div>
						<div class="mui-radio mui-left radio_box">
						    <input type="radio" type="radio" name="" value="建议" />
						    <label>建议</label>
						</div>
						<div class="mui-radio mui-left radio_box">
						    <input type="radio" type="radio" name="" value="表扬" />
						    <label>表扬</label>
						</div>
						<div class="mui-radio mui-left radio_box">
						    <input type="radio" type="radio" name=""  value="其他" />
						    <label>其他</label>
						</div>
					</div>
					<div class="mui-input-row phone">
						<label>姓名</label>
						<input type="text" placeholder="请输入姓名" id="phone">
					</div>
					<div class="mui-input-row phone">
						<label><i>*</i> 手机号</label>
						<input type="text" placeholder="请输入手机号" id="phone">
					</div>
					<div class="mui-input-row">
						<label><i>*</i> 验证码</label>
						<input type="text" class="mui-input-clear" placeholder="请输入验证码" id="code">
						<span class="line">获取验证码</span>
					</div>
					<div class="mui-input-row phone">
						<label><i>*</i> 反映标题</label>
						<input type="text" placeholder="请输入标题" id="phone">
					</div>
					<div class="mui-input-row content">
						<label><i>*</i> 反映内容</label>
						<textarea class="ztext" name="" id="textarea" placeholder="请输入您的反应内容..."></textarea>
					</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>
					<div class="mui-input-row content">
						<label>详细地址</label>
						<textarea class="ztext" name="" id="textarea" placeholder="请输入详细地址..."></textarea>
					</div>
					<div class="mui-input-row feedback">
						<label>添加附件</label>
						<div id='image-list' class="row image-list"></div>
					</div>
					<div style="margin: 10px 0;border-bottom: 1px solid #c9c9c9;padding-bottom: 20px;">
						<div style="font-weight: 600; padding: 13px 15px 8px;">您是否同意把您的姓名告知承办单位，以便承办单位调查审核？</div>
						<div class="mui-radio mui-left radio_box">
						    <input type="radio" type="radio" name="" value="是" />
						    <label>是</label>
						</div>
						<div class="mui-radio mui-left radio_box">
						    <input type="radio" type="radio" name=""  value="否" />
						    <label>否</label>
						</div>
					</div>
					<div  class="btns">
						<button type="button" class="btn btnLeft">重置</button>
						<button type="button" class="btn btnRight">提交</button>
					</div>
				</div>
			</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="../layui/layui.js"></script>
		<script src="../js/zepto.js"></script>
		<script src="../js/feedback-page.js"></script>
		<script src="../Script/Common/huayi.config.js"></script>
		<script src="../Script/Common/huayi.http.js"></script>
		<script>
			var openid = "obwtK6JT-bTCeSbtqu4lkw4lIz0o";
			var areaList = []
			//      var openid = helper.cookies.get("openid");
			if (!openid) {
				window.location.replace("../html/error.html");
			}
			(function ($, doc) {
				$.init();
				$.ready(function () {
					var cityPicker3 = new $.PopPicker({
					    layer: 1
					});
					cityPicker3.setData(areaList);
					var showCityPickerButton = doc.getElementById('showCityPicker3');
					var cityResult3 = doc.getElementById('cityResult3');
					showCityPickerButton.addEventListener('tap', function (event) {
					    //                  if (areaList.length > 0) {
					    cityPicker3.show(function (items) {
					        cityResult3.value = (items[0].text ? items[0].text : "");
					        cityResult3.setAttribute("data-index", items[0].value);
					        //返回 false 可以阻止选择框的关闭
					        //return false;
					        getArea(2, items[0].value);
					        if (townList.length == 0) {
					            // doc.getElementById('town').value = "暂无数据";
					        } else {
					            // doc.getElementById('town').value = "";
					            // doc.getElementById('town').setAttribute("placeholder", "请选择街道");
					            doc.getElementById('village').value = "";
					            doc.getElementById('village').setAttribute("placeholder",
					                "请选择村庄");
					        }
					    });
					    //                  }
					}, false);
					//街道
					townPicker = new $.PopPicker({
					    layer: 1
					});
				})
			})(mui, document);
		</script>
	</body>
</html>