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.
432 lines
12 KiB
432 lines
12 KiB
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> |
|
<title>身份认证</title> |
|
<!--REM自适应布局JS--> |
|
<link rel="stylesheet" type="text/css" href="../../../lib/css/mui.min.css"> |
|
<link rel="stylesheet" type="text/css" href="../../../lib/css/basic.css"/> |
|
<link rel="stylesheet" type="text/css" href="../../css/base.css" /> |
|
<script src="../../../lib/js/mui.min.js"></script> |
|
<script src="../../../lib/js/vue.js"></script> |
|
<script src="../../../lib/js/app.js"></script> |
|
<script src="../../js/base/rem-layout.js"></script> |
|
<script type="text/javascript" src="../../js/my/my_ajax.js"></script> |
|
<script src="../../../lib/js/require2.1.11.js"></script> |
|
</head> |
|
<style> |
|
.upload-box { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
margin-bottom: 0.8rem; |
|
} |
|
|
|
.upload-img { |
|
overflow: hidden; |
|
width: 4.5rem; |
|
height: 3rem; |
|
border-radius: 0.2rem; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
position: relative; |
|
} |
|
|
|
.upload-img:before { |
|
overflow: hidden; |
|
display: block; |
|
content: ""; |
|
position: absolute; |
|
width: 3.8rem; |
|
height: 2.5rem; |
|
background-image: url(../../img/wallet/frame.png); |
|
background-repeat: no-repeat; |
|
background-size: 100% 100%; |
|
top: .24rem; |
|
left: .31rem; |
|
} |
|
|
|
|
|
.uimg { |
|
width: 3.5rem; |
|
border-radius: 0.1rem; |
|
/*z-index: 999;*/ |
|
z-index: 2; |
|
} |
|
|
|
.upload-title { |
|
color: #B6B6B6; |
|
margin: 0.3rem 0; |
|
} |
|
|
|
.example-box { |
|
color: #B6B6B6; |
|
margin-bottom: 0.25rem; |
|
} |
|
|
|
.example-body { |
|
margin: 0.3rem 0 0.4rem 0; |
|
overflow: hidden; |
|
} |
|
|
|
.example-img-div { |
|
float: left; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: flex-start; |
|
margin: 0 0 0 0.1rem; |
|
} |
|
|
|
.example-img-bg { |
|
overflow: hidden; |
|
width: 1.4rem; |
|
height: 1rem; |
|
border-radius: 0.1rem; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
|
|
.bg-first { |
|
margin: 0; |
|
} |
|
|
|
.example-img { |
|
width: 1.2rem; |
|
border-radius: 0.1rem; |
|
} |
|
|
|
.img2 { |
|
opacity: 0.4; |
|
} |
|
|
|
.example-img-icon-div { |
|
width: 100%; |
|
text-align: center; |
|
margin: 0.1rem 0 0 0; |
|
} |
|
|
|
.example-img-icon { |
|
width: 0.25rem; |
|
height: 0.25rem; |
|
} |
|
|
|
.example-explain-title { |
|
margin: 0 0 0.3rem 0; |
|
} |
|
|
|
.example-explain div { |
|
padding: 0.1rem 0 0.1rem 0; |
|
} |
|
.app-background-color{ |
|
background: #ebeff3 !important; |
|
} |
|
</style> |
|
|
|
<body> |
|
<div id="data-info"> |
|
<header class="mui-bar mui-bar-nav app-header app-header-darkly"> |
|
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> |
|
<h1 class="mui-title">{{langue.MyIdentityTitle}}</h1> |
|
<a class=" mui-pull-right mui-icon-right-nav" style="font-size: .24rem; color: #333333;" v-if="userLocalStorage.lowAuth == 'F'" @click="rejection">驳回原因</a> |
|
</header> |
|
<div class="mui-content"> |
|
<div class="upload-box"> |
|
<div class="upload-title utitle1">{{langue.MyIdentityPortrait}}</div> |
|
<div id="portrait" class="upload-img uimg1-div app-background-color"> |
|
<img class="uimg mui-hidden" src="" data-key="portrait_src" /> |
|
</div> |
|
<div class="upload-title utitle2">{{langue.MyIdentityNationalEmblem}}</div> |
|
<div id="national" class="upload-img uimg2-div app-background-color"> |
|
<img class="uimg mui-hidden" src="" data-key="national_src" /> |
|
</div> |
|
<button id="next" class="app-btn app-btn-darkly">{{langue.NextBtn}}</button> |
|
</div> |
|
<div class="example-box"> |
|
<div class="example-title">{{langue.MyIdentityExampleTitle}}</div> |
|
<div class="example-body"> |
|
<div class="example-img-div bg-first "> |
|
<div class="example-img-bg app-background-color"> |
|
<img src="../../img/example.jpg" class="example-img" /> |
|
</div> |
|
<div class="example-img-icon-div"> |
|
<img src="../../img/success.png" class="example-img-icon" /> {{langue.MyIdentityExampleText1}} |
|
</div> |
|
</div> |
|
|
|
<div class="example-img-div"> |
|
<div class="example-img-bg app-background-color"> |
|
<img src="../../img/example.jpg" class="example-img img1" /> |
|
</div> |
|
<div class="example-img-icon-div"> |
|
<img src="../../img/error.png" class="example-img-icon" /> {{langue.MyIdentityExampleText2}} |
|
</div> |
|
</div> |
|
|
|
<div class="example-img-div"> |
|
<div class="example-img-bg app-background-color"> |
|
<img src="../../img/example.jpg" class="example-img img2" /> |
|
</div> |
|
<div class="example-img-icon-div"> |
|
<img src="../../img/error.png" class="example-img-icon" /> {{langue.MyIdentityExampleText3}} |
|
</div> |
|
</div> |
|
|
|
<div class="example-img-div"> |
|
<div class="example-img-bg app-background-color"> |
|
<img src="../../img/exposure.jpg" class="example-img img3" /> |
|
</div> |
|
<div class="example-img-icon-div"> |
|
<img src="../../img/error.png" class="example-img-icon" /> {{langue.MyIdentityExampleText4}} |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="example-img-explain"> |
|
<div class="example-explain-title">{{langue.MyIdentityExplainTitle}}</div> |
|
<div class="example-explain"> |
|
<div>{{langue.MyIdentityExplainText1}}</div> |
|
<div>{{langue.MyIdentityExplainText2}}</div> |
|
<div>{{langue.MyIdentityExplainText3}}</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</body> |
|
|
|
</html> |
|
<script> |
|
// 国际化 |
|
var langues = { |
|
zh_CN: { |
|
MyIdentityTitle: "身份认证", |
|
MyIdentityPortrait: "请上传您的身份证人像面", |
|
MyIdentityNationalEmblem: "请上传您的身份证国徽面", |
|
MyIdentityExampleTitle: "拍摄实例", |
|
MyIdentityExampleText1: "标准", |
|
MyIdentityExampleText2: "边框缺失", |
|
MyIdentityExampleText3: "照片模糊", |
|
MyIdentityExampleText4: "闪光强烈", |
|
MyIdentityExplainTitle: "上传要求", |
|
MyIdentityExplainText1: "1.必须能看清身份证信息。", |
|
MyIdentityExplainText2: "2.照片内容真实有效，不得做任何修改。", |
|
MyIdentityExplainText3: "3.必须能看清证件号和姓名，支持 jpg/jpeg/png。", |
|
MyIdentityAlertMsg: "请上传您的身份证照片！", |
|
ActionSheetBtn1: "拍照", |
|
ActionSheetBtn2: "从相册中选择", |
|
PicturesFailedMsg: "拍照失败：", |
|
AlertMsg: "提示", |
|
NextBtn: "下一步" |
|
|
|
}, |
|
zh_HK: { |
|
MyIdentityTitle: "身份認證", |
|
MyIdentityPortrait: "請上傳您的身份證人像面", |
|
MyIdentityNationalEmblem: "請上傳您的身份證國徽面", |
|
MyIdentityExampleTitle: "拍攝實例", |
|
MyIdentityExampleText1: "標準", |
|
MyIdentityExampleText2: "邊框缺失", |
|
MyIdentityExampleText3: "照片模糊", |
|
MyIdentityExampleText4: "閃光強烈", |
|
MyIdentityExplainTitle: "上傳要求", |
|
MyIdentityExplainText1: "1.必須能看清身份證信息。", |
|
MyIdentityExplainText2: "2.照片內容真實有效，不得做任何修改。", |
|
MyIdentityExplainText3: "3.必須能看清證件號和姓名，支持 jpg/jpeg/png。", |
|
MyIdentityAlertMsg: "請上傳您的身份證照片！", |
|
ActionSheetBtn1: "拍照", |
|
ActionSheetBtn2: "從相冊中選擇", |
|
PicturesFailedMsg: "拍照失敗：", |
|
AlertMsg: "提示", |
|
NextBtn: "下壹步" |
|
}, |
|
en_US: { |
|
MyIdentityTitle: "Authentication", |
|
MyIdentityPortrait: "Upload the portrait face of your ID card", |
|
MyIdentityNationalEmblem: "Upload the national emblem face of your ID card", |
|
MyIdentityExampleTitle: "Shooting Examples", |
|
MyIdentityExampleText1: "standard", |
|
MyIdentityExampleText2: "missing border", |
|
MyIdentityExampleText3: "blurred photo", |
|
MyIdentityExampleText4: "intense flash", |
|
MyIdentityExplainTitle: "Requests", |
|
MyIdentityExplainText1: "1.The information of ID card is clear.", |
|
MyIdentityExplainText2: "2.The content of photo is real and valid. Any modification is not allowed.", |
|
MyIdentityExplainText3: "3.The card number and your name are clear. Supported format: jpg/jpeg/png.", |
|
MyIdentityAlertMsg: "Please upload your id photo.", |
|
ActionSheetBtn1: "Photograph", |
|
ActionSheetBtn2: "Photo album selection", |
|
PicturesFailedMsg: "Pictures failed", |
|
AlertMsg: "Reminder", |
|
NextBtn: "Next" |
|
} |
|
} |
|
</script> |
|
<script> |
|
var v = new Vue({ |
|
el: "#data-info", |
|
data: { |
|
langue: langues[app.getLanguageLocalStorage()], |
|
userLocalStorage:app.getUserLocalStorage(), |
|
reject:'' |
|
}, |
|
methods:{ |
|
rejection:function(){ |
|
mui.alert(this.reject,'驳回原因：', function() { |
|
}); |
|
} |
|
} |
|
}) |
|
|
|
var national_src = null; //国徽面src |
|
var portrait_src = null; //人像面src |
|
mui.plusReady(function() { |
|
if(v.userLocalStorage.lowAuth == 'F'){ |
|
selectLowmaskStatus(); |
|
} |
|
mui(); |
|
//点击下一页 |
|
document.getElementById("next").addEventListener("tap", function() { |
|
//校验数据 |
|
if(null == national_src || null == portrait_src) { |
|
mui.toast(v.langue.MyIdentityAlertMsg); |
|
} else { |
|
mui.openWindow({ |
|
id: 'mine/html/my/my_identity_next.html', |
|
url: 'my_identity_next.html', |
|
extras: { |
|
national_src: national_src, |
|
portrait_src: portrait_src |
|
} |
|
}); |
|
} |
|
|
|
}); |
|
// document.getElementById("bohui").addEventListener("tap", function() { |
|
// |
|
// |
|
// }); |
|
|
|
//点击选择身份证图片 |
|
mui(".upload-box").on("tap", ".upload-img", function() { |
|
var imgDivId = this.id; |
|
plus.nativeUI.actionSheet({ |
|
title: v.langue.ActionSheetIdentityTitle, |
|
cancel: v.langue.ActionSheetCancel, |
|
buttons: [{ |
|
title: v.langue.ActionSheetBtn1 |
|
}, |
|
{ |
|
title: v.langue.ActionSheetBtn2 |
|
} |
|
] |
|
}, function(b) { /*actionSheet 按钮点击事件*/ |
|
switch(b.index) { |
|
case 0: |
|
break; |
|
case 1: |
|
cameramImg(imgDivId + "_src"); /*拍照选择*/ |
|
break; |
|
case 2: |
|
galleryImg(imgDivId + "_src"); /*从相册中选择*/ |
|
break; |
|
default: |
|
break; |
|
} |
|
}); |
|
}); |
|
}); |
|
|
|
//从相册中选择图片 |
|
function galleryImg(imgKey) { |
|
// 从相册中选择图片 |
|
plus.gallery.pick(function(path) { |
|
cropImageFun(path, imgKey); |
|
}); |
|
} |
|
|
|
//从拍照获得图片 |
|
function cameramImg(imgKey) { |
|
var cmr = plus.camera.getCamera(); |
|
cmr.captureImage(function(path) { |
|
plus.io.resolveLocalFileSystemURL(path, function(sucss) { |
|
var src = sucss.toLocalURL(); |
|
cropImageFun(src, imgKey); |
|
}, function(err) { |
|
mui.toast(v.langue.PicturesFailedMsg + err.message, v.langue.AlertMsg); |
|
}); |
|
}, function(err) { |
|
mui.toast(v.langue.PicturesFailedMsg + err.message, v.langue.AlertMsg); |
|
}, {}); |
|
} |
|
|
|
/** |
|
* |
|
* @param {Object} src 图片路径 |
|
*/ |
|
function cropImageFun(src, imgKey) { |
|
console.log("imgKey: " + imgKey); |
|
mui.openWindow({ |
|
id: "mine/html/crop-identity-image.html", |
|
url: "crop-identity-image.html", |
|
extras: { |
|
imgSrc: src, |
|
imgKey: imgKey |
|
}, |
|
}); |
|
} |
|
|
|
/** |
|
* 替换图片 |
|
*/ |
|
function saveAuthImg(src, imgKey) { |
|
mui(".upload-img").each(function() { |
|
var imgObj = this.getElementsByTagName("img")[0]; |
|
if(imgKey == imgObj.getAttribute("data-key")) { |
|
imgObj.src = app.walletFileUrl + src; |
|
imgObj.classList.remove("mui-hidden"); |
|
if("national_src" == imgKey) { |
|
national_src = src; |
|
} else if("portrait_src" == imgKey) { |
|
portrait_src = src; |
|
} |
|
return false; |
|
} |
|
}) |
|
} |
|
|
|
/** |
|
* 查询用户认证失败的情况 |
|
*/ |
|
function selectLowmaskStatus() { |
|
var userid = {userId:v.userLocalStorage.id}; |
|
console.log(myAjaxJs.AJAX_LOWMASK_STATUS.getUrl); |
|
mui.ajax(myAjaxJs.AJAX_LOWMASK_STATUS.getUrl, { |
|
headers: { |
|
"X-CSRF-TOKEN": localStorage.getItem("user_token") |
|
}, |
|
async: false, |
|
data:userid, |
|
type: myAjaxJs.AJAX_LOWMASK_STATUS.getType, //HTTP请求类型 |
|
dataType: 'json', //服务器返回json格式数据 |
|
timeout: 5000, |
|
success: function(data) { |
|
if("200" == data.code) { |
|
v.reject = data.data; |
|
console.log(v.reject); |
|
} |
|
}, |
|
error: function(xhr, type, errorThrown) { |
|
app.toast(langue.AjaxError); |
|
} |
|
}) |
|
} |
|
|
|
// 国际化统一方法 |
|
window.addEventListener('switchLangueData', function(e) { |
|
dataInfo.langue = langues[e.detail]; |
|
}); |
|
</script> |