VUE组件封装之短信验证码组件

1. 贴上代码，

<template>
    <div>
        <msg-code v-model="smsPwd"
                  :msgTitle="'验证码'"
                  :disabled="false"
                  :placeholder="placeholder"
                  :maxlength="'6'"
                  :text="text"
                  ref="msgCode"
                  @clickCode="getSmsCode">
        </msg-code>
    </div>
</template>
<script>
    import { toast , rpc,callErrorTips,getUserInfo} from '@core/bridge';
    import msgCode from '@comps/ynet_msg_code';
    let _alert = (e)=>{
        callErrorTips('提示',e,'确定')
    };
    export default {
        data() {
            return {
                smsPwd:'',//短信码
                isSendSms:false,//是否发送短信验证码
                mobile:'',
                isPassStatus:false,//是否通过验证
                smsSign:null,
            }
        },
        props:{
            placeholder: {
                type: String,
                default: '请输入短信验证码'
            },
            text:{
                type: String,
                default: '获取验证码'
            },
            serviceType:{
                type: String,
                default: ''
            }
        },
        mounted() {

        },
        created() {
            getUserInfo().then(res => {
                // console.log(res);
                this.mobile = res.body.chlMobileNo;//获取预留手机号码
            });
        },
        components: {
            msgCode
        },
        computed: {},
        methods: {
            resetTime(){
                this.$refs.msgCode.resetTime();
            },
            getSmsCode() {
                let req = {
                    serviceType:this.serviceType,//短信验证码Type。
                    mobile:this.mobile//发送短信验证码手机号。
                };
                this.isSendSms = true;
                rpc('account.sendSms', req).then(res => {
                    this.isPassStatus = false;
                    toast('短信验证码已发送至您手机，2分钟有效');
                });
            },
            isPass(fun){
                if(!this.isSendSms){
                    _alert('请获取短信验证码');
                    return
                }
                if(this.smsPwd === ''){
                    _alert('请输入短信验证码');
                    return
                }
                if(this.isPassStatus === false){
                    //如果没有通过验证
                    let  req = {
                        mobile:this.mobile,//手机号码。
                        serviceType:this.serviceType,//短信验证码Type。
                        smsCode:this.smsPwd//短信验证码。
                    };
                    rpc('account.verifySmsCode', req).then(res => {
                        this.isPassStatus = true;
                        this.smsSign = res.body.smsSign;
                        fun(this.smsSign);
                    });
                }else{
                    fun(this.smsSign);
                }
            }
        }
    };
</script>

2. 参数说明
   | 参数 | 说明 | 类型 | 默认值 |
   |---------|-------------|----------|-------------|
   | placeholder | placeholder文字 | String | 请输入短信验证码 |
   | maxlength | 输入框长度 | String | ‘6’ |
   | sTimer | 秒数 | string | ‘60’ |
   | text | 按钮文字 | String | 获取验证码 |
   | disabled | 禁用点击 | Boolean | false |
   | start | 是否启用验证码发送后才进行读秒 | Boolean | true |
   | value | 输入框值 | string | – |

3. event事件说明：

事件名称	事件说明	回调参数
input	输入框input事件	输入框值
msgFocus	聚焦事件	输入框内容
msgBlur	失焦事件	输入框内容
msgChange	change事件	输入框内容
clickCode	按钮点击事件	–