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

<template>
	<view class="page">
		<view class="content">
			<view class="title">请设置6位支付密码</view>
			<view class="password">
				<lf-jp-coded :width="686" @inputVal="inputVal"></lf-jp-coded>
			</view>
		</view>
		<button class="btn" hover-class="lf-opacity" @click="comfirm">确认</button>
	</view>
</template>

<script>
	import lfJpCoded from '@/components/lf-jpCoded/lf-jpCoded.vue'
	export default {
		components: {
			lfJpCoded
		},
		data(){
			return {
				code: ''
			}
		},
		created(){
			
		},
		methods: {
			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>