- 贴上代码,
<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>
-
参数说明
| 参数 | 说明 | 类型 | 默认值 |
|---------|-------------|----------|-------------|
| placeholder | placeholder文字 | String | 请输入短信验证码 |
| maxlength | 输入框长度 | String | ‘6’ |
| sTimer | 秒数 | string | ‘60’ |
| text | 按钮文字 | String | 获取验证码 |
| disabled | 禁用点击 | Boolean | false |
| start | 是否启用验证码发送后才进行读秒 | Boolean | true |
| value | 输入框值 | string | – | -
event事件说明:
事件名称 | 事件说明 | 回调参数 |
---|---|---|
input | 输入框input事件 | 输入框值 |
msgFocus | 聚焦事件 | 输入框内容 |
msgBlur | 失焦事件 | 输入框内容 |
msgChange | change事件 | 输入框内容 |
clickCode | 按钮点击事件 | – |