feat:提交代码，登录注册

src/api/user.js

@@ -10,4 +10,8 @@ export const loginPassword = ( params ) => {
 
 export const loginVerification = ( params ) => {
   return post( 'app/login/verification', params )
-}
+}
+
+export const forgotPassword = ( params ) => {
+  return post( 'app/login/password/change', params )
+}

src/views/resetPassword.vue

@@ -12,40 +12,162 @@
         <div class="top-icon">
           重置密码
         </div>
-        <div>
+        <div v-loading="isLoading">
           <!-- 密码登录 -->
           <div class="login-password">
             <div class="pass-item">
               <img src="../../static/image/phone-icon.png" class="phone-icon" />
-              <el-input placeholder="请输入手机号" class="input-phone" :maxlength="11" />
+              <el-input placeholder="请输入手机号" v-model="mobile" class="input-phone" :maxlength="11" />
             </div>
             <div class="pass-item">
               <img src="../../static/image/code-icon.png" class="phone-icon" />
-              <el-input placeholder="验证码" class="input-phone" type="password" />
-              <div class="get-code">获取短信验证码</div>
+              <el-input placeholder="验证码" v-model="code" class="input-phone" :maxlength="4" />
+              <div class="get-code" v-if="!showCode" @click.stop="getCode">获取短信验证码</div>
+              <div class="get-code" v-else>{{ count }}秒</div>
             </div>
             <div class="pass-item">
               <img src="../../static/image/lock-icon.png" class="lock-icon" />
-              <el-input placeholder="新密码" class="input-phone" type="password" />
+              <el-input placeholder="新密码" v-model="password" class="input-phone" type="password" />
             </div>
             <div class="pass-item">
               <img src="../../static/image/lock-icon.png" class="lock-icon" />
-              <el-input placeholder="确认新密码" class="input-phone" type="password" />
+              <el-input placeholder="确认新密码" v-model="passwordAgian" class="input-phone" type="password" />
             </div>
           </div>
         </div>
-        <div class="login-btn">确认</div>
+        <div class="login-btn" @click.stop="commit">确认</div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+  import {
+    getPhoneCode,
+    forgotPassword
+  } from '../api/user.js';
   export default {
     data() {
       return {
-        activeIndex: 1
+        isLoading: false, // 请求解决展示loading
+        activeIndex: 1,
+        mobile: '',
+        code: '',
+        password: '',
+        passwordAgian: '',
+        showCode: false,
+        count: 60,
+        timer: null
       }
+    },
+    destroyed() {
+      clearInterval( this.timer );
+      this.timer = null;
+    },
+    methods: {
+      commit() {
+        if (!this.mobile.trim()) {
+          return this.$message({
+            message: '手机号码不能为空',
+            type: 'error'
+          })
+        }
+        if (!this.checkPhone(this.mobile)) {
+          return this.$message({
+            message: '请输入正确的手机号',
+            type: 'error'
+          })
+        }
+        if (!this.code.trim()) {
+          return this.$message({
+            message: '验证码不能为空',
+            type: 'error'
+          })
+        }
+        if (!this.password.trim()) {
+          return this.$message({
+            message: '密码不能为空',
+            type: 'error'
+          })
+        }
+        if (!this.passwordAgian.trim()) {
+          return this.$message({
+            message: '确认密码不能为空',
+            type: 'error'
+          })
+        }
+        if (this.password.trim() !== this.passwordAgian.trim()) {
+          return this.$message({
+            message: '两次密码不一致',
+            type: 'error'
+          })
+        }
+        let params = {
+          code: this.code,
+          mobile: this.mobile,
+          newPassword: this.password
+        }
+        forgotPassword( params ).then( res => {
+          if ( res.code == 200 ) {
+            this.$router.go(-1);
+          }else {
+            return this.$message({
+              message: res.msg,
+              type: 'error'
+            })
+          }
+        } )
+      },
+      checkPhone(phone) {
+        if (!(/^1\d{10}$/.test(phone))) {
+          return false;
+        } else {
+          return true
+        }
+      },
+      // 获取验证码
+      getCode() {
+        if (!this.mobile.trim()) {
+          return this.$message({
+            message: '手机号码不能为空',
+            type: 'error'
+          })
+        }
+        if (!this.checkPhone(this.mobile)) {
+          return this.$message({
+            message: '请输入正确的手机号',
+            type: 'error'
+          })
+        }
+        let params = {
+          mobile: this.mobile,
+          type: 1
+        };
+        this.isLoading = true;
+        getPhoneCode(params).then(res => {
+          if (res.code == 200) {
+            this.isLoading = false;
+            this.showCode = true;
+            this.$message({
+              message: '验证码发送成功',
+              type: 'success'
+            })
+            this.timer = setInterval(() => {
+              this.count--;
+              if (this.count <= 1) {
+                this.showCode = false;
+                clearInterval(this.timer);
+              }
+            }, 1000)
+          } else {
+            this.isLoading = false;
+            return this.$message({
+              message: res.msg,
+              type: 'error'
+            })
+          }
+        })
+      },
     }
   }
 </script>