master

分支 (1)

管理

管理

master

qds_client
/
add-address-new.html

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>新增收货地址</title>
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="./css/mui.picker.min.css" rel="stylesheet" />
		<link href="./css/mui.poppicker.css" rel="stylesheet" />
		<link rel="stylesheet" href="./css/public.css?v=v=20181211" />
		<link rel="stylesheet" href="./css/edit-address.css?v=v=20181211" />
		<link rel="stylesheet" href="./css/cxvalidation.css">
		<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=drawing,geometry,autocomplete,convertor"></script>
		<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
		<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
		<script src='./js/jquery-3.2.1.min.js'></script>
		<script src="./js/mui.min.js"></script>
		<script src="./js/art-template.js"></script>
		<script src="./js/cxvalidation.js"></script>
		<script src="./js/config.js?v=v=20181211"></script>
		<script src="./js/mui.picker.js"></script>
		<script src="./js/mui.poppicker.js"></script>
		<script src="./js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		*{
		    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
			color: #2d2d2d;
		}
		.add{
			display: flex;
			display: -webkit-flex;
			align-items: center;
			-webkit-align-items: center;
		}
		.add_text{
			width: 90%;
			/*height: 18rem;*/
			position: fixed;
			bottom: 5px;
			left: 5%;
			right: 5%;
			background: #fff;
			border-radius: 3px;
			box-shadow: 1px 1px 10px #ccc;
		}
		.lable_before:before{
			content: '';
			display: block;
			width: .4rem;
			height: .4rem;
			border-radius: 50%;
			background: #18b6eb;
			margin-right: .3rem;
			margin-bottom: 0.7rem;
		}

		.lable_before_red:before{
			content: '';
			display: block;
			width: .4rem;
			height: .4rem;
			border-radius: 50%;
			background: #ff8550;
			margin-right: .3rem;
			margin-bottom: 1.3rem;
		}
		.lable_none:before{
			content: '';
			display: block;
			width: .4rem;
			height: .4rem;
			margin-right: .3rem;
		}
		.add-span{
			display: flex;
			display: -webkit-flex;
			align-items: center;
			-webkit-align-items: center;
			justify-content: space-between;
			-webkit-justify-content: space-between;
			width: 89%;
			border-bottom: 1px solid #e6e6e6;
			padding: 0 0 0.7rem 0;
		}
		.add-span textarea,input{
			border: none;
			width: 100%;
			outline: 0;
			resize: none;
			overflow: auto;
		}

		.lable{
			width: 11%;
			padding: 0 0 0.8rem 0;
		}
		.add-btn{
			width: 100%;
			height: 3rem;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			font-size: 1rem;
		}
		.choose_addr_list{
			position: fixed;
			top: 8rem;
			left: 0;
			/* right: 0; */
			right: 0;
			bottom: 0rem;
			/* background: #fff; */
		}
		.scroll{
			overflow-y: scroll;
		}
		.address-choose{
			border-bottom: 1px solid #ccc;display: flex;display: -webkit-flex;align-items: center;-webkit-align-items: center
		}
		.radio{
			width: 1rem;
			height: 1rem;
			border: 1px solid #ccc;
			border-radius: 999px;
			display: flex;
			display: -webkit-flex;
			align-items: center;
			-webkit-align-items: center;
			justify-content: center;
			-webkit-justify-content: center;
		}
		.address{
			margin-left: 0.5rem
		}
		.active{
			width: 0.5rem;
			height: 0.5rem;
			border-radius: 999px;
			background: #18b6eb;
		}
		.content{
			padding: 1rem
		}
		.chacha{
			width: 100%;
			height: 1.5rem;
			position: relative;
			z-index: 10;
		}
		.chacha_div{
			position: absolute;right: 0.5rem;top: 0.3rem;
		}
		.chacha_img{
			width: 1.5rem;height: 1.5rem;border-radius: 50%;border: 1px solid #ccc;display:  flex;align-items:  center;justify-content: center;
		}
		.scroll{
			background: #fff;
			position: absolute;
			top: 1.1rem;
			left: 1.2rem;
			right: 1.2rem;
			bottom: 0;
		}
		.search{
			position: absolute;font-size: 1rem;z-index: 5;display: flex;display: -webkit-flex;align-items: center;-webkit-align-items: center;
		}

		.search_choosed{
			background: #fff;
			width: 100%;
		}
		.search_i{
			padding: 0.5rem 1rem;
		}
		.search_i_black{
			padding: 0.5rem 1rem;position: absolute;font-size: 1rem;z-index: 4;
		}
		.search_choosed input{
			margin-left: 1rem;
		}

		.search_choosed .search_i{
			border-left: 1px solid #ccc;
		}
		.fa-choosed{
			color: #25bdef;
		}

		.show_text{
			display: flex;display: -webkit-flex;justify-content: center;-webkit-justify-content: center
		}

		.show_text p{
			width: 2rem;height: 2px;background: #25bdef
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav header_change_color">
			<a style="color: #fff" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 style="color: #fff" class="mui-title">新增收货地址</h1>
		</header>
	    <div class="mui-content" style="font-size: 0.8rem">
		 <form action="" name='myForm' id='myForm'>
			 <div class="search search_choosed">
				 <input type="text" class="search_address" style="font-size: 0.8rem" placeholder="请输入搜索地址(xx省xx市xx区xx)">
				 <div class="search_i">
					 <i class="fa fa-search fa-choosed"></i>
				 </div>
			 </div>
			 <div class="search_i_black">
				 <i class="fa fa-search"></i>
			 </div>
			 <div style="width:100%;" id="container"></div>
			 <div class="add_text  hidden_text">
				 <div style="position: absolute;top: 0;right: 0">
					 <div class="chacha_div search_cha">
						 <div class="chacha_img" style="border: none">
							 <img style="width: 70%" src="image/cuo.png">
						 </div>
					 </div>
				 </div>
				 <div style="padding: 3rem 0.5rem;">
					 <ul>
						 <li class="add lable_before">
							 <label class="lable">地址</label>
							 <p class="add-span" id="address_choose" onclick="choose()">
								 <input type="hidden" name="position_address" id="address_hidden" data-validation="required" data-validation-message='{"required":"请选择送水地址"}'/>
								 <span id="map_address">点击手动搜索</span>
								 <span style="margin-left: 1rem"> > </span>
							 </p>
						 </li>
						 <li class="add lable_none">
							 <label class="lable"></label>
							 <p class="add-span" style="padding: 0">
								 <textarea id="name" style="font: 95% tahoma,\5b8b\4f53,arial;" name="address" data-validation="required" data-validation-message='{"required":"请填写详细地址"}' placeholder="填写详细地址(如5号楼203号房)"></textarea>

							 </p>
						 </li>
						 <li class="add lable_before_red">
							 <label style="padding-bottom: 1.2rem;" class="lable">姓名</label>
							 <p class="add-span">
								 <input name="name" style="padding-bottom: 0.5rem;" placeholder="收货人姓名" data-validation="required" data-validation-message='{"required":"请填写收货人姓名"}'/>
							 </p>
						 </li>
						 <li class="add lable_none">
							 <label class="lable"></label>
							 <p class="add-span">
								 <input style="padding-bottom: 0.5rem;" name="mobile" placeholder="请填写收货人手机号" data-validation="required,call[is_mobile]" data-validation-message='{"required":"请填写联系电话"}'/>
							 </p>
						 </li>
					 </ul>
					 <input type="hidden" id="latLng" name="area_position">
					 <input type="hidden" name="province_id" id="province_id">
					 <input type="hidden" name="city_id" id="city_id">
					 <input type="hidden" name="area_id" id="area_id">
					 <input type="hidden" name="area_info" id="area_info">
					 <button type="submit" class="mui-btn-blue add-btn">确定</button>
				 </div>
			 </div>
			 <div class="add_text show_text" style="display:none">
				 <div style="padding: 0.3rem">
					 <p></p>
					 <p></p>
					 <p></p>
				 </div>
			 </div>
   		 	</form>
		</div>

		<div class="choose_addr_list" style="display: none">
			<div class="chacha">
				<div class="chacha_div">
					<div class="chacha_img">
						<img style="width: 70%" src="image/cuo.png">
					</div>
				</div>
			</div>
			<div class="scroll">
				<div class="content" id="choose">
				</div>
			</div>
		</div>
		<script type="text/html" id="choose-content">
			{{each nearPois as near index}}
			<div class="address-choose" >
				<div>
					<div  class="radio" data-index="{{index}}">
						<div ></div>  <!--class="{{if index == 0}}active{{/if}}"-->
					</div>
				</div>
				<div class="address">
					<p>{{near.address}}</p>
					<p style="color: #9a9a9a">{{near.name}}</p>
				</div>
			</div>
			{{/each}}
		</script>
		<script src='js/commen.js?v=v=20181211'></script>
		<script src='js/add-address-new.js?v=v=20181211'></script>

	</body>

</html>