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.
442 lines
13 KiB
442 lines
13 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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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: "提示"
|
||
|
|
|
||
|
|
},
|
||
|
|
zh_HK: {
|
||
|
|
AdvancedIdentityTitle: "高級認證",
|
||
|
|
AdvancedIdentityExplain: "上傳手持證件和聲明書，聲明書請在白紙上寫：",
|
||
|
|
AdvancedIdentityTime: "1.日期",
|
||
|
|
AdvancedIdentityWormhole: "2.焰火網",
|
||
|
|
AdvancedIdentityText: "*請確保證件和聲明書清晰可見，並將證件和聲明書上的文字完整露出、避免遮擋",
|
||
|
|
AdvancedIdentityCommitment: "我承諾所提供的資料為我本人所有，不存在盜用他人資料的情況",
|
||
|
|
AdvancedIdentitySubmit: "提交",
|
||
|
|
|
||
|
|
AdvancedIdentityExampleText1: "請勾選承諾聲明！",
|
||
|
|
AdvancedIdentityExampleText2: "請選擇上傳圖片！",
|
||
|
|
ActionSheetIdentityTitle: "選擇圖片",
|
||
|
|
ActionSheetBtn1: "拍照",
|
||
|
|
ActionSheetBtn2: "從相冊中選擇",
|
||
|
|
PicturesFailedMsg: "拍照失敗：",
|
||
|
|
ShowWaiting: "等待中...",
|
||
|
|
SubmitSuccessMsg: "提交成功！",
|
||
|
|
ActionSheetCancel: "取消",
|
||
|
|
reject: "駁回原因",
|
||
|
|
rejectTitle: "駁回原因",
|
||
|
|
sure: "確定",
|
||
|
|
AlertMsg: "提示"
|
||
|
|
},
|
||
|
|
en_US: {
|
||
|
|
AdvancedIdentityTitle: "Advanced Certification",
|
||
|
|
AdvancedIdentityExplain: "Transfer hand-held documents and declarations, please write on the white paper:",
|
||
|
|
AdvancedIdentityTime: "1. Date",
|
||
|
|
AdvancedIdentityWormhole: "2. Flame",
|
||
|
|
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"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</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.SubmitSuccessMsg, 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>
|