103 lines
3.8 KiB
Vue
103 lines
3.8 KiB
Vue
<template>
|
|
<view class="keyborad" :style="{transform:show_key?'translateY(0)':'translateY(100%)'}">
|
|
<view class="key_main">
|
|
<view class="main_title">
|
|
<u-icon @tap="hideFun" name="close" color="#333333" size="16" bold></u-icon>
|
|
<!-- <image src="/static/del_1.png" mode="aspectFill" @tap="hideFun"></image> -->
|
|
<text>请输入支付密码</text>
|
|
</view>
|
|
<view class="main_content">
|
|
<view class="content_num">
|
|
<view v-for="item in inputArray" :key="item" class="content_item">{{password[item-1] ? '●' :''}}</view>
|
|
</view>
|
|
<view class="main_forget" @tap="forgetFun">忘记密码</view>
|
|
</view>
|
|
<view class="main_keyboard">
|
|
<view class="key_num" v-for="item in numberArray" :key="item" @tap="inputNumFun({num:item})">{{item}}</view>
|
|
<view class="key_null"></view>
|
|
<view class="key_0" @tap="inputNumFun({num:0})">0</view>
|
|
<view class="key_del" @tap="delNumFun">
|
|
<image src="/static/del_2.png" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
props:{
|
|
show_key:Boolean
|
|
},
|
|
computed:{},
|
|
data(){
|
|
return{
|
|
inputArray:[1,2,3,4,5,6],//输入密码的长度
|
|
numberArray:[1,2,3,4,5,6,7,8,9],//密码键盘的数字
|
|
password:'',//密码
|
|
}
|
|
},
|
|
methods:{
|
|
inputNumFun(op){
|
|
let _this = this
|
|
if(_this.password.length <=6){
|
|
_this.password += op.num
|
|
if(_this.password.length == 6){
|
|
_this.$emit('getPassword',{password:_this.password})
|
|
_this.password = ''
|
|
// uni.showModal({
|
|
// title:'密码',
|
|
// content:_this.password,
|
|
// success() {
|
|
// _this.password = ""
|
|
// }
|
|
// })
|
|
}
|
|
}
|
|
|
|
},
|
|
delNumFun(){
|
|
if(this.password.length == 0) return
|
|
this.password = this.password.substring(0,this.password.length - 1)
|
|
console.log("删除后的结果",this.password)
|
|
},
|
|
forgetFun(){
|
|
uni.showToast({
|
|
title:'忘记密码操作',
|
|
icon:'none'
|
|
})
|
|
},
|
|
hideFun(){
|
|
console.log("close")
|
|
this.$emit('hideFun')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.keyborad{background: rgba(100,100,100,.2); width:100vw;height: 100vh;position: fixed;bottom: 0px;top:0px;left:0px;right:0px;z-index:100;display: flex;flex-direction: column;justify-content: flex-end;transform: translateY(100%);transition:all 0.4s;
|
|
.key_main{ width:100vw;height: 900rpx;background: #fff;box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-between;
|
|
.main_title{ font-size:34rpx;color: #000000;height: 100rpx;display: flex;align-items: center;letter-spacing: 2rpx;width:100%;box-sizing: border-box;padding:0px 20rpx;border-bottom:0rpx solid #e1e1e1;
|
|
image{ width:48rpx;height: 48rpx;position: relative;z-index:10}
|
|
text{ flex:1;margin-left:-48rpx;display: flex;justify-content: center;}
|
|
}
|
|
.main_content{ width:100%;box-sizing: border-box;padding:0px 30rpx;margin-top:40rpx;
|
|
.content_num{ width:100%;height: 100rpx;border:2rpx solid #DBDBDB;border-radius: 10rpx;display: flex;align-items: center;
|
|
.content_item{ flex: 1;height: 100%;border-right: 2rpx solid #DBDBDB;display: flex;justify-content: center;align-items: center;}
|
|
.content_item:last-child{ border-right:none}
|
|
}
|
|
.main_forget{ display: flex;justify-content: center;align-items: center;width:100%;font-size:28rpx;color: #007AFF;margin-top:40rpx}
|
|
}
|
|
.main_keyboard{ width:100%;height: 500rpx;background: #FFFFFF;display: flex;flex-flow: wrap;
|
|
.key_null,.key_del{ background: #e2e7eb;}
|
|
image{ width:48rpx;height: 48rpx;}
|
|
.key_num,.key_null,.key_del,.key_0{ width:250rpx;height: 125rpx;display: flex;align-items: center;justify-content: center;}
|
|
.key_num{ border-right:2rpx solid #f1f4f4;border-bottom:2rpx solid #f1f4f4;box-sizing: border-box;}
|
|
.key_num:nth-child(8){border-bottom: none;}
|
|
.key_0{ border-top:2rpx solid #f1f4f4}
|
|
}
|
|
}
|
|
}
|
|
</style>
|