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.
288 lines
17 KiB
288 lines
17 KiB
4 months ago
|
<template>
|
||
|
|
<view class="best-modal digital-keyboard-modal" :class="{'best-modal-active':_show}">
|
||
|
|
<view class="best-modal-layer" @tap="cancel"></view>
|
||
|
|
<view class="best-modal-content">
|
||
|
|
<view class="dk-title">输入密码</view>
|
||
|
|
<view class="dk-subtitle">请输入支付密码</view>
|
||
|
|
<view class="pwd-box clearfix" @tap="getKeyboard">
|
||
|
|
<view class="pwd-text" v-for="(item,index) in _digits" :key="index" :class="{active:(activeInput==index)}">{{payPassWord[index]}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="pwd-forget">
|
||
|
|
<text v-if="_forget" @tap="forgetPwd">没有密码？</text> <text v-if="_forget" @tap="forgetPwd">忘记密码</text>
|
||
|
|
</view>
|
||
|
|
<view class="digital-keyboard">
|
||
|
|
<view class="form_edit clearfix">
|
||
|
|
<view class="num" v-for="item in digitalList" :key="item" :class="{'no-num':(item === '' || item === '-1')}"
|
||
|
|
@tap="getKeyNumber(item)">{{item}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'WanlPayPassword',
|
||
|
|
props: {
|
||
|
|
show: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
digits: {
|
||
|
|
type: [Number, String],
|
||
|
|
default: 6
|
||
|
|
},
|
||
|
|
forget: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
activeInput: 0,
|
||
|
|
digitalList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', '-1'],
|
||
|
|
paymentPwd: ''
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
payPassWord() {
|
||
|
|
var payPassWord = this.paymentPwd.split('') || [];
|
||
|
|
payPassWord.fill('•');
|
||
|
|
return payPassWord;
|
||
|
|
},
|
||
|
|
_show() {
|
||
|
|
this.initData();
|
||
|
|
return String(this.show) === 'false' ? false : true;
|
||
|
|
},
|
||
|
|
_forget() {
|
||
|
|
return String(this.forget) === 'false' ? false : true;
|
||
|
|
},
|
||
|
|
_digits() {
|
||
|
|
let digits = [];
|
||
|
|
digits.length = this.digits;
|
||
|
|
return digits;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
initData: function() {
|
||
|
|
this.paymentPwd = this.value;
|
||
|
|
this.activeInput = this.value.length;
|
||
|
|
},
|
||
|
|
forgetPwd: function() {
|
||
|
|
console.log('跳转到忘记密码')
|
||
|
|
},
|
||
|
|
cancel: function() {
|
||
|
|
this.$emit('cancel');
|
||
|
|
},
|
||
|
|
getKeyNumber: function(val) {
|
||
|
|
if (val === '' || (val != -1 && this.activeInput == this.digits)) { //空或者已经达到最大值
|
||
|
|
return false;
|
||
|
|
} else if (val != -1) { //数字输入
|
||
|
|
this.activeInput++
|
||
|
|
this.paymentPwd += val;
|
||
|
|
if (this.activeInput == this.digits) { //验证密码正确性
|
||
|
|
return this.$emit('submit', this.paymentPwd);
|
||
|
|
}
|
||
|
|
} else { //删除
|
||
|
|
if (this.activeInput != 0) {
|
||
|
|
this.activeInput--;
|
||
|
|
this.paymentPwd = this.paymentPwd.substr(0, this.activeInput)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getKeyboard: function(e) {
|
||
|
|
var index = e.target.dataset.index;
|
||
|
|
if (index === undefined) return false;
|
||
|
|
var _length = this.paymentPwd.length
|
||
|
|
this.activeInput = index <= _length ? index : _length;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.clearfix::before,
|
||
|
|
.clearfix::after {
|
||
|
|
content: "";
|
||
|
|
display: table;
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
|
||
|
|
.clearfix {
|
||
|
|
zoom: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.best-modal {
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
display: none;
|
||
|
|
z-index: 99;
|
||
|
|
}
|
||
|
|
|
||
|
|
.best-modal.best-modal-active {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.best-modal-layer {
|
||
|
|
background-color: rgba(0, 0, 0, 0.2);
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
z-index: 1025;
|
||
|
|
}
|
||
|
|
|
||
|
|
.best-modal-content {
|
||
|
|
position: relative;
|
||
|
|
z-index: 9999;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.digital-keyboard-modal view {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.digital-keyboard-modal .best-modal-content {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
||
|
|
border-radius: 20px 20px 0px 0px;
|
||
|
|
background: #fff url(data:image/png;base64,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
|
||
|
|
}
|
||
|
|
|
||
|
|
.digital-keyboard-modal .dk-title {
|
||
|
|
font-size: 36rpx;
|
||
|
|
font-weight: 800;
|
||
|
|
color: #fff;
|
||
|
|
line-height: 90rpx;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.digital-keyboard-modal .dk-subtitle {
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: rgba(152, 152, 148, 1);
|
||
|
|
line-height: 73rpx;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.digital-keyboard-modal .pwd-forget {
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #26C6B3;
|
||
|
|
padding: 20rpx 0 30rpx;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 33rpx;
|
||
|
|
}
|
||
|
|
.digital-keyboard-modal .pwd-forget text{
|
||
|
|
margin: 0 10rpx;
|
||
|
|
}
|
||
|
|
/* 键盘 */
|
||
|
|
.digital-keyboard-modal .form_edit {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.digital-keyboard-modal .num {
|
||
|
|
-webkit-transition: all .2s linear;
|
||
|
|
-o-transition: all .2s linear;
|
||
|
|
transition: all .2s linear;
|
||
|
|
float: left;
|
||
|
|
background-color: #fff;
|
||
|
|
width: 33.33333333%;
|
||
|
|
cursor: pointer;
|
||
|
|
border: 1rpx solid #eee;
|
||
|
|
height: 118rpx;
|
||
|
|
text-align: center;
|
||
|
|
color: #333;
|
||
|
|
line-height: 118rpx;
|
||
|
|
font-size: 52rpx;
|
||
|
|
/* font-weight: bold; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.digital-keyboard-modal .num:nth-of-type(3n) {
|
||
|
|
border-bottom: 0;
|
||
|
|
border-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.digital-keyboard-modal .num:nth-of-type(3n+1) {
|
||
|
|
border-bottom: 0;
|
||
|
|
border-left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.digital-keyboard-modal .num:nth-of-type(3n+2) {
|
||
|
|
border-bottom: 0;
|
||
|
|
border-left: 0;
|
||
|
|
border-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.digital-keyboard-modal .num.no-num {
|
||
|
|
font-size: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.digital-keyboard-modal .num:last-child {
|
||
|
|
background: #f2f2f2 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAilBMVEUAAADLy8vLy8vLy8vMzMzMzMzY2NjMzMzMzMzQ0NDOzs7MzMzMzMzNzc3Pz8/T09PMzMzNzc3Nzc3Nzc3Ly8vMzMzMzMzMzMzOzs7MzMzNzc3MzMzOzs7Ozs7Q0NDMzMzMzMzMzMzOzs7Ozs7Ly8vMzMzMzMzMzMzMzMzOzs7MzMzMzMzMzMzMzMzKmFAsAAAALXRSTlMAQICZ9vAD+uoMG+eyRCsHwV5RJfvhjEw2yGdWMiEX7NWjOhL83JKGeinNu3IVbGIkAAADJklEQVR42u2Z2XLiQAxFBY3xBhgw+2IWkxAg+v/fm6lJKgGBkbrHKl76PFJQOm7crWsZPB6Px+PxeDwej0dGsm/UzB7kZJMIFYiOCYhYz1GJcCCqP0Y9hsCSp6jIJgaGXoSqLLn6G9TlCE9ZbVAZA8+YBcigK7BvIYOuQIOpry3QDZFBV2DK1NcWmI6QQVdgyNTXFlgekEFXYCD8cTeG4Rafcl7GUDQjO4EFSggG399+tlsn7a+OVqlp3OuffvbrqLo+fBPP5QKfKKJxdcdgBR9XmS6UCnygiIhfs8NNq+0IBSYoFGDv2tEUrtnJBCYoZUYMuLR1Fgm8o5gOs3NJ3pyiRMCgBQ1ydoY3eZdcfy+QCOzQhqBHumcLf2gRu3WEvEB7h3ZEOclvwY/bDG4oxsgLtDtoS0rW4JQ+/jx5Q0aA1BcTrEilf1c6Tu68GAH7+pVrvUXcFnf/DC+QXdCNVhduiPv9WJAsqUDWR1dGZL9lmV2yNF/a6M7h98RxSZbmt1U6s4BKlshhnOvTruuYbIzN+cvkDqdkYaCoI/++wwOOKBJYYB3s4A6DMoEd1mPQBqfObuCCtdBpu402DPTrWgBKHskEOlgDxnm8ZuBdYxP8tmFeoIuodhCVc8na8ZruzSC7CAQaITLwDZkiz3mG6ZjWkaTs2T1pmf+cRqUnEoneaEyDZcgKuM/j0vz+vm/NgOZ1RsDdYLymO//hXbEPWAGYuRikyePBejglBqeIEXCbyganqsH6iBr0AkbAZS5N/+vVpjqqQvfACDhM5pfP4v9hKExHxvndRIfGf+Z87PMCkNsYJOThnAvLe0bA9v3QnAx22R6Vixr5WmzQvznsRnxYHjAC1u/o8qvrF+SEMmUErA3m5c3jF2dgxFkqkRpEs6+G28QnXArmGcFUBimeVjOG9p4JPZtjDpBNrNJk8Ya1so1s42yxRU14ASgZA2UB3kBfAMozMigLQMwYKAswgxt9AWZ0pS/ADO8UBF5mYMDNQF9APMLVGbCRIb4iC3itQZjAaw2OAC81OGcgMZigEiYGGeWwqcDnCjwej8fj8Xg8Ho/nL38AXRgT/6dxCesAAAAASUVORK5CYII=) center center / auto 50rpx no-repeat;
|
||
|
|
}
|
||
|
|
|
||
|
|
.digital-keyboard-modal .pwd-box {
|
||
|
|
padding-left: 10rpx;
|
||
|
|
position: relative;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.digital-keyboard-modal .pwd-text {
|
||
|
|
position: relative;
|
||
|
|
line-height: 92rpx;
|
||
|
|
vertical-align: middle;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 50rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
width: 92rpx;
|
||
|
|
height: 92rpx;
|
||
|
|
margin-right: 10rpx;
|
||
|
|
display: inline-block;
|
||
|
|
border: solid 1px #ccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
.digital-keyboard-modal .pwd-text.active:after {
|
||
|
|
-webkit-animation: twinkle 1s infinite;
|
||
|
|
animation: twinkle 1s infinite;
|
||
|
|
height: 70%;
|
||
|
|
width: 4rpx;
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 15%;
|
||
|
|
left: 50%;
|
||
|
|
margin-left: -2rpx;
|
||
|
|
background-color: #4fa5e1;
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes twinkle {
|
||
|
|
from {
|
||
|
|
background-color: #4fa5e1;
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes twinkle {
|
||
|
|
from {
|
||
|
|
background-color: #4fa5e1;
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|