reset.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <style lang="less">
  2. @import "./reset.less";
  3. </style>
  4. <template>
  5. <div class="main">
  6. <navbar :user="user"></navbar>
  7. <div style="margin: 50px auto;">
  8. <el-form :model="regForm" status-icon :rules="rules" label-width="80px" ref="regForm" class="reset">
  9. <el-form-item label="手机号" prop="phone" class="pr">
  10. <div class="reset-phone">
  11. <el-input prop="phone" type="text" v-model="regForm.phone" placeholder="输入手机号码"></el-input>
  12. </div>
  13. <div class="reset-code">
  14. <el-button @click="getCode(regForm)" class="code-btn ml10" type="primary" v-if="show">发送</el-button>
  15. <el-button class="code-btn" type="primary" disabled v-else>{{count}} s</el-button>
  16. </div>
  17. </el-form-item>
  18. <el-form-item label="验证码" prop="code" class="pr">
  19. <el-input prop="code" v-model="regForm.code" placeholder="验证码" auto-complete="off"></el-input>
  20. </el-form-item>
  21. <el-form-item label="新密码" prop="pass" class="pr">
  22. <el-input prop="pass" type="password" v-model="regForm.pass" placeholder="登入密码" auto-complete="off"></el-input>
  23. </el-form-item>
  24. <el-form-item label="确认密码" prop="rePass" class="pr">
  25. <el-input prop="rePass" type="password" v-model="regForm.rePass" placeholder="确认密码" auto-complete="off"></el-input>
  26. </el-form-item>
  27. <div class="submit">
  28. <el-button type="primary" class="submit-btn" @click="submitForm('regForm')">重置密码</el-button>
  29. <el-button type="primary" class="submit-btn" @click="goLogin">回到登入</el-button>
  30. </div>
  31. </el-form>
  32. </div>
  33. </div>
  34. </template>
  35. <script>
  36. import {httpServer} from "@/components/httpServer/httpServer.js";
  37. import navbar from "@/components/nav/navbar.vue";
  38. import data from "@/components/data/data.js";
  39. export default {
  40. data() {
  41. return {
  42. show: true,
  43. count: 0,
  44. regForm: {
  45. phone: "",
  46. code: "",
  47. pass: "",
  48. rePass: ""
  49. },
  50. user:{},
  51. rules: data.rulesData( this.validatePass )
  52. };
  53. },
  54. components:{navbar},
  55. methods: {
  56. validatePass(rule, value, callback) {
  57. if (value == this.regForm.pass) {
  58. callback();
  59. } else {
  60. callback(new Error("两次密码不服"));
  61. }
  62. },
  63. goLogin(){
  64. this.$router.push('/');
  65. },
  66. getCode() {
  67. if (this.checkPhone() == false) {
  68. return false;
  69. } else {
  70. let {phone} = this.regForm;
  71. httpServer("Auth.getCode", {phone}).then(res => {
  72. if( res.code == 200){
  73. this.$message.successMsg("发送成功", 2);
  74. this.show = false
  75. const TIME_COUNT = 60; //更改倒计时时间
  76. if (!this.timer) {
  77. this.count = TIME_COUNT;
  78. this.timer = setInterval(() => {
  79. if (this.count > 0 && this.count <= TIME_COUNT) {
  80. this.count--;
  81. } else {
  82. this.show = true;
  83. clearInterval(this.timer); // 清除定时器
  84. this.timer = null;
  85. }
  86. }, 1000)
  87. }
  88. }
  89. })
  90. }
  91. },
  92. checkPhone() {
  93. let phone = this.regForm.phone;
  94. if (!/^1[3456789]\d{9}$/.test(phone)) {
  95. this.$message.error("请填写正确的手机号");
  96. return false;
  97. }
  98. return true
  99. },
  100. submitForm(formName) {
  101. let that = this;
  102. this.$refs[formName].validate(valid => {
  103. if (!valid) {
  104. return false;
  105. }
  106. let {phone,code,pass} = this.regForm;
  107. let param = {phone,code, pass: this.$md5(pass)};
  108. httpServer("Auth.resetPass", param).then(res => {
  109. if( res.code == 200){
  110. this.$msgbox({
  111. title: "重置密码",
  112. message: "密码重置成功",
  113. showCancelButton: false,
  114. confirmButtonText: "回到登入页面",
  115. beforeClose: (action, instance, done) => {
  116. that.$router.push('/');
  117. done();
  118. }
  119. })
  120. }
  121. });
  122. })
  123. }
  124. }
  125. };
  126. </script>