添加忘记密码页面， 对接通过手机验证码修改密码接口

src/components/TopBar.vue

@@ -1,30 +1,35 @@
 <template>
   <!-- BEGIN: Top Bar -->
-  <div class="top-bar p-5" style="height:80px;border-bottom:1px solid rgba(0,0,0,0.2);z-index:99;position: relative;">
+  <div
+    class="top-bar p-5"
+    style="
+      height: 80px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+      z-index: 99;
+      position: relative;
+    "
+  >
     <!-- BEGIN: Breadcrumb -->
-    <div class="-intro-x breadcrumb mr-auto hidden sm:flex" style="float:left;margin-top: 10px;">
+    <div
+      class="-intro-x breadcrumb mr-auto hidden sm:flex"
+      style="float: left; margin-top: 10px"
+    >
       <div>智莺生活</div>
       <ChevronRightIcon class="breadcrumb__icon" />
       <div class="breadcrumb--active">{{ this.$route.meta.title }}</div>
     </div>
 
-
-
-        <!-- END: Notifications -->
+    <!-- END: Notifications -->
     <!-- BEGIN: Account Menu -->
-    <div class="intro-x dropdown w-8 h-8 relative" style="float:right">
+    <div class="intro-x dropdown w-8 h-8 relative" style="float: right">
       <div
         class="dropdown-toggle w-8 h-8 rounded-full overflow-hidden shadow-lg image-fit zoom-in"
       >
-        <img
-          alt=""
-          :src="require(`@/assets/images/${$f()[9].photos[0]}`)"
-        />
+        <img alt="" :src="require(`@/assets/images/${$f()[9].photos[0]}`)" />
       </div>
-      <div class="dropdown-box w-56">
-        <div
-          class="dropdown-box__content box bg-theme-38 text-white"
-        >
+
+      <div class="dropdown-boxs dropdown-box w-56" v-show="isUserNmae">
+        <div class="dropdown-box__content box bg-theme-38 text-white">
           <div class="p-4 border-b border-theme-40">
             <div class="font-medium">USERNAME</div>
             <div class="text-xs text-theme-41">会员ID：1231451565</div>
@@ -36,7 +41,7 @@
             >
               <UserIcon class="w-4 h-4 mr-2" /> 个人资料
             </a>
-       
+
             <a
               href
               class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1:bg-dark-3 rounded-md"
@@ -56,25 +61,26 @@
               class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1:bg-dark-3 rounded-md CursorPointer"
             >
               <ToggleRightIcon class="w-4 h-4 mr-2" />
-             退出登陆
+              退出登陆
             </span>
           </div>
         </div>
       </div>
     </div>
-    
-        <!-- END: Search -->
+
+    <!-- END: Search -->
     <!-- BEGIN: Notifications -->
-    <div class="intro-x dropdown relative mr-auto sm:mr-6" style="float:right;margin:13px 23px 0 0">
+    <div
+      class="intro-x dropdown relative mr-auto sm:mr-6"
+      style="float: right; margin: 13px 23px 0 0"
+    >
       <div
         class="dropdown-toggle notification notification--bullet cursor-pointer"
       >
-        <BellIcon class="notification__icon" style="margin-top:-3px" />
+        <BellIcon class="notification__icon" style="margin-top: -3px" />
       </div>
       <div class="notification-content pt-2 dropdown-box">
-        <div
-          class="notification-content__box dropdown-box__content box"
-        >
+        <div class="notification-content__box dropdown-box__content box">
           <div class="notification-content__title">Notifications</div>
           <div
             v-for="(faker, fakerKey) in $_.take($f(), 5)"
@@ -109,11 +115,10 @@
         </div>
       </div>
     </div>
-    
-    
+
     <!-- END: Breadcrumb -->
     <!-- BEGIN: Search -->
-    <div class="intro-x relative mr-3 sm:mr-6 "  style="float:right">
+    <div class="intro-x relative mr-3 sm:mr-6" style="float: right">
       <div class="search hidden sm:block">
         <input
           type="text"
