李涵 / integral · 提交

转到一个项目

作者 李洪娟
提交 e63514718fbbaeb2c21fe243c595f8867564e151 1 个父辈 3c88f691 master ... li lilijuan
1 个管道 的构建 通过 耗费 3 秒

修改密码支付

内嵌 并排对比
正在显示 4 个修改的文件 包含 430 行增加 和 238 行删除
... ... @@ -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;
}
... ...
... ... @@ -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: {
... ...
... ... @@ -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>
... ...
... ... @@ -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: {
... ...