完善忘记密码

anrui-system-ui/src/api/User/login.js

@@ -28,9 +28,12 @@ class user {
 
   reGetPwd(data) {
     return request({
-      url: `/system/user/reGetPwd/${data.userName}/${data.userPhone}`,
+      url: '/portal/v1/sysuser/reGetPwd',
       method: 'post',
-      data: qs.stringify(data)
+      params: data,
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded'
+      }
     })
   }
   selectPasswordByUserSid(data) {

anrui-system-ui/src/views/login/login.vue

@@ -13,10 +13,9 @@
             </el-input>
           </el-form-item>
           <el-form-item>
-            <el-input v-model="loginForm.password" autocomplete="off"
-                      placeholder="请输入密码" prefix-icon="el-icon-lock" show-password>
+            <el-input v-model="loginForm.password" autocomplete="off" placeholder="请输入密码" prefix-icon="el-icon-lock" show-password>
             </el-input>
-            <span class="nopsw register" @click="forgetPwd = true">忘记密码 ？</span>
+            <span class="nopsw register" @click="handleforgetPwd">忘记密码 ？</span>
           </el-form-item>
           <el-form-item v-show="showMsg" style="margin-bottom:0;">
             <span class="text-danger">提示：用户名或密码错误，请重试！</span>
@@ -38,12 +37,12 @@
       </div>
     </div>
 
-    <el-dialog title="忘记密码" :visible.sync="forgetPwd">
+    <el-dialog title="忘记密码" :visible.sync="forgetPwd" :close-on-click-modal="false">
       <el-form :model="nopassword">
         <el-form-item label="手机号">
           <el-input v-model="nopassword.userPhone" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="用户名">
+        <el-form-item label="姓名">
           <el-input v-model="nopassword.userName" autocomplete="off"></el-input>
         </el-form-item>
       </el-form>
@@ -57,208 +56,226 @@
 </template>
 
 <script>
-  import {
-    login,
-    imgCode
-  } from '@/api/user.js'
-  import user from '@/api/User/login.js'
-  import {setToken, getToken, setSession} from '@/utils/auth'
-  import imgCodeRole from '@/components/imgCodeRole/index.vue'
-  import qs from 'qs'
+import {
+  login,
+  imgCode
+} from '@/api/user.js'
+import user from '@/api/User/login.js'
+import {setToken, getToken, setSession} from '@/utils/auth'
+import imgCodeRole from '@/components/imgCodeRole/index.vue'
 
-  export default {
-    components: {imgCodeRole},
-    data() {
-      return {
-        loginForm: {
-          userName: '',
-          password: '',
-          verifyCode: '',
-          uuid: ''
-        },
-        imgCode: '',
-        loading: false,
-        loginCode: false,
-        showMsg: false,
-        forgetPwd: false,
-        nopassword: {
-          userPhone: '',
-          userName: ''
-        }
+export default {
+  components: {imgCodeRole},
+  data() {
+    return {
+      loginForm: {
+        userName: '',
+        password: '',
+        verifyCode: '',
+        uuid: ''
+      },
+      imgCode: '',
+      loading: false,
+      loginCode: false,
+      showMsg: false,
+      forgetPwd: false,
+      nopassword: {
+        userPhone: '',
+        userName: ''
       }
+    }
+  },
+  mounted() {
+    // window.loginIt = this.loginIt;
+  },
+  methods: {
+    // loginIt(data) {
+    //   alert(data);
+    // },
+    login(data) {
+      this.loading = true
+      this.loginForm.verifyCode = data.verifyCode
+      this.loginForm.uuid = data.uuid
+      this.$store.dispatch('user/login', this.loginForm).then((res) => {
+        // this.$store.dispatch('user/getInfo')
+        this.$router.push({path: '/home'})
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+        this.$refs.imgCodeRole.getCodeImage()
+      })
     },
-    mounted() {
-      // window.loginIt = this.loginIt;
+    codeShow() {
+      if (this.loginForm.password == '' || this.loginForm.userName == '') {
+        this.loginCode = false
+        this.showMsg = true
+        return;
+      }
+      this.$refs.imgCodeRole.getCodeImage()
     },
-    methods: {
-      // loginIt(data) {
-      //   alert(data);
-      // },
-      login(data) {
-        this.loading = true
-        this.loginForm.verifyCode = data.verifyCode
-        this.loginForm.uuid = data.uuid
-        this.$store.dispatch('user/login', this.loginForm).then((res) => {
-          //this.$store.dispatch('user/getInfo')
-          this.$router.push({path: '/home'})
-          this.loading = false
-        }).catch(() => {
-          this.loading = false
-          this.$refs.imgCodeRole.getCodeImage()
-        })
-      },
-      codeShow() {
-        if (this.loginForm.password == '' || this.loginForm.userName == '') {
-          this.loginCode = false
-          this.showMsg = true
-          return;
-        }
-        this.$refs.imgCodeRole.getCodeImage()
-      },
-      reGetPwd() {
-        user.reGetPwd(this.nopassword).then(res => {
-
-        })
+    handleforgetPwd() {
+      this.forgetPwd = true
+      this.nopassword = {
+        userPhone: '',
+        userName: ''
       }
+    },
+    reGetPwd() {
+      if (this.nopassword.userPhone === '') {
+        this.$message({ showClose: true, type: 'error', message: '手机号不能为空' })
+        return
+      }
+      if (this.nopassword.userName === '') {
+        this.$message({ showClose: true, type: 'error', message: '姓名不能为空' })
+        return
+      }
+      user.reGetPwd(this.nopassword).then((res) => {
+        if (res.success) {
+          this.$message({ showClose: true, type: 'success', message: '新密码已发送至手机，请查看短信' })
+          this.forgetPwd = false
+        } else {
+          this.$message({ showClose: true, type: 'error', message: res.msg })
+        }
+      })
     }
   }
+}
 </script>
 
-
 <style lang="scss">
-  .login {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    background-size: 100% 100%;
-    background-image: url(../../assets/loginImg/bgImg.png);
-    background-position: center;
-    overflow: hidden;
+.login {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100%;
+  background-image: url(../../assets/loginImg/bgImg.png);
+  background-position: center;
+  overflow: hidden;
 
-    .logoTitle {
-      margin: 30px;
+  .logoTitle {
+    margin: 30px;
 
-      img {
-        width: 70px;
-      }
+    img {
+      width: 70px;
+    }
 
-      span {
-        font-size: 40px;
-        color: #191919;
-      }
+    span {
+      font-size: 40px;
+      color: #191919;
+    }
 
-      .title {
-        font-size: 25px;
-        font-family: Source Han Sans CN;
-        font-weight: 500;
-        color: #191919;
-        margin: 0;
-      }
+    .title {
+      font-size: 25px;
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      color: #191919;
+      margin: 0;
     }
+  }
 
-    .main {
-      width: 30%;
-      /*height: 640px;*/
-      background: #FFFFFF;
-      box-shadow: 0px 13px 12px 0px rgba(0, 0, 0, 0.15);
-      opacity: 0.9;
-      border-radius: 20px;
-      position: absolute;
-      right: 10%;
+  .main {
+    width: 30%;
+    /*height: 640px;*/
+    background: #FFFFFF;
+    box-shadow: 0px 13px 12px 0px rgba(0, 0, 0, 0.15);
+    opacity: 0.9;
+    border-radius: 20px;
+    position: absolute;
+    right: 10%;
 
-      .content {
-        position: relative;
-        /*.title-h3{
-          width: 100%;
-          text-align: center;
-          color: #FFFFFF;
-          font-size: 30px;
-          margin: 0;
-          position: absolute;
-          top: -65px;
+    .content {
+      position: relative;
+      /*.title-h3{
+        width: 100%;
+        text-align: center;
+        color: #FFFFFF;
+        font-size: 30px;
+        margin: 0;
+        position: absolute;
+        top: -65px;
 
-        }*/
-      }
+      }*/
     }
   }
+}
 
-  .login-form {
-    padding: 30px 50px;
+.login-form {
+  padding: 30px 50px;
 
-    .title1 {
-      margin: 0px auto 30px auto;
-      text-align: center;
-      font-size: 20px;
-      color: #191919;
-      font-size: 23px;
-      font-weight: 500;
-    }
+  .title1 {
+    margin: 0px auto 30px auto;
+    text-align: center;
+    font-size: 20px;
+    color: #191919;
+    font-size: 23px;
+    font-weight: 500;
+  }
 
-    .el-input {
-      border: none;
-      background-color: transparent;
-    }
+  .el-input {
+    border: none;
+    background-color: transparent;
+  }
 
-    .code {
-      position: absolute;
-      top: 3px;
-      right: 5px;
-      width: 35%;
-      height: 35px;
-      cursor: pointer;
-      z-index: 9;
-    }
+  .code {
+    position: absolute;
+    top: 3px;
+    right: 5px;
+    width: 35%;
+    height: 35px;
+    cursor: pointer;
+    z-index: 9;
+  }
 
-    .nopsw {
-      position: absolute;
-      bottom: -30px;
-      right: 5px;
-      color: #018ad2;
-      font-size: 15px;
-      line-height: 30px;
-    }
+  .nopsw {
+    position: absolute;
+    bottom: -30px;
+    right: 5px;
+    color: #018ad2;
+    font-size: 15px;
+    line-height: 30px;
+  }
 
-    .register {
-      color: #018ad2;
-    }
+  .register {
+    color: #018ad2;
+  }
 
-    .register:hover,
-    .nopsw:hover {
-      cursor: pointer;
-    }
+  .register:hover,
+  .nopsw:hover {
+    cursor: pointer;
+  }
 
-    .btn-eye {
-      cursor: pointer;
-    }
+  .btn-eye {
+    cursor: pointer;
+  }
 
-    .text-danger {
-      color: #F56C6C;
-    }
+  .text-danger {
+    color: #F56C6C;
+  }
 
-    .login-btn {
-      margin: 10px 0 10px 0;
-      width: 100%;
-      background-color: #007fff;
-      border: 0;
-    }
+  .login-btn {
+    margin: 10px 0 10px 0;
+    width: 100%;
+    background-color: #007fff;
+    border: 0;
+  }
 
-    .login-btn:hover {
-      background-color: #007fdd;
-      border: 0;
-    }
+  .login-btn:hover {
+    background-color: #007fdd;
+    border: 0;
+  }
 
-    .el-input--prefix .el-input__inner {
-      border: 1px solid #018ad2;
-      background: transparent;
-      color: #333 !important;
-    }
+  .el-input--prefix .el-input__inner {
+    border: 1px solid #018ad2;
+    background: transparent;
+    color: #333 !important;
+  }
 
-    .el-form-item {
-      margin-bottom: 40px;
-    }
+  .el-form-item {
+    margin-bottom: 40px;
+  }
 
-    .el-loading-mask {
-      background-color: rgba(255, 255, 255, .6);
-    }
+  .el-loading-mask {
+    background-color: rgba(255, 255, 255, .6);
   }
+}
 </style>