changePayPwd.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <template>
  2. <view class="changePayPwd-container">
  3. <text class="pwd-describe">请输入当前支付密码</text>
  4. <view class="pwd-item">
  5. <u-input v-model="oldPwd" border type="password" input-align="center" placeholder="请输入支付密码" :maxlength="30" class="inp-pwd" />
  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. <view class="linkbtn-con">
  12. <text class="link-btn" @click="goPage">忘记支付密码</text>
  13. </view>
  14. </view>
  15. </template>
  16. <script>
  17. export default {
  18. data() {
  19. return {
  20. oldPwd: '' // 旧密码
  21. }
  22. },
  23. onShow() {
  24. },
  25. onLoad() {
  26. },
  27. methods:{
  28. // 确定
  29. submit(){
  30. if(this.oldPwd){
  31. // 跳转到设置密码
  32. uni.redirectTo({
  33. url: `/pages/userCenter/userInfo/paymentPwd?oldPwd=${this.oldPwd}`
  34. })
  35. }else{
  36. uni.showToast({ title: '请输入支付密码', icon: 'none' })
  37. }
  38. },
  39. // 取消
  40. cancel(){
  41. uni.navigateBack({ delta: 1 })
  42. },
  43. // 忘记支付密码
  44. goPage(){
  45. uni.redirectTo({
  46. url: '/pages/userCenter/userInfo/smsVerification'
  47. })
  48. }
  49. }
  50. }
  51. </script>
  52. <style lang="less">
  53. .changePayPwd-container{
  54. width: 100%;
  55. padding: 0 30rpx;
  56. box-sizing: border-box;
  57. background-color: #fff;
  58. .pwd-describe{
  59. display: block;
  60. color: #606266;
  61. padding: 80rpx 0 70rpx;
  62. text-align: center;
  63. }
  64. .pwd-item{
  65. .inp-pwd{
  66. }
  67. }
  68. .btn-con{
  69. display: flex;
  70. justify-content: space-between;
  71. padding-top: 130rpx;
  72. .handle-btn{
  73. display: inline-block;
  74. width: 45%;
  75. margin: 0 auto;
  76. text-align: center;
  77. }
  78. }
  79. .linkbtn-con{
  80. text-align: center;
  81. .link-btn{
  82. display: inline-block;
  83. font-size: 28rpx;
  84. color: #298bf2;
  85. margin-top: 200rpx;
  86. }
  87. }
  88. }
  89. </style>