paymentPwd.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <template>
  2. <view class="paymentPwd-container">
  3. <text class="pwd-describe">{{nowSetp == 1 ? '请设置6位数字支付密码' : nowSetp == 2 ? '请再次输入密码' : ''}}</text>
  4. <view class="sms-item" @tap='KeyboarOpen'>
  5. <password-input :numLng='password' :plaintext="true"></password-input>
  6. </view>
  7. <view class="btn-con">
  8. <u-button class="handle-btn" type="info" size="medium" @click="cancel">取消</u-button>
  9. <u-button class="handle-btn" type="primary" size="medium" @click="submit">确定</u-button>
  10. </view>
  11. <!-- 数字键盘 -->
  12. <number-keyboard tabBar ref='KeyboarHid' @input='onInput' psdLength='6'></number-keyboard>
  13. </view>
  14. </template>
  15. <script>
  16. import numberKeyboard from '@/pages/userCenter/userInfo/components/number-keyboard/number-keyboard.vue'
  17. import passwordInput from '@/pages/userCenter/userInfo/components/password-input/password-input.vue'
  18. export default {
  19. data() {
  20. return {
  21. nowSetp: 1, // 当前第几次设置密码
  22. password: '', //输入的内容
  23. oPwd: '', // 第一次密码
  24. tPwd: '', // 第二次密码
  25. }
  26. },
  27. components: {
  28. numberKeyboard,
  29. passwordInput
  30. },
  31. onShow() {
  32. },
  33. onLoad() {
  34. //因为此时实例没有挂载完成,需要延迟操作
  35. setTimeout(() => {
  36. this.$refs.KeyboarHid.open()
  37. }, 50)
  38. },
  39. methods:{
  40. //打开键盘
  41. KeyboarOpen(e) {
  42. this.$refs.KeyboarHid.open()
  43. },
  44. //输入的值
  45. onInput(val) {
  46. this.password = val
  47. },
  48. // 确定
  49. submit(){
  50. if(!this.password || this.password.length < 6){
  51. uni.showToast({ title: '请输入6位数字支付密码', icon: 'none' })
  52. }else{
  53. if(this.nowSetp == 1){
  54. this.oPwd = this.password
  55. this.$refs.KeyboarHid.reset()
  56. this.nowSetp++
  57. this.$refs.KeyboarHid.open()
  58. }else if(this.nowSetp == 2){
  59. this.tPwd = this.password
  60. this.checkPwd()
  61. }
  62. }
  63. },
  64. // 密码校验
  65. checkPwd(){
  66. if(this.oPwd == this.tPwd){
  67. // 请求接口
  68. uni.showToast({ title: '支付密码设置成功', icon: 'none' })
  69. setTimeout(()=>{
  70. uni.navigateBack({
  71. delta: 1
  72. })
  73. }, 2000)
  74. }else{
  75. uni.showToast({ title: '两次密码不一致请重新输入', icon: 'none' })
  76. this.$refs.KeyboarHid.reset()
  77. }
  78. },
  79. // 取消
  80. cancel(){
  81. this.oPwd = ''
  82. this.tPwd = ''
  83. this.$refs.KeyboarHid.reset()
  84. this.nowSetp = 1
  85. }
  86. }
  87. }
  88. </script>
  89. <style lang="less">
  90. .paymentPwd-container{
  91. width: 100%;
  92. padding: 0 30rpx;
  93. box-sizing: border-box;
  94. background-color: #fff;
  95. .pwd-describe{
  96. display: block;
  97. color: #606266;
  98. padding: 80rpx 0 70rpx;
  99. text-align: center;
  100. }
  101. .btn-con{
  102. display: flex;
  103. justify-content: space-between;
  104. padding-top: 130rpx;
  105. .handle-btn{
  106. display: inline-block;
  107. width: 45%;
  108. margin: 0 auto;
  109. text-align: center;
  110. }
  111. }
  112. }
  113. </style>