geek
/
xinyi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382
							<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-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" />
	<meta name="format-detection" content="telephone=no">
	<title>编辑地址</title>
	<link rel="stylesheet" href="/static/css/style.css" />
	<link rel="stylesheet" href="/static/css/address.css" />

	<link rel="stylesheet" type="text/css" href="/static/index/css/mobileSelect.css">

	<script src="/static/index/js/mobileSelect.js" type="text/javascript"></script>
</head>
<body>
<style>
	.address2-bottom input{
		-webkit-appearance:none;
		box-shadow:0 0 11px 0 rgba(0,0,0,0.2);
		font-size:0.9rem;
		float: inherit;
		margin: 0 auto 0.56rem auto;
		border-radius: 0.3rem;
		height: 2.5rem;
		line-height: 2.5rem;
	}
	.address2 .address2-bottom{
		padding-left: 0;
	}
	.address2-middle label{
		color: #999;
		font-size: 0.9rem;
	}
	.address2-middle-msg .middle-msg-box input,.address2-middle-msg .middle-msg-box select{
		font-size: 0.9rem;
	}
	.select-add{
		width: 200px;height: 50px;line-height: 50px;float: left
	}
</style>
<div class="address2" id="address2" style="display:block;">
	<!--<div class="address2-top"></div>-->
	<div class="address2-middle">
		<div class="address2-middle-msg">
				<span class="middle-msg-box">
					<label for="person">收件人</label>
					<input type="text" id="person" placeholder="请填写收件人" value=""/>
				</span>
			<span class="middle-msg-box">
					<label for="phone_number">手机号</label>
					<input type="text" id="phone_number" placeholder="请填写手机号码" value=""/>
				</span>
		</div>
		<div class="address2-middle-msg">
				<span class="middle-msg-box">
					<label for="provinces">省份</label>
					<div id="trigger1" class="select-add">请选择</div>
				</span>
			<span class="middle-msg-box">
					<label for="cities">城市</label>
					<div id="trigger2" class="select-add">请选择</div>
				</span>
			<span class="middle-msg-box">
					<label for="counties">县区</label>
					<div id="trigger3" class="select-add">请选择</div>
				</span>
			<span class="middle-msg-box">
					<!--<span>详细地址</span>
					<span>在呢在呢</span>-->
					<label for="address_detail">详细地址</label>
					<textarea id="address_detail" placeholder="请填写详细地址"></textarea>
				</span>
		</div>
	</div>
	<div class="address2-bottom">
		<input type="button" style="background: white;color: #868A89;" class="default_address" value="这是您的默认收货地址"/>
		<input type="button" class="set_default save_address" data-action="1" value="设为默认收货地址"/>
		<input type="button" class="save_address" data-action="2"  value="保存"/>
	</div>
</div>
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script src="/static/layer/layer.js"></script>
<script src="/static/js/common.js"></script>
<script src="/static/js/address.js"></script>
</body>
</html>
<script>
	$(function () {
		$.ajax({
			url: '/index/AddressInterfaces/getAddress',
			type: 'GET',
			async:false,
			data:{level:1},
			dataType:'json',
			success: function (res) {
				if(res.code==400){
					layer.msg(res.msg);
				}else{
					var data = res.data;
					var html = "<option data-code=''>请选择省份</option>";
					$.each(data,function (i,v) {
						html+="<option data-code='"+v.code+"'>"+v.name+"</option>";
					})
					$('.province').append(html);
				}
			}
		});
		$('.province').change(function () {
			var cityCode = $(this).find('option:selected').data('code');
			$.ajax({
				url: '/index/AddressInterfaces/getAddress',
				type: 'GET',
				async:false,
				data:{level:2,code:cityCode},
				dataType:'json',
				success: function (res) {
					if(res.code==400){
						layer.msg(res.msg);
					}else{
						var data = res.data;
						var html = "<option data-code=''>请选择城市</option>";
						$.each(data,function (i,v) {

							html+="<option data-code='"+v.code+"'>"+v.name+"</option>";

						})
						$('.city').empty();
						$('.city').append(html);
					}
				}
			});
		})
		$('.city').change(function () {
			var cityCode = $(this).find('option:selected').data('code');
			$.ajax({
				url: '/index/AddressInterfaces/getAddress',
				type: 'GET',
				async:false,
				data:{level:3,code:cityCode},
				dataType:'json',
				success: function (res) {
					if(res.code==400){
						layer.msg(res.msg);
					}else{
						var data = res.data;
						var html = "<option data-code=''>请选择县区</option>";
						$.each(data,function (i,v) {

							html+="<option data-code='"+v.code+"'>"+v.name+"</option>";

						})
						$('.area').empty();
						$('.area').append(html);
					}
				}
			});
		})
	})
</script>