@@ -124,12 +129,11 @@
         />
         <SearchIcon class="search__icon" />
       </div>
-      <a class="notification sm:hidden"  href>
-        <SearchIcon class="notification__icon" style="margin-top:8px" />
+      <a class="notification sm:hidden" href>
+        <SearchIcon class="notification__icon" style="margin-top: 8px" />
       </a>
       <div class="search-result" :class="{ show: searchDropdown }">
- 
-    <div class="search-result__content">
+        <div class="search-result__content">
           <div class="search-result__content__title">Pages</div>
           <div class="mb-5">
             <a href class="flex items-center">
@@ -199,23 +203,22 @@
               {{ faker.products[0].category }}
             </div>
           </a>
-        </div> 
+        </div>
       </div>
-
     </div>
 
-
     <!-- END: Account Menu -->
   </div>
   <!-- END: Top Bar -->
 </template>
 
 <script>
-import { apost } from '../utils/api/login'
+import { apost } from "../utils/api/login";
 export default {
   data() {
     return {
-      searchDropdown: false
+      searchDropdown: false,
+      isUserNmae: true, // 控制显示
     };
   },
   methods: {
@@ -227,22 +230,22 @@ export default {
     },
 
     // 退出登录
-    getExit: function(){
+    getExit: function () {
+      this.isUserNmae = false;
       apost("/api/sign/out").then((res) => {
-        console.log(res);
+        this.$router.push("/");
       });
-
-
-        this.$router.push('/')
     },
-  }
+  },
 };
 </script>
 
-
-<style scoped>
-
  
 
-
+<style scoped lang="scss" >
+.dropdown-boxs {
+  z-index: 9999;
+  right: 10px;
+  position: absolute;
+}
 </style>

src/router/index.js

@@ -346,18 +346,18 @@ const routes = [
 			}
 		]
 	},
-	{
-		path: '/test',
-		name: 'test',
-		meta: { title: '管理中心' },
-		component: () => import('@/views/Inbox')
-	},
 	{
 		path: '/register',
 		name: 'register',
-		meta: { title: '管理中心' },
+		meta: { title: '注册账户' },
 		component: () => import('@/views/Register')
 	},
