diff --git a/public/static/index/css/base.css b/public/static/index/css/base.css
index 29bd129..0d5e7b4 100644
--- a/public/static/index/css/base.css
+++ b/public/static/index/css/base.css
@@ -5,3 +5,52 @@
outline:none;
-webkit-tap-highlight-color:rgba(255,0,0,0);
}
+/*输入密码*/
+.enterword{
+ position:relative;
+}
+.code_active{
+ width:4.8rem;
+ position:absolute;
+ left:0;
+ right:0;
+ top:0;
+ bottom:0;
+ font-size: 0;
+ margin: 0 auto;
+
+
+}
+.code_active input{
+ width:4.5rem;
+ height:0.8rem;
+ background: transparent;
+ letter-spacing: 0.63rem;
+ margin: 0 auto;
+ margin-left: 0.3rem;
+ /*text-align: right;*/
+}
+.password_box li{
+ float: left;
+ width: 16.66%;
+ height: 45px;
+ text-align: center;
+ line-height: 45px;
+ border-right:1px solid #C8C7CC;
+}
+#pwd {
+ position: absolute;
+ left: 0;
+ top: 100%;
+ bottom:0;
+ opacity: 0;
+ width: 80%;
+
+}
+.password_box li.active i {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background: #000;
+ display: inline-block;
+}
diff --git a/public/themes/simpleboot3/friendship/enter_password.html b/public/themes/simpleboot3/friendship/enter_password.html
index 0709be9..9ab52cf 100644
--- a/public/themes/simpleboot3/friendship/enter_password.html
+++ b/public/themes/simpleboot3/friendship/enter_password.html
@@ -10,11 +10,14 @@
<script type="text/javascript" src="__INDEX__/js/base.js"></script>
<title>输入密码</title>
<style>
- body,html{
+
+ body{
width:100%;
- height:100%;
background:#F5F6FA;
+ height:auto;
+ overflow: hidden;
}
+
.passwordnum{
color:#1A1A1A;
font-size: 0.36rem;
@@ -60,7 +63,6 @@
list-style: none;
text-align: center;
border:none;
-
}
</style>
@@ -71,86 +73,134 @@
<div class="container">
<p class="passwordnum">输入密码</p>
- <ul class="enterpassword" id="wrap">
- <li>
- <input type="password" class="entercode" maxlength='1'>
- </li>
- <li>
- <input type="password" class="entercode" maxlength='1'>
- </li>
- <li>
- <input type="password" class="entercode" maxlength='1'>
- </li>
- <li>
- <input type="password" class="entercode" maxlength='1'>
- </li>
- <li>
- <input type="password" class="entercode" maxlength='1'>
- </li>
- <li>
- <input type="password" class="entercode" maxlength='1'>
- </li>
- </ul>
+ <!--<ul class="enterpassword" id="wrap">-->
+ <!--<li>-->
+ <!--<input type="password" class="entercode" maxlength='1'>-->
+ <!--</li>-->
+ <!--<li>-->
+ <!--<input type="password" class="entercode" maxlength='1'>-->
+ <!--</li>-->
+ <!--<li>-->
+ <!--<input type="password" class="entercode" maxlength='1'>-->
+ <!--</li>-->
+ <!--<li>-->
+ <!--<input type="password" class="entercode" maxlength='1'>-->
+ <!--</li>-->
+ <!--<li>-->
+ <!--<input type="password" class="entercode" maxlength='1'>-->
+ <!--</li>-->
+ <!--<li>-->
+ <!--<input type="password" class="entercode" maxlength='1'>-->
+ <!--</li>-->
+ <!--</ul>-->
+
+ <div class="pwd_box enterword">
+ <input type="tel" id="pwd" maxlength="6" style="display: block;" pattern="[0-9]*" onkeyup="this.value = this.value.replace(/[^\d]/g, '')"/>
+ <ul class="password_box enterpassword">
+ <li class=""><i></i></li>
+ <li><i></i></li>
+ <li><i></i></li>
+ <li><i></i></li>
+ <li><i></i></li>
+ <li><i></i></li>
+ </ul>
+ </div>
<p class="nextstep">下一步</p>
</div>
</body>
<script src="__INDEX__/js/jquery.min.js"></script>
<script>
- var str=""
- var arr=[];
- var txts = wrap.getElementsByClassName("entercode");
- for(var i=0;i<txts.length;i++){
- $(txts[i]).val("")
- }
+ // var str=""
+ // var arr=[];
+ // var txts = wrap.getElementsByClassName("entercode");
+ // for(var i=0;i<txts.length;i++){
+ // $(txts[i]).val("")
+ // }
var t = '';
//输入的密码自动输入到下一个
- onload = function(){
- console.log(txts);
- for(var i = 0; i<txts.length;i++){
- t = txts[i];
- t.index = i;
- if(t.index>0){
- t.setAttribute("readonly", true);
- }
- t.onkeyup=function(){
-
- var regular = /\s+/g;
- if(regular.test(this.value)){
- $(this).focus();
- }else if($(this).val()==""){
- $(this).focus();
- }else{
- // console.log($(this).val());
- // arr.push($(this).val());
- var next = this.index + 1;
- if(next > txts.length - 1) return;
- txts[next].removeAttribute("readonly");
- txts[next].focus();
- }
- }
- if(t.index==5){
- t.onkeyup=function(){
- // arr.push($(this).val())
- // console.log(arr);
- // str=arr[0]+arr[1]+arr[2]+arr[3]+arr[4]+arr[5];
- // console.log(str)
- }
+ // onload = function(){
+ // console.log(txts);
+ // for(var i = 0; i<txts.length;i++){
+ // t = txts[i];
+ // t.index = i;
+ // if(t.index>0){
+ // t.setAttribute("readonly", true);
+ // }
+ // t.onkeyup=function(){
+ //
+ // var regular = /\s+/g;
+ // if(regular.test(this.value)){
+ // $(this).focus();
+ // }else if($(this).val()==""){
+ // $(this).focus();
+ // }else{
+ // // console.log($(this).val());
+ // // arr.push($(this).val());
+ // var next = this.index + 1;
+ // if(next > txts.length - 1) return;
+ // txts[next].removeAttribute("readonly");
+ // txts[next].focus();
+ // }
+ // }
+ // if(t.index==5){
+ // t.onkeyup=function(){
+ // // arr.push($(this).val())
+ // // console.log(arr);
+ // // str=arr[0]+arr[1]+arr[2]+arr[3]+arr[4]+arr[5];
+ // // console.log(str)
+ // }
+ // }
+ // }
+ // txts[0].removeAttribute("readonly");
+ // }
+
+ $("#pwd").focus();
+ $('.password_box').on('click','li',function(){
+ $('#pwd').focus();
+ if($('body').hasClass('mui-ios')){
+ $('.order_box').css('marginTop','200px')
+ }else{
+ $('.order_box').css('marginTop','50px')
+ }
+
+ })
+
+ $('#pwd').on('input',function(){
+ var leng = 0;
+ if(/[^\d]/g.test($(this).val())){
+ val = $(this).val().replace(/[^\d]/g,'');
+ }else{
+ leng = $(this).val().length;
+ console.log(leng)
+ caseItem(leng)
+ }
+ })
+
+ // 模拟效果
+ function caseItem(i){
+ $('.password_box li').removeClass('active')
+ for(var j = 0; j < i ; j++){
+ $('.password_box li').eq(j).addClass('active');
+ if(i == 6){
+ $('#pwd').blur()
+ console.log(222)
}
}
- txts[0].removeAttribute("readonly");
}
$(".nextstep").click(function(){
- var len=document.getElementsByClassName("entercode");
- console.log(len);
- arr=[];
- for(var i=0;i<len.length;i++){
- arr.push($(len[i]).val())
- }
- str=arr[0]+arr[1]+arr[2]+arr[3]+arr[4]+arr[5]
+ // var len=document.getElementsByClassName("entercode");
+ // console.log(len);
+ // arr=[];
+ // for(var i=0;i<len.length;i++){
+ // arr.push($(len[i]).val())
+ // }
+ // str=arr[0]+arr[1]+arr[2]+arr[3]+arr[4]+arr[5]
+ var str= $("#pwd").val();
+ console.log(str.length)
- if(arr.length == 6) {
+ if(str.length == 6) {
$.ajax({
url: "{:url('friendship/Friend/pwd')}",
data: {
diff --git a/public/themes/simpleboot3/friendship/friend_list.html b/public/themes/simpleboot3/friendship/friend_list.html
index f52dad8..709e3f7 100644
--- a/public/themes/simpleboot3/friendship/friend_list.html
+++ b/public/themes/simpleboot3/friendship/friend_list.html
@@ -67,14 +67,14 @@
padding: 0.36rem 0.32rem;
}
- .enterword{
- display:flex;
- width:5.26rem;
- height:0.6rem;
- line-height: 0.6rem;
- border-radius: 0.3rem;
- border:1px solid rgba(235,235,235,1);
- }
+ /*.enterword{*/
+ /*display:flex;*/
+ /*width:5.26rem;*/
+ /*height:0.6rem;*/
+ /*line-height: 0.6rem;*/
+ /*border-radius: 0.3rem;*/
+ /*border:1px solid rgba(235,235,235,1);*/
+ /*}*/
.word{
width:5rem;
height:0.56rem;
@@ -203,7 +203,8 @@
justify-content: space-between;
align-items: center;
font-size: 0;
- margin-top: 0.48rem;
+ /*margin-top: 0.48rem;*/
+ margin: 0.48rem auto 0;
}
.enterpassword li{
width:0.8rem;
@@ -234,6 +235,16 @@
font-size: 0.3rem;
text-align: right;
}
+
+ #pwd {
+ position: absolute;
+ left: -22rem;
+ bottom:-22rem;
+ opacity: 0;
+ width: 80%;
+ color:#f00;
+
+ }
</style>
</head>
<body>
@@ -242,26 +253,17 @@
<div class="passwordpop">
<p class="iconfont icon-quxiao"></p>
<p class="pleaseenterword">输入支付密码</p>
- <ul class="enterpassword" id="wrap">
- <li>
- <input type="password" class="entercode" maxlength='1'>
- </li>
- <li>
- <input type="password" class="entercode" maxlength='1'>
- </li>
- <li>
- <input type="password" class="entercode" maxlength='1'>
- </li>
- <li>
- <input type="password" class="entercode" maxlength='1'>
- </li>
- <li>
- <input type="password" class="entercode" maxlength='1'>
- </li>
- <li>
- <input type="password" class="entercode" maxlength='1'>
- </li>
- </ul>
+ <div class="pwd_box enterword">
+
+ <ul class="password_box enterpassword">
+ <li class=""><i></i></li>
+ <li><i></i></li>
+ <li><i></i></li>
+ <li><i></i></li>
+ <li><i></i></li>
+ <li><i></i></li>
+ </ul>
+ </div>
</div>
</div>
<!--好友弹出层-->
@@ -314,7 +316,9 @@
</div>
</div>
+<input type="tel" id="pwd" maxlength="6" style="display: block;" pattern="[0-9]*" onkeyup="this.value = this.value.replace(/[^\d]/g, '')"/>
</body>
+
<script type="text/javascript" src="__INDEX__/js/jquery.min.js"></script>
<script>
@@ -365,86 +369,149 @@
})
- var str=""
- var txts = wrap.getElementsByClassName("entercode");
- //输入的密码自动输入到下一个
- onload = function(){
- console.log(txts)
- for(var i=0;i<txts.length;i++){
- $(txts[i]).val("")
- }
+ // var str=""
+ // var txts = wrap.getElementsByClassName("entercode");
+ // //输入的密码自动输入到下一个
+ // onload = function(){
+ // console.log(txts)
+ // for(var i=0;i<txts.length;i++){
+ // $(txts[i]).val("")
+ // }
+ //
+ // for(var i = 0; i<txts.length;i++){
+ //
+ // var t = txts[i];
+ // t.index = i;
+ // if(t.index>0){
+ // t.setAttribute("readonly", true);
+ // }
+ // t.onkeyup=function(){
+ // var arr=[];
+ // var regular = /\s+/g;
+ // if(regular.test(this.value)){
+ // $(this).focus();
+ // }else if($(this).val()==""){
+ // $(this).focus();
+ // }else{
+ //
+ // // console.log($(this).val());
+ // // arr.push($(this).val());
+ // console.log(arr)
+ // var next = this.index + 1;
+ // if(next > txts.length - 1) return;
+ // txts[next].removeAttribute("readonly");
+ // txts[next].focus();
+ // }
+ // }
+ // if(t.index==5){
+ // t.onkeyup=function(){
+ // // arr.push($(this).val())
+ // // console.log(arr);
+ // // str=arr[0]+arr[1]+arr[2]+arr[3]+arr[4]+arr[5];
+ // // console.log(str)
+ //
+ // var len=document.getElementsByClassName("entercode");
+ // console.log(len);
+ // arr=[];
+ // for(var i=0;i<len.length;i++){
+ // arr.push($(len[i]).val())
+ // }
+ // str=arr[0]+arr[1]+arr[2]+arr[3]+arr[4]+arr[5];
+ // console.log(str)
+ //
+ // $.ajax({
+ // url:"{:url('friendship/Friend/donateIntegral')}",
+ // data:{
+ // friend_id:friend_id,
+ // total:$(".pleaseenter").val(),
+ // integral_pwd:str
+ // },
+ // type:"POST",
+ // dataType:"JSON",
+ //
+ // success: function (data) {
+ // if(data.status === true) {
+ // window.event.stopPropagation()
+ // $(".passwordwrap").css("display","none")
+ // $("#BALANCE").html(data.data);
+ // alert(data.msg);
+ // }else {
+ // alert(data.msg);
+ // }
+ // //清空数据
+ // for (var i = 0; i < txts.length; i++) {
+ // $(txts[i]).val("")
+ // }
+ // }
+ // })
+ // }
+ // }
+ //
+ // }
+ // txts[0].removeAttribute("readonly");
+ // }
- for(var i = 0; i<txts.length;i++){
- var t = txts[i];
- t.index = i;
- if(t.index>0){
- t.setAttribute("readonly", true);
- }
- t.onkeyup=function(){
- var arr=[];
- var regular = /\s+/g;
- if(regular.test(this.value)){
- $(this).focus();
- }else if($(this).val()==""){
- $(this).focus();
- }else{
+ $("#pwd").focus();
+ $('.password_box').on('click','li',function(){
+ $('#pwd').focus();
+ if($('body').hasClass('mui-ios')){
+ $('.order_box').css('marginTop','200px')
+ }else{
+ $('.order_box').css('marginTop','50px')
+ }
- // console.log($(this).val());
- // arr.push($(this).val());
- console.log(arr)
- var next = this.index + 1;
- if(next > txts.length - 1) return;
- txts[next].removeAttribute("readonly");
- txts[next].focus();
- }
- }
- if(t.index==5){
- t.onkeyup=function(){
- // arr.push($(this).val())
- // console.log(arr);
- // str=arr[0]+arr[1]+arr[2]+arr[3]+arr[4]+arr[5];
- // console.log(str)
+ })
- var len=document.getElementsByClassName("entercode");
- console.log(len);
- arr=[];
- for(var i=0;i<len.length;i++){
- arr.push($(len[i]).val())
- }
- str=arr[0]+arr[1]+arr[2]+arr[3]+arr[4]+arr[5];
- console.log(str)
+ $('#pwd').on('input',function(){
+ var leng = 0;
+ if(/[^\d]/g.test($(this).val())){
+ val = $(this).val().replace(/[^\d]/g,'');
+ }else{
+ leng = $(this).val().length;
+ console.log(leng)
+ caseItem(leng)
+ }
+ })
- $.ajax({
- url:"{:url('friendship/Friend/donateIntegral')}",
- data:{
- friend_id:friend_id,
- total:$(".pleaseenter").val(),
- integral_pwd:str
- },
- type:"POST",
- dataType:"JSON",
+ // 模拟效果
+ function caseItem(i){
+ $('.password_box li').removeClass('active')
+ for(var j = 0; j < i ; j++){
+ $('.password_box li').eq(j).addClass('active');
+ if(i == 6){
+ $('#pwd').blur();
+ var str= $('#pwd').val();
+ $.ajax({
+ url:"{:url('friendship/Friend/donateIntegral')}",
+ data:{
+ friend_id:friend_id,
+ total:$(".pleaseenter").val(),
+ integral_pwd:str
+ },
+ type:"POST",
+ dataType:"JSON",
- success: function (data) {
- if(data.status === true) {
- window.event.stopPropagation()
- $(".passwordwrap").css("display","none")
- $("#BALANCE").html(data.data);
- alert(data.msg);
- }else {
- alert(data.msg);
- }
- //清空数据
- for (var i = 0; i < txts.length; i++) {
- $(txts[i]).val("")
- }
+ success: function (data) {
+ if(data.status === true) {
+ window.event.stopPropagation()
+ $(".passwordwrap").css("display","none")
+ $("#BALANCE").html(data.data);
+ alert(data.msg);
+ }else {
+ alert(data.msg);
}
- })
- }
+ //清空数据
+ for (var i = 0; i < txts.length; i++) {
+ $(txts[i]).val("")
+ }
+ }
+ })
}
-
}
- txts[0].removeAttribute("readonly");
}
+
+
+
</script>
</html>
diff --git a/public/themes/simpleboot3/friendship/sure_password.html b/public/themes/simpleboot3/friendship/sure_password.html
index e3214e9..cbc6dbc 100644
--- a/public/themes/simpleboot3/friendship/sure_password.html
+++ b/public/themes/simpleboot3/friendship/sure_password.html
@@ -10,10 +10,11 @@
<script type="text/javascript" src="__INDEX__/js/base.js"></script>
<title>输入密码</title>
<style>
- body,html{
+ body{
width:100%;
- height:100%;
background:#F5F6FA;
+ height:auto;
+ overflow: hidden;
}
.passwordnum{
color:#1A1A1A;
@@ -66,84 +67,109 @@
<body>
<div class="container">
<p class="passwordnum">确认密码</p>
-
- <ul class="enterpassword" id="wrap">
- <li>
- <input type="password" class="entercode" maxlength='1'>
- </li>
- <li>
- <input type="password" class="entercode" maxlength='1'>
- </li>
- <li>
- <input type="password" class="entercode" maxlength='1'>
- </li>
- <li>
- <input type="password" class="entercode" maxlength='1'>
- </li>
- <li>
- <input type="password" class="entercode" maxlength='1'>
- </li>
- <li>
- <input type="password" class="entercode" maxlength='1'>
- </li>
- </ul>
+
+ <div class="pwd_box enterword">
+ <input type="tel" id="pwd" maxlength="6" style="display: block;" pattern="[0-9]*" onkeyup="this.value = this.value.replace(/[^\d]/g, '')"/>
+ <ul class="password_box enterpassword">
+ <li class=""><i></i></li>
+ <li><i></i></li>
+ <li><i></i></li>
+ <li><i></i></li>
+ <li><i></i></li>
+ <li><i></i></li>
+ </ul>
+ </div>
<p class="nextstep">确认</p>
</div>
<script type="text/javascript" src="__INDEX__/js/jquery.min.js"></script>
<script>
- var arr=[];
- var str=""
- var txts = wrap.getElementsByClassName("entercode");
- //输入的密码自动输入到下一个
- onload = function(){
- console.log(txts)
- for(var i=0;i<txts.length;i++){
- $(txts[i]).val("")
+ // var arr=[];
+ // var str=""
+ // var txts = wrap.getElementsByClassName("entercode");
+ // //输入的密码自动输入到下一个
+ // onload = function(){
+ // console.log(txts)
+ // for(var i=0;i<txts.length;i++){
+ // $(txts[i]).val("")
+ // }
+ // for(var i = 0; i<txts.length;i++){
+ // var t = txts[i];
+ // t.index = i;
+ // if(t.index>0){
+ // t.setAttribute("readonly", true);
+ // }
+ // t.onkeyup=function(){
+ //
+ // var regular = /\s+/g;
+ // if(regular.test(this.value)){
+ // $(this).focus();
+ // }else if($(this).val()==""){
+ // $(this).focus();
+ // }else{
+ // // console.log($(this).val());
+ // // arr.push($(this).val());
+ // var next = this.index + 1;
+ // if(next > txts.length - 1) return;
+ // txts[next].removeAttribute("readonly");
+ // txts[next].focus();
+ // }
+ // }
+ // if(t.index==5){
+ // t.onkeyup=function(){
+ // // arr.push($(this).val())
+ // // console.log(arr);
+ // // str=arr[0]+arr[1]+arr[2]+arr[3]+arr[4]+arr[5];
+ // // console.log(str)
+ // }
+ // }
+ // }
+ // txts[0].removeAttribute("readonly");
+ // }
+ $("#pwd").focus();
+ $('.password_box').on('click','li',function(){
+ $('#pwd').focus();
+ if($('body').hasClass('mui-ios')){
+ $('.order_box').css('marginTop','200px')
+ }else{
+ $('.order_box').css('marginTop','50px')
}
- for(var i = 0; i<txts.length;i++){
- var t = txts[i];
- t.index = i;
- if(t.index>0){
- t.setAttribute("readonly", true);
- }
- t.onkeyup=function(){
- var regular = /\s+/g;
- if(regular.test(this.value)){
- $(this).focus();
- }else if($(this).val()==""){
- $(this).focus();
- }else{
- // console.log($(this).val());
- // arr.push($(this).val());
- var next = this.index + 1;
- if(next > txts.length - 1) return;
- txts[next].removeAttribute("readonly");
- txts[next].focus();
- }
- }
- if(t.index==5){
- t.onkeyup=function(){
- // arr.push($(this).val())
- // console.log(arr);
- // str=arr[0]+arr[1]+arr[2]+arr[3]+arr[4]+arr[5];
- // console.log(str)
- }
+ })
+
+ $('#pwd').on('input',function(){
+ var leng = 0;
+ if(/[^\d]/g.test($(this).val())){
+ val = $(this).val().replace(/[^\d]/g,'');
+ }else{
+ leng = $(this).val().length;
+ console.log(leng)
+ caseItem(leng)
+ }
+ })
+
+ // 模拟效果
+ function caseItem(i){
+ $('.password_box li').removeClass('active')
+ for(var j = 0; j < i ; j++){
+ $('.password_box li').eq(j).addClass('active');
+ if(i == 6){
+ $('#pwd').blur()
+ console.log(222)
}
}
- txts[0].removeAttribute("readonly");
}
$(".nextstep").click(function(){
- var len=document.getElementsByClassName("entercode");
- console.log(len);
- arr=[];
- for(var i=0;i<len.length;i++){
- arr.push($(len[i]).val())
- }
- str=arr[0]+arr[1]+arr[2]+arr[3]+arr[4]+arr[5];
-
- if(arr.length == 6) {
+ // var len=document.getElementsByClassName("entercode");
+ // console.log(len);
+ // arr=[];
+ // for(var i=0;i<len.length;i++){
+ // arr.push($(len[i]).val())
+ // }
+ // str=arr[0]+arr[1]+arr[2]+arr[3]+arr[4]+arr[5];
+ var str= $("#pwd").val();
+ console.log(str.length)
+ if(str.length == 6) {
$.ajax({
url: "{:url('friendship/Friend/pwd')}",
data: {