| | |
| | | /** |
| | | * CInputPhoneCode |
| | | * CInputPhoneCode - 表单项,手机验证码输入框 |
| | | * @author Tevin |
| | | */ |
| | | |
| | | <template> |
| | | <view class="c-input-phone-code"> |
| | | <AtInput |
| | | :name="itemData.name" |
| | | :title="itemData.label" |
| | | :name="itemRes.name" |
| | | :title="itemRes.label" |
| | | type="text" |
| | | :placeholder="placeholder" |
| | | :required="itemData.required" |
| | | :error="itemData.error" |
| | | :value="itemData.formData[itemData.name]" |
| | | :onChange="evt=>itemData.onChange(evt)" |
| | | :required="itemRes.required" |
| | | :error="itemRes.error" |
| | | :value="itemRes.formData[itemRes.name]" |
| | | :onChange="evt=>itemRes.onChange(evt)" |
| | | > |
| | | <AtButton |
| | | class="c-input-phone-btn" |
| | |
| | | AtButton, |
| | | }, |
| | | props: { |
| | | // 表单数据资源(表单组件内部机制专用) |
| | | itemRes: Object, |
| | | // 占位提示 |
| | | placeholder: String, |
| | | itemData: Object, |
| | | // 验证码计时器开始方式 |
| | | // true 点击按钮后立即自动开始 |
| | | // false 后台返回为成功时才开始 |
| | | autoStart: { |
| | | type: Boolean, |
| | | default: true, |
| | | }, |
| | | // 发送请求,通知后端给手机发验证码 |
| | | onCallPhoneCode: Function, |
| | | }, |
| | | data() { |
| | |
| | | if (this.holding) { |
| | | return; |
| | | } |
| | | this.holding = true; |
| | | this.cd = 60; |
| | | this.onCallPhoneCode(); |
| | | const timer = setInterval(() => { |
| | | this.cd -= 1; |
| | | if (this.cd === 0) { |
| | | this.holding = false; |
| | | this.cd = 60; |
| | | } |
| | | }, 1000); |
| | | const startCD = () => { |
| | | this.holding = true; |
| | | this.cd = 60; |
| | | setInterval(() => { |
| | | this.cd -= 1; |
| | | if (this.cd === 0) { |
| | | this.holding = false; |
| | | this.cd = 60; |
| | | } |
| | | }, 1000); |
| | | }; |
| | | if (this.autoStart) { |
| | | startCD(); |
| | | this.onCallPhoneCode(() => null); |
| | | } else { |
| | | this.onCallPhoneCode(() => { |
| | | startCD(); |
| | | }); |
| | | } |
| | | }, |
| | | }, |
| | | }; |