smsVerification.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <template>
  2. <view class="smsVerification-container">
  3. <view class="sms-title">输入短信验证码</view>
  4. <text class="sms-describe">验证码已发送至157****7854,请在下方输入框内输入6位数字验证码</text>
  5. <view class="sms-item" @tap='KeyboarOpen'>
  6. <password-input :numLng='password' :plaintext="false"></password-input>
  7. </view>
  8. <view class="sendcode-con">
  9. <text :class="['getcode-btn', isDisable ? 'grey-btn' : '']" @click="isDisable ? null : getCodeValidate()">{{nowVal}}</text>
  10. </view>
  11. <view class="btn-con">
  12. <u-button class="handle-btn" type="info" size="medium" @click="cancel">取消</u-button>
  13. <u-button class="handle-btn" type="primary" size="medium" @click="submit">确定</u-button>
  14. </view>
  15. <!-- 数字键盘 -->
  16. <number-keyboard tabBar ref='KeyboarHid' @input='onInput' psdLength='6'></number-keyboard>
  17. </view>
  18. </template>
  19. <script>
  20. import numberKeyboard from '@/pages/userCenter/userInfo/components/number-keyboard/number-keyboard.vue'
  21. import passwordInput from '@/pages/userCenter/userInfo/components/password-input/password-input.vue'
  22. export default {
  23. data() {
  24. return {
  25. nowVal: '获取验证码', // 按钮显示内容
  26. count: '', // 当前秒数
  27. timer: null, // 倒计时
  28. isDisable: false, // 是否禁止获取验证码
  29. password: "", //输入的内容
  30. }
  31. },
  32. components: {
  33. numberKeyboard,
  34. passwordInput
  35. },
  36. onShow() {
  37. this.getCodeValidate()
  38. },
  39. onLoad() {
  40. //因为此时实例没有挂载完成,需要延迟操作
  41. setTimeout(() => {
  42. this.$refs.KeyboarHid.open()
  43. }, 50)
  44. },
  45. methods:{
  46. //打开键盘
  47. KeyboarOpen(e) {
  48. this.$refs.KeyboarHid.open()
  49. },
  50. //输入的值
  51. onInput(val) {
  52. this.password = val
  53. },
  54. // 获取验证码
  55. getCodeValidate(){
  56. const _this = this
  57. // 短信验证码
  58. // memberVerifyCode({ phone: '15454787787' }).then(res => {
  59. // console.log(JSON.stringify(res))
  60. // if(res.status == 200){ // 验证码输入正确
  61. // 开启倒计时
  62. this.getCodeFun()
  63. uni.showToast({icon: 'none',title: '验证码发送成功'})
  64. // }else { // 验证码输入错误
  65. // uni.showToast({icon: 'none',title: res.message})
  66. // }
  67. // })
  68. },
  69. // 开始倒计时
  70. getCodeFun(){
  71. const TIME_COUNT = 60
  72. if (!this.timer) {
  73. this.count = TIME_COUNT
  74. this.timer = setInterval(() => {
  75. if (this.count > 0 && this.count <= TIME_COUNT) {
  76. this.count--
  77. this.nowVal = this.count + '秒后重新发送'
  78. this.isDisable = true
  79. } else {
  80. this.nowVal = '重新获取验证码'
  81. clearInterval(this.timer)
  82. this.timer = null
  83. this.isDisable = false
  84. }
  85. }, 1000)
  86. }
  87. },
  88. // 确定
  89. submit(){
  90. if(!this.password || this.password.length < 6){
  91. uni.showToast({ title: '请输入6位数字验证码', icon: 'none' })
  92. }else{
  93. // 校验输入短信验证码是否正确
  94. uni.redirectTo({
  95. url: '/pages/userCenter/userInfo/paymentPwd'
  96. })
  97. }
  98. },
  99. // 取消
  100. cancel(){}
  101. }
  102. }
  103. </script>
  104. <style lang="less">
  105. .smsVerification-container{
  106. width: 100%;
  107. padding: 0 30rpx;
  108. box-sizing: border-box;
  109. background-color: #fff;
  110. .sms-title {
  111. margin: 50rpx 0 30rpx;
  112. font-size: 36rpx;
  113. font-weight: bold;
  114. }
  115. .sms-describe{
  116. display: block;
  117. color: #606266;
  118. margin: 20rpx 0 50rpx;
  119. }
  120. .sendcode-con{
  121. text-align: center;
  122. padding-top: 70rpx;
  123. .getcode-btn {
  124. display: block;
  125. font-size: 28rpx;
  126. color: #298bf2;
  127. }
  128. .grey-btn{
  129. color: #999;
  130. }
  131. }
  132. .btn-con{
  133. display: flex;
  134. justify-content: space-between;
  135. padding-top: 130rpx;
  136. .handle-btn{
  137. display: inline-block;
  138. width: 45%;
  139. margin: 0 auto;
  140. text-align: center;
  141. }
  142. }
  143. }
  144. </style>