Init project
This commit is contained in:
lifizer
@@ -0,0 +1,435 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user