changePayPwd.vue 2.1 KB

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