paymentPwd.vue 4.6 KB

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