wxml代码：

<view class="container">

  <view class="code_title">输入验证码</view>
  <view class="code_tips">验证码已发送至+86 13300001111</view>
  
  <view class="code_box">
    <view class="box_inp">
      <block wx:for="{{6}}" wx:key="item">
        <input
          type="number" 
          class="{{vCodeValue.length === index && isVFocus ? 'box_active' : ''}}"
          value="{{vCodeValue.length >= index + 1 ? vCodeValue[index] : ''}}"
          disabled
          catchtap="focusInput"
        ></input>
      </block>
    </view>
    <input type="number" class="box_default" maxlength="6" focus="{{isVFocus}}" bindinput="listenCodeInput"></input>
    <view class="box_opt {{codeText == '重新发送' ? '' : 'gray'}}" bindtap="sendAgainCode">{{codeText}}</view>
  </view>

  <view class="btn code_btn" bindtap="handleNextStep">下一步</view>

</view>

wxss代码：

.container{background: #FAF1EA url('oss图片路径') no-repeat;background-size: 100%;}

.code_title{margin: 270rpx 30rpx 0 30rpx;font-size: 48rpx;font-weight: bold;color: #333;letter-spacing: 5rpx}
.code_tips{font-size: 32rpx;color: #8B614D;margin: 24rpx 30rpx;}

.code_box{margin: 156rpx 30rpx 0 30rpx;}
.code_box .box_inp{display: flex;align-items: center}
.code_box .box_inp input{border-bottom: 4rpx solid #E6CAB9;text-align: center;color:#333;font-size: 44rpx;margin: 0 20rpx;padding: 20rpx;font-weight: 800;}
.code_box .box_inp .box_active{border-color:#8B614D!important}
.code_box .box_default{height: 0;width: 0}
.code_box .box_opt{font-size: 28rpx;color: #8B614D;text-align: center;margin: 20rpx 0 60rpx 0;}
.code_box .box_opt.gray{color: #999;}
.code_btn{margin: 0 60rpx;}

js代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    vCodeValue: '',
    isVFocus: true,
    interTimes: '',
    codeText: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.codeCountdown(60);
  },

  /**
   * 验证码输入
   * @param {*} e 
   */
  listenCodeInput(e){
    let val = e.detail.value;
    this.setData({vCodeValue: val});
  },

  /**
   * 输入框聚焦
   */
  focusInput(){
    this.setData({isVFocus: true});
  },

  /**
   * 验证码倒计时
   * @param {*} times 
   */
  codeCountdown(times){
    let that = this;
    let status = true;
    that.data.interTimes = setInterval(() => {
      times--;
      if (times == 0) {
        clearInterval(that.data.interTimes);
        that.setData({codeText: '重新发送'});
      } else {
        that.setData({codeText: times + 'S后重新发送'});
      }
    }, 1000);
    return status;
  },

  /**
   * 重新请求验证码
   */
  sendAgainCode(){
    let { codeText, phoneNumber } = this.data;
    if(codeText == '重新发送'){
      this.codeCountdown(60);
    }
  },

  /**
   * 下一步操作
   */
  handleNextStep(){
    common.showToast('下一步');
  }
})