<script type="text/javascript">

	var mobileSelect1 = new MobileSelect({
		trigger: '#trigger1',
		title: '选择省份',
		wheels: [
			{data:[
					{
						id:'1',
						value:'',
						childs:[
							{id:'A1',value:''},
						]
					}
				]}
		],
		callback:function(indexArr, data){
			getCity(data[0].id)
			$('#trigger1').text(data[0].name);
			$('#trigger1').attr('data-id',data[0].id);
		},
		position:[0]
	});

	var mobileSelect2 = new MobileSelect({
		trigger: '#trigger2',
		title: '选择城市',
		wheels: [
			{data:[
					{
						id:'1',
						value:'',
						childs:[
							{id:'A1',value:''},
						]
					}
				]}
		],
		callback:function(indexArr, data){
			getArea(data[0].id)
			$('#trigger2').text(data[0].name);
			$('#trigger2').attr('data-id',data[0].id);
		},
		position:[0]

	});
	var mobileSelect3 = new MobileSelect({
		trigger: '#trigger3',
		title: '选择区域',
		wheels: [
			{data:[
					{
						id:'1',
						value:'',
						childs:[
							{id:'A1',value:''},
						]
					}
				]}
		],
		callback:function(indexArr, data){
			$('#trigger3').text(data[0].name);
			$('#trigger3').attr('data-id',data[0].id);
		},
		position:[0]

	});

	$.ajax({
		url: '/index/AddressInterfaces/getAddress',
		type: 'GET',
		async:false,
		data:{level:1},
		dataType:'json',
		success: function (res) {
			if(res.code==400){
				layer.msg(res.msg);
			}else{
				var province_data = [];
				var name = '';
				var id ='';
				$.each(res.data,function (k,v) {
					province_data[k]={"id":v.code,"value":v.name};
					if(k===0){
						name = v.name;
						id = v.code;
					}
				})
				mobileSelect1.updateWheels(province_data);
				getCity(id);
				$('#trigger1').text(name);
				$('#trigger1').attr('data-id',id);
			}
		}
	});

	function getCity(cityCode){
		$.ajax({
			url: '/index/AddressInterfaces/getAddress',
			type: 'GET',
			async:false,
			data:{level:2,code:cityCode},
			dataType:'json',
			success: function (res) {
				if(res.code==400){
					layer.msg(res.msg);
				}else{
					var city_data = [];
					var name = '';
					var id ='';
					$.each(res.data,function (k,v) {
						city_data[k]={"id":v.code,"value":v.name};
						if(k===0){
							name = v.name;
							id = v.code;
						}
					})
					mobileSelect2.updateWheels(city_data)
					getArea(id);
					$('#trigger3').text('选择区域');
					$('#trigger2').text(name);
					$('#trigger2').attr('data-id',id);
					$('#trigger1').attr('data-id',cityCode);
				}
			}
		});
	}

	function getArea(cityCode) {
		$.ajax({
			url: '/index/AddressInterfaces/getAddress',
			type: 'GET',
			async:false,
			data:{level:3,code:cityCode},
			dataType:'json',
			success: function (res) {
				if(res.code==400){
					layer.msg(res.msg);
				}else{
					var area_data = [];
					var name = '';
					var id ='';
					$.each(res.data,function (k,v) {
						area_data[k]={"id":v.code,"value":v.name};
						if(k===0){
							name = v.name;
							id = v.code;
						}
					})
					mobileSelect3.updateWheels(area_data)
					$('#trigger3').text(name);
					$('#trigger3').attr('data-id',id);
				}
			}
		});
	}

	$('.address2-bottom').on('click','.save_address',function () {
		var addressId = $('.addressId').val();
		var is_default = $(this).data('action');
		var name = $('#person').val();
		var mobile = $('#phone_number').val();
		var province = $('#trigger1').data('id');
		var city = $('#trigger2').data('id');
		var area = $('#trigger3').data('id');
		var address = $('#address_detail').val();
		if(name==null||name==undefined||name==""){
			layer.msg('请输入姓名');
			return false;
		}
		if(mobile==null||mobile==undefined||mobile==""){
			layer.msg('请输入手机号');
			return false;
		}
		if(province==null||province==undefined||province==""){
			layer.msg('请选择省份');
			return false;
		}
		if(city==null||city==undefined||city==""){
			layer.msg('请选择城市');
			return false;
		}
		if(area==null||area==undefined||area==""){
			layer.msg('请选择地区');
			return false;
		}
		if(address==null||address==undefined||address==""){
			layer.msg('请填写具体地址');
			return false;
		}

		$.ajax({
			url: '/index/addressInterfaces/saveUserAddress',
			type: 'GET',
			async:false,
			data:{
				mobile:mobile,
				addressId:addressId,
				is_default:is_default,
				province:province,
				city:city,
				area:area,
				address:address,
				consignee:name,
			},
			dataType:'json',
			success: function (res) {
				if(res.code==400){
					layer.msg(res.msg);
					return false;
				}else{
					window.location.href="{:url('/index/address/addressList')}";
				}
			}
		})
	});


</script>