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.
445 lines
13 KiB
445 lines
13 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; |
|
} |
|
|
|
.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%; |
|
} |
|
|
|
.uimg { |
|
width: 3.5rem; |
|
border-radius: 0.1rem; |
|
z-index: 2; |
|
} |
|
|
|
.example-box { |
|
color: #333333; |
|
margin: 0.25rem 0; |
|
} |
|
|
|
.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; |
|
} |
|
|
|
.note { |
|
color: #FC585C; |
|
margin-top: .55rem; |
|
line-height: .4rem; |
|
} |
|
|
|
.app-register-agree { |
|
margin-top: .25rem; |
|
} |
|
|
|
.mui-checkbox input[type=checkbox] { |
|
top: 13px; |
|
} |
|
|
|
.mui-checkbox input[type=checkbox]:before { |
|
font-size: 20px; |
|
color: #D43436 !important; |
|
} |
|
|
|
.app-register-agree label { |
|
color: #999999; |
|
} |
|
</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.AdvancedIdentityTitle}}</h1> |
|
<a class=" mui-pull-right mui-icon-right-nav" style="font-size: .24rem; color: #333333;" v-if="userLocalStorage.highAuth == 'F'" |
|
@click="rejection">{{langue.reject}}</a> |
|
</header> |
|
<div class="mui-content"> |
|
<div class="example-box"> |
|
<div class="example-img-explain"> |
|
<div class="example-explain-title">{{langue.AdvancedIdentityExplain}}</div> |
|
<div class="example-explain"> |
|
<div>{{langue.AdvancedIdentityTime}}</div> |
|
<div>{{langue.AdvancedIdentityWormhole}}</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="upload-box"> |
|
<div id="portrait" class="upload-img uimg1-div app-background-color"> |
|
<img id="upload-imgObj" class="uimg" src="../../img/shouchi.jpg" data-key="data_img_src" /> |
|
</div> |
|
<p class="note">{{langue.AdvancedIdentityCommitment}}</p> |
|
<div class="app-register-agree mui-input-row mui-checkbox mui-left"> |
|
<input id="agree-radio" name="radio1" type="checkbox"> |
|
<label for="agree-radio">{{langue.AdvancedIdentityCommitment}}</label> |
|
</div> |
|
<button id="next" class="app-btn app-btn-darkly">{{langue.AdvancedIdentitySubmit}}</button> |
|
</div> |
|
</div> |
|
</div> |
|
</body> |
|
|
|
</html> |
|
<script> |
|
// 国际化 |
|
var langues = { |
|
zh_CN: { |
|
AdvancedIdentityTitle: "高级认证", |
|
AdvancedIdentityExplain: "上传手持证件和声明书，声明书请在白纸上写：", |
|
AdvancedIdentityTime: "1.日期", |
|
AdvancedIdentityWormhole: "2.智信链", |
|
AdvancedIdentityText: "*请确保证件和声明书清晰可见，并将证件和声明书上的文字完整露出、避免遮挡", |
|
AdvancedIdentityCommitment: "我承诺所提供的资料为我本人所有，不存在盗用他人资料的情况", |
|
AdvancedIdentitySubmit: "提交", |
|
|
|
AdvancedIdentityExampleText1: "请勾选承诺声明！", |
|
AdvancedIdentityExampleText2: "请选择上传图片！", |
|
ActionSheetIdentityTitle: "选择图片", |
|
ActionSheetBtn1: "拍照", |
|
ActionSheetBtn2: "从相册中选择", |
|
PicturesFailedMsg: "拍照失败：", |
|
ShowWaiting: "等待中...", |
|
SubmitSuccessMsg: "提交成功！", |
|
ActionSheetCancel: "取消", |
|
reject: "驳回原因", |
|
rejectTitle: "驳回原因", |
|
sure: "确定", |
|
AlertMsg: "提示", |
|
authenticationSuccess: "认证成功！", |
|
}, |
|
zh_HK: { |
|
AdvancedIdentityTitle: "高級認證", |
|
AdvancedIdentityExplain: "上傳手持證件和聲明書，聲明書請在白紙上寫：", |
|
AdvancedIdentityTime: "1.日期", |
|
AdvancedIdentityWormhole: "2.智信鏈", |
|
AdvancedIdentityText: "*請確保證件和聲明書清晰可見，並將證件和聲明書上的文字完整露出、避免遮擋", |
|
AdvancedIdentityCommitment: "我承諾所提供的資料為我本人所有，不存在盜用他人資料的情況", |
|
AdvancedIdentitySubmit: "提交", |
|
|
|
AdvancedIdentityExampleText1: "請勾選承諾聲明！", |
|
AdvancedIdentityExampleText2: "請選擇上傳圖片！", |
|
ActionSheetIdentityTitle: "選擇圖片", |
|
ActionSheetBtn1: "拍照", |
|
ActionSheetBtn2: "從相冊中選擇", |
|
PicturesFailedMsg: "拍照失敗：", |
|
ShowWaiting: "等待中...", |
|
SubmitSuccessMsg: "提交成功！", |
|
ActionSheetCancel: "取消", |
|
reject: "駁回原因", |
|
rejectTitle: "駁回原因", |
|
sure: "確定", |
|
AlertMsg: "提示", |
|
authenticationSuccess: "認證成功！", |
|
}, |
|
en_US: { |
|
AdvancedIdentityTitle: "Advanced Certification", |
|
AdvancedIdentityExplain: "Transfer hand-held documents and declarations, please write on the white paper:", |
|
AdvancedIdentityTime: "1. Date", |
|
AdvancedIdentityWormhole: "2. ZhiXin", |
|
AdvancedIdentityText: "*Please make sure that the documents and declarations are clearly visible and that the text on the documents and declarations are completely exposed to avoid obscuration", |
|
AdvancedIdentityCommitment: "I promise that the information provided is owned by me and there is no misappropriation of other people's information.", |
|
AdvancedIdentitySubmit: "Submit", |
|
|
|
AdvancedIdentityExampleText1: "Please tick the promise statement!", |
|
AdvancedIdentityExampleText2: "Please select upload image!", |
|
ActionSheetIdentityTitle: "Select image", |
|
ActionSheetBtn1: "Photographing", |
|
ActionSheetBtn2: "Select from album", |
|
PicturesFailedMsg: "Photo failed:", |
|
ShowWaiting: "Waiting...", |
|
SubmitSuccessMsg: "Submit successfully!", |
|
ActionSheetCancel: "Cancel", |
|
reject: "Reject reason", |
|
rejectTitle: "Reject reason", |
|
sure: "Sure", |
|
AlertMsg: "Hint", |
|
authenticationSuccess: 'Authentication success!', |
|
} |
|
} |
|
</script> |
|
<script> |
|
var v = new Vue({ |
|
el: "#data-info", |
|
data: { |
|
langue: langues[app.getLanguageLocalStorage()], |
|
highImg: '', |
|
imgsUrl: '', |
|
userLocalStorage: app.getUserLocalStorage(), |
|
reject: '' |
|
}, |
|
methods: { |
|
rejection: function() { |
|
mui.alert(this.reject, this.langue.rejectTitle, this.langue.sure, function() {}); |
|
} |
|
} |
|
}) |
|
|
|
var data_img_src = null; |
|
mui.plusReady(function() { |
|
if (v.userLocalStorage.highAuth == 'F') { |
|
selecthighmaskStatus(); |
|
} |
|
//点击下一页 |
|
document.getElementById("next").addEventListener("tap", function() { |
|
if (!document.getElementById("agree-radio").checked) { |
|
mui.toast(v.langue.AdvancedIdentityExampleText1) |
|
return; |
|
} |
|
console.log("data_img_src: " + data_img_src); |
|
if (data_img_src == null) { |
|
mui.toast(v.langue.AdvancedIdentityExampleText2); |
|
return; |
|
} |
|
console.log(v.imgsUrl); |
|
saveIdentity(v.imgsUrl); |
|
}); |
|
|
|
//保存用户信息接口 |
|
function saveIdentity(urls) { |
|
console.log(urls) |
|
plus.nativeUI.showWaiting(v.langue.ShowWaiting); |
|
mui.ajax(myAjaxJs.AJAX_HIGH_AUTH.getUrl, { |
|
headers: { |
|
"X-Requested-Token": app.getTokenStorage(), // token头部 |
|
"locale": app.getLanguageLocalStorage() // 语种头部 |
|
}, |
|
data: { |
|
img: urls |
|
}, |
|
dataType: 'json', //服务器返回json格式数据 |
|
type: myAjaxJs.AJAX_HIGH_AUTH.getType, //HTTP请求类型 |
|
timeout: 10000, |
|
success: function(data) { |
|
if (data.code == "200") { |
|
plus.nativeUI.closeWaiting(); |
|
var userData = app.getUserLocalStorage(); |
|
userData.highAuth = 'W'; |
|
app.setUserLocalStorage(userData); |
|
mui.toast(v.langue.authenticationSuccess, v.langue.AlertMsg); |
|
var realname_identity = plus.webview.getWebviewById("mine/html/my/realname_identity.html"); |
|
realname_identity.evalJS("saveUserInfoData();"); |
|
realname_identity.show(); |
|
var _opener = self.opener(); |
|
self.close(); |
|
_opener.close(); |
|
} else if (data.code == "201" || data.code == "202") { //未登录 |
|
plus.nativeUI.closeWaiting(); |
|
mui.openWindow({ |
|
id: "mine/html/wallet_login.html", |
|
url: "../wallet_login.html" |
|
}); |
|
} else { |
|
plus.nativeUI.closeWaiting(); |
|
mui.toast(data.msg); |
|
} |
|
}, |
|
error: function(xhr, type, errorThrown) { |
|
plus.nativeUI.closeWaiting(); |
|
// mui.alert(langue.AjaxError2, langue.AlertMsg); |
|
} |
|
}); |
|
} |
|
|
|
//点击选择身份证图片 |
|
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) { |
|
saveAuthImg(path); |
|
}); |
|
} |
|
|
|
//从拍照获得图片 |
|
function cameramImg(imgKey) { |
|
var cmr = plus.camera.getCamera(); |
|
cmr.captureImage(function(path) { |
|
plus.io.resolveLocalFileSystemURL(path, function(sucss) { |
|
var src = sucss.toLocalURL(); |
|
saveAuthImg(src); |
|
}, function(err) { |
|
mui.toast(v.langue.PicturesFailedMsg + err.message, v.langue.AlertMsg); |
|
}); |
|
}, function(err) { |
|
mui.toast(v.langue.PicturesFailedMsg + err.message, v.langue.AlertMsg); |
|
}, {}); |
|
} |
|
|
|
/** |
|
* 替换图片 |
|
*/ |
|
function saveAuthImg(src) { |
|
var test = document.getElementById("test"); |
|
var imgObj = document.getElementById("upload-imgObj"); |
|
imgObj.src = src; |
|
console.log("-----src: " + src); |
|
data_img_src = src; |
|
data_img_src = src.replace('data:base64', 'data:image/jpeg;base64'); |
|
// var roundedCanvas = getRoundedCanvas(imgObj); |
|
// var imgBase64 = roundedCanvas.toDataURL("image/jpeg", 0.7).replace("data:image/jpeg;base64,", ""); |
|
// console.log("111"+ imgBase64) |
|
// uploadStringImgFile(imgBase64); |
|
setTimeout(function() { |
|
var roundedCanvas = getRoundedCanvas(imgObj); |
|
var imgBase64 = roundedCanvas.toDataURL("image/jpeg", 1).replace("data:image/jpeg;base64,", ""); |
|
console.log("111" + imgBase64) |
|
uploadStringImgFile(imgBase64); |
|
}, 1000); |
|
} |
|
|
|
// 上传服务器 |
|
function uploadStringImgFile(imgBase64Str) { |
|
console.log(imgBase64Str) |
|
plus.nativeUI.showWaiting(v.langue.ShowWaiting); |
|
mui.ajax(myAjaxJs.AJAX_UPLOAD_HIGH_AUTHFILE.getUrl, { |
|
headers: { |
|
"X-Requested-Token": app.getTokenStorage(), // token头部 |
|
"locale": app.getLanguageLocalStorage() // 语种头部 |
|
}, |
|
data: { |
|
file: imgBase64Str |
|
}, |
|
dataType: 'json', //服务器返回json格式数据 |
|
type: myAjaxJs.AJAX_UPLOAD_HIGH_AUTHFILE.getType, //HTTP请求类型 |
|
timeout: 10000, |
|
success: function(data) { |
|
if (data.code == "200") { |
|
plus.nativeUI.closeWaiting(); |
|
v.imgsUrl = data.data; |
|
console.log("22" + v.imgsUrl) |
|
} else { |
|
plus.nativeUI.closeWaiting(); |
|
mui.toast(data.msg); |
|
} |
|
}, |
|
error: function(xhr, type, errorThrown) { |
|
plus.nativeUI.closeWaiting(); |
|
// mui.alert("当前网络状况不佳，请稍后重试！", "提示") |
|
} |
|
}); |
|
} |
|
|
|
// 64位处理 |
|
function getRoundedCanvas(sourceCanvas) { |
|
var canvas = document.createElement('canvas'); |
|
var imgObj = document.getElementById("upload-imgObj"); |
|
var context = canvas.getContext('2d'); |
|
var width = sourceCanvas.width; |
|
var height = sourceCanvas.height; |
|
canvas.width = width; |
|
canvas.height = height; |
|
context.imageSmoothingEnabled = true; |
|
context.drawImage(sourceCanvas, 0, 0, width, height); |
|
context.globalCompositeOperation = 'destination-in'; |
|
context.beginPath(); |
|
context.fill(); |
|
return canvas; |
|
} |
|
/** |
|
* 查询用户认证失败的情况 |
|
*/ |
|
function selecthighmaskStatus() { |
|
var userid = { |
|
userId: v.userLocalStorage.id |
|
}; |
|
mui.ajax(myAjaxJs.AJAX_HIGHMASK_STATUS.getUrl, { |
|
headers: { |
|
"X-CSRF-TOKEN": localStorage.getItem("user_token") |
|
}, |
|
async: false, |
|
data: userid, |
|
type: myAjaxJs.AJAX_HIGHMASK_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>
|
|
|