• 0
  • 0

Uniapp 组件- 安全验证组件

2020-02-06 58 0 admin 所属分类:Hbuilder

用于敏感操作的二次确认组件

图片如下






功能如下

① 创建安全码 (需要辅助验证码 如微信验证码 手机验证码 密码等) 充当 "支付密码“

② 修改安全码 可以在配置参数中设置 修改安全码 同样需要辅助验证码

③ 校验验证码 输入验证码做二次确认

具体自定义显示参数

参数名参数含义备注
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时才会有筛选


组件下载地址

返回顶部