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.
125 lines
2.7 KiB
125 lines
2.7 KiB
<template>
|
|
<view class="page">
|
|
<view class="content">
|
|
<view class="title">{{ title }}</view>
|
|
<view class="password">
|
|
<smh-pwd :unit="6" :focus="true" :ontime="true" @change="inputVal"></smh-pwd>
|
|
</view>
|
|
<view class="lf-flex lf-m-t-45 lf-row-center" v-if="showCountdown">
|
|
<view class="lf-font-24 lf-m-r-10" style="color:#FF9D9D">
|
|
剩余支付时间
|
|
</view>
|
|
<!-- <countdown-timer :time="time" :autoStart="true" @finish="dateFinish">
|
|
<template v-slot="{minute, second}">
|
|
<view class="lf-flex">
|
|
<view class="lf-font-24" style="color:#FF9D9D">{{ minute >= 10 ? minute : "0" + minute }}</view>
|
|
<view class="lf-font-24" style="color:#FF9D9D">:</view>
|
|
<view class="lf-font-24" style="color:#FF9D9D">{{ second >= 10 ? second : "0" + second }}</view>
|
|
</view>
|
|
</template>
|
|
</countdown-timer> -->
|
|
<countdown-time minute="5" second="0" :showDay="false" :showHour="false"></countdown-time>
|
|
</view>
|
|
</view>
|
|
<button class="btn" hover-class="lf-opacity" @click="comfirm">{{ buttonText }}</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import countdownTime from '@/components/uni-countdown/uni-countdown';
|
|
import smhPwd from '@/components/smh-pwd/smh-pwd.vue';
|
|
export default {
|
|
components: {
|
|
countdownTime,
|
|
smhPwd
|
|
},
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: '请输入支付密码'
|
|
},
|
|
showCountdown: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
buttonText: {
|
|
type: String,
|
|
default: '确认'
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
code: '', // 密码
|
|
time: new Date('2021/09/8 14:15:00').getTime() - new Date('2021/09/8 14:10:00').getTime(),
|
|
is_auto: false
|
|
}
|
|
},
|
|
created(){
|
|
|
|
},
|
|
methods: {
|
|
dateFinish(){
|
|
this.$emit('dateFinish');
|
|
},
|
|
inputVal(event){
|
|
this.code = event;
|
|
if(this.code.length >= 6){
|
|
this.comfirm();
|
|
this.is_auto = true;
|
|
}else{
|
|
this.is_auto = false;
|
|
}
|
|
},
|
|
comfirm(){
|
|
if(this.code.length < 6){
|
|
return this.$msg('请输入完整支付密码');
|
|
}
|
|
if(this.is_auto){
|
|
return;
|
|
}
|
|
this.$emit('comfirm', this.code);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped="scoped">
|
|
.page{
|
|
width: 750rpx;
|
|
height: 100vh;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: #FFFFFF;
|
|
z-index: 999;
|
|
}
|
|
.content{
|
|
height: max-content;
|
|
width: 750rpx;
|
|
box-sizing: border-box;
|
|
padding: 0rpx 32rpx 0;
|
|
position: absolute;
|
|
top: 350rpx;
|
|
left: 0;
|
|
.title{
|
|
font-size: 28rpx;
|
|
color: #222222;
|
|
text-align: center;
|
|
}
|
|
.password{
|
|
height: 100rpx;
|
|
margin-top: 50rpx;
|
|
}
|
|
}
|
|
.btn{
|
|
position: absolute;
|
|
width: 550rpx;
|
|
height: 100rpx;
|
|
background: #15716E;
|
|
border-radius: 50rpx;
|
|
bottom: 10vh;
|
|
left: calc(50% - 275rpx);
|
|
line-height: 100rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
</style>
|