feat: 忘记密码状态下获取验证码接口调通

src/api/login/login.ts

@@ -6,18 +6,13 @@ import { ContentTypeEnum } from '@/enums/httpEnum'
  * 获得手机号验证码
  * @returns
  */
-export async function getCode(params: PageParam) {
+export async function getCode(params: {phone: string,agentcode:string}) {
   const res = await http.request({
     url: `/web/smslogin/sendcode`,
     method: 'get',
     params,
   })
-
+  return res
-  const { data: { records, pages } } = res
-  return {
-    pageCount: pages,
-    data: records,
-  }
 }
 
 /**

src/views/login/components/Forget.vue

@@ -1,257 +1,321 @@
 <script lang="ts" setup>
-import { reactive, ref } from 'vue'
+import { reactive, ref } from "vue";
-import { useMessage } from 'naive-ui'
+import { useMessage } from "naive-ui";
-import { forgetPassword, getCode, updateSUser } from '@/api/login/login'
+import { forgetPassword, getCode, updateSUser } from "@/api/login/login";
 
-const emit = defineEmits(['close', 'forget'])
+const emit = defineEmits(["close", "forget"]);
 interface FormState {
-  enterprisecode?: string
+  enterprisecode?: string;
-  username: string
+  username: string;
-  password: string
+  password: string;
-  captcha: string
+  captcha: string;
 }
 
 interface FormForget {
-  agentcode: string
+  agentcode: string;
-  loginname: string
+  loginname: string;
-  phone: string
+  phone: string;
-  phonecode: string
+  phonecode: string;
 }
 
 interface FormSure {
-  newPassword: string
+  newPassword: string;
-  rePasswrod: string
+  rePasswrod: string;
-  loginname: string
+  loginname: string;
 }
 
-const formRef = ref()
+const formRef = ref();
-const formRefSure = ref()
+const formRefSure = ref();
 
-const message = useMessage()
+const message = useMessage();
-const loading = ref(false)
+const loading = ref(false);
-const flag = ref(true)
+const flag = ref(true);
 const formForget: FormForget = reactive({
-  agentcode: '',
+  agentcode: "",
-  loginname: '',
+  loginname: "",
-  phone: '',
+  phone: "",
-  phonecode: '',
+  phonecode: "",
-})
+});
 
 const formInline: FormState = reactive({
-  enterprisecode: '',
+  enterprisecode: "",
-  username: '',
+  username: "",
-  password: '',
+  password: "",
-  captcha: '',
+  captcha: "",
-})
+});
 
 const formSure: FormSure = reactive({
-  newPassword: '',
+  newPassword: "",
-  rePasswrod: '',
+  rePasswrod: "",
-  loginname: '13311111111',
+  loginname: "13311111111",
-})
+});
-const tab = ref(0)
+const tab = ref(0);
-const countTime = ref('获取验证码')
+const countTime = ref("获取验证码");
 const rules = {
-  enterprisecode: { required: true, message: '请输入企业编码', trigger: 'blur' },
+  enterprisecode: { required: true, message: "请输入企业编码", trigger: "blur" },
-  loginname: { required: true, message: '请输入用户名', trigger: 'blur' },
+  loginname: { required: true, message: "请输入用户名", trigger: "blur" },
-  password: { required: true, message: '请输入密码', trigger: 'blur' },
+  password: { required: true, message: "请输入密码", trigger: "blur" },
-  phonecode: { required: true, message: '请输入验证码', trigger: 'blur' },
+  phonecode: { required: true, message: "请输入验证码", trigger: "blur" },
-  newPassword: { required: true, message: '请输入新密码', trigger: 'blur' },
+  newPassword: { required: true, message: "请输入新密码", trigger: "blur" },
   rePasswrod: [
     {
       required: true,
-      message: '请再次输入密码',
+      message: "请再次输入密码",
-      trigger: ['input', 'blur'],
+      trigger: ["input", "blur"],
     },
     {
       validator: validatePasswordSame,
-      message: '两次密码输入不一致',
+      message: "两次密码输入不一致",
-      trigger: ['blur', 'password-input'],
+      trigger: ["blur", "password-input"],
     },
   ],
-}
+};
 
 function validatePasswordSame(rule: any, value: string): boolean {
-  return value === formSure.newPassword
+  return value === formSure.newPassword;
 }
 
 function handleSubmit(e) {
-  e.preventDefault()
+  e.preventDefault();
   formRef.value.validate(async (errors) => {
     if (!errors) {
-      const { loginname, phone, phonecode, agentcode } = formForget
+      const { loginname, phone, phonecode, agentcode } = formForget;
-      loading.value = true
+      loading.value = true;
 
       const params = {
         loginname,
         phone,
         phonecode,
         agentcode,
-      }
+      };
 
       try {
-        const res = await forgetPassword(params)
+        const res = await forgetPassword(params);
-        if (res.code === 'OK') {
+        if (res.code === "OK") {
-          formSure.loginname = res.data.loginname
+          formSure.loginname = res.data.loginname;
-          tab.value = 1
+          tab.value = 1;
-        }
         }
-      finally {
+      } finally {
-        loading.value = false
+        loading.value = false;
       }
+    } else {
+      message.error("请填写完整信息");
     }
-    else {
+  });
-      message.error('请填写完整信息')
-    }
-  })
 }
 
 function handleSure(e) {
-  e.preventDefault()
+  e.preventDefault();
   formRefSure.value.validate(async (errors) => {
     if (!errors) {
-      const { newPassword, rePasswrod, loginname } = formSure
+      const { newPassword, rePasswrod, loginname } = formSure;
-      loading.value = true
+      loading.value = true;
 
       const params = {
         newPassword,
         rePasswrod,
         loginname,
-      }
+      };
 
       try {
-        const res = await updateSUser(params)
+        const res = await updateSUser(params);
-        if (res.code === 'OK')
+        if (res.code === "OK") message.success("修改成功");
-          message.success('修改成功')
+        else message.error(res.message);
-
+      } finally {
-        else
+        loading.value = false;
-          message.error(res.message)
-      }
-      finally {
-        loading.value = false
       }
+    } else {
+      message.error("请填写完整信息");
     }
-    else {
+  });
-      message.error('请填写完整信息')
-    }
-  })
 }
 
 function close() {
-  emit('close')
+  emit("close");
 }
 
 function switchTab(type: number) {
-  tab.value = type
+  tab.value = type;
 }
 
 function computedForm() {
-  return !formInline.enterprisecode || !formInline.username || !formInline.password
+  return !formInline.enterprisecode || !formInline.username || !formInline.password;
 }
 
 function computedFormSure() {
-  return !formSure.newPassword || !formSure.rePasswrod
+  return !formSure.newPassword || !formSure.rePasswrod;
 }
 async function sendCode(value) {
-  if (!flag.value)
+  if (!flag.value) return;
-    return
+  flag.value = false;
-  flag.value = false
   const res = await getCode({
-    phone: '',
+    phone: formForget.phone,
-    agentcode: '',
+    agentcode: formForget.agentcode,
-  })
+  });
-  startCount()
+  if(!res.data){
+    message.error(res.message)
+    return
+  }
+  startCount();
 }
 
 function startCount() {
-  let time = 60
+  let time = 60;
-  countTime.value = '60s'
+  countTime.value = "60s";
   const timer = setInterval(() => {
-    countTime.value = `${--time}s`
+    countTime.value = `${--time}s`;
     if (time === 0) {
-      clearInterval(timer)
+      clearInterval(timer);
-      countTime.value = '获取验证码'
+      countTime.value = "获取验证码";
-      flag.value = true
+      flag.value = true;
     }
-  }, 1000)
+  }, 1000);
 }
 
 function forget() {
-  emit('forget')
+  emit("forget");
 }
 </script>
 
 <template>
   <div class="form-login">
-    <img class="img-close" src="@/assets/images/login/close.png" alt="" @click="close">
+    <img class="img-close" src="@/assets/images/login/close.png" alt="" @click="close" />
-    <div class="header flex justify-between">
+    <div class="flex justify-between header">
-      <div class="tab">
+      <div class="tab">忘记密码</div>
-        忘记密码
+      <div class="back" @click="forget">&lt; 返回登录</div>
-      </div>
-      <div class="back" @click="forget">
-        &lt; 返回登录
-      </div>
     </div>
     <div v-if="tab === 0" class="form-1">
-      <n-form ref="formRef" label-placement="left" size="large" :model="formForget" :rules="rules">
+      <n-form
+        ref="formRef"
+        label-placement="left"
+        size="large"
+        :model="formForget"
+        :rules="rules"
+      >
         <n-form-item class="form-item" path="agentcode">
-          <n-input v-model:value="formForget.agentcode" class="item-input" placeholder="请输入企业编码">
+          <n-input
+            v-model:value="formForget.agentcode"
+            class="item-input"
+            placeholder="请输入企业编码"
+          >
             <template #prefix>
               <svg-icon size="20" name="enterprise" />
             </template>
           </n-input>
         </n-form-item>
         <n-form-item class="form-item" path="loginname">
-          <n-input v-model:value="formForget.loginname" class="item-input" placeholder="请输入用户名">
+          <n-input
+            v-model:value="formForget.loginname"
+            class="item-input"
+            placeholder="请输入用户名"
+          >
             <template #prefix>
               <svg-icon size="20" name="account" />
             </template>
           </n-input>
         </n-form-item>
         <n-form-item class="form-item" path="phone">
-          <n-input v-model:value="formForget.phone" class="item-input" placeholder="请输入手机号">
+          <n-input
+            v-model:value="formForget.phone"
+            class="item-input"
+            placeholder="请输入手机号"
+          >
             <template #prefix>
-              <img class="img-phone" src="@/assets/images/login/phone.png" alt="" @click="close">
+              <img
+                class="img-phone"
+                src="@/assets/images/login/phone.png"
+                alt=""
+                @click="close"
+              />
             </template>
           </n-input>
         </n-form-item>
         <n-form-item class="form-item" path="phonecode">
-          <n-input v-model:value="formForget.phonecode" maxlength="6" class="item-input" placeholder="请输入验证码" clearable>
+          <n-input
+            v-model:value="formForget.phonecode"
+            maxlength="6"
+            class="item-input"
+            placeholder="请输入验证码"
+            clearable
+          >
             <template #prefix>
-              <img class="img-phone" src="@/assets/images/login/auth.png" alt="" @click="close">
+              <img
+                class="img-phone"
+                src="@/assets/images/login/auth.png"
+                alt=""
+                @click="close"
+              />
             </template>
             <template #suffix>
-              <div :class="{ 'code-count': countTime !== '获取验证码' }" class="code" @click="sendCode">
+              <div
+                :class="{ 'code-count': countTime !== '获取验证码' }"
+                class="code"
+                @click="sendCode"
+              >
                 {{ countTime }}
               </div>
             </template>
           </n-input>
         </n-form-item>
         <n-form-item class="form-item">
-          <n-button :class="{ 'btn-disabled': computedForm() }" class="btn" type="primary" size="large" :loading="loading" block @click="handleSubmit">
+          <n-button
+            :class="{ 'btn-disabled': computedForm() }"
+            class="btn"
+            type="primary"
+            size="large"
+            :loading="loading"
+            block
+            @click="handleSubmit"
+          >
             下一步
           </n-button>
         </n-form-item>
       </n-form>
     </div>
     <div v-if="tab === 1" class="form-1">
-      <n-form ref="formRefSure" label-placement="left" size="large" :model="formSure" :rules="rules">
+      <n-form
+        ref="formRefSure"
+        label-placement="left"
+        size="large"
+        :model="formSure"
+        :rules="rules"
+      >
         <n-form-item class="form-item" path="newPassword">
-          <n-input v-model:value="formSure.newPassword" class="item-input" type="password" show-password-on="click" placeholder="请输入8-16位密码，必须包含英文及数字">
+          <n-input
+            v-model:value="formSure.newPassword"
+            class="item-input"
+            type="password"
+            show-password-on="click"
+            placeholder="请输入8-16位密码，必须包含英文及数字"
+          >
             <template #prefix>
               <svg-icon size="20" name="password" />
             </template>
           </n-input>
         </n-form-item>
         <n-form-item class="form-item" path="rePasswrod">
-          <n-input v-model:value="formSure.rePasswrod" class="item-input" type="password" show-password-on="click" placeholder="请再次确认输入新密码">
+          <n-input
+            v-model:value="formSure.rePasswrod"
+            class="item-input"
+            type="password"
+            show-password-on="click"
+            placeholder="请再次确认输入新密码"
+          >
             <template #prefix>
               <svg-icon size="20" name="password" />
             </template>
           </n-input>
         </n-form-item>
         <n-form-item class="form-item">
-          <n-button :class="{ 'btn-disabled': computedFormSure() }" class="btn" type="primary" size="large" :loading="loading" block @click="handleSure">
+          <n-button
+            :class="{ 'btn-disabled': computedFormSure() }"
+            class="btn"
+            type="primary"
+            size="large"
+            :loading="loading"
+            block
+            @click="handleSure"
+          >
             确定
           </n-button>
         </n-form-item>
@@ -264,15 +328,19 @@ function forget() {
 .form-login {
   width: 420px;
   box-sizing: border-box;
-  background: linear-gradient(136deg,rgba(226,236,255,0.80) 3%, rgba(251,251,251,0.80) 97%);
+  background: linear-gradient(
+    136deg,
+    rgba(226, 236, 255, 0.8) 3%,
+    rgba(251, 251, 251, 0.8) 97%
+  );
   border: 1px solid #ffffff;
   border-radius: 6px;
-  box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.04);
+  box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.04);
   backdrop-filter: blur(12px);
   position: relative;
   padding: 48px 27px 42px;
 
-  .img-close{
+  .img-close {
     position: absolute;
     right: 0;
     top: -44px;
@@ -281,7 +349,7 @@ function forget() {
     cursor: pointer;
   }
 
-  .tab{
+  .tab {
     font-size: 24px;
     font-family: PingFang SC, PingFang SC-Medium;
     font-weight: Medium;
@@ -289,59 +357,59 @@ function forget() {
     color: #507afd;
   }
 
-  .header{
+  .header {
     align-items: center;
   }
 
-  .form-1{
+  .form-1 {
     margin-top: 29px;
 
-    .form-item{
+    .form-item {
       height: 60px;
     }
 
-    .item-input{
+    .item-input {
       width: 366px;
       // height: 44px;
-      background: rgba(255,255,255,0.50);
+      background: rgba(255, 255, 255, 0.5);
       border-radius: 4px;
     }
 
-    .btn{
+    .btn {
       width: 366px;
       height: 44px;
-      background: linear-gradient(234deg,#96aaff 0%, #1c43ff 100%);
+      background: linear-gradient(234deg, #96aaff 0%, #1c43ff 100%);
       border-radius: 3px;
       margin-top: 10px;
       margin-bottom: 14px;
 
-      &-disabled{
+      &-disabled {
         opacity: 0.5;
-        background: linear-gradient(234deg,#96aaff 0%, #1c43ff 100%);
+        background: linear-gradient(234deg, #96aaff 0%, #1c43ff 100%);
       }
     }
   }
 
-  .img-phone{
+  .img-phone {
     width: 20px;
     height: 20px;
   }
 
-  .order-last{
+  .order-last {
     font-size: 14px;
     font-family: PingFang SC, PingFang SC-Regular;
     font-weight: Regular;
     color: #507afd;
   }
 
-  .code{
+  .code {
     font-size: 15px;
     font-family: PingFang SC, PingFang SC-Regular;
     font-weight: Regular;
     color: #507afd;
     margin-left: 12px;
 
-    &-count{
+    &-count {
       font-size: 14px;
       color: #999999;
     }
@@ -350,4 +418,12 @@ function forget() {
 ::v-deep(.n-form-item-feedback--error) {
   // color: #FF4E4F !important;
 }
+.back {
+  font-size: 15px;
+  font-family: PingFang SC, PingFang SC-Medium;
+  font-weight: Medium;
+  text-align: center;
+  color: #666666;
+  line-height: 21px;
+}
 </style>

src/views/login/components/Login.vue

@@ -1,239 +1,265 @@
 <script lang="ts" setup>
-import { computed, reactive, ref } from 'vue'
+import { computed, reactive, ref } from "vue";
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute, useRouter } from "vue-router";
-import { useMessage } from 'naive-ui'
+import { useMessage } from "naive-ui";
 
 // import captcha from './captcha.vue'
-import { PageEnum } from '@/enums/pageEnum'
+import { PageEnum } from "@/enums/pageEnum";
-import { useUserStore } from '@/store/modules/user'
+import { useUserStore } from "@/store/modules/user";
-import { ResultEnum } from '@/enums/httpEnum'
+import { ResultEnum } from "@/enums/httpEnum";
-import { getCode, smsLogin } from '@/api/login/login'
+import { getCode, smsLogin } from "@/api/login/login";
 
-const emit = defineEmits(['close', 'forget'])
+const emit = defineEmits(["close", "forget"]);
 interface FormState {
-  enterprisecode?: string
+  enterprisecode?: string;
-  username: string
+  username: string;
-  password: string
+  password: string;
 }
 
 interface FormSms {
-  agentcode: string
+  agentcode: string;
-  phone: string
+  phone: string;
-  phonecode: string
+  phonecode: string;
 }
 
-const formRef = ref()
+const formRef = ref();
-const formRefSms = ref()
+const formRefSms = ref();
-const message = useMessage()
+const message = useMessage();
-const loading = ref(false)
+const loading = ref(false);
-const autoLogin = ref(true)
+const autoLogin = ref(true);
-const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME
+const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME;
-const userStore = useUserStore()
+const userStore = useUserStore();
-const router = useRouter()
+const router = useRouter();
-const route = useRoute()
+const route = useRoute();
-const show = ref(false)
+const show = ref(false);
-const flag = ref(true)
+const flag = ref(true);
 
 const formInline: FormState = reactive({
-  // enterprisecode: '演示公司',
+  // enterprisecode: "演示公司",
-  // username: 'yanshi01',
+  // username: "yanshi01",
-  // password: '123456',
+  // password: "123456",
   enterprisecode: '',
   username: '',
   password: '',
-})
+});
 
 const formSms: FormSms = reactive({
-  agentcode: '',
+  agentcode: "",
-  phone: '',
+  phone: "",
-  phonecode: '',
+  phonecode: "",
-})
+});
-const tab = ref(0)
+const tab = ref(0);
-const countTime = ref('获取验证码')
+const countTime = ref("获取验证码");
 const rules = {
-  enterprisecode: { required: true, message: '请输入企业编码', trigger: 'blur' },
+  enterprisecode: { required: true, message: "请输入企业编码", trigger: "blur" },
-  agentcode: { required: true, message: '请输入企业编码', trigger: 'blur' },
+  agentcode: { required: true, message: "请输入企业编码", trigger: "blur" },
-  phone: { required: true, message: '请输入手机号', trigger: 'blur' },
+  phone: { required: true, message: "请输入手机号", trigger: "blur" },
-  phonecode: { required: true, message: '请输入验证码', trigger: 'blur' },
+  phonecode: { required: true, message: "请输入验证码", trigger: "blur" },
-  username: { required: true, message: '请输入用户名', trigger: 'blur' },
+  username: { required: true, message: "请输入用户名", trigger: "blur" },
-  password: { required: true, message: '请输入密码', trigger: 'blur' },
+  password: { required: true, message: "请输入密码", trigger: "blur" },
-  captcha: { required: true, message: '请输入验证码', trigger: 'blur' },
+  captcha: { required: true, message: "请输入验证码", trigger: "blur" },
-}
+};
 
 function handleSubmit(e) {
-  e.preventDefault()
+  e.preventDefault();
   formRef.value.validate(async (errors) => {
     if (!errors) {
-      const { username, password, enterprisecode } = formInline
+      const { username, password, enterprisecode } = formInline;
-      message.loading('登录中...')
+      message.loading("登录中...");
-      loading.value = true
+      loading.value = true;
 
       const params = {
         username,
         password,
         codetoken: userStore.getCapToken,
         agentcode: enterprisecode,
-      }
+      };
 
       try {
-        const { code, message: msg } = await userStore.login(params)
+        const { code, message: msg } = await userStore.login(params);
         if (code === ResultEnum.SUCCESS) {
-          await userStore.getInformation()
+          await userStore.getInformation();
-          message.destroyAll()
+          message.destroyAll();
-
+
-          const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
+          const toPath = decodeURIComponent((route.query?.redirect || "/") as string);
-          message.success('登录成功，即将进入系统')
+          message.success("登录成功，即将进入系统");
-          if (route.name === LOGIN_NAME)
+          if (route.name === LOGIN_NAME) router.replace("/");
-            router.replace('/')
+          else router.replace(toPath);
-          else router.replace(toPath)
+        } else {
-        }
+          message.destroyAll();
-        else {
+          message.info(msg || "登录失败");
-          message.destroyAll()
-          message.info(msg || '登录失败')
-        }
         }
-      finally {
+      } finally {
-        loading.value = false
+        loading.value = false;
       }
+    } else {
+      message.error("请填写完整信息，并且进行验证码校验");
     }
-    else {
+  });
-      message.error('请填写完整信息，并且进行验证码校验')
-    }
-  })
 }
 
 function handleSmsSubmit(e) {
-  e.preventDefault()
+  e.preventDefault();
   formRefSms.value.validate(async (errors) => {
     if (!errors) {
-      const { phone, agentcode, phonecode } = formSms
+      const { phone, agentcode, phonecode } = formSms;
-      message.loading('登录中...')
+      message.loading("登录中...");
-      loading.value = true
+      loading.value = true;
 
       try {
         const res = await smsLogin({
           phone,
           agentcode,
           phonecode,
-        })
+        });
-        const { code, message: msg } = res
+        const { code, message: msg } = res;
         if (code === ResultEnum.SUCCESS) {
           // const { code, message: msg } = await userStore.login(params)
-          await userStore.getInformation()
+          await userStore.getInformation();
-
+
-          message.destroyAll()
+          message.destroyAll();
-          const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
+          const toPath = decodeURIComponent((route.query?.redirect || "/") as string);
-          message.success('登录成功，即将进入系统')
+          message.success("登录成功，即将进入系统");
-          if (route.name === LOGIN_NAME)
+          if (route.name === LOGIN_NAME) router.replace("/");
-            router.replace('/')
+          else router.replace(toPath);
-          else router.replace(toPath)
+        } else {
-        }
+          message.destroyAll();
-        else {
+          message.info(msg || "登录失败");
-          message.destroyAll()
-          message.info(msg || '登录失败')
-        }
         }
-      finally {
+      } finally {
-        loading.value = false
+        loading.value = false;
       }
+    } else {
+      message.error("请填写完整信息，并且进行验证码校验");
     }
-    else {
+  });
-      message.error('请填写完整信息，并且进行验证码校验')
-    }
-  })
 }
 
 function close() {
-  emit('close')
+  emit("close");
 }
 
 function switchTab(type: number) {
-  tab.value = type
+  tab.value = type;
 }
 
 function computedForm() {
-  return !formInline.enterprisecode || !formInline.username || !formInline.password
+  return !formInline.enterprisecode || !formInline.username || !formInline.password;
 }
 
 async function sendCode(value) {
-  if (!formSms.phonecode)
+  if (!formSms.phonecode) return;
-    return
 
-  if (!flag.value)
+  if (!flag.value) return;
-    return
+  flag.value = false;
-  flag.value = false
 
   const res = await getCode({
     phone: formSms.phone,
-    agentcode: '',
+    agentcode: "",
-  })
+  });
-  startCount()
+  startCount();
 }
 
 function startCount() {
-  let time = 60
+  let time = 60;
-  countTime.value = '60s'
+  countTime.value = "60s";
   const timer = setInterval(() => {
-    countTime.value = `${--time}s`
+    countTime.value = `${--time}s`;
     if (time === 0) {
-      clearInterval(timer)
+      clearInterval(timer);
-      countTime.value = '重新获取'
+      countTime.value = "重新获取";
-      flag.value = true
+      flag.value = true;
     }
-  }, 1000)
+  }, 1000);
 }
 
 function forget() {
-  emit('forget')
+  emit("forget");
 }
 </script>
 
 <template>
   <div class="form-login">
-    <img class="img-close" src="@/assets/images/login/close.png" alt="" @click="close">
+    <img class="img-close" src="@/assets/images/login/close.png" alt="" @click="close" />
     <div class="tab">
-      <div :class="{ 'tab-item-active': tab === 0 }" class="tab-item" @click="switchTab(0)">
+      <div
+        :class="{ 'tab-item-active': tab === 0 }"
+        class="tab-item"
+        @click="switchTab(0)"
+      >
         密码登录
         <div class="line" />
       </div>
-      <div :class="{ 'tab-item-active': tab === 1 }" class="tab-item" @click="switchTab(1)">
+      <div
+        :class="{ 'tab-item-active': tab === 1 }"
+        class="tab-item"
+        @click="switchTab(1)"
+      >
         短信登录
         <div class="line" />
       </div>
     </div>
     <div v-if="tab === 0" class="form-1">
-      <n-form ref="formRef" label-placement="left" size="large" :model="formInline" :rules="rules">
+      <n-form
+        ref="formRef"
+        label-placement="left"
+        size="large"
+        :model="formInline"
+        :rules="rules"
+      >
         <n-form-item class="form-item" path="enterprisecode">
-          <n-input v-model:value="formInline.enterprisecode" class="item-input" placeholder="请输入企业编码">
+          <n-input
+            v-model:value="formInline.enterprisecode"
+            class="item-input"
+            placeholder="请输入企业编码"
+          >
             <template #prefix>
               <svg-icon size="20" name="enterprise" />
             </template>
           </n-input>
         </n-form-item>
         <n-form-item class="form-item" path="username">
-          <n-input v-model:value="formInline.username" class="item-input" placeholder="请输入用户名">
+          <n-input
+            v-model:value="formInline.username"
+            class="item-input"
+            placeholder="请输入用户名"
+          >
             <template #prefix>
               <svg-icon size="20" name="account" />
             </template>
           </n-input>
         </n-form-item>
         <n-form-item class="form-item" path="password">
-          <n-input v-model:value="formInline.password" class="item-input" type="password" show-password-on="click" placeholder="请输入密码">
+          <n-input
+            v-model:value="formInline.password"
+            class="item-input"
+            type="password"
+            show-password-on="click"
+            placeholder="请输入密码"
+          >
             <template #prefix>
               <svg-icon size="20" name="password" />
             </template>
           </n-input>
         </n-form-item>
         <n-form-item class="form-item">
-          <n-button :class="{ 'btn-disabled': computedForm() }" class="btn" type="primary" size="large" :loading="loading" block @click="handleSubmit">
+          <n-button
+            :class="{ 'btn-disabled': computedForm() }"
+            class="btn"
+            type="primary"
+            size="large"
+            :loading="loading"
+            block
+            @click="handleSubmit"
+          >
             登录
           </n-button>
         </n-form-item>
         <n-form-item class="default-color">
-          <div class="w-full flex justify-between">
+          <div class="flex justify-between w-full">
             <div class="flex-initial">
               <n-checkbox v-model:checked="autoLogin">
-                记住账号
+                <span class="forgetSpan">记住账号</span>
               </n-checkbox>
             </div>
             <div class="flex-initial order-last" @click="forget">
@@ -244,43 +270,85 @@ function forget() {
       </n-form>
     </div>
     <div v-else class="form-1">
-      <n-form ref="formRefSms" label-placement="left" size="large" :model="formSms" :rules="rules">
+      <n-form
+        ref="formRefSms"
+        label-placement="left"
+        size="large"
+        :model="formSms"
+        :rules="rules"
+      >
         <n-form-item class="form-item" path="agentcode">
-          <n-input v-model:value="formSms.agentcode" class="item-input" placeholder="请输入企业编码">
+          <n-input
+            v-model:value="formSms.agentcode"
+            class="item-input"
+            placeholder="请输入企业编码"
+          >
             <template #prefix>
               <svg-icon size="20" name="enterprise" />
             </template>
           </n-input>
         </n-form-item>
         <n-form-item class="form-item" path="phone">
-          <n-input v-model:value="formSms.phone" class="item-input" placeholder="请输入手机号">
+          <n-input
+            v-model:value="formSms.phone"
+            class="item-input"
+            placeholder="请输入手机号"
+          >
             <template #prefix>
-              <img class="img-phone" src="@/assets/images/login/phone.png" alt="" @click="close">
+              <img
+                class="img-phone"
+                src="@/assets/images/login/phone.png"
+                alt=""
+                @click="close"
+              />
             </template>
           </n-input>
         </n-form-item>
         <n-form-item class="form-item" path="phonecode">
-          <n-input v-model:value="formSms.phonecode" maxlength="6" class="item-input" placeholder="请输入验证码" clearable>
+          <n-input
+            v-model:value="formSms.phonecode"
+            maxlength="6"
+            class="item-input"
+            placeholder="请输入验证码"
+            clearable
+          >
             <template #prefix>
-              <img class="img-phone" src="@/assets/images/login/auth.png" alt="" @click="close">
+              <img
+                class="img-phone"
+                src="@/assets/images/login/auth.png"
+                alt=""
+                @click="close"
+              />
             </template>
             <template #suffix>
-              <div :class="{ 'code-count': countTime !== '获取验证码' }" class="code" @click="sendCode">
+              <div
+                :class="{ 'code-count': countTime !== '获取验证码' }"
+                class="code"
+                @click="sendCode"
+              >
                 {{ countTime }}
               </div>
             </template>
           </n-input>
         </n-form-item>
         <n-form-item class="form-item">
-          <n-button :class="{ 'btn-disabled': computedForm() }" class="btn" type="primary" size="large" :loading="loading" block @click="handleSmsSubmit">
+          <n-button
+            :class="{ 'btn-disabled': computedForm() }"
+            class="btn"
+            type="primary"
+            size="large"
+            :loading="loading"
+            block
+            @click="handleSmsSubmit"
+          >
             登录
           </n-button>
         </n-form-item>
         <n-form-item class="default-color">
-          <div class="w-full flex justify-between">
+          <div class="flex justify-between w-full">
             <div class="flex-initial">
               <n-checkbox v-model:checked="autoLogin">
-                记住账号
+                <span class="forgetSpan">记住账号</span>
               </n-checkbox>
             </div>
             <div class="flex-initial order-last" @click="forget">
@@ -298,15 +366,19 @@ function forget() {
   width: 420px;
   height: 417px;
   box-sizing: border-box;
-  background: linear-gradient(136deg,rgba(226,236,255,0.80) 3%, rgba(251,251,251,0.80) 97%);
+  background: linear-gradient(
+    136deg,
+    rgba(226, 236, 255, 0.8) 3%,
+    rgba(251, 251, 251, 0.8) 97%
+  );
   border: 1px solid #ffffff;
   border-radius: 6px;
-  box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.04);
+  box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.04);
   backdrop-filter: blur(12px);
   position: relative;
   padding: 48px 27px 0;
 
-  .img-close{
+  .img-close {
     position: absolute;
     right: 0;
     top: -44px;
@@ -315,9 +387,9 @@ function forget() {
     cursor: pointer;
   }
 
-  .tab{
+  .tab {
     display: flex;
-    .tab-item{
+    .tab-item {
       width: 72px;
       height: 25px;
       font-size: 18px;
@@ -328,7 +400,7 @@ function forget() {
       line-height: 33px;
       margin-right: 24px;
 
-      &-active{
+      &-active {
         width: 96px;
         height: 33px;
         font-size: 24px;
@@ -338,12 +410,12 @@ function forget() {
         color: #507afd;
         line-height: 33px;
 
-        .line{
+        .line {
-          background: linear-gradient(234deg,#96aaff 0%, #1c43ff 100%);
+          background: linear-gradient(234deg, #96aaff 0%, #1c43ff 100%);
         }
       }
 
-      .line{
+      .line {
         width: 32px;
         height: 4px;
         border-radius: 2px;
@@ -353,55 +425,55 @@ function forget() {
     }
   }
 
-  .form-1{
+  .form-1 {
     margin-top: 29px;
 
-    .form-item{
+    .form-item {
       height: 60px;
     }
 
-    .item-input{
+    .item-input {
       width: 366px;
       // height: 44px;
-      background: rgba(255,255,255,0.50);
+      background: rgba(255, 255, 255, 0.5);
       border-radius: 4px;
     }
 
-    .btn{
+    .btn {
       width: 366px;
       height: 44px;
-      background: linear-gradient(234deg,#96aaff 0%, #1c43ff 100%);
+      background: linear-gradient(234deg, #96aaff 0%, #1c43ff 100%);
       border-radius: 3px;
       margin-top: 10px;
       margin-bottom: 14px;
 
-      &-disabled{
+      &-disabled {
         opacity: 0.5;
-        background: linear-gradient(234deg,#96aaff 0%, #1c43ff 100%);
+        background: linear-gradient(234deg, #96aaff 0%, #1c43ff 100%);
       }
     }
   }
 
-  .img-phone{
+  .img-phone {
     width: 20px;
     height: 20px;
   }
 
-  .order-last{
+  .order-last {
     font-size: 14px;
     font-family: PingFang SC, PingFang SC-Regular;
     font-weight: Regular;
     color: #507afd;
   }
 
-  .code{
+  .code {
     font-size: 15px;
     font-family: PingFang SC, PingFang SC-Regular;
     font-weight: Regular;
     color: #507afd;
     margin-left: 12px;
 
-    &-count{
+    &-count {
       font-size: 14px;
       color: #999999;
     }
@@ -410,4 +482,12 @@ function forget() {
 ::v-deep(.n-form-item-feedback--error) {
   // color: #FF4E4F !important;
 }
+.forgetSpan {
+  font-size: 15px;
+  font-family: PingFang SC, PingFang SC-Regular;
+  font-weight: Regular;
+  text-align: center;
+  color: #999999;
+  line-height: 21px;
+}
 </style>