新增密码重置页面

hookehuyr
Commit 3e67f6248c68b302d488f9b4b2a16c363257cefd 3e67f624 1 parent 4e02ea8e
Showing 5 changed files with 184 additions and 15 deletions
components.d.ts
src/components/common/hagerInput.vue
src/route.js
src/views/user/login.vue
src/views/user/reset.vue
--- a/components.d.ts
View file @3e67f62
+++ b/components.d.ts
View file @3e67f62
@@ -11,7 +11,6 @@ declare module 'vue' {
     ElBreadcrumbItem: typeof import('element-ui/lib/breadcrumb-item')['default']
     ElCarousel: typeof import('element-ui/lib/carousel')['default']
     ElCarouselItem: typeof import('element-ui/lib/carousel-item')['default']
-    ElCheckbox: typeof import('element-ui/lib/checkbox')['default']
     ElCol: typeof import('element-ui/lib/col')['default']
     ElCollapse: typeof import('element-ui/lib/collapse')['default']
     ElCollapseItem: typeof import('element-ui/lib/collapse-item')['default']
--- a/src/components/common/hagerInput.vue
View file @3e67f62
+++ b/src/components/common/hagerInput.vue
View file @3e67f62
 <!--
  * @Date: 2024-10-20 09:59:52
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-21 09:35:58
+ * @LastEditTime: 2024-10-21 10:36:22
  * @FilePath: /hager/src/components/common/hagerInput.vue
  * @Description: 文件描述
 -->
@@ -9,13 +9,15 @@
   <div :class="['hager-input-page', required ? 'required': 'normal']">
     <div :class="['input-box', disable ? 'disable': '']">
       <div class="typeIcon" :style="{backgroundImage: 'url('+typeIcon+')'}"></div>
-      <input :value="value" @input="onInput" :disabled="disable" :placeholder="placeholder" />
+      <input class="input" :value="value" @input="onInput" :disabled="disable" :placeholder="placeholder" />
+      <div v-if="reset" class="send" @click="resetPwd">发送验证码</div>
     </div>
   </div>
 </template>
 <script>
 import mixin from 'common/mixin';
+import { Message } from 'element-ui';
 export default {
   mixins: [mixin.init],
@@ -39,11 +41,16 @@ export default {
     disable: {
       type: Boolean,
       default: false
+    },
+    reset: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
     return {
-
+      email: '',
+      pwd: '',
     }
   },
   computed: {
@@ -72,6 +79,17 @@ export default {
     onInput(event) {
       // 使用 $emit 触发 input 事件，传递新的输入值
       this.$emit('input', event.target.value);
+    },
+    resetPwd () {
+      if (!this.email) {
+        Message({
+          showClose: true,
+          message: '邮箱地址不能为空',
+          type: 'warning'
+        });
+      } else {
+
+      }
     }
   }
 }
@@ -91,16 +109,16 @@ export default {
     }
     .input-box {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      box-sizing: border-box; /* 确保内边距和边框不会增加总宽度 */
       background: #FFFFFF;
       border-radius: 5px;
       border: 1px solid #DADADA;
       padding: 0.5rem 0.75rem;
       width: 100%;
       margin: 0.5rem 0;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      box-sizing: border-box; /* 确保内边距和边框不会增加总宽度 */
       &.disable {
         background-color:#F9F9F9;
         border: 1px solid #F9F9F9;
@@ -117,9 +135,16 @@ export default {
         background-position: center;
         margin-right: 0.5rem;
       }
-      input {
+      .input {
         border: 0;
-        width: calc(100% - 2rem); /* 调整输入框的宽度 */
+        flex: 1;
+      }
+      .send {
+        color: @secondary-color;
+        font-size: 0.8rem;
+        &:hover {
+          cursor: pointer;
+        }
       }
     }
   }
--- a/src/route.js
View file @3e67f62
+++ b/src/route.js
View file @3e67f62
 /*
  * @Date: 2024-08-26 10:42:15
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-20 20:57:49
+ * @LastEditTime: 2024-10-21 09:59:04
  * @FilePath: /hager/src/route.js
  * @Description: 文件描述
  */
@@ -194,6 +194,15 @@ export default [{
         tag: 'info'
       },
     },
+    {
+      path: 'reset',
+      name: '密码重置',
+      component: () => import('@/views/user/reset'),
+      meta: {
+        title: '海格电器',
+        tag: 'reset'
+      },
+    },
   ]
 }, {
   path: '/search',
--- a/src/views/user/login.vue
View file @3e67f62
+++ b/src/views/user/login.vue
View file @3e67f62
 <!--
  * @Date: 2024-10-18 18:00:47
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-21 09:41:08
+ * @LastEditTime: 2024-10-21 09:59:33
  * @FilePath: /hager/src/views/user/login.vue
  * @Description: 文件描述
 -->
@@ -13,8 +13,8 @@
       <hagerInput type="pwd" required v-model="pwd" placeholder="请输入登录密码" />
       <!-- TODO: 记住密码和忘记密码业务显示的问题？ -->
       <div class="pwd-box">
-        <div><el-checkbox v-model="checked">记住密码</el-checkbox></div>
+        <!-- <div><el-checkbox v-model="checked">记住密码</el-checkbox></div> -->
-        <div><span>忘记密码？</span></div>
+        <div><span @click="goToReset">忘记密码？</span></div>
       </div>
     </div>
     <div class="login-footer">
@@ -48,6 +48,9 @@ export default {
     },
     goToRegister () {
       this.$router.push('/user/register');
+    },
+    goToReset () {
+      this.$router.push('/user/reset');
     }
   }
 }
