smsVerification.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. <template>
  2. <view class="smsVerification-container">
  3. <view v-if="sendCode" class="">
  4. <view class="sms-title">输入短信验证码</view>
  5. <text class="sms-describe">验证码已发送至{{userPhone}},请在下方输入框内输入6位数字验证码</text>
  6. <view class="sms-item" @tap="showKeyboard=!showKeyboard">
  7. <u-message-input mode="bottomLine" :maxlength="6" v-model="value" :disabled-keyboard="true"></u-message-input>
  8. </view>
  9. <view class="sendcode-con">
  10. <text :class="['getcode-btn', isDisable ? 'grey-btn' : '']" @click="isDisable ? null : pageInit()">{{nowVal}}</text>
  11. </view>
  12. </view>
  13. <!-- <view class="btn-con">
  14. <u-button class="handle-btn" type="info" size="medium" @click="cancel">取消</u-button>
  15. <u-button class="handle-btn" type="primary" size="medium" @click="submit">确定</u-button>
  16. </view> -->
  17. <!-- 数字键盘 -->
  18. <u-keyboard ref="uKeyboard" :dot-enabled="false" :mask="false" :tooltip="false" v-model="showKeyboard" @change="valChange" @backspace="backspace"></u-keyboard>
  19. <!-- 图文验证码 -->
  20. <uni-popup :maskClick="false" ref="imageTxtPopup" type="center">
  21. <popup-con title="图文验证码" :popBtn="popBtn" :changeImg="changeImg" @captchaImg="captchaVerify"></popup-con>
  22. </uni-popup>
  23. </view>
  24. </template>
  25. <script>
  26. import uniPopup from '@/components/uni-popup/uni-popup.vue'
  27. import popupCon from '@/components/uni-popup/popup-con.vue'
  28. import { sendVerifyCode } from '@/api/user.js'
  29. import { checkCode } from '@/api/order.js'
  30. export default {
  31. components: {
  32. uniPopup,
  33. popupCon
  34. },
  35. data() {
  36. return {
  37. nowVal: '获取验证码', // 按钮显示内容
  38. count: '', // 当前秒数
  39. timer: null, // 倒计时
  40. isDisable: false, // 是否禁止获取验证码
  41. value: '', //输入的内容
  42. phone: '', // 用户手机号
  43. showKeyboard: false, // 是否打开键盘
  44. popBtn: [], // name为操作按钮名称,color为操作按钮颜色值
  45. changeImg: false, // 是否重新更换图形验证码
  46. verifyCode: '',
  47. randomCode: '', // 图片验证码随机码
  48. sendCode: false // 短信是否发送成功
  49. }
  50. },
  51. onLoad() {
  52. this.phone = this.$store.state.vuex_userData.mobile
  53. console.log(this.$store.state.vuex_userData,'his.$store.state.vuex_OrderAddress')
  54. //因为此时实例没有挂载完成,需要延迟操作
  55. setTimeout(() => {
  56. this.pageInit()
  57. }, 50)
  58. },
  59. computed: {
  60. userPhone () {
  61. return this.phone.substr(0,3) + "****" + this.phone.substr(7)
  62. }
  63. },
  64. watch: {
  65. // 监听输入框输入长度
  66. value: {
  67. handler(newVal) {
  68. // console.log(newVal.length,'NNNNNNNNNNNN')
  69. if(newVal.length==6) {
  70. let params = {
  71. mobile: this.phone,
  72. verifiCode: newVal
  73. }
  74. checkCode(params).then(res=>{
  75. if(res.status==200) {
  76. // 跳转到设置密码
  77. uni.redirectTo({
  78. url: `/pages/userCenter/userInfo/paymentPwd?code=${this.value}&mobile=${this.phone}`
  79. })
  80. } else {
  81. uni.showToast({
  82. title: res.message,
  83. icon: 'none'
  84. })
  85. }
  86. })
  87. }
  88. },
  89. deep: true
  90. }
  91. },
  92. methods:{
  93. pageInit () {
  94. this.value = ''
  95. this.sendCode = false
  96. this.showKeyboard = false
  97. this.retsetCode()
  98. // 图文验证码
  99. this.$refs.imageTxtPopup.open()
  100. },
  101. // 验证图片验证码
  102. captchaVerify(code, nowRandomCode){
  103. let obj = {}
  104. obj.phone = this.phone
  105. obj.random = nowRandomCode
  106. obj.code = code
  107. // 短信验证码
  108. sendVerifyCode(obj).then(res => {
  109. console.log(JSON.stringify(res))
  110. if(res.status == 200){ // 验证码输入正确
  111. this.randomCode = nowRandomCode // 图片验证码随机码
  112. // 关闭 图形验证码 弹框
  113. this.$refs.imageTxtPopup.close()
  114. // 开启倒计时
  115. this.getCodeFun()
  116. this.sendCode = true
  117. this.showKeyboard = true
  118. uni.showToast({icon: 'none',title: '验证码发送成功'})
  119. }else { // 验证码输入错误
  120. this.retsetCode()
  121. uni.showToast({icon: 'none',title: res.message})
  122. }
  123. })
  124. },
  125. // 重新触发获取图片验证码
  126. retsetCode(){
  127. const _this = this
  128. _this.verifyCode = ''
  129. _this.randomCode = ''
  130. // 切换验证码重新校验
  131. _this.changeImg = false
  132. _this.$nextTick(function(){
  133. _this.changeImg = true
  134. })
  135. },
  136. // 按键被点击(点击退格键不会触发此事件)
  137. valChange(val) {
  138. // 将每次按键的值拼接到value变量中,注意+=写法
  139. if(this.value.length < 6){
  140. this.value += val
  141. }
  142. },
  143. // 退格键被点击
  144. backspace() {
  145. // 删除value的最后一个字符
  146. if(this.value.length) this.value = this.value.substr(0, this.value.length - 1)
  147. },
  148. // 开始倒计时
  149. getCodeFun(){
  150. const TIME_COUNT = 60
  151. if (!this.timer) {
  152. this.count = TIME_COUNT
  153. this.timer = setInterval(() => {
  154. if (this.count > 0 && this.count <= TIME_COUNT) {
  155. this.count--
  156. this.nowVal = this.count + '秒后重新发送'
  157. this.isDisable = true
  158. } else {
  159. this.nowVal = '重新获取验证码'
  160. clearInterval(this.timer)
  161. this.timer = null
  162. this.isDisable = false
  163. }
  164. }, 1000)
  165. }
  166. },
  167. // 确定
  168. submit(){
  169. if(!this.value || this.value.length < 6){
  170. uni.showToast({ title: '请输入6位数字验证码', icon: 'none' })
  171. }else{
  172. // 校验输入短信验证码是否正确
  173. uni.redirectTo({
  174. url: '/pages/userCenter/userInfo/paymentPwd'
  175. })
  176. }
  177. },
  178. // 取消
  179. cancel(){
  180. uni.navigateBack({
  181. delta: 1
  182. })
  183. }
  184. }
  185. }
  186. </script>
  187. <style lang="less">
  188. .smsVerification-container{
  189. width: 100%;
  190. padding: 0 30rpx;
  191. box-sizing: border-box;
  192. background-color: #fff;
  193. .sms-title {
  194. margin: 50rpx 0 30rpx;
  195. font-size: 36rpx;
  196. font-weight: bold;
  197. }
  198. .sms-describe{
  199. display: block;
  200. color: #606266;
  201. margin: 20rpx 0 50rpx;
  202. }
  203. .sendcode-con{
  204. text-align: center;
  205. padding-top: 70rpx;
  206. .getcode-btn {
  207. display: block;
  208. font-size: 28rpx;
  209. color: #298bf2;
  210. }
  211. .grey-btn{
  212. color: #999;
  213. }
  214. }
  215. .btn-con{
  216. display: flex;
  217. justify-content: space-between;
  218. padding-top: 130rpx;
  219. .handle-btn{
  220. display: inline-block;
  221. width: 45%;
  222. margin: 0 auto;
  223. text-align: center;
  224. }
  225. }
  226. }
  227. </style>