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
5 years ago
|
<!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>
|