我觉着这代码应该没问题来着,总是不对。
望大家来找茬,我对appcan其实不熟悉
<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="../../static/ui/css/ui-box.css">
<link rel="stylesheet" href="../../static/mdui/css/mdui.css">
<link rel="stylesheet" type="text/css" href="../../static/mdui/fonts/font-awesome.min.css">
<link rel="stylesheet" href="../../static/ui/css/ui-base.css">
<link rel="stylesheet" href="../../static/ui/css/ui-color.css">
<link rel="stylesheet" href="../../static/ui/css/appcan.icon.css">
<link rel="stylesheet" href="../../static/ui/css/appcan.control.css">
<link rel="stylesheet" href="../../static/mdui/css/mdui.listpicker.css">
<link rel="stylesheet" href="../../static/mdui/css/mdui.dtpicker.css">
<link rel="stylesheet" href="../../static/mdui/css/custom.css">
<style>
.mdui-table-view-cell:last-child:before, .mdui-table-view-cell:last-child:after{
height: .0625rem !important;
}
.mdui-table-view-cell:after{
left: 0 !important;
}
.mdui-table-view-cell{
padding:.3rem 0 !important;
}
.mdui-table-view-cell > a:not(.mdui-btn){
margin: 0 !important;
padding-left: 0.875rem;
}
.mdui-popover .mdui-popover-arrow:after{
height:0 !important;
}
.custome-sex-ul li:after,.custome-sex-ul li:last-child:after{
height: 0 !important;
}
.custome-sex-ul li{
color: #ccc;
}
.mdui-popover .mdui-table-view .mdui-table-view-cell:first-child, .mdui-popover .mdui-table-view .mdui-table-view-cell:first-child > a:not(.mui-btn){
border-radius: 0 !important;
}
#exit{
left: 50% !important;
margin-left: -8.75rem !important;
}
.red-cube,.blue-cube,.green-cube{
width:100%;
height: 5rem;
}
.mdui-table-view-cell > a:not(.mdui-btn){
padding: 0 !important;
}
</style>
</head>
<body class="um-vp " ontouchstart >
<div id="page_0" class="up ub ub-ver bc-bg" tabindex="0">
<!--header开始-->
<div id="header" class="uh bc-text-head ub bc-head">
<div class="nav-btn" id="nav-left">
<div class="fa fa-angle-left fa-2x"></div>
</div>
<h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">实名认证</h1>
<div class="nav-btn nav-bt" id="nav-right">
<div class="ub-img iocn-more umw2 umh4"></div>
</div>
</div>
<!--header结束--><!--content开始-->
<div id="content" class="ub-f1 tx-l" style="overflow-y: auto;overflow-x:hidden;background-color: #fff; padding:0 0.75rem;">
<ul class="mdui-table-view">
<Li class="mdui-table-view-cell">
<div class="mdui-box">
<div class="certi-name">姓 名</div>
<div class="mdui-box-flex-1">
<input type="text" class="cierti-ipt" id="name-iptID" >
</div>
</div>
</Li>
<Li class="mdui-table-view-cell">
<div class="mdui-box">
<div class="certi-name">性 别</div>
<div class="mdui-box-flex-1">
<a class="sex-choose">
<div type="text" class="cierti-ipt" id="cierti-ipt" style="padding-left: 0.9375rem"></div>
</a>
</div>
</div>
</Li>
<Li class="mdui-table-view-cell">
<div class="mdui-box">
<div class="certi-name" >出生日期</div>
<div class="mdui-box-flex-1">
<div class="cierti-ipt btn mdui-btn mdui-btn-block certi-name dateTimeing" id="birthday"></div>
</div>
</div>
</Li>
<Li class="mdui-table-view-cell">
<div class="mdui-box">
<div class="certi-name">家庭住址</div>
<div class="mdui-box-flex-1">
<input type="text" class="cierti-ipt" id="familyAddress"/>
</div>
</div>
</Li>
<Li class="mdui-table-view-cell">
<div class="mdui-box">
<div class="certi-name">身份证号</div>
<div class="mdui-box-flex-1">
<input type="text" class="cierti-ipt" id="idNumber"/>
</div>
</div>
</Li>
<Li class="mdui-table-view-cell">
<div class="mdui-box">
<div class="certi-name">发证机关</div>
<div class="mdui-box-flex-1">
<input type="text" class="cierti-ipt" id="licenceIssuingAuthority"/>
</div>
</div>
</Li>
<Li class="mdui-table-view-cell">
<div class="mdui-box">
<div class="certi-name">有效期起</div>
<div class="mdui-box-flex-1">
<div class="cierti-ipt btn mdui-btn mdui-btn-block certi-name dateTimeing" id="startTime"></div>
</div>
</div>
</Li>
<Li class="mdui-table-view-cell">
<div class="mdui-box">
<div class="certi-name">有效期止</div>
<div class="mdui-box-flex-1">
<div class="cierti-ipt btn mdui-btn mdui-btn-block certi-name dateTimeing" id="endTime"></div>
</div>
</div>
</Li>
</ul>
<p class="export-Notes">你需要上传:1、身份证正面照片;2、身份证背面照片;3、持证半身照</p>
<ul class="mdui-table-view export-img ">
<li class="mdui-table-view-cell mdui-col-xs-4" >
<div >
<input type="hidden" id="photo1"/>
<img myAttr="1" style="height: 4rem;width: 4rem;" class="photo-a" src="../../static/app/img/index/add_pic.png">
</div>
</li>
<li class="mdui-table-view-cell mdui-col-xs-4" >
<div >
<input type="hidden" id="photo2"/>
<img myAttr="2" src="../../static/app/img/index/add_pic.png" style="height: 4rem;width: 4rem;" class="photo-a">
</div>
</li>
<li class="mdui-table-view-cell mdui-col-xs-4" >
<div >
<input type="hidden" id="photo3"/>
<img myAttr="3" src="../../static/app/img/index/add_pic.png" style="height: 4rem;width: 4rem;" class="photo-a">
</div>
</li>
</ul>
<button class="certi-btn" id="determine-btn">确定</button>
</div>
<!--content结束-->
</div>
<!--身份证填写-->
<div class="card-bg" style="display: none">
<div class="card-img">
<div class="card-content">
<div class="card-content-one">
<span>1</span>
<em class="hide-span"></em>
<p>找一处背景颜色比较纯、光线明亮适中的地方在拍摄时,确保五冠和照片基本一致,不要遮挡面部,如果女生头发比较长,可以用橡筋扎起来。</p>
<P><img src="../../static/app/img/index/cardPerson.png"> </P>
</div>
<div class="card-content-one">
<span>2</span>
<em class="hide-span"></em>
<p>证件上的文字清晰可识别</p>
<P><img src="../../static/app/img/index/cardZ.png"> </P>
</div>
<div class="card-content-one last-cardone">
<span>3</span>
<p>证件上的文字清晰可识别,证件有效期在一个月以上</p>
<P><img src="../../static/app/img/index/cardF.png"> </P>
</div>
</div>
</div>
</div>
<!--性别选择-->
<div class="exitbg" >
<div class=" exit-content" style="height: auto;" >
<div ><p class=" certi-title" > 请选择</p></div>
<div class="" >
<ul class="mdui-table-view certi-ul" >
<li class="mdui-table-view-cell" id="cancel">
<a>女</a>
</li>
<li class="mdui-table-view-cell" id="quit">
<a>男</a>
</li>
</ul>
</div>
</div>
</div>
<!--相机弹出框-->
<div class="showphone take-phonto">
<div>
<ul class="mdui-table-view takePhoto">
<li class="mdui-table-view-cell">
<a class="choose-file-a Choose_Album" >
从手机中选择
</a>
</li>
<li class="mdui-table-view-cell">
<a class="takeing_ph">拍照</a>
</li>
</ul>
<ul class="mdui-table-view">
<li class="mdui-table-view-cell">
<a οnclick="closeShow()"><b>取消</b></a>
</li>
</ul>
</div>
</div>
<!--相机弹出框-->
<div class="showphone del-take-phonto">
<div>
<ul class="mdui-table-view takePhoto" >
<li class="mdui-table-view-cell">
<a class="choose-file-a big-picture">
查看大图
</a>
</li>
<li class="mdui-table-view-cell">
<a class="delphone">删除</a>
</li>
</ul>
<ul class="mdui-table-view">
<li class="mdui-table-view-cell">
<a οnclick="closeShow()"><b>取消</b></a>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="../../static/mdui/js/mdui.min.js"></script>
<script src="../../static/ui/js/appcan.js"></script>
<script src="../../static/ui/js/appcan.control.js"></script>
<script src="../../static/ui/js/appcan.tab.js"></script>
<script src="../../static/common/js/server.js"></script>
<script>
//照片提交路径
var uploadHttp="http://125.70.9.159:8081/file/file_operator/upload";
var uploadKey=1;
$.uexWindowReady(function (){
//返回
$("#nav-left").on('tap',function () {
$.closeWin();
});
//填写写信内容
$("#custome-createLetter").on('tap',function () {
$.openWin({
name:'letter',
url:'user_appeal_pub_content.html',
animId:2,
animDuration:200,
pageParam:{}
});
});
});
/*
*时间日期函数
*/
/*function DateChoose(birthyday){
var myDate = new Date();
var yearDate=myDate.toLocaleDateString();
uexControl.openDatePicker(yearDate);
uexControl.cbOpenDatePicker = function(opId,dataType,data) {
var obj = eval('('+data+')');
var htmlyear=obj.year+"-"+obj.month+"-"+obj.day;
birthyday.innerHTML=htmlyear;
}
}*/
$(".dateTimeing").on('tap',function(){
var myDate = new Date();
var yearDate=myDate.toLocaleDateString();
uexControl.openDatePicker(yearDate);
var thising=$(this);
uexControl.cbOpenDatePicker = function(opId,dataType,data) {
var obj = eval('('+data+')');
var htmlyear=obj.year+"-"+obj.month+"-"+obj.day;
thising.html(htmlyear)
}
return "";
});
/*弹出显示框
*/
$("#cierti-ipt").on('tap',function () {
$(".exitbg").show();
});
//获取性别的值
$(".certi-ul li a").on('tap',function() {
$("#cierti-ipt").html($(this).html());
$(".exitbg").hide();
/*var e = window.event || event;
if ( e.stopPropagation ){ //如果提供了事件对象,则这是一个非IE浏览器
e.stopPropagation();
}else{
//兼容IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}*/
});
$(".card-bg").on('tap',function () {
$(".card-bg").hide();
});
/*照相机功能*/
$(".photo-a").on('tap',function () {
var photo=$(this);
if(photo.attr('src')=='../../static/app/img/index/add_pic.png'){
/*调用appcan相机*/
$(".take-phonto").show();
$(".takeing_ph").on('tap',function () {
uexCamera.open();
});
/*从相册中选择*/
$(".Choose_Album").on('tap',function () {
uexImageBrowser.pick();
});
/*相册回调函数*/
uexImageBrowser.cbPick=function(opCode, dataType, data) {
photo.attr("src",data);
$(".take-phonto").hide();
uploadImg(data);
};
/*相机的回调函数*/
uexCamera.cbOpen = function(opCode, dataType, data){
if(dataType==0){
photo.attr("src",data);
$(".take-phonto").hide();
uploadImg(data);
}
};
/*上传回调函数*/
uexUploaderMgr.cbCreateUploader = function(id, dataType, data){
if(data==0){
}else{
alert("上传失败");
uexUploaderMgr.closeUploader(uploadKey);
}
}
uexUploaderMgr.onStatus = function(opCode, fileSize, percent, serverPath,
status) {
switch (status) {
case 0:
showMask(true, '上传进度:' + percent + '%', 30, true);
break;
case 1:
alert("服务器上路径:"+serverPath);
uploadSeccess(serverPath);
break;
case 2:
appcan.window.alert("上传错误!");
break;
default:
appcan.window.alert("错误,上传遇到问题,请稍后再试。")
uexUploaderMgr.closeUploader(uploadKey);
uploadKey = uploadKey + 1;
hideMask();
break;
}
};
}else{
$(".del-take-phonto").show();
/*查看大图*/
$(".big-picture").on('tap',function () {
var bigsrc= photo.attr('src');
uexImageBrowser.open(bigsrc);
});
/*删除图片并换成默认的图片*/
$(".delphone").on('tap',function () {
photo.attr("src",'../../static/app/img/index/add_pic.png');
$(".del-take-phonto").hide();
})
}
});
function uploadSeccess(rsData){
var rsObj = $.parseJSON(rsData);
var num=$(this).attr("myAttr");
$("#photo"+num).val(rsObj.data);
appcan.window.openToast("上传成功", 1000);
uexUploaderMgr.closeUploader(uploadKey);
uploadKey = uploadKey + 1;
}
function uploadImg(data){
uexUploaderMgr.CreateUploader(uploadKey, uploadHttp);//创建上传工具
uexUploaderMgr.uploadFile(uploadKey, data, "file", 3);//上传文件
showMask(true, '正在上传图片,请稍后', 60, true);
}
function closeShow() {
$(".showphone").hide();
}
//遮罩样式
function showMask(isShowToast, msg, times, isProcess) {
$("#maskDiv").show();
if (isShowToast) {
appcan.window.openToast({
msg : msg,
duration : times * 1000,
position : 5,
type : isProcess ? 1 : 0
});
}
}
function hideMask() {
$("#maskDiv").hide();
appcan.window.closeToast();
}
/*
*非空验证
*/
function validate(){
var subObj={
isValid:true,
memberId:"",
cardType:'01',
};
var nameIptID=$("#name-iptID");//姓名
var sex=$("#cierti-ipt");//性别
var birthday=$("#birthday");//出生日期
var familyAddress=$("#familyAddress");//家庭住址
var idNumber=$("#idNumber");//身份证号
var licenceIssuingAuthority=$("#licenceIssuingAuthority");//发证机关
var startTime=$("#startTime");//有效期起
var endTime=$("#endTime");//有效期结束
if(nameIptID.val()=="" || nameIptID.val()==null){
alert("姓名不能为空");
subObj.isValid=false;
return subObj;
}
subObj.name=nameIptID.val();
if(sex.html()=="" ||sex.html()==null){
alert("性别不能空");
subObj.isValid=false;
return subObj;
}
subObj.sex=sex.html();
if(birthday.html()=="" || birthday.html()==null){
alert("出生日期不能为空");
subObj.isValid=false;
return subObj;
}
subObj.birthday=birthday.html();
if(familyAddress.val()=="" || familyAddress.val()==null){
alert("家庭住址不能为空");
subObj.isValid=false;
return subObj;
}
subObj.address=familyAddress.val();
if(idNumber.val()=="" || idNumber.val()==null){
alert("身份证号不能为空");
subObj.isValid=false;
return subObj;
}
if ( $.isIdcard(idNumber.val())==false){
alert("身份证号格式不正确");
subObj.isValid=false;
return subObj;
}
subObj.cardNo=idNumber.val();
if(licenceIssuingAuthority.val()=="" || licenceIssuingAuthority.val()==null){
alert("发证机关不能为空");
subObj.isValid=false;
return subObj;
}
subObj.cardChannel=licenceIssuingAuthority.val();
if(startTime.html()=="" || startTime.html()==null){
alert("有效期起不能为空");
subObj.isValid=false;
return subObj;
}
subObj.cardTime=startTime.html();
if(endTime.html()=="" || endTime.html()==null){
alert("有效期结束不能为空");
subObj.isValid=false;
return subObj;
}
subObj.cardLaster=endTime.html();
var photo1=$("#photo1").val();
if(appcan.trim(photo1)=="" || photo1==null){
alert("正面照片不能为空");
subObj.isValid=false;
return subObj;
}
subObj.cardFrontId=photo1;
var photo2=$("#photo2").val();
if(appcan.trim(photo2)=="" || photo2==null){
alert("背面照片不能为空");
subObj.isValid=false;
return subObj;
}
subObj.cardFrontId=photo2;
var photo3=$("#photo3").val();
if(appcan.trim(photo3)=="" || photo3==null){
alert("半身照片不能为空");
subObj.isValid=false;
return subObj;
}
subObj.cardFrontId=photo3;
return subObj;
}
$("#determine-btn").on('tap',function(){
var subObj=validate();
var url="http://125.70.9.159:8081/usercenter/memberIV/commit";
if(subObj.isValid){
showMask(true, '正在提交数据,请稍后', 60, 1);
appcan.ajax({
url:url,
data:subObj,
type:"POST",
success:function(rsData, status, requestCode, response,
xhr){
appcan.window.alert("成功", "实名认证信息提交成功,请等待审核.", "返回",function(){
alert("测试appcan");
});
},
error:function(){
alert("回调失败");
}
});
}
})
</script>
</body>
</html>