paymentPwd.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. <template>
  2. <view class="paymentPwd-container">
  3. <text class="pwd-describe">{{nowSetp == 1 ? '请设置6位数字支付密码' : nowSetp == 2 ? '请再次输入密码' : ''}}</text>
  4. <view class="sms-item" @tap="showKeyboard=!showKeyboard">
  5. <u-message-input mode="bottomLine" :maxlength="6" v-model="value" :dot-fill="true" :disabled-keyboard="true"></u-message-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. <u-keyboard ref="uKeyboard" :dot-enabled="false" :mask="false" :tooltip="false" v-model="showKeyboard" @change="valChange" @backspace="backspace"></u-keyboard>
  13. </view>
  14. </template>
  15. <script>
  16. import {setPayPwd} from '@/api/order.js'
  17. export default {
  18. data() {
  19. return {
  20. nowSetp: 1, // 当前第几次设置密码
  21. value: '', //输入的内容
  22. showKeyboard: false, // 是否打开键盘
  23. oPwd: '', // 第一次密码
  24. tPwd: '', // 第二次密码
  25. }
  26. },
  27. onShow() {
  28. },
  29. onLoad() {
  30. //因为此时实例没有挂载完成,需要延迟操作
  31. setTimeout(() => {
  32. this.showKeyboard = true
  33. }, 50)
  34. },
  35. methods:{
  36. // 按键被点击(点击退格键不会触发此事件)
  37. valChange(val) {
  38. // 将每次按键的值拼接到value变量中,注意+=写法
  39. if(this.value.length < 6){
  40. this.value += val
  41. }
  42. },
  43. // 退格键被点击
  44. backspace() {
  45. // 删除value的最后一个字符
  46. if(this.value.length) this.value = this.value.substr(0, this.value.length - 1)
  47. },
  48. // 确定
  49. submit(){
  50. if(!this.value || this.value.length < 6){
  51. uni.showToast({ title: '请输入6位数字支付密码', icon: 'none' })
  52. }else{
  53. if(this.nowSetp == 1){
  54. this.oPwd = this.value
  55. this.value = ''
  56. this.nowSetp++
  57. this.showKeyboard = true
  58. }else if(this.nowSetp == 2){
  59. this.tPwd = this.value
  60. this.checkPwd()
  61. }
  62. }
  63. },
  64. // 密码校验
  65. checkPwd(){
  66. if(this.oPwd == this.tPwd){
  67. // 请求接口
  68. setPayPwd({password: this.tPwd}).then(res=>{
  69. if(res.status==200) {
  70. uni.showToast({ title: '支付密码设置成功', icon: 'none' })
  71. uni.$emit('setPswSuccess', {success: true})
  72. setTimeout(()=>{
  73. uni.navigateBack({
  74. delta: 1
  75. })
  76. }, 2000)
  77. } else {
  78. uni.showToast({
  79. title: res.message,
  80. icon: 'none'
  81. })
  82. }
  83. })
  84. }else{
  85. uni.showToast({ title: '两次密码不一致请重新输入', icon: 'none' })
  86. this.value = ''
  87. this.showKeyboard = true
  88. }
  89. },
  90. // 取消
  91. cancel(){
  92. this.oPwd = ''
  93. this.tPwd = ''
  94. this.value = ''
  95. this.nowSetp = 1
  96. }
  97. }
  98. }
  99. </script>
  100. <style lang="less">
  101. .paymentPwd-container{
  102. width: 100%;
  103. padding: 0 30rpx;
  104. box-sizing: border-box;
  105. background-color: #fff;
  106. .pwd-describe{
  107. display: block;
  108. color: #606266;
  109. padding: 80rpx 0 70rpx;
  110. text-align: center;
  111. }
  112. .btn-con{
  113. display: flex;
  114. justify-content: space-between;
  115. padding-top: 130rpx;
  116. .handle-btn{
  117. display: inline-block;
  118. width: 45%;
  119. margin: 0 auto;
  120. text-align: center;
  121. }
  122. }
  123. }
  124. </style>