ec.uniapp-master/components/lf-payPassword/lf-payPassword.vue

<template>
	<view class="page">
		<view class="content">
			<view class="title">{{ title }}</view>
			<view class="password">
				<lf-jp-coded :width="686" @inputVal="inputVal"></lf-jp-coded>
			</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>{{minute}}:{{second}}</view> -->
						<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>
			</view>
		</view>
		<button class="btn" hover-class="lf-opacity" @click="comfirm">{{ buttonText }}</button>
	</view>
</template>

<script>
	import countdownTimer from '@/components/countdown-timer/countdown-timer';
	import lfJpCoded from '@/components/lf-jpCoded/lf-jpCoded.vue'
	export default {
		components: {
			lfJpCoded,
			countdownTimer
		},
		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()
			}
		},
		created(){
			
		},
		methods: {
			dateFinish(){
				this.$emit('dateFinish');
			},
			inputVal(event){
				this.code = event;
			},
			comfirm(){
				if(this.code.length < 6){
					return this.$msg('请输入完整支付密码');
				}
				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>