waibao
/
NN2022090201


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
							<!doctype html>
<html class="no-js">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>实名认证</title>
	<!-- Set render engine for 360 browser -->
	<meta name="renderer" content="webkit">
	<link rel="stylesheet" href="__CDN__/assets/shop/css/amazeui.css">
	<link rel="stylesheet" href="__CDN__/assets/shop/css/app.css">
	<style type="text/css">
		div[data-html=form] .am-form .am-form-group{
			margin-bottom: 1rem;
			border-radius: 10px;
		}
		.userIcon{
			width: 90px;
			height: 90px;
			margin: 0 0 0 20%;
		}
		.icon-cearma{
			position: absolute;
			bottom: 1%;
			right: 5%;
			width: 24px;
		}
		#up-img-touch{ position: relative;}
		#up-img-touch1{ position: relative;}
		#file,#file1{
			position: absolute;
			top: 0;
			width: 200px;
			height: 100%;
			opacity: 0;
			cursor: pointer;
		}
	</style>
</head>

<body class="">
<!-- Header -->
<header data-am-widget="header" class="am-header am-header-default">
	<div class="am-header-left am-header-nav">
		<a href="javascript:void(0);" onclick="javascript:history.back(-1);return false;"><i class="am-header-icon am-icon-angle-left"></i></a>
	</div>
	<h1 class="am-header-title">
		<a href="#title-link">实名认证</a>
	</h1>
</header>
<!-- Content -->
<div class="wapper " data-html="form" style="padding-top:49px">
	<div class="am-bg-white">
		<div class="am-margin-sm ">
			<div class="am-form am-form-horizontal invest-form " >
				<div class="am-form-group sc-bg">
					<label class="am-u-sm-3 am-form-label">真实姓名</label>
					<div class="am-u-sm-9">
						<input type="text" class=" " placeholder="请输入真实姓名" name="realname" value="{$user.realname}">
					</div>
				</div>
				<div class="am-form-group sc-bg">
					<label class="am-u-sm-3 am-form-label">身份证号</label>
					<div class="am-u-sm-9">
						<input type="text" class=" " placeholder="请输入身份证号" name="idcard" value="{$user.idcard}">
					</div>
				</div>
				<div class="am-form-group sc-bg">
					<label class=" am-form-label">正面照</label>
					<div class=" userIcon "  id="up-img-touch">
						<form id="form1" class="am-form am-form-horizontal" method="post" enctype="multipart/form-data">
							<img src="{$user.idprc1|default='__CDN__/assets/shop/img/identity-card.jpg'}" id="img" width="200" height="100"/>
							<input type="file" id="file" name="file" />
						</form>
					</div>
				</div>
				<div class="am-form-group sc-bg">
					<label class=" am-form-label">反面照</label>
					<div class=" userIcon "  id="up-img-touch1">
						<form id="form2" class="am-form am-form-horizontal" method="post" enctype="multipart/form-data">
							<img src="{$user.idprc2|default='__CDN__/assets/shop/img/identity-card.jpg'}" id="img1" width="200" height="100"/>
							<input type="file" id="file1" name="file" />
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<input type="hidden" name="idprc1" id="idprc1" value="{$user.idprc1}"/>
	<input type="hidden" name="idprc2" id="idprc2" value="{$user.idprc2}"/>
	<div class="am-padding-sm am-padding-top-0 am-link-muted">
		温馨提示：本应用以据国家法律法规政策要求，不会向任何无关第三方提供、出售、出租、分享或交易您的个人信息，保障你的个人信息安全！！
	</div>
</div>
<div class="am-margin-xl">
	<button type="button" class="am-btn am-btn-black am-round am-btn-block" id="submit">提交</button>
</div>
<script src="__CDN__/assets/shop/js/jquery.min.js"></script>
<script src="__CDN__/assets/shop/js/amazeui.min.js"></script>
<script src="__CDN__/assets/libs/layer/layer.js"></script>
<script>
   var file = document.getElementById('file');
    var image = document.getElementById("img");
    var file1 = document.getElementById('file1');
    var image1 = document.getElementById("img1");
    file.onchange = function() {
        var fileData = this.files[0];//获取到一个FileList对象中的第一个文件( File 对象),是我们上传的文件
        var pettern = /^image/;
        console.info(fileData.type)
        if (!pettern.test(fileData.type)) {
            layer.msg("图片格式不正确");
            return;
        }
        var reader = new FileReader();
        reader.readAsDataURL(fileData);//异步读取文件内容，结果用data:url的字符串形式表示
        /*当读取操作成功完成时调用*/
        reader.onload = function(e) {
            console.log(e); //查看对象
            image.setAttribute("src", this.result)
        }
        var formData = new FormData($( "#form1" )[0]);
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "{:url('ajax/upload')}" ,
            data: formData,
            contentType: false, //不设置内容类型
            processData: false, //不处理数据
            success: function (result) {
                if(result.code>0)
                {
                    $('#img').attr('src',result.data.url);
                    $('#idprc1').val(result.data.url);
                }else{
                    layer.msg(result.msg);
                }
            },
            error : function() {
                layer.msg("网络异常！");
            }
        });
    }
    file1.onchange = function() {
        var fileData = this.files[0];//获取到一个FileList对象中的第一个文件( File 对象),是我们上传的文件
        var pettern = /^image/;
        console.info(fileData.type)
        if (!pettern.test(fileData.type)) {
            layer.msg("图片格式不正确");
            return;
        }
        var reader = new FileReader();
        reader.readAsDataURL(fileData);//异步读取文件内容，结果用data:url的字符串形式表示
        /*当读取操作成功完成时调用*/
        reader.onload = function(e) {
            console.log(e); //查看对象
            image1.setAttribute("src", this.result)
        }
        var formData = new FormData($( "#form2" )[0]);
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "{:url('ajax/upload')}" ,
            data: formData,
            contentType: false, //不设置内容类型
            processData: false, //不处理数据
            success: function (result) {
                if(result.code>0)
                {
                    $('#img1').attr('src',result.data.url);
                    $('#idprc2').val(result.data.url);
                }else{
                    layer.msg(result.msg);
                }
            },
            error : function() {
                layer.msg("网络异常！");
            }
        });
    }
    $('#submit').click(function(){
        var params={};
        params.idcard=$('input[name=idcard]').val();
        params.realname=$('input[name=realname]').val();
        params.idprc1=$('input[name=idprc1]').val();
        params.idprc2=$('input[name=idprc2]').val();
        jQuery.post("{:url('api/user/toreal')}" ,params,function(data) {
            if(data.code>0)
            {
                layer.msg(data.msg,{time:500},function(){
                    location="{:url('shop/user/index')}";
                });
            }else{
                layer.msg(data.msg);
            }
        });
    })
</script>
</body>
</html>