pwd.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <template>
  2. <view class="container">
  3. <view class="input-content">
  4. <view class="cu-form-group">
  5. <text class="label">旧密码</text>
  6. <input type="password" :value="oldPwd" placeholder="请输入旧密码" placeholder-class="input-empty" maxlength="20"
  7. minlength="6" data-key="oldpassword" @input="inputChange" @confirm="toLogin" />
  8. </view>
  9. <view class="cu-form-group">
  10. <text class="label">新密码</text>
  11. <input type="password" :value="pwd" placeholder="请设置新密码" placeholder-class="input-empty" maxlength="20"
  12. minlength="6" data-key="password" @input="inputChange" @confirm="toLogin" />
  13. </view>
  14. </view>
  15. <button class="confirm-btn" @click="toLogin">修改密码</button>
  16. </view>
  17. </template>
  18. <script>
  19. export default {
  20. data() {
  21. return {
  22. code: '',
  23. phone: '',
  24. password: '',
  25. oldpassword: '',
  26. sending: false,
  27. sendTime: '获取验证码',
  28. count: 60,
  29. logining: false,
  30. oldPwd: '',
  31. pwd: ''
  32. }
  33. },
  34. methods: {
  35. sendMsg() {
  36. const {
  37. phone
  38. } = this;
  39. if (!phone) {
  40. this.$queue.showToast("请输入手机号");
  41. } else if (phone.length !== 11) {
  42. this.$queue.showToast("请输入正确的手机号");
  43. } else {
  44. this.$queue.showLoading("正在发送验证码...");
  45. this.$Request.getT('/appLogin/sendMsg/' + mobile + '/forget').then(res => {
  46. if (res.code === 0) {
  47. this.sending = true;
  48. this.$queue.showToast('验证码发送成功请注意查收');
  49. this.countDown();
  50. uni.hideLoading();
  51. } else {
  52. uni.hideLoading();
  53. uni.showModal({
  54. showCancel: false,
  55. title: '短信发送失败',
  56. content: res.msg ? res.msg : '请一分钟后再获取验证码'
  57. });
  58. }
  59. });
  60. }
  61. },
  62. countDown() {
  63. const {
  64. count
  65. } = this;
  66. if (count === 1) {
  67. this.count = 60;
  68. this.sending = false;
  69. this.sendTime = '获取验证码'
  70. } else {
  71. this.count = count - 1;
  72. this.sending = true;
  73. this.sendTime = count - 1 + '秒后重新获取';
  74. setTimeout(this.countDown.bind(this), 1000);
  75. }
  76. },
  77. inputChange(e) {
  78. const key = e.currentTarget.dataset.key;
  79. this[key] = e.detail.value;
  80. },
  81. navBack() {
  82. uni.navigateBack();
  83. },
  84. toLogin() {
  85. const {
  86. password,
  87. oldpassword
  88. } = this;
  89. if (!oldpassword) {
  90. this.$queue.showToast("请输入旧密码");
  91. } else if (oldpassword.length < 6) {
  92. this.$queue.showToast("旧密码位数必须大于六位");
  93. } else if (!password) {
  94. this.$queue.showToast("请设置新密码");
  95. } else if (password.length < 6) {
  96. this.$queue.showToast("新密码位数必须大于六位");
  97. } else {
  98. this.logining = true;
  99. this.$queue.showLoading("正在修改密码中...");
  100. this.$Request.post("/app/user/updatePwd", {
  101. pwd : password,
  102. oldPwd : oldpassword,
  103. }).then(res => {
  104. uni.hideLoading();
  105. if (res.code === 0) {
  106. this.$queue.showToast('密码修改成功!下次请使用新密码登录!')
  107. setTimeout(function(){
  108. uni.navigateBack()
  109. },1000)
  110. } else {
  111. uni.showModal({
  112. showCancel: false,
  113. title: '密码修改失败',
  114. content: res.msg,
  115. });
  116. }
  117. });
  118. }
  119. },
  120. },
  121. }
  122. </script>
  123. <style lang='scss' scoped>
  124. page {
  125. height: 100%;
  126. background: #F6F6F6;
  127. }
  128. .container {
  129. height: 100%;
  130. padding-top: 20rpx;
  131. }
  132. .label{
  133. width: 100rpx;
  134. font-weight: bold;
  135. font-size: 28rpx;
  136. color: #222222;
  137. }
  138. .cu-form-group{
  139. background: none!important;
  140. }
  141. .input-content {
  142. width: 686rpx;
  143. height: 164rpx;
  144. background: #FFFFFF;
  145. border-radius: 32rpx 32rpx 32rpx 32rpx;
  146. margin: 0 auto;
  147. }
  148. .confirm-btn {
  149. width: 686rpx;
  150. height: 100rpx;
  151. line-height: 100rpx;
  152. background: linear-gradient( 143deg, #FFE6EE 0%, #FF9AB2 100%);
  153. border-radius: 86rpx 86rpx 86rpx 86rpx;
  154. font-weight: bold;
  155. font-size: 32rpx;
  156. color: #222222;
  157. margin-top: 32rpx;
  158. }
  159. </style>