xingmingyi_applet/components/pay-password-keyboard/pay-password-keyboard.vue

<template>
	<u-popup :show="showPass" round borderRadius="12" :closeOnClickOverlay='true' @close="close" mode="center">
		<view class="payBox dffd">
			<view class="title">请输入支付密码</view>
			<!-- <view class="bold prosecond">333学豆</view> -->
			<view class="bb dffs type">
				<image src="/static/img/pro/payxd.png" mode=""></image>
				<text class="fontbase textgrey">学豆支付</text>
			</view>
			<view class="payText">
				<u-code-input :space="0" v-model='value' @finish="finish" dot hairline focus></u-code-input>
			</view>
			<navigator url="/pages/user/mine/userInfo" class="blue">忘记密码</navigator>
		</view>
	</u-popup>
</template>

<script>
export default {
	props: {
		money: {
			type: Number,
			default: 0 //支付钱
		},
		showPass: {
			type: Boolean,
			default: false //显示支付
		}
	},
	data() {
		return { 
			value: '',
			payType: 1 //显示支付
		};
	},
	methods: { 
		finish(e) {
			console.log('输入结束，当前值为：' + e);
			this.$emit('getPass', this.value); //this.value为向父组件传递的数据
			this.value='';
		},
		close() {
			console.log(1);
			this.$emit('close');
		}, 
	}
};
</script>

<style lang="scss">
.payPop {
}
.payBox {
	width: 559rpx;
	// min-height: 65vh;
	justify-content: flex-start;
	align-items: center;
	padding: 30rpx;
	.title {
		width: 100%;
		text-align: center;
		font-size: 30rpx; 
	}
	.prosecond {
		font-size: 42rpx;
		margin: 30rpx 0 40rpx;
	}
	.type {
		width: 100%;
		padding: 18rpx 23rpx;
		image {
			width: 41rpx;
			height: 41rpx;
			margin-right: 16rpx;
		}
	}
	.payText {
		margin: 30rpx 0;
	}
	.blue {
		color: #188be2;
	}
}
</style>