paymentPwd.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. <template>
  2. <view class="paymentPwd-container">
  3. <text class="pwd-describe">{{nowSetp == 1 ? '请设置6位数字支付密码' : nowSetp == 2 ? '请再次输入密码' : ''}}</text>
  4. <view class="sms-item" @click="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. <!-- 数字键盘 -->
  8. <u-keyboard ref="uKeyboard" :dot-enabled="false" :mask="false" :tooltip="false" v-model="showKeyboard" @change="valChange" @backspace="backspace"></u-keyboard>
  9. </view>
  10. </template>
  11. <script>
  12. import {setPayPwd, changePayPwd} from '@/api/order.js'
  13. export default {
  14. data() {
  15. return {
  16. nowSetp: 1, // 当前第几次设置密码
  17. value: '', //输入的内容
  18. showKeyboard: false, // 是否打开键盘
  19. oPwd: '', // 第一次密码
  20. tPwd: '', // 第二次密码
  21. oldPwd: '', // 原密码
  22. mobile: '', // 用户手机号
  23. verifiCode: '', // 短信验证码
  24. }
  25. },
  26. onShow() {
  27. },
  28. onLoad(option) {
  29. if (option.code){
  30. this.mobile = option.mobile
  31. this.verifiCode = option.code
  32. this.oldPwd = ''
  33. }
  34. if (option.oldPwd){
  35. this.oldPwd = option.oldPwd
  36. }
  37. //因为此时实例没有挂载完成,需要延迟操作
  38. setTimeout(() => {
  39. this.showKeyboard = true
  40. }, 50)
  41. },
  42. watch: {
  43. // 监听输入框输入长度
  44. value: {
  45. handler(newVal) {
  46. if(newVal.length==6) {
  47. if(this.nowSetp == 1){
  48. this.oPwd = this.value
  49. if(this.oldPwd && this.oPwd === this.oldPwd) {
  50. uni.showToast({
  51. title: '新密码与原密码相同,请重新输入!',
  52. icon: 'none'
  53. })
  54. this.value = ''
  55. return false
  56. } else {
  57. this.value = ''
  58. this.nowSetp++
  59. this.showKeyboard = true
  60. }
  61. }else if(this.nowSetp == 2){
  62. this.tPwd = this.value
  63. this.showKeyboard = false
  64. this.checkPwd()
  65. }
  66. }
  67. },
  68. deep: true
  69. }
  70. },
  71. methods:{
  72. // 按键被点击(点击退格键不会触发此事件)
  73. valChange(val) {
  74. // 将每次按键的值拼接到value变量中,注意+=写法
  75. if(this.value.length < 6){
  76. this.value += val
  77. }
  78. },
  79. // 退格键被点击
  80. backspace() {
  81. // 删除value的最后一个字符
  82. if(this.value.length) this.value = this.value.substr(0, this.value.length - 1)
  83. },
  84. // 密码校验
  85. checkPwd(){
  86. if(this.oPwd == this.tPwd){
  87. if(this.oldPwd) {
  88. this.changePsw()
  89. } else{
  90. // 设置密码 请求接口
  91. this.setPsw()
  92. }
  93. }else{
  94. uni.showToast({ title: '两次密码不一致请重新输入', icon: 'none' })
  95. this.value = ''
  96. this.showKeyboard = true
  97. }
  98. },
  99. // 首次设置密码
  100. setPsw () {
  101. let params = {
  102. mobile: this.mobile,
  103. verifiCode: this.verifiCode,
  104. payPassword: this.value
  105. }
  106. setPayPwd(params).then(res=>{
  107. if(res.status==200) {
  108. uni.showToast({ title: res.message, icon: 'none' })
  109. uni.$emit('setPswSuccess', {success: true})
  110. setTimeout(()=>{
  111. uni.navigateBack({
  112. delta: 1
  113. })
  114. }, 2000)
  115. }
  116. })
  117. },
  118. // 修改密码
  119. changePsw () {
  120. let params = {
  121. oldPayPassword: this.oldPwd,
  122. payPassword: this.value
  123. }
  124. changePayPwd(params).then(res=>{
  125. if(res.status==200) {
  126. uni.showToast({ title: res.message, icon: 'none' })
  127. setTimeout(()=>{
  128. uni.navigateBack({
  129. delta: 1
  130. })
  131. }, 2000)
  132. }
  133. })
  134. },
  135. // 取消
  136. cancel(){
  137. this.oPwd = ''
  138. this.tPwd = ''
  139. this.value = ''
  140. this.nowSetp = 1
  141. }
  142. }
  143. }
  144. </script>
  145. <style lang="less">
  146. .paymentPwd-container{
  147. width: 100%;
  148. padding: 0 30rpx;
  149. box-sizing: border-box;
  150. background-color: #fff;
  151. .pwd-describe{
  152. display: block;
  153. color: #606266;
  154. padding: 80rpx 0 70rpx;
  155. text-align: center;
  156. }
  157. .btn-con{
  158. display: flex;
  159. justify-content: space-between;
  160. padding-top: 130rpx;
  161. .handle-btn{
  162. display: inline-block;
  163. width: 45%;
  164. margin: 0 auto;
  165. text-align: center;
  166. }
  167. }
  168. }
  169. </style>