小程序-两次支付密码输入
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"
}
}
{{codeValue}}
确认
请输入支付密码
再次输入支付密码
/* 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": {}
}
{{see?val_arr[index]:""}}
/* 支付密码框 */
.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%;
}