小程序-两次支付密码输入_小程序 bindconfirm 执行俩次-CSDN博客

本文链接：https://blog.csdn.net/Acitylion/article/details/100939048

https://github.com/evan2020/six-Input-box

自己根据需求去改就好了，下面是我在作者的基础上改成我想要的样式了

我的这个其实就是把每次初始化之前的值拿到，存起来到时候请求接口验证就可以了几乎没怎么改动

index

import store from '../../store'
import create from '../../westore/create'
const app = getApp();

create(store, {
  /**
   * 页面的初始数据
   */
  data: {
    page: {
      title: '设置密码'
    },
    getSystemInfo: {},
    codeValue: '获取验证码',
    hidden: false, //隐藏支付密码
    passdWord: true, //显示输入框
    // 输入框参数设置
    inputData: {
      input_value: "", //输入框的初始内容
      value_length: 0, //输入框密码位数
      isNext: false, //是否有下一步的按钮
      get_focus: true, //输入框的聚焦状态
      focus_class: true, //输入框聚焦样式
      value_num: [1, 2, 3, 4, 5, 6], //输入框格子数
      height: "98rpx", //输入框高度
      width: "604rpx", //输入框宽度
      see: false, //是否明文展示
      interval: true, //是否显示间隔格子
    },
    type: 1, //默认第一次输入密码
    onePassdWord: '', //请输入密码
    twoPassdWord: '', //再次输入密码

  },
  //返回上一页
  onClickLeft: function() {
    wx.navigateBack({
      delta: 1
    })
  },
  // 当组件输入数字6位数时的自定义函数
  valueSix(value) {
    console.log(value);
    var type = this.data.type;
    var passdWord = value.detail; //获取到的密码
    if (type == 1) {
      this.setData({
        type: 2,
        onePassdWord: passdWord,
        inputData: Object.assign({}, this.data.inputData, { get_focus: true }) 
      })
    } else {
      // 模态交互效果
      wx.showToast({
        title: '支付成功',
        icon: 'success',
        duration: 2000
      })
      this.setData({
        twoPassdWord: passdWord
      })
      setTimeout(function(){
        wx.navigateBack({
          delta: 1
        })
      },2000)
     
    }

  },

  // 获取验证码
  bindGetCode: function() {
    var that = this;
    var code = 60;
    var getCode = setInterval(function() {
      that.setData({
        codeValue: (--code) + '秒'
      })
      if (code == -1) {
        clearInterval(getCode);
        that.setData({
          codeValue: '获取验证码'
        })
      }
    }, 1000)
  },
  // 点击确认
  bindConfirm: function() {
    this.setData({
      hidden: true,
      passdWord: false,
      inputData: Object.assign({}, this.data.inputData, { get_focus:true}) 
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

{
  "usingComponents": {
    "paySix": "../../components/paySix/index"
  }
}

<van-nav-bar title="{{page.title}}" left-arrow="{{true}}" fixed="{{true}}" border="{{false}}" bind:click-left="onClickLeft" />
<view style="margin-top:{{getSystemInfo.statusBarHeight+46}}px;border-top:1px solid #f3f3f3;" hidden="{{hidden}}">
  <view class="phone">
    <input value="15222662541"></input>
  </view>
  <view class="code">
    <input class="codeValue" placeholder="请输入验证码" type="number"></input>
    <view class="getCode" bindtap="bindGetCode">{{codeValue}}</view>
  </view>
  <view class="confirm" bindtap="bindConfirm">确认</view>
</view>

<view hidden="{{passdWord}}">
  <view style='text-align:center;margin-top:200rpx;'>
    <view wx:if='{{type == 1}}' style='margin-bottom:50rpx'>请输入支付密码</view>
    <view wx:if='{{type == 2}}' style='margin-bottom:50rpx'>再次输入支付密码</view>

    <paySix bindvalueSix="valueSix" input_value="{{inputData.input_value}}" value_length="{{inputData.value_length}}" isNext="{{inputData.isNext}}" get_focus="{{inputData.get_focus}}" focus_class="{{inputData.focus_class}}" value_num="{{inputData.value_num}}"
      height="{{inputData.height}}" width="{{inputData.width}}" see="{{inputData.see}}" interval="{{inputData.interval}}">
    </paySix>

  </view>
</view>

/* miniprogram/pages/setPassword/index.wxss */
@import "../../style/base.wxss";
@import "../../style/iconfont.wxss";
@import "../../components/paySix/index.wxss";

page {
  background: white;
}

.phone {
  margin: 0 30rpx;
  padding: 30rpx 0;
  font-size: 32rpx;
  border-bottom: 2rpx solid #f3f3f3;
}

.code {
  display: flex;
  align-items: center;
  margin: 0 30rpx;
  padding: 30rpx 0;
  font-size: 32rpx;
  border-bottom: 2rpx solid #f3f3f3;
}

.codeValue {
  flex: 1;
}

.getCode {
  color: #caab7f;
}

.confirm {
  width: 80%;
  margin: 200rpx auto;
  font-size: 32rpx;
  color: white;
  background: linear-gradient(to right, #caab7f, #ad843e);
  text-align: center;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 90rpx;
}

------------------------------------

这个是组件

// component.js
Component({

  // 组件属性
  properties: {

    //输入框密码位数
    value_length: {
      type: Number,
      value: 0,
      // 监听输入框密码变化
      observer: function (newVal, oldVal) {
        let that = this;
        let input_value = that.data.input_value
        that.triggerEvent('valueNow', input_value)
        // 当输入框的值等于6时（发起支付等...）
        if (newVal == 6) {
          // 设定延时事件处理
          setTimeout(function () {
            // 引用组件页面的自定义函数(前一个参数为函数，后一个为传递给父页面的值)
            that.triggerEvent('valueSix', input_value)
            // 当没有
            if (!that.data.isNext) {
              // 回到初始样式
              that.setData({
                // get_focus: false,
                value_length: 0,
                input_value: ""
              });
            }

          }, 100)

        }
      }
    },

    // 是否显示间隔输入框
    interval: {
      type: Boolean,
      value: true,
      observer: function (newVal, oldVal) {

      }
    },

    // 是否有下一步按钮（如果有则当输入6位数字时不自动清空内容）
    isNext: {
      type: Boolean,
      value: false,
      observer: function (newVal, oldVal) {

      }
    },

    //输入框聚焦状态
    get_focus: {
      type: Boolean,
      value: false,
      observer: function (newVal, oldVal) {

      }
    },
    //输入框初始内容
    input_value: {
      type: String,
      value: "",
      observer: function (newVal, oldVal) {

      }
    },
    //输入框聚焦样式 
    focus_class: {
      type: Boolean,
      value: false,
      observer: function (newVal, oldVal) {

      }
    },
    //输入框格子数
    value_num: {
      type: Array,
      value: [1, 2, 3, 4, 5, 6],
      observer: function (newVal, oldVal) {

      }
    },
    //输入框高度
    height: {
      type: String,
      value: "98rpx",
      observer: function (newVal, oldVal) {

      }
    },
    //输入框宽度
    width: {
      type: String,
      value: "604rpx",
      observer: function (newVal, oldVal) {

      }
    },
    //是否明文展示
    see: {
      type: Boolean,
      value: false,
      observer: function (newVal, oldVal) {

      }
    },
  },

  // 初始化数据
  data: {

  },

  // 组件方法
  methods: {

    // 获得焦点时
    get_focus() {
      let that = this;
      that.setData({
        focus_class: true
      })
    },

    // 失去焦点时
    blur() {
      let that = this;
      that.setData({
        focus_class: false
      })
    },

    // 点击聚焦
    set_focus() {
      let that = this;
      that.setData({
        get_focus: true
      })
    },

    // 获取输入框的值
    get_value(data) {
      let that = this;
      // 设置空数组用于明文展现
      let val_arr = [];
      // 获取当前输入框的值
      let now_val = data.detail.value
      // 遍历把每个数字加入数组
      for (let i = 0; i < 6; i++) {
        val_arr.push(now_val.substr(i, 1))
      }
      // 获取输入框值的长度
      let value_length = data.detail.value.length;
      // 更新数据
      that.setData({
        value_length: value_length,
        val_arr: val_arr,
        input_value: now_val
      });

    },
  }
})

{
  "component": true,
  "usingComponents": {}
}

<view class='content'>
    <!-- 输入框（表格） -->
    <view class='{{(interval?"pay_number":"pay_number_interval")}}  {{focus_class?"get_focus":""}}' catchtap="set_focus" style='width:{{width}};height:{{height}};'>
      <view class='{{focus_class?(interval?"get_focus_dot":"get_focus_dot_interval"):(interval?"password_dot":"password_dot_interval")}} {{index==0?"noBorder":""}}' wx:for="{{value_num}}" wx:key="{{index}}">
        <view wx:if="{{(value_length==item-1)&&focus_class}}" class="cursor"></view>
        <view wx:if="{{value_length>=item}}" class="{{see?'':'dot'}}">{{see?val_arr[index]:""}}</view>
      </view>
    </view>

    <!-- 输入框（隐藏） -->
    <input value="{{input_value}}" focus="{{get_focus}}" maxlength="6" type="number" class='input_container' placeholder="" bindinput="get_value" bindfocus="get_focus" bindblur="blur" />
  </view>

/* 支付密码框 */

.pay_number {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  border: 1px solid #cfd4d3;
  /* border-radius:10rpx; */
}

.pay_number_interval {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  border-left: 1px solid #cfd4d3;
  /* border:none; */
}

/* 第一个格子输入框 */
.content .noBorder{
   border-left:none; 
}


/* 支付密码框聚焦的时候 */

.get_focus {
  border-color: #cfd4d3;
}

/* 单个格式样式 */

.password_dot {
  flex: 1;
  border-left: 1px solid #cfd4d3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.password_dot_interval {
  flex: 1;
  border: 1px solid #cfd4d3;
  margin-right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 单个格式样式（聚焦的时候） */

.get_focus_dot {
  flex: 1;
  border-left: 1px solid #cfd4d3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.get_focus_dot_interval {
  flex: 1;
  border: 1px solid #cfd4d3;
  margin-right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 模拟光标 */

.cursor {
  width: 1px;
  height: 15px;
  background-color: orange;
  animation: focus 0.7s infinite;
}

/* 光标动画 */

@keyframes focus {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* 格式中的点 */

.dot {
  width: 10px;
  height: 10px;
  background-color: #000;
  border-radius: 50%;
}

/* 输入框 */

.input_container {
  /* height: 0;
  width: 0;
  min-height: 0; */
  position: relative;
  text-indent: -999em;
  left: -100%;
}