master

分支 (1)

管理

管理

master

qds_client
/
add-address.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=20181211" />
		<link rel="stylesheet" href="./css/edit-address.css?v=20181211" />
		<link rel="stylesheet" href="./css/cxvalidation.css">
		<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=RHHBZ-K26W6-CPISS-ENGXG-HVCRS-QJFQT&libraries=drawing,geometry,autocomplete,convertor"></script>
		<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
		<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=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>
		#save{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #25bdef;
			height: 3rem;
			color: #fff;
			width: 100%;
		}
		.search{
			position: absolute;font-size: 1rem;z-index: 5;display: flex;display: -webkit-flex;align-items: center;-webkit-align-items: center;
		}

		.search_choosed{
			width: 100%;
			color:  #fff;
			background: #25bdef;
			display: flex;
			display: -webkit-flex;
			justify-content: space-between;
			-webkit-justify-content: space-between;
			/*flex-direction: row-reverse;
			-webkit-flex-direction: row-reverse;*/
		}
		.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;
		}


		.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
		}
		.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: 4.1rem; */
			left: 0;
			right: 0;
			bottom: 3rem;
			height: 14rem;
		}

		.fa-choosed{
			padding: 0.5rem 1rem;
		}

		.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{
			background: #f1f1f1;
		}
		.img_cuo{
			width: 1rem;
			position: absolute;
			right: 1rem;
			display: none;
		}

		.buttom_sure{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 3rem;
		}

	</style>

	<body >
	<div id="add">
		<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' class="overFlow">
				<div class='promit'><p style="color: #fff">提示:为获取准确定位请确保GPS为打开状态，若【地址】项未在地图上找到准确位置，请选择离你最近的地址，并在【门牌号】项补充完整地址，避免送水工找不到地方无法准确送达</p></div>
				<div style="padding: 0 1rem">
					<div class='edit-container change1 border_color' data="1">
						<span class='edit-left'>用户姓名</span>
						<input class='edit-right' type="text" name="name" placeholder="您的姓名"  data-validation="required" data-validation-message='{"required":"请填写用户姓名"}' />
						<i style="line-height: 3rem;font-size: 1rem;color: #25bdef" class=" fa fa-user-o"></i>
					</div>
					<div class='edit-container change2' data="2">
						<span class='edit-left'>联系电话</span>
						<input class='edit-right' type="number" name="mobile" placeholder="手机号码"  data-validation="required,call[is_mobile]" data-validation-message='{"required":"请填写联系电话"}' />
					</div>
					<!--<div class='edit-container change3' data="3">
						<span class='edit-left'>地址</span>-->
						<input class='mui-btn mui-btn-block edit-right area_info' type="hidden" placeholder="请填写地址" type="text" name="area_info" value=""  id='area_info' style="font-size:1rem;text-align: left;" data-validation="required" data-validation-message='{"required":"请填写所属地区"}' />
						<!--<i style="line-height: 3rem;font-size: 1.5rem;color: #25bdef" class="fa fa-map-marker"></i>-->
					<!--</div>-->
					<div class='edit-container change3' data="3">
						<span class='edit-left'>地址</span>
						<input class='mui-btn mui-btn-block edit-right area_info' placeholder="请填写地址" type="text" name="position_address" value=""  id='position_address' style="font-size:1rem;text-align: left;" data-validation="required" data-validation-message='{"required":"请填写地址"}' />
						<i style="line-height: 3rem;font-size: 1.5rem;color: #25bdef" class="fa fa-map-marker"></i>
					</div>
					<div class='edit-container change4' data="4">
						<span class='edit-left'>门牌号</span>
						<input class='edit-right' type="text" name="address" id="edit_address" placeholder="例：10号楼5层501室"  data-validation="required" data-validation-message='{"required":"请填写详细地址"}' />
					</div>
					<!--用户类型-->
					<div class='member-info data4' data="4">
						<div class="mui-input-row mui-radio mui-left" >
							<label style='padding-left: 0;padding-right:0;font-size: 1rem;width: 90px'>用户类型：</label>
						</div>
						<div class="mui-input-row mui-radio mui-left member-info-company-left radio1" data="10">
							<label style="font-size: 1rem;padding-right: 0">单位</label>
							<input id="radio10" class="radio1 company company-info" name="type" type="radio" value="1">
						</div>
						<div class="mui-input-row mui-radio mui-left member-info-company-right radio1" data="20">
							<label style="font-size: 1rem;padding-right: 0">家庭</label>
							<input id="radio20" class="radio1 home company-info" name="type" value="2" type="radio">
						</div>
					</div>
					<!--单位名称-->
					<div class='edit-container data5' data="5" style="display: none">
						<span class='edit-left'>单位简称：</span>
						<input  name="company_name"  class='edit-right company_name' data-validation="call[is_company]"  type="text" value=''/>
					</div>
					<!--保存地址-->
					<div class='sure-submit'>
						<input type="hidden" id="area_position" 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="range_in" id="range_in" data-validation="call[is_range_in]">
						<input type="hidden" name="type" id="type" data-validation="call[is_choose]">
						<button id='button' class="add-btn" type="submit">保存地址</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div id="latLng" style="display: none">
		<div id="map">
			<div class="search" style="height: 2.5rem;width: 100%;color: #fff;background: #25bdef;">
				<div class="toHistory" style="    padding: 0.5rem 1rem;width: 13%">
					<i class="fa fa-chevron-left"></i>
				</div>
				<div class="for-search" style="width: 87%;display: flex;display: -webkit-flex">
					<input style="background: #fff;height: 1.8rem!important;font-size: 0.9rem" type="text" placeholder="请输入搜索地址">
				    <i class="fa fa-search fa-choosed for-search"></i>
				</div>
			</div>
			<div style="width:100%;" id="container"></div>

			<div class="scroll">
				<div style="text-align: center;color: #25bdef;padding: 1rem 0 0.5rem 0;font-size: 1rem;border-bottom: 2px solid #eee">请选择地址</div>
				<div class="content" id="choose" style="padding: 1rem">

				</div>
			</div>
			<button type="button" class="choose_end mui-btn-blue buttom_sure">完成</button>
		</div>
		<div id="search" style="display: none">
			<div class="search search_choosed " style="background: #fff;padding: 0 1rem;position: fixed;top: 0;left: 0;right: 0;height: 3rem;background: #f1f1f1">
				<i style="color: #2d2d2d" class="fa fa-chevron-left for-map"></i>
				<input type="text" id="search_address" class="search_address" style="font-size: 0.8rem;color: #2d2d2d;border: none;height: 2rem!important;background: #f1f1f1" placeholder="请输入搜索地址(如：xx市xx)">
				<img class="img_cuo" src="image/cuo.png">
			</div>
			<div style="overflow-y: scroll;margin-top: 3.5rem">
				<div class="content" id="choose_search">

				</div>
			</div>
		</div>
	</div>
	<script type="text/html" id="choose-content">
		{{each nearPois as near index}}
		<div style="border-bottom: 3px solid #f1f1f1" class="address-choose" id="address-choose{{index}}" data-index="{{index}}">
			<div class="address">
				<p>{{near.name}}</p>
				<p style="color: #9a9a9a">{{near.address}}</p>
			</div>
		</div>
		{{/each}}
	</script>
	<script type="text/html" id="choose-content-search">
		{{each data as near index}}
		<div style="border-bottom: 3px solid #f1f1f1" class="address-choose-search" id="address-choose-search{{index}}" data-index="{{index}}">
			<div class="address">
				<p>{{near.title}}</p>
				<p style="color: #9a9a9a">{{near.address}}</p>
			</div>
		</div>
		{{/each}}
	</script>
	<script src='js/commen.js?v=20181211'></script>
	<!--<script src='js/add-address.js?v=20181211'></script>-->
	<script src='js/add-address-end.js?v=20181211'></script>
	</body>


</html>