@@ -64,7 +67,7 @@ export default {
     }
     .pwd-box {
       display: flex;
-      justify-content: space-between;
+      justify-content: flex-end;
       align-items: center;
       margin-top: 1rem;
       font-size: 0.85rem;
--- a/src/views/user/reset.vue 0 → 100644
View file @3e67f62
+++ b/src/views/user/reset.vue 0 → 100644
View file @3e67f62
+<!--
+ * @Date: 2024-10-18 18:00:47
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-10-21 10:53:15
+ * @FilePath: /hager/src/views/user/reset.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="hager-reset-page">
+    <div class="input-title">密码重置</div>
+    <div style="padding: 1rem 1.5rem 1rem 1rem;">
+      <hagerInput type="email" required reset v-model="email" placeholder="请输入邮箱地址" />
+      <hagerInput type="pwd" required v-model="sms" placeholder="请输入验证码" />
+      <hagerInput type="pwd" required v-model="pwd" placeholder="请输入登录密码" />
+    </div>
+    <div class="reset-footer">
+      <div class="edit-box">
+        <div class="cancel btn" @click="goBack">取消</div>
+        <div class="confirm btn" @click="onSubmit">重置</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixin from 'common/mixin';
+import hagerInput from '@/components/common/hagerInput.vue';
+import { Message } from 'element-ui';
+
+export default {
+  mixins: [mixin.init],
+  data () {
+    return {
+      email: '',
+      pwd: '',
+      sms: '',
+      checked: false
+    }
+  },
+  mounted () {
+
+  },
+  methods: {
+    onSubmit () {
+      Message({
+        showClose: true,
+        message: '重置成功',
+        type: 'success'
+      });
+    },
+    goBack () {
+      this.$router.go(-1);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .hager-reset-page {
+    padding: 2rem 0.5rem 0;
+    .input-title {
+      color: @secondary-color;
+      font-weight: bold;
+      font-size: 1.25rem;
+      text-align: center;
+    }
+    .pwd-box {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      margin-top: 1rem;
+      font-size: 0.85rem;
+      padding-left: 1rem;
+      span {
+        color: @primary-color;
+        font-weight: bold;
+        &:hover {
+          cursor: pointer;
+        }
+      }
+    }
+    .submit-btn {
+      background-color: @secondary-color;
+      color: #FFF;
+      padding: 0.5rem 1rem;
+      text-align: center;
+      border-radius: 5px;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+    .reset-footer {
+      padding: 0 1rem 1rem 2rem;
+      .edit-box {
+        display: flex;
+        justify-content: space-between;
+        .cancel {
+          color: @secondary-color;
+        }
+        .confirm {
+          background-color: @secondary-color;
+          color: #FFF;
+        }
+        .btn {
+          flex: 1;
+          text-align: center;
+          padding: 0.5rem 1rem;
+          border-radius: 5px;
+          border: 1px solid @secondary-color;
+          margin: 0 0.5rem; /* 添加左右间隔 */
+          &:hover {
+            cursor: pointer;
+          }
+        }
+        .btn:first-child {
+          margin-left: 0; /* 第一个按钮左边不加间隔 */
+        }
+        .btn:last-child {
+          margin-right: 0; /* 最后一个按钮右边不加间隔 */
+        }
+      }
+    }
+  }
+
+  :deep(.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner) {
+    background-color: #009FE5;
+    border-color: #009FE5;
+  }
+
+  :deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
+    color: #009FE5;
+  }
+</style>