如图

实现代码

<template>
  <div class="add-card">
      <van-dialog 
            v-model="showDialog" 
            @cancel="onCancel" 
            title="输入短信验证码" 
            show-cancel-button 
            :overlay="false"
            :show-confirm-button="false"
            cancelButtonText="X"
            >
            <div class="content">
                <span class="ald-send">已向您的手机发送验证码</span>
                <div class="add-card">
                    <span>添加银行卡</span>
                    <span v-if="cardNumber">{{bank}}({{cardNumber.slice(-4)}})</span>
                </div>
                <div class="grid-input">
                    <ul>
                        <li>{{code[0]}}</li>
                        <li>{{code[1]}}</li>
                        <li>{{code[2]}}</li>
                        <li>{{code[3]}}</li>
                        <li>{{code[4]}}</li>
                        <li>{{code[5]}}</li>
                    </ul>
                </div>
                <div class="send-code">
                    <span v-if="send">{{timer}}秒重新发送验证码</span>
                    <span v-else>重新发送验证码</span>
                </div>
            </div>
        </van-dialog>
        <van-number-keyboard
            :show="showKeyboard"
            extra-key="."
            @input="onInput"
            @delete="onDelete"
            />
  </div>
</template>
<script>
  export default {
    data(){
        return{
            timer:120,
            clearInterval:"",
            send:true,
            showKeyboard:true,
            showDialog:true,
            cardNumber:null,
            bank: "",
            code:[]
        }
    },
    methods:{
        //dialog取消
        onCancel(){
            if(this.clearInterval) window.clearInterval(this.clearInterval);
            this.showKeyboard = false;
        },
        //获取数字键盘输入值
        onInput(value){
            if(value != "." && this.code.length < 6)
            this.code.push(value);
            if(this.code.length===6)
            this.showKeyboard = false;
        },
        //删除建
        onDelete(){
            if (this.code.length > 0) 
            this.code.pop();
        },
        onConfirm(value) {
            this.bank = value;
            this.showPicker = false;
        }
    }
}
</script>
<style lang="scss">
    .addtion-card{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin:120px 0 40px;
        .van-dialog{
            top:32%;
            .van-button{
                width:80px;
                padding:0;
                margin: 10px;
            }
        }
        .content{
            text-align: center;
            .ald-send{
                font-size: 24px;
                color: #6f6f6f;
            }
            .add-card{
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 30px 0;
                font-size: 26px;
                span{
                    &:last-child{
                        font-size: 24px;
                        color:#6f6f6f;
                        padding:20px 0;
                    }
                }
            }
            .grid-input{
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                ul{
                    width: 420px;
                    display: flex;
                    justify-content: space-between;
                    li{
                        width:60px;
                        height: 60px;
                        text-align: center;
                        line-height: 60px;
                        border:1PX solid #ccc;
                    }
                }
            }
            .send-code{
                width: 90%;
                margin:20px 0 0;
                text-align: right;
                font-size: 24px;
                color: #6f6f6f;
            }
        }
    }
</style>