+	{
+		path: '/isRegister',
+		name: 'isRegister',
+		meta: { title: '忘记密码' },
+		component: () => import('@/views/isRegister')
+	},
 	{
 		path: '/404',
 		name: 'error-page',

src/views/Login.vue

@@ -72,7 +72,8 @@
                   >记住密码</label
                 >
               </div>
-              <a href="">忘记密码?</a>
+              <router-link to="/isRegister">忘记密码</router-link>
+           
             </div>
             <div class="intro-x mt-5 xl:mt-8 text-center xl:text-left">
               <button
@@ -136,15 +137,10 @@ export default {
     //   import("../utils");
     //   import("../assets/sass/app2.scss")
     // },3000)
-    // this.verifyLogin();
+ 
   },
   methods: {
-    // verifyLogin: function () {
-    //   // 校验登录状态
-    //   // apost("/api/sign/status").then((res) => {
-    //   //   console.log(res);
-    //   // });
-    // },
+    // 登录
     getLogin: function () {
       if (!/^1(3|4|5|7|8)\d{9}$/.test(this.account.phone)) {
         //正则校验手机号是否合法

src/views/RegularForm.vue

@@ -1,4 +1,4 @@
-<template>
+<template> 
   <div>
     <div class="intro-y flex items-center mt-8">
       <h2 class="text-lg font-medium mr-auto">Regular Form</h2>

src/views/isRegister.vue

@@ -0,0 +1,275 @@
+<template>
+  <div>
+    <div class="container sm:px-10">
+      <div class="block xl:grid grid-cols-2 gap-4">
+        <!-- BEGIN: Register Info -->
+        <div class="hidden xl:flex flex-col min-h-screen">
+          <a href="" class="-intro-x flex items-center pt-5">
+            <img
+              alt=""
+              class="w-6"
+              :src="require(`@/assets/images/logo.svg`)"
+            />
+            <span class="text-white text-lg ml-3">
+              Mid<span class="font-medium">One</span>
+            </span>
+          </a>
+          <div class="my-auto">
+            <img
+              alt=""
+              class="-intro-x w-1/2 -mt-16"
+              :src="require(`@/assets/images/illustration.svg`)"
+            />
+            <div
+              class="-intro-x text-white font-medium text-4xl leading-tight mt-10"
+            >
+              A few more clicks to <br />
+              sign up to your account.
+            </div>
+            <div class="-intro-x mt-5 text-lg text-white">
+              Manage all your e-commerce accounts in one place
+            </div>
+          </div>
+        </div>
+        <!-- END: Register Info -->
+        <!-- BEGIN: Register Form -->
+        <div class="h-screen xl:h-auto flex py-5 xl:py-0 my-10 xl:my-0">
+          <div
+            class="my-auto mx-auto xl:ml-20 bg-white xl:bg-transparent px-5 sm:px-8 py-8 xl:p-0 rounded-md shadow-md xl:shadow-none w-full sm:w-3/4 lg:w-2/4 xl:w-auto"
+          >
+            <h2
+              class="intro-x font-bold text-2xl xl:text-3xl text-center xl:text-left"
+            >
+              找回密码
+            </h2>
+            <div class="intro-x mt-2 text-gray-500 xl:hidden text-center">
+              A few more clicks to sign in to your account. Manage all your
+              e-commerce accounts in one place
+            </div>
+            <div class="intro-x mt-8">
+              <div class="phone-box">
+                <input
+                  type="text"
+                  class="intro-x login__input input input--lg border border-gray-300 block mt-4"
+                  placeholder="手机号"
+                  v-model="info.phone"
+                  :disabled="info.phone_input"
+                />
+                <span class="getYZM" @click="sendMobile">{{
+                  btnMsg == null ? countNum + "s后重新发送" : btnMsg
+                }}</span>
+              </div>
+              <input
+                type="password"
+                class="intro-x login__input input input--lg border border-gray-300 block mt-4"
+                placeholder="请输入新密码"
+                v-model="info.psw"
+              />
+              <input
+                type="password"
+                class="intro-x login__input input input--lg border border-gray-300 block mt-4"
+                placeholder="新密码确认"
+                v-model="info.psw2"
+              />
+
+              <input
+                type="text"
+                class="intro-x login__input input input--lg border border-gray-300 block mt-4"
+                placeholder="验证码"
+                v-model="info.code"
+              />
+            </div>
+  
+            <div class="intro-x mt-5 xl:mt-8 text-center xl:text-left">
+              <el-button
+                type="primary"
+                class="button button--lg w-full xl:w-32 text-white bg-theme-1 xl:mr-3 align-top"
+                @click="getRegister"
+                >修改</el-button
+              >
+
+              <button
+                class="button button--lg w-full xl:w-32 text-gray-700 border border-gray-300 mt-3 xl:mt-0 align-top"
+                @click="getSignUp"
+              >
+                登录
+              </button>
+            </div>
+          </div>
+        </div>
+        <!-- END: Register Form -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { apost } from "../utils/api/login";
+import lodash from "lodash";
+
+const l_that = this;
+
+export default {
+  data() {
+    return {
+      // 倒计时周期
+      countNum: 60,
+      // 用于倒计时标记，true-正在倒计时
+      countFlag: false,
+      // 定时器
+      intervalBtn: {},
+      //默认按钮的值
+      btnMsg: "点击发送验证码",
+      info: {
+        phone: "",
+        input: "",
+        psw: "",
+        psw2: "",
+        Label: false,
+        phone_input: false,
+        code: "",
+      },
+    };
+  },
+  mounted() {
+    cash("body").removeClass("app").addClass("login");
+  },
+  methods: {
+    getSignUp: function () {
+      this.$router.push("/");
+    },
+    // 倒计时
+    countDown() {
+      // 设置btn倒计时时显示的信息
+      this.btnMsg = null;
+      // 更改btn状态
+      this.countFlag = !this.countFlag;
+      // 设置倒计时
+      this.intervalBtn = setInterval(() => {
+        if (this.countNum <= 0) {
+          // 重置btn提示信息
+          this.btnMsg = "点击发送验证码";
+          // 清除定时器
+          clearInterval(this.intervalBtn);
+          // 更改btn状态
+          this.countFlag = !this.countFlag;
+          // 重置倒计时状态
+          this.countNum = 5;
+        }
+        // 倒计时
+        this.countNum--;
+      }, 1000);
+    },
+    // 获取验证码 --- > 防抖
+    sendMobile: lodash.debounce(function () {
+      //获取输入手机号码
+      let phone = this.info.phone;
+      //正则校验手机号是否合法
+      if (!/^1(3|4|5|7|8)\d{9}$/.test(phone)) {
+        this.$message.error("手机号错误");
+        return;
+      }
+      apost("/sign/sms", {
+        phone: this.info.phone,
+      }).then((res) => {
+        console.log(res);
+        //触发定时器方法
+        this.countDown();
+        this.info.phone_input = true;
+      });
+
+      if (this.btnMsg === null) {
+        return;
+      }
+    }, 200),
+
+    getRegister: lodash.debounce(function () {
+      // if (!/^[A-Za-z]{1}[A-Za-z0-9_-]{3,15}$/.test(this.info.input)) {
+      //   // 账号检验
+      //   this.$message.error(
+      //     "请输入正确的账号格式：必须是以字母开头，只能包含字母数字下划线和减号，4到16位"
+      //   );
+      //   return;
+      // }
+      // if (!/^(\w){6,20}$/.test(this.info.psw)) {
+      //   // 密码检验
+      //   this.$message.error(
+      //     "请输入正确的密码格式：只能输入6-20个字母、数字、下划线"
+      //   );
+      //   return;
+      // }
+
+      // if (!/^(\w){6,20}$/.test(this.info.psw2)) {
+      //   // 确认密码校验
+      //   this.$message.error(
+      //     "请输入正确的确认密码格式：只能输入6-20个字母、数字、下划线"
+      //   );
+      //   return;
+      // }
+
+      if (this.info.psw != this.info.psw2) {
+        // 密码校验2
+        this.$message.error("两次密码不同， 请重新输入");
+        return;
+      }
+
+      if (!/^1(3|4|5|7|8)\d{9}$/.test(this.info.phone)) {
+        //正则校验手机号是否合法
+        this.$message.error("手机号错误");
+        return;
+      }
+      if (this.info.code === "") {
+        this.$message.error("请输入验证码");
+        return;
+      }
+      apost("/api/sign/reset", {
+        phone: this.info.phone,
+        psw: this.info.psw,
+        sms_code: this.info.code,
+      })
+        .then((res) => {
+          if (res.code === 0) {
+            // 注册成功
+            this.$alert(
+              "修改密码成功，点击确定按钮后将会跳转到登陆页面。",
+              "提示",
+              {
+                confirmButtonText: "确定",
+                callback: (action) => {
+                  this.$router.push("/");
+                },
+              }
+            );
+          } else {
+            this.$message.error(res.msg); // 未知错误
+          }
+        })
+        .catch((err) => {
+          console.log(err, "123");
+        });
+    }),
+  },
+};
+</script>
+
+
+<style scoped>
+.phone-box {
+  position: relative;
+  /* overflow: hidden; */
+}
+
+.getYZM {
+  position: absolute;
+  right: 13px;
+  top: 13px;
+  z-index: 999;
+  cursor: pointer;
+  padding-left: 10px;
+  border-left: 1px solid rgb(235, 235, 235);
+}
+
+.getYZM:active {
+  color: #1890ff;
+}
+</style>