master

分支 (1)

管理

管理

master

xiangyin_houtai
/
villager_renzheng.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>村民认证</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/pintuer.css">
	<link rel="stylesheet" href="css/mine.css" />
</head>
<body class="toutiao renzheng">
	<header class="clearfix">
		<h3 class="fl">高翔森<span class="ml15">已认证</span></h3>
		<button class="fr my-btn mr15" id="del" onclick="confirm('确认销户？')">销户</button>
		<button class="fr my-btn choose mr15" id="rz">认证</button>
	</header>
	<div class="tab_list clearfix">
		<table border="0" cellspacing="" class="fl" cellpadding="">
			<tr><td>手机号：</td><td>18239992003</td></tr>
			<tr><td>身份证号：</td><td>612427199303202345</td></tr>
			<tr><td>所属村镇：</td><td>陕西省-安康市-平利县-三阳镇-兰家垭村-八组</td></tr>
			<tr><td>性别：</td><td>男</td></tr>
		</table>
	</div>
	<div class="rz_list hide">
		<form>
			<p><span>真实姓名：</span><input type="text" placeholder="请输入" name=""/></p>
			<p><span>身份证号：</span><input type="text" placeholder="请输入" name=""/></p>
			<p><span>所属村镇：</span><select name="">
				<option value="">请选择</option>
				<option value="0">大黄镇</option>
			</select></p>
			<p><span>性别：</span><select name="">
				<option value="">请选择</option>
				<option value="0">男</option>
				<option value="1">女</option>
			</select></p>
			<div class="id_card">
				<div class="upload id_card_1">
					<input type="file" name="file" accept="image/*" />
					<img src="images/defaultCard.png" id="defaultImg" alt="" />
				</div>
				<div class="upload id_card_2">
					<input type="file" name="file" accept="image/*" />
					<img src="images/defaultCard.png" id="defaultImg" alt="" />
				</div>
				<p><span>身份证正面</span><span>身份证反面</span></p>
			</div>

			<div class="btn">
				<button class="my-btn choose">确认</button>
				<button class="my-btn cancel">取消</button>
			</div>
		</form>
	</div>
</body>
<script src="js/jquery-1.8.3.min_2.js"></script>
<script src="js/pintuer.js"></script>
<script>
	$('.detail .content ul li').click(function(){
		var num = $(this).index();
		$('.detail .content ul li').removeClass('choose');
		$(this).addClass('choose');
		$('.detail .content .cont').hide();
		$('.detail .content .cont').eq(num).show();
	});
	$('#rz').click(function(){
		$('.rz_list').show();
	});
	$('.rz_list .btn button.cancel').click(function(){
		$(this).parent().parent().parent().hide();
	});
	// 图片返现
	var fileInput = document.querySelector('input[type=file]'),previewImg = document.querySelector('#defaultImg');
    fileInput.addEventListener('change', function () {
	      var file = this.files[0];
	      var reader = new FileReader();
	      // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片
	      reader.addEventListener("load", function () {
	          previewImg.src = reader.result;
	      }, false);
	      // 调用reader.readAsDataURL()方法，把图片转成base64
	      reader.readAsDataURL(file);
	}, false);
</script>
</html>