<!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 >
