忘记密码，获取验证码

src/api/user.js

@@ -83,6 +83,11 @@ export const updateMyPassword = (data) =>
     data,
     loading: true,
   });
+export const getVerifyCode = (data) =>
+  request({
+    url: '/api/admin/common/get_verify_code',
+    data,
+  });
 export const getMenus = () =>
   request({
     url: '/api/admin/common/get_menu', //真实接口url

src/views/login/forget-pwd.vue

@@ -1,16 +1,15 @@
 <template>
   <div class="forget-pwd">
     <t-form
-      v-show="!forgetStatus"
       ref="form"
       :data="formData"
       :label-width="0"
       class="login-form"
       :rules="rules"
     >
-      <t-form-item name="tel">
+      <t-form-item name="mobileNumber">
         <t-input
-          v-model="formData.tel"
+          v-model="formData.mobileNumber"
           clearable
           placeholder="请输入你的手机号"
           size="large"
@@ -20,19 +19,164 @@
           </template>
         </t-input>
       </t-form-item>
+      <t-form-item name="code">
+        <div class="flex items-center">
+          <t-input
+            v-model="formData.code"
+            clearable
+            placeholder="请输入验证码"
+            size="large"
+          >
+            <template #prefix-icon>
+              <MobileIcon />
+            </template>
+          </t-input>
+          <t-button
+            class="m-l-20px"
+            style="width: 160px"
+            :loading="loading"
+            @click="getCode"
+            >{{ isActive ? lastSeconds + 's' : '获取验证码' }}</t-button
+          >
+        </div>
+      </t-form-item>
+      <t-form-item name="password">
+        <t-input
+          v-model="formData.password"
+          type="password"
+          clearable
+          placeholder="请输入新密码"
+          size="large"
+        >
+          <template #prefix-icon>
+            <LockOnIcon />
+          </template>
+        </t-input>
+      </t-form-item>
+      <t-form-item name="repeatPassword">
+        <t-input
+          v-model="formData.repeatPassword"
+          type="password"
+          clearable
+          placeholder="请再次输入新密码"
+          size="large"
+        >
+          <template #prefix-icon>
+            <ArrowTriangleUpIcon />
+          </template>
+        </t-input>
+      </t-form-item>
+      <t-button
+        block
+        class="m-t-30px"
+        @click="submitHandle"
+        size="large"
+        theme="primary"
+        >保 存</t-button
+      >
     </t-form>
   </div>
 </template>
 
 <script setup name="ForgetPwd">
-import { reactive } from 'vue';
-import { CallIcon } from 'tdesign-icons-vue-next';
-
+import { reactive, ref } from 'vue';
+import {
+  CallIcon,
+  MobileIcon,
+  LockOnIcon,
+  ArrowTriangleUpIcon,
+} from 'tdesign-icons-vue-next';
+import { clear } from '@/utils/tool';
+import { useIntervalFn } from '@vueuse/core';
+import { MessagePlugin } from 'tdesign-vue-next';
+import { useRequest } from 'vue-request';
+import { getVerifyCode } from '@/api/user';
+const { run, loading } = useRequest(getVerifyCode);
+const lastSeconds = ref(10);
+const countdown = () => {
+  if (lastSeconds.value == 0) {
+    pause();
+  } else {
+    lastSeconds.value = lastSeconds.value - 1;
+  }
+};
+const { pause, resume, isActive } = useIntervalFn(
+  () => {
+    countdown();
+  },
+  1000,
+  { immediate: false }
+);
+const getCode = () => {
+  if (!formData.mobileNumber) {
+    MessagePlugin.error('请先输入手机号');
+    return;
+  }
+  run({ mobileNumber: formData.mobileNumber }).then((res) => {
+    console.log('rrr', res);
+  });
+  // resume();
+};
 const formData = reactive({
-  tel: '',
-  loginName: 'sysadmin',
-  password: '123456',
+  mobileNumber: '17786475086',
+  password: '',
+  code: '',
+  repeatPassword: '',
 });
+const rules = {
+  mobileNumber: [
+    {
+      required: true,
+      message: '请输入手机号',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  code: [
+    {
+      required: true,
+      message: '请输入验证码',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  password: [
+    {
+      required: true,
+      message: '请输入密码',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  repeatPassword: [
+    {
+      required: true,
+      message: '请输入新密码',
+      type: 'error',
+      trigger: 'change',
+    },
+    {
+      validator: (val) => {
+        if (val !== formData.password) {
+          return {
+            result: false,
+            message: '两次输入的新密码不一致',
+          };
+        }
+        return {
+          result: true,
+          type: 'success',
+        };
+      },
+    },
+  ],
+};
+const submitHandle = () => {
+  form.value.validate().then(async (result) => {
+    if (result === true) {
+    }
+  });
+};
 </script>
 
 <style></style>

src/views/login/index.vue

@@ -25,7 +25,7 @@
         `请输入${forgetStatus ? '新的' : ''}账号与密码`
       }}</div>
       <t-form
-        v-show="!forgetStatus"
+        v-if="!forgetStatus"
         ref="form"
         :data="formData"
         :label-width="0"
@@ -70,6 +70,7 @@
           >登 录</t-button
         >
       </t-form>
+      <ForgetPwd v-else />
     </div>
   </div>
   <!-- <button @click="loginHandle" class="m-t-10px">登录！</button> -->
@@ -82,8 +83,9 @@ import { useRoute, useRouter } from 'vue-router';
 import { useUserStore } from '@/store';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { getBase64 } from '@/utils/crypto';
+import ForgetPwd from './forget-pwd.vue';
 
-const forgetStatus = ref(false);
+const forgetStatus = ref(true);
 const form = ref(null);
 
 const route = useRoute();
@@ -169,7 +171,6 @@ const loginHandle = () => {
   }
   .login-box {
     width: 350px;
-    height: 360px;
     background: #fff;
     box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
     border-radius: 8px;