paymentPwd.vue 4.1 KB

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