436 lines
10 KiB
Vue
436 lines
10 KiB
Vue
<template name="blPaymentPasswordInput">
|
||
<view class="box" :style="{ 'padding-bottom': keyboardHeight + 'px' }">
|
||
<view class="box__header" :style="hideTopBorder?'border:none;':''">
|
||
<slot name='header'></slot>
|
||
</view>
|
||
<view class="box__body">
|
||
<view class="password-box">
|
||
<view class="password-item" @tap="show">
|
||
<view class="password-item-char" v-for="i in items" :key="i">
|
||
<view
|
||
class="password-item-char__dot"
|
||
v-if="password[i] || password[i] === 0"
|
||
></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="">
|
||
<slot name='middle'></slot>
|
||
</view>
|
||
</view>
|
||
|
||
<view :class="'keyboard ' + pattern">
|
||
<ul class="number">
|
||
<li class="button uni-flex-cc" @tap="input(item)" v-for="(item,index) in keys" :key="index">
|
||
{{ item }}
|
||
</li>
|
||
<!-- 暂时去掉dot -->
|
||
<!-- <li class="button dot">.</li> -->
|
||
<li class="button dot"></li>
|
||
<!-- <li class="button down" @tap="hide"></li> -->
|
||
<li @tap="del" class="left-delete">
|
||
<view class="huishan"></view>
|
||
<li/>
|
||
</ul>
|
||
<!-- <view class="action">
|
||
<view class="delete" @tap="del"></view>
|
||
<view class="ok" @tap="done"></view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
const keys = () => {
|
||
let natural = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
|
||
return natural.sort(function() {
|
||
return Math.random() > 0.5 ? -1 : 1; //用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1
|
||
});
|
||
};
|
||
|
||
// import uniIcon from '@/components/ku3gitxdx-icon/ku3gitxdx-icon.vue'
|
||
|
||
export default {
|
||
name: 'blPaymentPasswordInput',
|
||
props: {
|
||
defaultPassword: String,
|
||
hideTopBorder:{
|
||
type:Boolean,
|
||
default:false,
|
||
},
|
||
},
|
||
components: {
|
||
// uniIcon
|
||
},
|
||
data() {
|
||
return {
|
||
items: [0, 1, 2, 3, 4, 5],
|
||
password: [],
|
||
keys: keys(),
|
||
pattern: 'hidden',
|
||
keyboardHeight: uni.upx2px(480),
|
||
// boxHeaderStyle:this.hideTopBoder?'border:none;':''
|
||
}
|
||
},
|
||
methods: {
|
||
show() {
|
||
let args = {
|
||
cancel: false
|
||
};
|
||
this.$emit('shown', args);
|
||
if (!args.cancel) {
|
||
this.pattern = 'slideup';
|
||
}
|
||
this.keyboardHeight = uni.upx2px(480);
|
||
},
|
||
hide() {
|
||
let args = {
|
||
cancel: false
|
||
};
|
||
this.$emit('hidden', args);
|
||
if (!args.cancel) {
|
||
this.pattern = 'slidedown';
|
||
}
|
||
this.keyboardHeight = 0;
|
||
},
|
||
input(item) {
|
||
let args = {
|
||
// target: this,
|
||
data: item,
|
||
cancel: false,
|
||
callback: undefined
|
||
};
|
||
// console.log('s');
|
||
this.$emit('input', args);
|
||
if (!args.cancel) {
|
||
|
||
if(this.password.length<this.items.length){
|
||
this.password.push(item);
|
||
}
|
||
|
||
if (this.password.length === this.items.length) {
|
||
//长度达6位，自动验证
|
||
|
||
// console.log(JSON.stringify(item))
|
||
// console.log('verify')
|
||
this.$emit('confirm', {
|
||
target: this,
|
||
value: this.password.join('')
|
||
});
|
||
|
||
return;
|
||
}else{
|
||
return;
|
||
}
|
||
|
||
|
||
if (args.callback && typeof args.callback === 'function') {
|
||
args.callback.call(this);
|
||
}
|
||
|
||
}
|
||
},
|
||
del() {
|
||
let args = {
|
||
cancel: false
|
||
};
|
||
this.$emit('delete', args);
|
||
if (!args.cancel) {
|
||
if (this.password.length > 0) {
|
||
this.password = this.password.slice(0, this.password.length - 1);
|
||
}
|
||
}
|
||
},
|
||
done() {
|
||
|
||
if (this.password.length !== this.items.length) {
|
||
uni.showToast({
|
||
title:'请输入6位支付密码',
|
||
icon:'none',
|
||
duration:2000
|
||
})
|
||
return;
|
||
}
|
||
|
||
this.$emit('confirm', {
|
||
target: this,
|
||
value: this.password.join('')
|
||
});
|
||
},
|
||
clear(){
|
||
this.password = [];
|
||
}
|
||
},
|
||
watch: {
|
||
defaultPassword: {
|
||
immediate: true,
|
||
handler(val) {
|
||
if (val && val.length === 6) {
|
||
this.password = val.split('').map(Number);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@font-face {
|
||
font-family: 'FontAwesome';
|
||
src: url('https://cdn.bootcss.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');
|
||
src: url('https://cdn.bootcss.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0')
|
||
format('embedded-opentype'),
|
||
url('https://cdn.bootcss.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0')
|
||
format('woff2'),
|
||
url('https://cdn.bootcss.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0')
|
||
format('woff'),
|
||
url('https://cdn.bootcss.com/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0')
|
||
format('truetype'),
|
||
url('https://cdn.bootcss.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular')
|
||
format('svg');
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
}
|
||
|
||
.dot{
|
||
background: #e5e5e5;
|
||
order: 10;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
.box {
|
||
height: 100%;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
background-color: #fff;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
|
||
&__header {
|
||
text-align: center;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
// height: 170upx;
|
||
border-radius: 24upx 24upx 0upx 0upx;
|
||
background: #fff;
|
||
border-top: 1px solid #ddd;
|
||
font-size: $uni-font-size-lg;
|
||
}
|
||
&__body {
|
||
padding-top: 65upx;
|
||
box-sizing: border-box;
|
||
height: 200upx;
|
||
background: #ffffff;
|
||
.password-box {
|
||
height: 90upx;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
.password-item {
|
||
height: 100%;
|
||
border: 1px solid #ddd;//#00c456
|
||
border-radius: 4upx;
|
||
width: 602upx;
|
||
margin: 0 auto;
|
||
box-shadow: 0 0 3px rgba(221,221,221,0.6);//rgba(0, 196, 86, 0.6)
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
&-char {
|
||
width: 16.66666666%;
|
||
height: 90upx;
|
||
border-right: 1px solid #ddd;
|
||
line-height: 90upx;
|
||
text-align: center;
|
||
&:last-child {
|
||
border-right: none;
|
||
}
|
||
&__dot {
|
||
height: 90upx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
&:after {
|
||
content: '●';
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.keyboard {
|
||
position: fixed;
|
||
bottom: 0;
|
||
height: 480rpx;
|
||
width: 100%;
|
||
border-top: 1px solid #ddd;
|
||
background: #fff;
|
||
display: flex;
|
||
flex-direction: row;
|
||
.number {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
width: 100%;//cg
|
||
list-style: none;
|
||
padding: 0 0 0 1px;
|
||
margin: 0;
|
||
border-right: 1px solid #ddd;
|
||
.button {
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 33%;
|
||
font-size: 40rpx;
|
||
height: 120rpx;
|
||
text-align: center;
|
||
line-height: 100rpx;
|
||
border-right: 0.5px solid #ddd;
|
||
border-bottom: 0.5px solid #ddd;
|
||
|
||
&:nth-child(3),
|
||
&:nth-child(6),
|
||
&:nth-child(9),
|
||
&:nth-child(12) {
|
||
border-right: none;
|
||
}
|
||
|
||
&:nth-child(10),
|
||
&:nth-child(11),
|
||
&:nth-child(12) {
|
||
border-bottom: none;
|
||
}
|
||
&:nth-child(11) {
|
||
font-size: $uni-font-size-lg;
|
||
font-weight: bold;
|
||
}
|
||
|
||
// add
|
||
&:nth-child(10){
|
||
order:11
|
||
}
|
||
|
||
&:active {
|
||
background: #ddd;
|
||
}
|
||
}
|
||
.down:after {
|
||
content: '\f11c';
|
||
font-family: 'FontAwesome';
|
||
font-size: 30px;
|
||
}
|
||
.left-delete{
|
||
order:12;
|
||
border-top: 1px solid #ddd;
|
||
background: #e5e5e5;
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 33%;
|
||
height: 120upx;
|
||
text-align: center;
|
||
line-height: 100upx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
// &:after{
|
||
// content: '\f00d';
|
||
// font-family: 'FontAwesome';
|
||
// font-size: 30px;
|
||
// };
|
||
&:active {
|
||
background: #e5e5e5;
|
||
}
|
||
|
||
.huishan{
|
||
width:60upx;
|
||
height:60upx;
|
||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAlCAMAAADyQNAxAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAATtQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeYXp2gAAAGh0Uk5TABsiIQo50vy9Q/nHqrDb/oIu8HtF3WEd5JUo++cEENMDvzUHLQgYk0oBotwWMbji4SaMTeslC7kJH9/BDGv0GfdLwrVAzcW25eByJ+aL3pGJvAKtIIi6j0cT2Ogk+Noz8zJWSciEUhEWhz0LAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAASAAAAEgARslrPgAAAURJREFUOMvtktdawkAQhceACCJGsQuiEWJFKRZAUcSCItixa7Cgnvd/AkkCYbObR+DczO75/kxmdoaoKyf1SKxcbiem1wO7+rw+AfL1wz/AKjAIeYiDhoMY4T8cHcO4zZiYxJRYxHQoPMNcI7MIzDnUqmC+c4kq8JsdxVTTcS0YYRFLFrS8gtW4cVoLrhuYlEim9JjGhkWlsbllnrYVZLJEuR3s5jlqD/vW3w2sCemsjSochIqdEvOH8CZwpBJHHeOEbStfAk6jxFNxWy5KnQFll0DROVMXVaq4UHCZEyi6snrUM12T+wZJSaBu79rvlapCH3ATK9d4irKl1tvHPfem8ZCJ6PERT0zJzy+tObY3TzWnGkCF7V96ddqJt3fNbtQ/xP361PDFWd8hNOy7qsn4EdL/hrm9lxtFclCtzir2R11x+gc++EswLKyTYwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOS0wMy0wM1QxMTo1NDowMSswODowMAVqOMQAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTktMDMtMDNUMTE6NTQ6MDErMDg6MDB0N4B4AAAASnRFWHRzdmc6YmFzZS11cmkAZmlsZTovLy9ob21lL2FkbWluL2ljb24tZm9udC90bXAvaWNvbl9yZzE4azhvN2pnci9odWlzaGFuLnN2Z8V/tSMAAAAASUVORK5CYII=') no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
// .left-delete:after{
|
||
// content: '\f00d';
|
||
// font-family: 'FontAwesome';
|
||
// font-size: 30px;
|
||
// }
|
||
}
|
||
.action {
|
||
width: 25%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.delete {
|
||
height: 50%;
|
||
width: 100%;
|
||
border-bottom: 1px solid #ddd;
|
||
background: #ddd;
|
||
&:after {
|
||
content: '\f00d';
|
||
font-family: 'FontAwesome';
|
||
text-align: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
line-height: 100%;
|
||
font-size: 30px;
|
||
display: block;
|
||
line-height: 240upx;
|
||
}
|
||
&:active {
|
||
background: #fff;
|
||
}
|
||
}
|
||
.ok {
|
||
flex: 1;
|
||
width: 100%;
|
||
&:after {
|
||
content: '\f00c';
|
||
font-family: 'FontAwesome';
|
||
width: 100%;
|
||
height: 100%;
|
||
line-height: 100%;
|
||
text-align: center;
|
||
font-size: 30px;
|
||
display: block;
|
||
line-height: 240upx;
|
||
}
|
||
&:active {
|
||
background: #ddd;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/*动画*/
|
||
@keyframes slidedown {
|
||
from {
|
||
transform: translateY(0);
|
||
}
|
||
to {
|
||
transform: translateY(100%);
|
||
}
|
||
}
|
||
.slidedown {
|
||
animation: slidedown 0.3s linear;
|
||
transform: translateY(100%);
|
||
}
|
||
.slideup {
|
||
animation: slideup 0.3s linear;
|
||
transform: translateY(0);
|
||
}
|
||
@keyframes slideup {
|
||
from {
|
||
transform: translateY(100%);
|
||
}
|
||
to {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
</style>
|