231 lines
4.6 KiB
Vue
231 lines
4.6 KiB
Vue
<template>
|
||
<view class="pay-password">
|
||
<view :class="coverClass">
|
||
<view :class="contentClass">
|
||
<view class="close" @tap="close">
|
||
×
|
||
</view>
|
||
<view class="title">
|
||
请输入支付密码
|
||
</view>
|
||
<view class="rect" @tap="onFocus">
|
||
<view class="border-list">
|
||
<view class="border"></view>
|
||
<view class="border"></view>
|
||
<view class="border"></view>
|
||
<view class="border"></view>
|
||
<view class="border"></view>
|
||
<view class="border"></view>
|
||
</view>
|
||
<view class="point-list">
|
||
<view v-for="item in pointList" class="point">
|
||
<view class="value"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ok" @tap="ok">
|
||
确定
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<input v-model="password" ref="tempInput" type="number" :focus="focus" style="opacity: 0;width: 1px;height: 1px;line-height: 1px;min-height: 1px;">
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
focus: false,
|
||
isShow: false,
|
||
isShowInput: false,
|
||
password: "",
|
||
callback: () => {},
|
||
}
|
||
},
|
||
computed: {
|
||
coverClass() {
|
||
return `cover ${this.isShow ? 'show-cover' : ''}`
|
||
},
|
||
contentClass() {
|
||
return `content ${this.isShowInput ? 'show-content' : ''}`
|
||
},
|
||
pointList() {
|
||
let length = this.password.length;
|
||
if (length >= 6) {
|
||
length = 6;
|
||
}
|
||
return length;
|
||
}
|
||
},
|
||
methods: {
|
||
show(callback = () => {}) {
|
||
this.password = "";
|
||
this.isShow = true;
|
||
setTimeout(() => {
|
||
this.isShowInput = true;
|
||
this.onFocus()
|
||
}, 200)
|
||
this.callback = callback;
|
||
},
|
||
close() {
|
||
this.password = "";
|
||
this.isShowInput = false;
|
||
setTimeout(() => {
|
||
this.isShow = false;
|
||
}, 200)
|
||
},
|
||
onFocus() {
|
||
this.focus = false;
|
||
this.$nextTick(() => {
|
||
this.focus = true;
|
||
})
|
||
},
|
||
ok() {
|
||
uni.showLoading({
|
||
title:'请等待...'
|
||
})
|
||
let value = String(this.password || "")
|
||
if (value && value.length >= 6) {
|
||
value = value.substring(0, 6)
|
||
this.close()
|
||
setTimeout(() => {
|
||
this.callback && this.callback(value)
|
||
}, 100)
|
||
setTimeout(() => {
|
||
this.password = "";
|
||
}, 500)
|
||
} else {
|
||
this.$msg("请输入 6 位数密码")
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.pay-password {
|
||
.cover {
|
||
position: fixed;
|
||
z-index: 20;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
display: none;
|
||
}
|
||
.show-cover {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.content {
|
||
background: #fff;
|
||
padding: 40upx;
|
||
border-radius: 20upx;
|
||
position: relative;
|
||
width: 400upx;
|
||
height: 200upx;
|
||
z-index: 22;
|
||
transform: scale(0);
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.ok {
|
||
width: 200upx;
|
||
height: 60upx;
|
||
border-radius: 12upx;
|
||
background: linear-gradient(to right, rgb(235, 108, 78), rgb(250, 0, 17));
|
||
color: #fff;
|
||
font-size: 28upx;
|
||
transform: translateY(40upx);
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
&:active {
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
.title {
|
||
font-size: 28upx;
|
||
font-weight: bold;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 20upx;
|
||
text-align: center;
|
||
}
|
||
.close {
|
||
padding: 20upx;
|
||
color: #666;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
line-height: 20upx;
|
||
font-size: 40upx;
|
||
z-index: 26;
|
||
}
|
||
.rect {
|
||
width: 360upx;
|
||
height: 60upx;
|
||
border: 2upx solid #e8e8e8;
|
||
border-left: none;
|
||
position: relative;
|
||
.border-list {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
z-index: 27;
|
||
.border {
|
||
width: 60upx;
|
||
box-sizing: border-box;
|
||
height: 60upx;
|
||
border-left: 2upx solid #e0e0e0;
|
||
}
|
||
}
|
||
.point-list {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
z-index: 28;
|
||
.point {
|
||
width: 60upx;
|
||
box-sizing: border-box;
|
||
height: 60upx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.value {
|
||
width: 10upx;
|
||
height: 10upx;
|
||
border-radius: 20upx;
|
||
background-color: #666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.show-content {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
</style> |