添加重置密码

src/components/sidebox.vue

@@ -447,21 +447,28 @@ export default {
                     }
                     .sideboxTitle{
                         background: #065ba9;
-                        font-size: 32px;
+                        font-size: 24px;
                         text-align: center;
                         color: #fff;
                         height: 80px;
                         line-height: 80px;
                     }
                     .Contentbox{
-                        padding: 0 20px;
+                        // padding: 0 20px;
                         .singleBox{
                             display: flex;
                             align-items: center;
                             justify-content: space-between;
-                            margin-top: 20px;
+                            // margin-top: 20px;
+                            margin-top: 2px;
+                            cursor: pointer;
+                            padding: 10px 20px;
+                            &:hover{
+                                background: #065ba9;
+                                color: #fff;
+                            }
                             .singleBoxText{
-                                font-size: 22px;
+                                font-size: 18px;
                                 font-weight: 600;
                             }
                             .singleBoxImg{
@@ -602,7 +609,7 @@ export default {
                     }
                     .sideboxTitle{
                         background: #065ba9;
-                        font-size: 0.24rem;
+                        font-size: 0.218rem;
                         text-align: center;
                         color: #fff;
                         height: 0.8rem;
@@ -616,7 +623,7 @@ export default {
                             justify-content: space-between;
                             margin-top: 0.16rem;
                             .singleBoxText{
-                                font-size: 0.16rem;
+                                font-size: 0.164rem;
                                 font-weight: 600;
                             }
                             .singleBoxImg{

src/router/login.js

@@ -42,6 +42,16 @@ export default [
       chineseTitle: "密码重置申请",
       navActive: "application" // 密码重置申请
     }
+  }, {
+    path: '/applicationResults',
+    name: 'applicationResults',
+    component: () => import('@/view/application/results'),
+    hidden: true,
+    meta: {
+      pageTitle: 'Application',
+      chineseTitle: '密码重置申请结果',
+      navActive: 'applicationResults' // 密码重置申请结果
+    }
   }, {
     path: "/RegisterConfirmation",
     name: "RegisterConfirmation",

src/view/application/index.vue

@@ -1,13 +1,28 @@
 <template>
 <div>
-  <div class="box">
-    <div class="toptext">{{$t('application.Password')}}</div>
-     <div class="centerbox">
-       <input class="cen_email" v-model="email" type="text" :placeholder="$t('input.email')"/>
-       <button class="cen_button" v-loading.fullscreen.lock="fullscreenLoading" @click="appli">{{$t('application.Send')}}</button>
+  <div class="flex" v-if="lang == 'en'">
+    <div class="flex_l">
+      <div class="title">Password Reset Application</div>
+      <div class="text">Enter the email address associated with your account to continue</div>
+      <input class="cen_email" v-model="email" type="text" :placeholder="$t('input.email')"/>
+      <button class="cen_button" @click="appli">Confirm</button>
+    </div>
+    <div class="flex_r">
+      <img src="@/assets/img/logo/2.png" alt="" class="image">
     </div>
   </div>
 
+  <div class="flex" v-else>
+    <div class="flex_l">
+      <div class="title">密码重置</div>
+      <div class="text">请输入与您的帐户关联的电子邮件地址以继续</div>
+      <input class="cen_email" v-model="email" type="text" :placeholder="$t('input.email')"/>
+      <button class="cen_button" @click="appli">确定</button>
+    </div>
+    <div class="flex_r">
+      <img src="@/assets/img/logo/2.png" alt="" class="image">
+    </div>
+  </div>
 
 
 </div>
@@ -21,7 +36,7 @@ export default {
   data () {
     return {
       email: "",
-      fullscreenLoading: false
+      lang: this.$i18n.locale
     }
   },
   methods: {
@@ -38,24 +53,21 @@ export default {
     },
     appli () {
       if (this.verification()) {
-        this.fullscreenLoading = true;
         this.$api.post('auth/forgetPassword', {
-          email: this.email
-        }).then((res) => {
-          if (res.code == 0) {
-          this.$message({
-            message: this.$t('message.PasswordReset'),
-            type: 'success'
-          });
-          this.fullscreenLoading = false;
-        } else if (res.code == 302) {
-          this.$message.error(this.$t('register.registered'))
-          this.fullscreenLoading = false;
-        } else {
-          this.$message.error(res.msg)
-          this.fullscreenLoading = false;
-        }
-        })
+        email: this.email
+      }).then((res) => {
+        if (res.code == 0) {
+        // this.$message({
+        //   message: this.$t('message.PasswordReset'),
+        //   type: 'success'
+        // });
+        this.$util.goRoute({ name: 'applicationResults' })
+      } else if (res.code == 302) {
+        this.$message.error(this.$t('register.registered'))
+      } else {
+        this.$message.error(res.msg)
+      }
+      })
       }
     }
   },
@@ -70,92 +82,98 @@ export default {
 .box{
   overflow: hidden;
 }
-.toptext{
-    margin-top: 3rem;
-    font-size: 16px;
-    color: #005bab;
-    background: #cfe0ef;
-    font-weight: 700;
-    padding: 2rem 0;
-    text-align: center;
-}
-.centerbox{
-  width: 100%;
-  box-shadow: 2px 3px 8px 0px rgba(180, 180, 180, 0.3);
-  background: #F9FBFD;
-  padding: 50px;
-  border: 1px solid #dbdbdb;
-  .cen_email{
-    width: 40%;
-    margin: 0 auto 2rem;
-    height: 40px;
-    color: #a7a7a7;
-    border: 1px solid #ccc;
-    display: block;
-    text-indent: 1rem;
-    border-radius: 4px;
-  }
-  .cen_button{
-    width: 40%;
-    margin: 0 auto;
-    height: 40px;
-    display: block;
-    background: #005bab;
-    border: none;
-    color: #ffffff;
-    border-radius: 4px;
-    font-size: 14px;
-    cursor: pointer;
+.flex{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 40px;
+  .flex_l /deep/{
+    width: 50%;
+    .title{
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      font-size: 18px;
+      color: #0166B4;
+    }
+    .text{
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 14px;
+      color: #000000;
+      margin: 30px 0;
+    }
+      .cen_email{
+      width: 76%;
+      height: 40px;
+      border: 1px solid #0166B4;
+      display: block;
+      text-indent: 1rem;
+      border-radius: 4px;
+    }
+    .cen_button{
+      width: 76%;
+      height: 40px;
+      display: block;
+      background: #005bab;
+      border: none;
+      color: #ffffff;
+      border-radius: 4px;
+      font-size: 14px;
+      margin-top: 30px;
+      cursor: pointer;
+    }
   }
 }
-
-
 }
 
 @media screen and (min-width: 0px) and (max-width: 750px) {
 .box{
   overflow: hidden;
 }
-.toptext{
-  margin-top: 0.1rem;
-    height: 0.5rem;
-    font-size: 16px;
-    color: #005bab;
-    background: #cfe0ef;
-    line-height: 0.5rem;
-    text-indent: 0.1rem;
-    font-weight: 700;
-}
-.centerbox{
-  width: 100%;
-  box-shadow: 2px 3px 8px 0px rgba(180, 180, 180, 0.3);
-  background: #F9FBFD;
-  padding: 0.3rem;
-  border: 1px solid #dbdbdb;
-  .cen_email{
+.flex{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  .flex_l /deep/{
     width: 100%;
-    margin: 0 auto 0.2rem;
-    height: 40px;
-    color: #a7a7a7;
-    border: 1px solid #ccc;
-    display: block;
-    text-indent: 0.1rem;
-    border-radius: 4px;
+    .title{
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      font-size: 18px;
+      color: #0166B4;
+    }
+    .text{
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 14px;
+      color: #000000;
+      margin: 30px 0;
+    }
+      .cen_email{
+      width: 100%;
+      height: 40px;
+      border: 1px solid #0166B4;
+      display: block;
+      text-indent: 1rem;
+      border-radius: 4px;
+    }
+    .cen_button{
+      width: 100%;
+      height: 40px;
+      display: block;
+      background: #005bab;
+      border: none;
+      color: #ffffff;
+      border-radius: 4px;
+      font-size: 14px;
+      margin-top: 30px;
+      cursor: pointer;
+    }
   }
-  .cen_button{
-    width: 100%;
-    margin: 0 auto;
-    height: 40px;
-    display: block;
-    background: #005bab;
-    border: none;
-    color: #ffffff;
-    border-radius: 4px;
-    font-size: 14px;
-    cursor: pointer;
+  .flex_r{
+    margin-top: 0.2rem;
   }
 }
-
-
 }
 </style>

src/view/application/results.vue

@@ -0,0 +1,92 @@
+<template>
+<div>
+  <div class="results" v-if="lang == 'en'">
+    <img src="@/assets/img/logo/1.png" alt="" class="icon">
+    <p class="title">Password Reset Email Sent</p>
+    <p class="text">We've sent a password reset link to your rescue email address.<br/>
+    Please check your inbox and follow the instructions to complete the process</p>
+  </div>
+  <div class="results" v-else>
+    <img src="@/assets/img/logo/1.png" alt="" class="icon">
+    <p class="title">密码重置邮件发送</p>
+    <p class="text">我们已经发送了一个密码重置链接到你的救援电子邮箱地址。<br/>
+    请检查您的收件箱并按照说明完成该过程</p>
+  </div>
+</div>
+
+</template>
+<script>
+export default {
+  components: {
+  },
+  name: 'results',
+  data () {
+    return {
+      lang: this.$i18n.locale
+    }
+  },
+  methods: {
+  },
+  mounted () {
+  },
+  created () {
+  }
+}
+</script>
+<style lang="scss" scoped>
+@media screen and (min-width: 751px) and (max-width: 9999px) {
+.results{
+  text-align: center;
+  margin-top: 80px;
+  .icon{
+    display: block;
+    width: 58px;
+    margin: auto;
+  }
+  .title{
+    font-family: Source Han Sans CN;
+    font-weight: 500;
+    font-size: 18px;
+    color: #000000;
+    line-height: 36px;
+    margin-top: 30px;
+  }
+  .text{
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    font-size: 14px;
+    color: #000000;
+    line-height: 24px;
+    margin-top: 20px;
+  }
+}
+}
+
+@media screen and (min-width: 0px) and (max-width: 750px) {
+.results{
+  text-align: center;
+  margin-top: 0.4rem;
+  .icon{
+    display: block;
+    width: 0.6rem;
+    margin: auto;
+  }
+  .title{
+    font-family: Source Han Sans CN;
+    font-weight: 500;
+    font-size: 18px;
+    color: #000000;
+    // line-height: 36px;
+    margin-top: 0.3rem;
+  }
+  .text{
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    font-size: 14px;
+    color: #000000;
+    line-height: 24px;
+    margin-top: 0.2rem;
+  }
+}
+}
+</style>