<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>志愿者服务信息网</title>
		<link rel="shortcut icon" type="image/x-icon" href="https://yst-pjyc-server.oss-cn-beijing.aliyuncs.com/datas/image/20181120/20181120103218126806518.jpg" media="screen" />
		<link rel="stylesheet" type="text/css" href="css/layer.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/flatpickr.min.css" />
		<link rel="stylesheet" type="text/css" href="css/registe.css" />
	</head>

	<body>
		<!--top头部标题栏-->
		<div id="top">
				<!--用户注册-->
				<div id="vl_registe">
					<!--账号信息-->
					<p class="r_p1"><span class="line"></span>账号信息</p>
					<div>
						<p class="userinfo">
							<span class="left">
							<span class="red">*</span>
							<span class="info">用户名:</span>
							</span>
							<input type="text" name="v_username" id="v_username" value="" placeholder="用户名" autocomplete="off" /><span class="tishi">dsfsdfsfssd</span>
						</p>
						<p class="userinfo">
							<span class="left">
							<span class="red">*</span>
							<span class="info">密码:</span>
							</span>
							<input type="password" name="v_passward" id="v_passward" value="" placeholder="密码" autocomplete="off" />
							<span class="tishi">dsfsdfsfssd</span>
						</p>
						<p class="userinfo">
							<span class="left">
							<span class="red">*</span>
							<span class="info">确认密码:</span>
							</span>
							<input type="password" name="v_passward1" id="v_passward1" value="" placeholder="确认密码" autocomplete="off" />
							<span class="tishi">dsfsdfsfssd</span>
						</p>
						<p class="userinfo">
							<span class="left">
							<span class="red">*</span>
							<span class="info">邮箱:</span>
							</span>
							<input type="emaila" name="v_mail" id="v_mail" value="" placeholder="邮箱" autocomplete="off" />
							<span class="tishi">dsfsdfsfssd</span>
						</p>
					</div>
					<!--志愿者基本信息-->
					<p class="r_p1"><span class="line"></span>志愿者基本信息</p>
					<div class="d_1">
						<!--<p class="userinfo">
							<span class="left">
							<span class="red">*</span>
							<span class="info">国家:</span>
							</span>
							<input type="text" name="country" id="country" value="" placeholder="国家" />
						</p>-->
						<p class="userinfo">
							<span class="left">
							<span class="red">*</span>
							<span class="info">真实姓名:</span>
							</span>
							<input type="text" name="v_name" id="v_name" value="" placeholder="真实姓名" autocomplete="off" />
							<span class="tishi">dsfsdfsfssd</span>
						</p>
						<p class="userinfo">
							<span class="left">
							<span class="red">*</span>
							<span class="info">证件类型:</span>
							</span>
							<select id="card_type" name="card_type ">
								<option value="内地居民身份证">内地居民身份证</option>
							</select>
						</p>
						<p class="userinfo">
							<span class="left">
							<span class="red">*</span>
							<span class="info">证件号码:</span>
							</span>
							<input type="text" name="card_num" id="card_num" value="" placeholder="证件号码" autocomplete="off" />
							<span class="tishi">dsfsdfsfssd</span>
						</p>
						<p class="userinfo">
							<span class="left">
							<span class="red">*</span>
							<span class="info">性别:</span>
							</span>
							<input type="radio" name="sex" id="boy" value="0" />男
							<input type="radio" name="sex" id="girl" value="1" />女
							<span class="tishi1"></span>
						</p>
						<p class="userinfo">
							<span class="left">
							<span class="red">*</span>
							<span class="info">出生年月:</span>
							</span>
							<input class="flatpickr" type="date" name="birth_time" id="birth_time" value="" placeholder="出生日期" autocomplete="off" />
							<span class="tishi"></span>
						</p>

						<p class="userinfo">
							<span class="left">
							<span class="red">*</span>
							<span class="info">手机号码:</span>
							</span>
							<input type="text" name="v_phone" id="v_phone" value="" placeholder="手机号码" maxlength="11" autocomplete="off" />
							<span class="tishi"></span>
						</p>
						<p class="userinfo">
							<span class="left">
							<span class="red">*</span>
							<span class="info">详细地址:</span>
							</span>
							<input type="text" name="v_address" id="v_address" value="" placeholder="详细地址" autocomplete="off" />
							<span class="tishi"></span>
						</p>

					</div>

					<p id="volunteer_people_registe">申请成为实名注册志愿者</p>
				</div>
			</div>
		</div>
	</body>
	<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=544e65a7e9e11d0b0a4f4bb04b06e8c8"></script>
	<script src="js/flatpickr.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/imgUp.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/layer.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/registe.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		/*时间插件*/
		$(".flatpickr").flatpickr();
		/* 高德地图start */
		var windowsArr = [];
		var marker = [];
		var longitude, latitude, addressName;
		var map = new AMap.Map("mapContainer", {
			resizeEnable: true,
			center: [116.397428, 39.90923], //地图中心点
			zoom: 13, //地图显示的缩放级别
			keyboardEnable: false
		});
		AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function() {
			var autoOptions = {
				city: "天津", //城市，默认全国
				input: "v_address" //使用联想输入的input的id
			};
			autocomplete = new AMap.Autocomplete(autoOptions);
			var placeSearch = new AMap.PlaceSearch({
				city: '天津',
				map: map
			})
			AMap.event.addListener(autocomplete, "select", function(e) {
				var location = e.poi.location;
				console.log(location)
				longitude = location.lng;
				latitude = location.lat;
				addressName = e.poi.name;
				console.log(longitude + "-----" + latitude + '------' + addressName)
				//TODO 针对选中的poi实现自己的功能
				placeSearch.setCity(e.poi.adcode);
				placeSearch.search(e.poi.name)

				/* 选择定位后，更新省市区的显示 */
				console.log(e)
				var district = e.poi.district;
			});
		});
		/* 高德地图end */
		/* 高德地图start */
		var windowsArr = [];
		var marker = [];
		var t_longitude, t_latitude, t_addressName;
		var map = new AMap.Map("mapContainer", {
			resizeEnable: true,
			center: [116.397428, 39.90923], //地图中心点
			zoom: 13, //地图显示的缩放级别
			keyboardEnable: false
		});
		AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function() {
			var autoOptions = {
				city: "天津", //城市，默认全国
				input: "competent_address" //使用联想输入的input的id
			};
			autocomplete = new AMap.Autocomplete(autoOptions);
			var placeSearch = new AMap.PlaceSearch({
				city: '天津',
				map: map
			})
			AMap.event.addListener(autocomplete, "select", function(e) {
				var location = e.poi.location;
				console.log(location)
				t_longitude = location.lng;
				t_latitude = location.lat;
				t_addressName = e.poi.name;
				console.log(t_longitude + "-----" + t_latitude + '------' + t_addressName)
				//TODO 针对选中的poi实现自己的功能
				placeSearch.setCity(e.poi.adcode);
				placeSearch.search(e.poi.name)

				/* 选择定位后，更新省市区的显示 */
				console.log(e)
				var district = e.poi.district;
			});
		});
		/* 高德地图end */
		//上传图片
		var vlImg;
		var vtImg;
		var skillimg0,skillimg1,skillimg2,skillimg3,skillimg4;
		var skillnum;
		$(".fileBox").on('click', '#vl_up', function() {
			skillnum = 6;
			$("#vl_up").takungaeImgup({
				formData: {
					'filesname': 'imageFile'
				},
				url: apicom + '/webadmin/fileupload/image',
				maxImage: 1,
				success: function(data) {
					console.log(data)
				},
				error: function(err) {
					console.log(err)
				}
			});
		})
		$(".fileBox").on('click', '#vt_up', function() {
			$("#vt_up").takungaeImgup({
				formData: {
					'filesname': 'imageFile'
				},
				url: apicom + '/webadmin/fileupload/image',
				maxImage: 1,
				success: function(data) {
					vtImg = data.data
					$('#vt_img').attr('src', vtImg)
				},
				error: function(err) {
					console.log(err)
				}
			});
		})
		$("#add_skills").on('click', '.skillup', function() {
			skillnum = $(this).parents('.skills').index()
			console.log(skillnum);
			$(".skillup").takungaeImgup({
				formData: {
					'filesname': 'imageFile'
				},
				url: apicom + '/webadmin/fileupload/image',
				maxImage: 1,
				success: function(data) {
//					vtImg = data.data
//					$('#skillup_1').attr('src', skillimg1)
				},
				error: function(err) {
					console.log(err)
				}
			});
		})



	</script>

</html>