forgetPwd.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. <template>
  2. <view class="container">
  3. <navBar title="忘记密码" color="#000" />
  4. <view class="wrapper">
  5. <view class="input-content">
  6. <view
  7. class="cu-form-group"
  8. style="border: 2rpx solid whitesmoke; margin-bottom: 20px; border-radius: 30px"
  9. >
  10. <view class="title text-black">手机号</view>
  11. <input
  12. type="number"
  13. :value="phone"
  14. placeholder="请输入手机号"
  15. maxlength="11"
  16. data-key="phone"
  17. @input="inputChange"
  18. />
  19. </view>
  20. <view
  21. class="cu-form-group"
  22. style="border: 2rpx solid whitesmoke; margin-bottom: 20px; border-radius: 30px"
  23. >
  24. <text class="title text-black">验证码</text>
  25. <input
  26. type="number"
  27. :value="code"
  28. placeholder="请输入验证码"
  29. maxlength="6"
  30. data-key="code"
  31. @input="inputChange"
  32. @confirm="toLogin"
  33. />
  34. <button class="send-msg" @click="sendMsg" :disabled="sending">
  35. {{ sendTime }}
  36. </button>
  37. </view>
  38. <view
  39. class="cu-form-group"
  40. style="border: 2rpx solid whitesmoke; margin-bottom: 20px; border-radius: 30px"
  41. >
  42. <text class="title text-black">设置密码</text>
  43. <input
  44. type="password"
  45. :value="password"
  46. placeholder="请设置新密码"
  47. placeholder-class="input-empty"
  48. maxlength="20"
  49. minlength="6"
  50. data-key="password"
  51. @input="inputChange"
  52. @confirm="toLogin"
  53. />
  54. </view>
  55. </view>
  56. <button class="confirm-btn" @click="toLogin">立即找回</button>
  57. </view>
  58. </view>
  59. </template>
  60. <script>
  61. import navBar from "@/components/nav-bar/index.vue";
  62. export default {
  63. data() {
  64. return {
  65. code: "",
  66. phone: "",
  67. password: "",
  68. sending: false,
  69. sendTime: "获取验证码",
  70. count: 60,
  71. logining: false,
  72. };
  73. },
  74. components: {
  75. navBar,
  76. },
  77. methods: {
  78. sendMsg() {
  79. const { phone } = this;
  80. if (!phone) {
  81. this.$queue.showToast("请输入手机号");
  82. } else if (phone.length !== 11) {
  83. this.$queue.showToast("请输入正确的手机号");
  84. } else {
  85. this.$queue.showLoading("正在发送验证码...");
  86. this.$Request.getT("/app/Login/sendMsg/" + phone + "/forget").then((res) => {
  87. if (res.code === 0) {
  88. this.sending = true;
  89. this.$queue.showToast("验证码发送成功请注意查收");
  90. this.countDown();
  91. uni.hideLoading();
  92. } else {
  93. uni.hideLoading();
  94. uni.showModal({
  95. showCancel: false,
  96. title: "短信发送失败",
  97. content: res.msg ? res.msg : "请一分钟后再获取验证码",
  98. });
  99. }
  100. });
  101. }
  102. },
  103. countDown() {
  104. const { count } = this;
  105. if (count === 1) {
  106. this.count = 60;
  107. this.sending = false;
  108. this.sendTime = "获取验证码";
  109. } else {
  110. this.count = count - 1;
  111. this.sending = true;
  112. this.sendTime = count - 1 + "秒后重新获取";
  113. setTimeout(this.countDown.bind(this), 1000);
  114. }
  115. },
  116. inputChange(e) {
  117. const key = e.currentTarget.dataset.key;
  118. this[key] = e.detail.value;
  119. },
  120. navBack() {
  121. uni.navigateBack();
  122. },
  123. navTo(url) {
  124. uni.navigateTo({
  125. url,
  126. });
  127. },
  128. toLogin() {
  129. const { phone, password, code } = this;
  130. if (!phone) {
  131. this.$queue.showToast("请输入手机号");
  132. } else if (!password) {
  133. this.$queue.showToast("请设置密码");
  134. } else if (password.length < 6) {
  135. this.$queue.showToast("密码位数必须大于六位");
  136. } else {
  137. this.logining = true;
  138. this.$queue.showLoading("正在修改密码中...");
  139. this.$Request
  140. .post("/app/Login/forgetPwd", {
  141. pwd: password,
  142. phone: phone,
  143. msg: code,
  144. })
  145. .then((res) => {
  146. uni.hideLoading();
  147. if (res.code === 0) {
  148. uni.navigateTo({
  149. url: "/pages/public/loginphone",
  150. });
  151. } else {
  152. uni.showModal({
  153. showCancel: false,
  154. title: "密码找回失败",
  155. content: res.msg,
  156. });
  157. }
  158. });
  159. }
  160. },
  161. },
  162. };
  163. </script>
  164. <style lang="scss">
  165. page {
  166. background: #ffffff !important;
  167. }
  168. .send-msg {
  169. border-radius: 30px;
  170. color: white;
  171. height: 30px;
  172. font-size: 14px;
  173. line-height: 30px;
  174. background: #016bf6;
  175. }
  176. .container {
  177. padding-top: 32rpx;
  178. position: relative;
  179. width: 100%;
  180. height: 100%;
  181. overflow: hidden;
  182. background: #ffffff;
  183. }
  184. .wrapper {
  185. position: relative;
  186. z-index: 90;
  187. background: #ffffff;
  188. padding-bottom: 20px;
  189. }
  190. .input-content {
  191. padding: 40rpx;
  192. }
  193. .confirm-btn {
  194. width: 600rpx;
  195. height: 80rpx;
  196. line-height: 80rpx;
  197. border-radius: 60rpx;
  198. margin-top: 32rpx;
  199. background: #016bf6;
  200. color: #fff;
  201. font-size: 32rpx;
  202. &:after {
  203. border-radius: 60px;
  204. }
  205. }
  206. </style>