<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index页面</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--基于框架引入的css,一般不做修改 star-->
<link rel="stylesheet" href="libs/css/mui.min.css" />
<link rel="stylesheet" type="text/css" href="css/common/common.css"/>
<!--基于框架引入的css,一般不做修改 end-->
<!--公共样式部分-->
<link rel="stylesheet" href="css/main.css" />
<style type="text/css">
body{background: #fff;}
header.mui-bar.mui-bar-white{border-bottom: none;}
header.mui-bar.mui-bar-white h1{color: #333;font-weight: normal;font-size: 16px;}
.locker-midd{text-align: center;margin: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 100%;height: 430px;}
.mui-locker-holder{margin: 0 auto;}
.locker-midd img{width: 170px;}
.bottom_btn{position:absolute;bottom: 30px;width: 100%;text-align: center;}
.bottom_btn a{color: #999;padding: 5px 10px;margin: 1rem;}
.bottom_btn a:active{color: #ccc;}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav mui-bar-white">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">设置手势密码</h1>
</header>
<div class="mui-content bg-white">
<div class="locker-midd">
<img src="img/logo.png" />
<div id="holder" class="mui-locker" data-locker-options='{"ringColor":"#ddd","fillColor":"#fff","touchringColor":"#08b9a2","touchfillColor":"#fff","pointColor":"#08b9a2","lineColor":"#08b9a2","ringWidth":"2","lindeWidth":"2"}' data-locker-width='300' data-locker-height='300'></div>
<p id="alert"></p>
</div>
<!--<div class="bottom_btn">
<a id="modify">修改图案密码</a>
<a id="forget">忘记图案密码</a>
</div>-->
</div>
<!--基于框架引入的js-->
<script src="libs/js/mui.min.js"></script>
<!--基于框架封装好的js-->
<!--<script src="libs/js/ns_app.js"></script>-->
<script src="libs/js/mui.locker.js"></script>
<script src="js/common.js"></script>
<script src="libs/js/jquery-2.0.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jtnsh/jtnsh_common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/locker.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
(function($, doc) {
mui.init({
keyEventBind: {
backbutton: false
}
});
var view = null,
holder = doc.querySelector('#holder'),
lockTit = doc.querySelector('#lockTit'),
alert = doc.querySelector('#alert'),
modify = doc.querySelector('#modify'),
forget = doc.querySelector('#forget'),
pass = [],
flag = false,
user = null,
serPass = '';
$.plusReady(function() {
view = plus.webview.currentWebview(); //当前webview
mainIf();
})
document.addEventListener("resume", function() {
mainIf();
})
function mainIf() {
holderDoc('设置', '0');
}
//设置密码手势监听
function holderDoc(lockTit, status) {
if(lockTit.indexOf('设置') > -1) {
holder.addEventListener('done', function(event) {
var rs = event.detail;
if(rs.points.length < 4) {
alert.style.color = '#f50';
alert.innerText = '请至少设置4个密码连接点';
pass = [];
rs.sender.clear();
return;
}
pass.push(rs.points.join(''));
if(pass.length >= 2) {
if(pass[0] == pass[1]) {
var a = 1;
console.log(pass[0])
App.setHandPassword(pass[0],function(res){
console.log('手势密码----',JSON.stringify(res))
var result = JSON.parse(res.result);
if(res.stateCode == 'SUCCESS'){
alert.style.color = '#f50';
alert.innerText = '图案设定完成';
var my = plus.webview.getWebviewById('pages/my.html');
plus.webview.create('pages/my.html');
closeOthPage();
mui.fire(my,'back');
}else{
mui.alert(res.message,'提示','确定',function (e) {
},'div')
}
})
} else {
alert.style.color = '#f50';
alert.innerText = '两次图案绘制不一致';
}
rs.sender.clear();
pass = [];
} else {
alert.style.color = '#f50';
alert.innerText = '请再次绘制图案密码';
rs.sender.clear();
}
});
}
}
}(mui, document));