微信公众号前端模版
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

311 lines
40 KiB

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@page import="com.ynxbd.wx.bean.User" %>
<% String path=request.getContextPath(); String basePath=request.getScheme() + "://" + request.getServerName() +
path + "/" ; request.setAttribute("basePath", basePath); HttpSession sess=request.getSession(); User user=(User)
sess.getAttribute("user"); Object openID=request.getSession().getAttribute("openid");
request.setAttribute("openID", openID); String status=request.getParameter("status");
request.setAttribute("status", status); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="weui/dist/style/weui.min.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="src/utils/image-util.js"></script>
<title>绑定身份证</title>
<script type="text/javascript">
$(function () {
$loadingToast = $('#loadingToast');
if ($loadingToast.css('display') != 'none')
return;
})
// 图片上传
function changeFile() {
ImageUtil.compress(event, (image) => {
if (!image) {
console.log('image is null')
return
}
var loading = document.getElementById('loading');
loading.style.display = "inline";
$.ajax({
type: 'post',
url: '/wx/api/idcard',
data: {
image: image
},
dataType: 'json',
success: function (resp) {
if (resp.code === 200) {
var data = resp.data
$('#name').val(data.name);
$('#idcardno').val(data.iDCard);
$('#address').val(data.address);
$('#nation').val(data.nation);
if (data.sex === '男') {
$('#sex').val(1);
} else if (data.sex === '女') {
$('#sex').val(2);
}
$('#birthday').val(data.birth.replace(/^(\d{4})(\d{2})(\d{2})$/, "$1-$2-$3"));
$('#tel').focus();
} else {
alert("身份证识别失败!请在光线良好的条件下重新拍照")
}
loading.style.display = 'none'
},
error: function () {
alert('对不起,网络故障,请您手动填写信息!');
loading.style.display = 'none'
}
});
}, true)
}
function bind() {
if ($.trim($('#idcardno').val()).length != 18) {
alert("请输入正确的身份证号");
return;
}
if ($.trim($('#name').val()).length == 0) {
alert('请输入姓名');
return;
}
if ($.trim($('#nation').val()).length == 0) {
alert('请选择民族');
return;
}
if ($.trim($('#birthday').val()).length == 0) {
alert('请输入出生日期');
return;
}
if ($.trim($('#tel').val()).length != 11) {
alert('请输入正确的手机号');
return;
}
if ($.trim($('#address').val()).length == 0) {
alert('请输入家庭住址');
return;
}
var sex = $('#sex').val()
sex = (sex % 2 === 0) ? '女' : '男'
$loadingToast.fadeIn(100);
$.post('/wx/healthCode/bind.do',
{
token: new Date().getTime(),
openid: "${openID}",
idCardNo: $('#idcardno').attr('value'),
name: $('#name').attr('value'),
sex: sex,
birthday: $('#birthday').attr('value'),
tel: $('#tel').attr('value'),
address: $('#address').attr('value'),
nation: $('#nation').attr('value'),
cardType: 0
},
function (resp, status) {
if (resp.code === 200) {
alert("绑定成功!");
window.location.href = 'my-info.html'
} else {
alert("绑定失败,请重试![" + resp.message + "]");
}
$loadingToast.fadeOut(100);
}
)
}
function ExtractionBirthday() {
var txtparm = $('#idcardno').attr('value');
if (txtparm.length == 18) {
var year = txtparm.substring(6, 10);
var month = txtparm.substring(10, 12);
var date = txtparm.substring(12, 14);
var sex = txtparm.substring(16, 17);
$('#birthday').val(year + "-" + month + "-" + date);
if (sex % 2 == 0) {
$('#sex').val("2");
} else {
$('#sex').val("1");
}
} else {
alert("输入的身份证不正确!");
$('#idcardno').focus();
$('#idcardno').val("");
}
}
</script>
</head>
<body>
<div id="loadingToast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-loading weui-icon_toast"></i>
<p class="weui-toast__content">数据加载中</p>
</div>
</div>
<!-- 加载动画 -->
<div id="loading"
style="position: fixed; width: 100%; height: 100%; z-index: 100; background-color: #666; opacity: 0.8; display: none;">
<img id="loadImg" style="width: 70px;height: 70px; position: absolute; left: 42%; top: 43%; opacity: 1;"
src="data:image/gif;base64,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
</div>
<!-- 扫一扫 -->
<div class="weui-cells__title" style="margin:0;padding:7px 0 7px 10px;">
<div style="float:left;">输入个人信息</div>
<div style="float:right; margin-right:9px;">
<input type="file" style="position:absolute;opacity: 0;right:0;width:110px;top: 10px;" accept="image/*"
onchange="changeFile(this)">
<svg style="vertical-align: -4px;" t="1594004253445" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="17101" width="20" height="20">
<path
d="M325.818182 930.909091H93.090909V698.181818h46.545455v186.181818h186.181818zM139.636364 325.818182H93.090909V93.090909h232.727273v46.545455H139.636364zM930.909091 930.909091H698.181818v-46.545455h186.181818v-186.181818h46.545455zM930.909091 325.818182h-46.545455V139.636364h-186.181818V93.090909h232.727273zM209.454545 488.727273h605.09091v46.545454H209.454545z"
fill="#1296db" p-id="17102"></path>
</svg>
<span>身份证识别</span>
</div>
<div style="clear:both;"></div>
</div>
<!-- 身份证画布 -->
<canvas id="canvas" style="opacity: 0; position: absolute; bottom: 0;"></canvas>
<div class="weui-cells weui-cells_form" style="margin:0; font-size:16px;">
<div class="weui-cell">
<div class="weui-cell__hd">
<label class="weui-label">身份证号</label>
</div>
<div class="weui-cell__bd">
<input id="idcardno" class="weui-input" placeholder="请输入身份证号" onblur="ExtractionBirthday();" />
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd">
<label class="weui-label">姓名</label>
</div>
<div class="weui-cell__bd">
<input id="name" class="weui-input" placeholder="请输入姓名" />
</div>
</div>
<div class="weui-cell weui-cell_select weui-cell_select-after">
<div class="weui-cell__hd">
<label for="" class="weui-label">性别</label>
</div>
<div class="weui-cell__bd">
<select class="weui-select" id="sex">
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>
</div>
<div class="weui-cell weui-cell_select weui-cell_select-after">
<div class="weui-cell__hd">
<label for="" class="weui-label">民族</label>
</div>
<div class="weui-cell__bd">
<select class="weui-select" id="nation">
<option value=""></option>
<option value="汉族">汉族</option>
<option value="哈尼族">哈尼族</option>
<option value="彝族">彝族</option>
<option value="回族">回族</option>
<option value="苗族">苗族</option>
<option value="壮族">壮族</option>
<option value="傣族">傣族</option>
<option value="白族">白族</option>
<option value="藏族">藏族</option>
<option value="蒙古族">蒙古族</option>
<option value="维吾尔族">维吾尔族</option>
<option value="布依族">布依族</option>
<option value="朝鲜族">朝鲜族</option>
<option value="满族">满族</option>
<option value="侗族">侗族</option>
<option value="瑶族">瑶族</option>
<option value="土家族">土家族</option>
<option value="哈萨克族">哈萨克族</option>
<option value="黎族">黎族</option>
<option value="傈僳族">傈僳族</option>
<option value="佤族">佤族</option>
<option value="畲族">畲族</option>
<option value="高山族">高山族</option>
<option value="拉祜族">拉祜族</option>
<option value="水族">水族</option>
<option value="东乡族">东乡族</option>
<option value="纳西族">纳西族</option>
<option value="景颇族">景颇族</option>
<option value="柯尔克孜族">柯尔克孜族</option>
<option value="土族">土族</option>
<option value="达斡尔族">达斡尔族</option>
<option value="仫佬族">仫佬族</option>
<option value="羌族">羌族</option>
<option value="布朗族">布朗族</option>
<option value="撒拉族">撒拉族</option>
<option value="毛南族">毛南族</option>
<option value="仡佬族">仡佬族</option>
<option value="锡伯族">锡伯族</option>
<option value="阿昌族">阿昌族</option>
<option value="普米族">普米族</option>
<option value="塔吉克族">塔吉克族</option>
<option value="怒族">怒族</option>
<option value="乌孜别克族">乌孜别克族</option>
<option value="俄罗斯族">俄罗斯族</option>
<option value="鄂温克族">鄂温克族</option>
<option value="德昂族">德昂族</option>
<option value="保安族">保安族</option>
<option value="裕固族">裕固族</option>
<option value="京族">京族</option>
<option value="塔塔尔族">塔塔尔族</option>
<option value="独龙族">独龙族</option>
<option value="鄂伦春族">鄂伦春族</option>
<option value="赫哲族">赫哲族</option>
<option value="门巴族">门巴族</option>
<option value="珞巴族">珞巴族</option>
<option value="基诺族">基诺族</option>
</select>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd">
<label for="" class="weui-label">出生日期</label>
</div>
<div class="weui-cell__bd">
<input id="birthday" class="weui-input" type="date" value="" />
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd">
<label class="weui-label">手机号</label>
</div>
<div class="weui-cell__bd">
<input id="tel" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号" />
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd">
<label class="weui-label">住址</label>
</div>
<div class="weui-cell__bd">
<input id="address" class="weui-input" placeholder="请输入详细住址" />
</div>
</div>
</div>
<div class="weui-btn-area">
<a class="weui-btn weui-btn_primary" href="javascript:bind();" id="showTooltips">确定</a>
</div>
</body>
</html>