zy-wechat/components/numberKeyModel/numberKeyModel.vue

<template>
  <view class="showModel">
		<view class="showModel__wrap">
			<view class="showModel__header">
			  数字密钥
			</view>
			<view class="content">
				<view class="content-tip">请输入数字密钥。</view>
				<view class="content-box">
					<input class="content-item" type="number" :ref="`ref${index}`" maxlength="1" 
					@input="onInput" :data-index="index" v-for="(i, index) in keyArr" 
					:key="index" v-model="i.value" :focus="i.focusType"/>
				</view>
			</view>
			<view class="bottom">
				<button class="bottom-btn confirm-btn" @click="confirm">确定</button>
				<button class="bottom-btn" @click="cancel">取消</button>
			</view>
		</view>
  </view>
</template>

<script>
import {
    get,
    post,
    SM
  } from "../../http/http.js";
export default {
  data() {
    return {
      
    };
  },
  watch: {

  },
  props: {
		keyArr:{
			type:Array,
			default:[]
		}
  },
	created(){
		for(let i of this.keyArr){
			i.value = null
			i.focusType = false
		}
		this.keyArr[0].focusType = true
	},
  methods: {
		onInput(event) {
			const value = event.target.value;
			const index = event.target.dataset.index;
			if(value && index+1 < this.keyArr.length && !this.keyArr[index+1].value){
				if(this.keyArr[index+1].focusType = true){
					this.keyArr[index+1].focusType = false
					setTimeout(_=>{
						this.keyArr[index+1].focusType = true
						this.$forceUpdate()
					},200)
				}else{
					this.keyArr[index+1].focusType = true
					this.$forceUpdate()
				}
			}
		},
    confirm(){
			for(let i of this.keyArr){
				if(!i.value){
					uni.showToast({
						title: `数字密钥为${this.keyArr.length}位数`,
						duration: 1000,
						icon:'none'
					});
					return
				}
			}
			let arr = []
			for(let i of this.keyArr){
				arr.push(i.value)
			}
			post(`/dept/check/${arr.join('')}`).then((res) => {
				if (res.status == 200) {
					this.$emit('confirm',res.data)
				}else{
					uni.showToast({
						title: res.msg,
						duration: 1000,
						icon:'none'
					});
				}
			});
    },
    cancel(){
      this.$emit('cancel')
    },
  },
};
</script>

<style lang="less" scoped>
.showModel {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 99;

  .showModel__wrap {
    width: 90%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 12rpx;

    .showModel__header {
      font-size: 36rpx;
      color: #000;
			font-weight: bold;
      height: 84rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
		.content{
			background: #FAFBFD;
			border: 1px solid #E6E6E6;
			margin-bottom: 20rpx;
			.content-tip{
				text-align: center;
				padding: 50rpx 0 30rpx 0;
				font-size: 28rpx;
			}
			.content-box{
				display: flex;
				justify-content: space-around;
				margin-bottom: 20rpx;
				.content-item{
					width: 80rpx;
					height: 80rpx;
					border-radius: 10rpx;
					border: 1px solid #CCCCCC;
					color: #000;
					font-size: 32rpx;
					// margin: 0 20rpx;
					text-align: center;
				}
			}
		}
		.bottom{
			border-top: 1px solid #ccc;
			display: flex;
			uni-button{
				border-radius: 0 !important;
				background: #fff !important;
			}
			uni-button:after{
				border: none !important;
			}
			.bottom-btn{
				color: #A8A8A8;
				font-size: 30rpx;
				padding: 20rpx 0;
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.confirm-btn{
				color: #5DAC6B;
				border-right: 1px solid #ccc;
			}
		}
  }
}
</style>