mrr.sj.front/components/service-code-input/service-code-input.vue

<template>
	<view class="service-code-modal" v-if="show" :style="{bottom:`${popBotom}px`}">
		<view class="modal-mask" @touchmove.stop.prevent></view>
		<view class="modal-content">
			<view class="modal-title">开始服务</view>
			<view class="modal-subtitle">请输入服务码</view>
			<view class="code-box">
				<view
					v-for="(item, idx) in codeLength"
					:key="idx"
					:class="['code-cell', idx === currentIndex ? 'active' : '', code[idx] ? 'filled' : '']">
					<text v-if="code[idx]">{{ code[idx] }}</text>
				</view>
				<!-- 隐藏真实输入框 -->
				<input
					:adjust-position="false"
					class="real-input"
					type="number"
					:maxlength="codeLength"
					v-model="inputValue"
					:focus="true"
					@input="onInput"
					@focus="onFocus"
					@keyboardheightchange="onkeyboardheightchange"
					@blur="onBlur"
					cursor-spacing="100"
					ref="realInput" />
			</view>
			<button class="confirm-btn" :disabled="code.length < codeLength" @click="onConfirm">确定</button>
			<view class="close-btn" @click="close">×</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'serviceCodeInput',
		props: {
			show: {
				type: Boolean,
				default: false
			},
			codeLength: {
				type: Number,
				default: 6
			}
		},
		data() {
			return {
				inputValue: '',
				isFocus: true,
				keyboardHeight: 0,
				popBotom:0,
			}
		},
		computed: {
			code() {
				return this.inputValue.split('').slice(0, this.codeLength)
			},
			currentIndex() {
				return this.inputValue.length
			}
		},
		watch: {
			// show(val) {
			// 	if (val) {
			// 		this.$refs.realInput && this.$refs.realInput.focus
			// 	} else {
			// 		this.inputValue = ''
			// 	}
			// }
		},
		mounted() {
			// uni.onKeyboardHeightChange((res)=>{
			// 	this.keyboardHeight = res.height;
			// })
		},
		methods: {
			onInput(e) {
				let val = e.detail.value.replace(/[^0-9]/g, '').slice(0, this.codeLength)
				this.inputValue = val
				this.$emit('input', val)
				if (val.length === this.codeLength) {
					this.$emit('finish', val)
				}
			},
			onFocus(e) {
				this.isFocus = true
				this.inputValue = ''
			},
			onkeyboardheightchange(e){
				this.popBotom = e.target.height || 0
			},
			onBlur() {
				this.isFocus = false
			},
			onConfirm() {
				if (this.inputValue.length === this.codeLength) {
					this.$emit('confirm', this.inputValue);
				}
				
			},
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.service-code-modal {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 999999;

		.modal-mask {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.15);
		}

		.modal-content {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			background: #fff;
			border-radius: 32rpx 32rpx 0 0;
			padding: 56rpx 40rpx 40rpx 40rpx;
			box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.08);
			min-height: 340rpx;
			align-items: center;
			display: flex;
			flex-direction: column;
			animation: modalUp 0.25s;
		}

		.modal-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #222;
			text-align: center;
		}

		.modal-subtitle {
			font-size: 28rpx;
			color: #888;
			margin: 24rpx 0 40rpx 0;
			text-align: center;
		}

		.code-box {
			flex-direction: row;
			display: flex;
			justify-content: center;
			margin-bottom: 48rpx;
			position: relative;

			.code-cell {
				width: 72rpx;
				height: 72rpx;
				border: 2rpx solid #eee;
				border-radius: 16rpx;
				margin-right: 24rpx;
				font-size: 40rpx;
				color: #ff4d8d;
				background: #fff;
				text-align: center;
				line-height: 72rpx;
				box-sizing: border-box;
				transition: border-color 0.2s;

				&.active {
					border-color: #ff4d8d;
				}

				&.filled {
					border-color: #ff4d8d;
				}

				&:last-child {
					margin-right: 0;
				}
			}

			.real-input {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
				z-index: 2;
			}
		}

		.confirm-btn {
			width: 100%;
			height: 88rpx;
			background: #ff4d8d;
			color: #fff;
			font-size: 32rpx;
			border-radius: 16rpx;
			margin-top: 16rpx;
			text-align: center;
			line-height: 88rpx;
			border: none;

			&:disabled {
				background: #ffd1e3;
				color: #fff;
			}
		}

		.close-btn {
			position: absolute;
			right: 32rpx;
			top: 32rpx;
			font-size: 48rpx;
			color: #bbb;
			z-index: 10;
			font-weight: bold;
			line-height: 1;
		}
	}

	@keyframes modalUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}
</style>