用于敏感操作的二次确认组件
图片如下
功能如下
① 创建安全码 （需要辅助验证码 如微信验证码 手机验证码 密码等） 充当 "支付密码“
② 修改安全码 可以在配置参数中设置 修改安全码 同样需要辅助验证码
③ 校验验证码 输入验证码做二次确认
具体自定义显示参数
| 参数名 | 参数含义 | 备注 |
| downcount | 每一次获取辅助验证码的倒计时（秒） | 60表示每一次获取需要倒计时60秒 |
| form_code | 安全码表单名 | 默认 "输入安全码" |
| form_verify | 辅助验证码表单名 | 默认 "输入验证码" |
| title_add | 创建安全码顶部标题 | 默认 "请先设置安全密码" |
| title_modify | 修改安全码顶部标题 | 默认 "如有需要,请修改安全码" |
| title_input | 校验安全码顶部标题 | 默认"敏感操作需要验证安全码" |
| title_uninput_verify | 点击完成按钮时未输入验证码提示 | 默认"未输入验证码,请先获取" |
| title_uninput_code | 点击完成按钮时未输入安全码提示 | 默认"未输入安全码" |
| title_maxerror | 输入安全码失败次数过多提示 | 默认"输入失败次数太多,无法提交" |
| title_verify_btn | 获取验证码按钮名称 | 默认"获取验证码" |
| title_finish_btn | 确定按钮名称 | 默认"确定" |
| title_success_add | 创建安全码成功提示 | 默认"设置安全码成功" |
| title_success_input | 校验安全码成功提示 | 默认"安全码校验成功" |
| title_success_modify | 修改安全码成功提示 | 默认"安全码修改成功" |
| title_verify_kind | 验证码类型标题 | 默认"验证码类型" |
具体自定义配置参数
| 参数名 | 参数含义 | 备注 |
| code | 存储表单输入的安全码 | 可空 用于可以自行传入 |
| allowClose | 是否允许打开弹窗后点击关闭 | boolean 默认为 false |
| key | 每一个弹窗界面的标记ID | 必填 |
| distance | 时间差间隔 单位 秒 结合key判断已经在短时间校验后绕过校验 | 默认0 每次都得输入安全码校验 |
| tips | 底部提示 *号标记说明 | 可空 |
| type | 弹窗类型 | 默认为 0 ，0 校验码确认 1 创建校验码 2 修改校验码 |
| max_error_num | 最大试错次数 结合key判断 | 默认为0 不记错 3表示短时间试错三次禁止提交 |
| code_type | 安全码控件类型 | 与uniapp input 空间 type属性一致 默认为 number |
| verify_kind_names | 数组 验证类型标题数组 | 1.0.1新增 可空 |
| verify_kind_values | 数组 验证类型标识数组 用于非连续索引 | 1.0.1新增 可以是数值或字符 可空 |
使用流程
① 引入组件到当前页面
import jySafeCode from "@/components/jy-safeCode/safeCode.vue";② 将组件注册到当前页面
components: {
jySafeCode
},③ 引入到视图界面
<jySafeCode ref="jySafeCode" @callback="handle_safecode"></jySafeCode>④ 在需要触发组件的时候打开弹窗 根据具体业务引入初始化相关自定义配置参数 如上表2
var data = {
'key':'code',
'type':0
};
app.post('api/safe/exists',{'kind':2},(res)=>{
if (res.status) {
if (res.data!=true) {
data.tips = '还未创建安全码,请先创建';
data.type = 1;
}
this.$refs.jySafeCode.showUI(data);
}
});⑤ 添加业务回调实现 （创建、修改、校验、获取验证码操作）
在组件回调函数中传入 JSON格式数据，如下
{"status":0,"msg":"错误内容"}
{"status":1,"data":1}handle_safecode(data, callback) {
if (data.kind == 'verify') {
app.post('api/verify/send', {
'type': 'SAFE-CODE',
'message': data.type == 1 ? 'safe-code-create' : 'safe-code-change'
}, (res) = > {
callback(res);
});
} else if (data.kind == 'finish') {
if (data.type == 0) {
//验证
app.post('api/safe/verify', {
kind: 2,
_safe_code: data.code
}, (res) = > {
if (res.status == 1 && res.data == true) {
app.post('api/manage/removeGood', {
_id: _id,
_safe_code: data.code
}, (res) = > {
app.Toast(res.status == 1 ? '删除成功' : res.msg);
res.hideToast = true;
callback(res);
if (res.status == 1) {
uni.setStorageSync('Load_shop', 'Load')
app.delayback()
}
});
} else {
callback({
'status': 0,
'msg': '安全码错误'
});
}
})
} else {
app.post('api/safe/' + (data.type == 1 ? 'create' : 'change'), {
'kind': 2,
'value': data.code,
'verify_code': data.verify
}, (res) = > {
callback(res);
});
}
}
}备注
如果需要自定义页面内容显示 可以调用组件初始化函数 将合法字段内容覆盖默认字段，具体看上表1
var arr = {
'downcount': 120
};
this.$refs.jySafeCode.initFields(arr);组件1.0.1新增功能
允许客户端用户选择验证码类型 如 公众号 短信验证 由传入参数具体确定
verify_kind_names
verify_kind_values
数组元素大于1时才会有筛选
