@extends('layout.store')

@section('title')
	样品领取
@endsection
@section('myCss')
<style type="text/css">
.story_con {
    width: 1200px;
    margin: 0px auto;
}
</style>
@endsection
@section('content')
<div class="shouye">
	<a href="{{url('/')}}"><img src="/1/img/home.gif" height="21px" width="21px" alt=""></a>
	<a>样品领取</a>
</div>
<style type="text/css">
.receive{width:1200px;margin:0px auto;position:relative;height:450px;}
.receive table tr{line-height:50px;border:1px solid #ccc;}
.receive table tr td{padding:10px;}
.receive table tr td input{border:0px;width:100%;height:50px;}
.receive table tr td select{border:0px;width:200px;}
.receive table tr td .button{background: #00c3f5;border-radius: 10px;color:#fff;cursor: pointer;display:block;text-align:center;}
.slhdxz{display:none;position: absolute;line-height:2;
    top: 10%;
   background: #fff;
   border:2px solid #333;
   padding:25px;
    width: 100%;}
.white_content{margin: 0px auto;
    width: 100%;
    text-align: center;
    background: #00c3f5;
    border-radius: 10px;
    color: #fff;}
.white_content a{color:#fff;}
</style>
<!-------------->
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/1/js/Area.js" type="text/javascript"></script>
<script src="/1/js/AreaData_min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  initComplexArea('seachprov', 'seachcity', 'seachdistrict', area_array, sub_array, '11', '0', '0');
});

//得到地区码
function getAreaID(){
  var area = 0;
  if($("#seachdistrict").val() != "0"){
    area = $("#seachdistrict").val();
  }else if ($("#seachcity").val() != "0"){
    area = $("#seachcity").val();
  }else{
    area = $("#seachprov").val();
  }
  return area;
}
//根据地区码查询地区名
function getAreaNamebyID(areaID){
  var areaName = "";
  if(areaID.length == 2){
    areaName = area_array[areaID];
  }else if(areaID.length == 4){
    var index1 = areaID.substring(0, 2);
    areaName = area_array[index1] + " " + sub_array[index1][areaID];
  }else if(areaID.length == 6){
    var index1 = areaID.substring(0, 2);
    var index2 = areaID.substring(0, 4);
    areaName = area_array[index1] + " " + sub_array[index1][index2] + " " + sub_arr[index2][areaID];
  }
  return areaName;
}
</script>
<!-------------->

<div class="receive" >
	 <form action="{{url('/doreceive')}}"  method="post" id="receive">
		<table class="" id="" width="100%">
			<tr>
				<td>姓名</td>
				<td><input type="text" name="realName" placeholder="请输入姓名"  /></td>
			</tr>
			<tr>
				<td>手机号</td>
				<td><input type="text" name="phone" placeholder="请输入手机号"  /></td>
			</tr>
			<tr>
				<td>收货地址</td>
				<td>
					<select id="seachprov" name="seachprov" onChange="changeComplexProvince(this.value, sub_array, 'seachcity', 'seachdistrict');"></select>&nbsp;&nbsp;
                    <select id="seachcity" name="homecity" onChange="changeCity(this.value,'seachdistrict','seachdistrict');"></select>&nbsp;&nbsp;
                    <span id="seachdistrict_div"><select id="seachdistrict" name="seachdistrict"></select></span>
				</td>
			</tr>
			<tr>
				<td>详细地址</td>
				<td><input type="text" name="jiedao" placeholder="请输入详细地址"  /></td>
			</tr>
			<tr>
				<td colspan="3">
				<input type="hidden" name="hidecode">
				<a class="re_btn weui_btn weui_btn_primary button">确认领取</a></td>
				<!--<input type="submit" class="button" value="确认领取" /></td>-->
			</tr>
			
			<tr>
				<td align="left" colspan="2" valign="center"><input name="" type="checkbox" value="" style="width: inherit;" class="yue" checked="checked"/>
				我已阅读<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';document.getElementById('receive').style.display='none'">《申领活动细则》</a></td>
			</tr>
		</table>
		 {{csrf_field()}}
	</form>
<div class="slhdxz" id="fade">
1.关注“碳立方”微信公众号，点击菜单“会员福利”进入“试用体验”；<br />

2.本活动限“碳立方会员”方能参与，未注册的用户请先注册“碳立方会员”；<br />

3.已注册的会员填写准确的收件信息，申请成功后有机会获得试用产品；<br />

4.试用产品将在申领成功后的一个自然月内，为您寄出，请留意短信或电话通知；<br />

注意：<br />

1.同一手机、同一微信号限参加一次，不可重复申领；<br />

2.本活动将在成功参与的用户中随机抽取，活动最终解释权归碳立方所有。<br />

3.如对本活动有任何疑义，请致电碳立方科技服务热线：010-83625168。<br />
<div id="light" class="white_content"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none';document.getElementById('receive').style.display='block'">确定</a></div> 
</div>
</div>
<script>
	// 设置遮罩大小
	var ww = $(window).width(); //浏览器当前窗口可视区域宽度
	$('.mask').css('width',ww);
	var hh = $(window).height(); //浏览器当前窗口可视区域高度
	$('.mask').css('height',hh);
	// 设置表单位置
	// $('.free').css('top',hh)
	// 弹出表单
	$('.btn_go button').click(function(){
		// swal('','抱歉，活动暂未开始','warning');return;
		$('.mask').animate({top:-hh},700)
		$('.free').animate({top:'0'},700)
	})

	$('.re_btn').click(function(){
		var realName = $('input[name="realName"]').val()
		var phone = $('input[name="phone"]').val()
		var addr = getAreaNamebyID(getAreaID())
		var areaID = getAreaID()
		var jiedao = $('input[name="jiedao"]').val()
		if (!$('.yue').is(':checked')) {
			swal('','请确认您已阅读《活动细则》','warning')
		}else if(realName == ''){
			swal('','请输入收件人姓名','warning')
		}else if(phone == ''){
			swal('','请输入收件人手机号','warning')
		}else if(!phone.match(/^[1][3,4,5,7,8][0-9]{9}$/)) {
            swal('','请填写正确的手机号','warning')
        }else if(addr.length < 6) {
            swal('','请选择收货人地址','warning')
        }else if(jiedao == ''){
			swal('','请输入收件人详细地址','warning')
		}else{
			var url = "{{url('/doreceive')}}";
			var type = 'post';
			var data = {
				'realName':realName,
				'phone':phone,
				'addr':addr,
				'areaID':areaID,
				'jiedao':jiedao,
				'_token':'{{csrf_token()}}'
			}
			var success=function(data){
				if(data.error == '2'){
					swal('',data.msg,'warning')
				}else if(data.error == '0'){
					swal(data.msg,'即刻分享，大家一起来试用','success')
				}
			}
			$.post(url,data,success,'json');
		}
	})
</script>
@endsection