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"
					cursor-color="transparent" 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: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: -1;
	}

	.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;
			caret-color: transparent;
		}
	}

	.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>