From 62b9421c4f0b2c6be110ffd441d6a4bcf156769e Mon Sep 17 00:00:00 2001
From: Dragon <>
Date: Wed, 13 Mar 2024 15:13:26 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=A1=B5=E9=9D=A2=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/login/components/Forget.vue | 294 ++++++++++++++++++++++++++
 src/views/login/components/Login.vue  |  95 ++++++++-
 src/views/login/index.vue             |  14 +-
 3 files changed, 395 insertions(+), 8 deletions(-)
 create mode 100644 src/views/login/components/Forget.vue

diff --git a/src/views/login/components/Forget.vue b/src/views/login/components/Forget.vue
new file mode 100644
index 0000000..b54f447
--- /dev/null
+++ b/src/views/login/components/Forget.vue
@@ -0,0 +1,294 @@
+<script lang="ts" setup>
+import { computed, reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useMessage } from 'naive-ui'
+
+// import captcha from './captcha.vue'
+import { PageEnum } from '@/enums/pageEnum'
+import { useUserStore } from '@/store/modules/user'
+import { ResultEnum } from '@/enums/httpEnum'
+import { getFilter, setFilter } from '@/api/home/filter'
+import { getConfig } from '@/api/system/user'
+import { asideMap } from '@/config/aside'
+
+const emit = defineEmits(['close', 'forget'])
+interface FormState {
+  enterprisecode?: string
+  username: string
+  password: string
+  captcha: string
+}
+
+const formRef = ref()
+const message = useMessage()
+const loading = ref(false)
+const autoLogin = ref(true)
+const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME
+const userStore = useUserStore()
+const router = useRouter()
+const route = useRoute()
+const show = ref(false)
+const flag = ref(false)
+const formInline: FormState = reactive({
+  enterprisecode: '三方系统标识8',
+  username: '13311111111',
+  password: '123456',
+  captcha: '',
+})
+const tab = ref(0)
+const countTime = ref('获取验证码')
+const rules = {
+  enterprisecode: { required: true, message: '请输入企业编码', trigger: 'blur' },
+  username: { required: true, message: '请输入用户名', trigger: 'blur' },
+  password: { required: true, message: '请输入密码', trigger: 'blur' },
+  captcha: { required: true, message: '请输入验证码', trigger: 'blur' },
+}
+
+function handleSubmit(e) {
+  e.preventDefault()
+  formRef.value.validate(async (errors) => {
+    if (!errors) {
+      const { username, password, enterprisecode, captcha } = formInline
+      message.loading('登录中...')
+      loading.value = true
+
+      const params = {
+        logincode: captcha,
+        username,
+        password,
+        codetoken: userStore.getCapToken,
+        agentcode: enterprisecode,
+      }
+
+      try {
+        const { code, message: msg } = await userStore.login(params)
+        await userStore.getInformation()
+        const response = await getFilter()
+
+        // 添加个默认显示配置
+        if (response.data === null) {
+          const systemConfig = await getConfig()
+          const onList: string[] = []
+          Object.keys(systemConfig.data).forEach((key) => {
+            // 系统配置开启且个人配置开启
+            if (key.startsWith('iz') && systemConfig.data[key] === 'Y' && asideMap[key]?.isDefaultFilter)
+              onList.push(key)
+          })
+          await setFilter({ searchcount: onList.join(',') })
+        }
+
+        message.destroyAll()
+        if (code === ResultEnum.SUCCESS) {
+          const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
+          message.success('登录成功，即将进入系统')
+          if (route.name === LOGIN_NAME)
+            router.replace('/')
+          else router.replace(toPath)
+        }
+        else {
+          message.info(msg || '登录失败')
+        }
+      }
+      finally {
+        loading.value = false
+      }
+    }
+    else {
+      message.error('请填写完整信息，并且进行验证码校验')
+    }
+  })
+}
+
+function close() {
+  emit('close')
+}
+
+function switchTab(type: number) {
+  tab.value = type
+}
+
+function computedForm() {
+  return !formInline.enterprisecode || !formInline.username || !formInline.password
+}
+
+function startCount() {
+  let time = 60
+  countTime.value = '60s'
+  const timer = setInterval(() => {
+    countTime.value = `${--time}s`
+    if (time === 0) {
+      clearInterval(timer)
+      countTime.value = '获取验证码'
+      flag.value = false
+    }
+  }, 1000)
+}
+
+function forget() {
+  emit('forget')
+}
+</script>
+
+<template>
+  <div class="form-login">
+    <img class="img-close" src="@/assets/images/login/close.png" alt="" @click="close">
+    <div class="header flex justify-between">
+      <div class="tab">
+        忘记密码
+      </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="formInline" :rules="rules">
+        <n-form-item class="form-item" path="enterprisecode">
+          <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="请输入用户名">
+            <template #prefix>
+              <svg-icon size="20" name="account" />
+            </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="请输入手机号">
+            <template #prefix>
+              <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="username">
+          <n-input v-model:value="formInline.username" maxlength="6" class="item-input" placeholder="请输入验证码" clearable>
+            <template #prefix>
+              <img class="img-phone" src="@/assets/images/login/auth.png" alt="" @click="close">
+            </template>
+            <template #suffix>
+              <div :class="{ 'code-count': countTime !== '获取验证码' }" class="code" @click="startCount">
+                {{ 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>
+        </n-form-item>
+      </n-form>
+    </div>
+    <div v-if="tab === 1" class="form-1">
+      <n-form ref="formRef" label-placement="left" size="large" :model="formInline" :rules="rules">
+        <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="请输入密码">
+            <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>
+        </n-form-item>
+      </n-form>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.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%);
+  border: 1px solid #ffffff;
+  border-radius: 6px;
+  box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.04);
+  backdrop-filter: blur(12px);
+  position: relative;
+  padding: 48px 27px 42px;
+
+  .img-close{
+    position: absolute;
+    right: 0;
+    top: -44px;
+    width: 28px;
+    height: 28px;
+    cursor: pointer;
+  }
+
+  .tab{
+    font-size: 24px;
+    font-family: PingFang SC, PingFang SC-Medium;
+    font-weight: Medium;
+    text-align: left;
+    color: #507afd;
+  }
+
+  .header{
+    align-items: center;
+  }
+
+  .form-1{
+    margin-top: 29px;
+
+    .form-item{
+      height: 60px;
+    }
+
+    .item-input{
+      width: 366px;
+      // height: 44px;
+      background: rgba(255,255,255,0.50);
+      border-radius: 4px;
+    }
+
+    .btn{
+      width: 366px;
+      height: 44px;
+      background: linear-gradient(234deg,#96aaff 0%, #1c43ff 100%);
+      border-radius: 3px;
+      margin-top: 10px;
+      margin-bottom: 14px;
+
+      &-disabled{
+        opacity: 0.5;
+        background: linear-gradient(234deg,#96aaff 0%, #1c43ff 100%);
+      }
+    }
+  }
+
+  .img-phone{
+    width: 20px;
+    height: 20px;
+  }
+
+  .order-last{
+    font-size: 14px;
+    font-family: PingFang SC, PingFang SC-Regular;
+    font-weight: Regular;
+    color: #507afd;
+  }
+
+  .code{
+    font-size: 15px;
+    font-family: PingFang SC, PingFang SC-Regular;
+    font-weight: Regular;
+    color: #507afd;
+    margin-left: 12px;
+
+    &-count{
+      font-size: 14px;
+      color: #999999;
+    }
+  }
+}
+::v-deep(.n-form-item-feedback--error) {
+  // color: #FF4E4F !important;
+}
+</style>
diff --git a/src/views/login/components/Login.vue b/src/views/login/components/Login.vue
index 184813d..a086192 100644
--- a/src/views/login/components/Login.vue
+++ b/src/views/login/components/Login.vue
@@ -11,7 +11,7 @@ import { getFilter, setFilter } from '@/api/home/filter'
 import { getConfig } from '@/api/system/user'
 import { asideMap } from '@/config/aside'
 
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'forget'])
 interface FormState {
   enterprisecode?: string
   username: string
@@ -35,7 +35,7 @@ const formInline: FormState = reactive({
   captcha: '',
 })
 const tab = ref(0)
-
+const countTime = ref('获取验证码')
 const rules = {
   enterprisecode: { required: true, message: '请输入企业编码', trigger: 'blur' },
   username: { required: true, message: '请输入用户名', trigger: 'blur' },
@@ -99,7 +99,6 @@ function handleSubmit(e) {
 }
 
 function close() {
-  console.log(888)
   emit('close')
 }
 
@@ -110,6 +109,23 @@ function switchTab(type: number) {
 function computedForm() {
   return !formInline.enterprisecode || !formInline.username || !formInline.password
 }
+
+function startCount() {
+  let time = 60
+  countTime.value = '60s'
+  const timer = setInterval(() => {
+    countTime.value = `${--time}s`
+    if (time === 0) {
+      clearInterval(timer)
+      countTime.value = '重新获取'
+      // this.flag = false;
+    }
+  }, 1000)
+}
+
+function forget() {
+  emit('forget')
+}
 </script>
 
 <template>
@@ -125,7 +141,7 @@ function computedForm() {
         <div class="line" />
       </div>
     </div>
-    <div class="form-1">
+    <div v-if="tab === 0" class="form-1">
       <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="请输入企业编码">
@@ -148,7 +164,7 @@ function computedForm() {
             </template>
           </n-input>
         </n-form-item>
-        <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>
@@ -160,7 +176,54 @@ function computedForm() {
                 记住账号
               </n-checkbox>
             </div>
-            <div class="flex-initial order-last">
+            <div class="flex-initial order-last" @click="forget">
+              <a href="javascript:">忘记密码</a>
+            </div>
+          </div>
+        </n-form-item>
+      </n-form>
+    </div>
+    <div v-else class="form-1">
+      <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="请输入企业编码">
+            <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="请输入手机号">
+            <template #prefix>
+              <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="username">
+          <n-input v-model:value="formInline.username" maxlength="6" class="item-input" placeholder="请输入验证码" clearable>
+            <template #prefix>
+              <img class="img-phone" src="@/assets/images/login/auth.png" alt="" @click="close">
+            </template>
+            <template #suffix>
+              <div :class="{ 'code-count': countTime !== '获取验证码' }" class="code" @click="startCount">
+                {{ 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>
+        </n-form-item>
+        <n-form-item class="default-color">
+          <div class="w-full flex justify-between">
+            <div class="flex-initial">
+              <n-checkbox v-model:checked="autoLogin">
+                记住账号
+              </n-checkbox>
+            </div>
+            <div class="flex-initial order-last" @click="forget">
               <a href="javascript:">忘记密码</a>
             </div>
           </div>
@@ -249,6 +312,8 @@ function computedForm() {
       height: 44px;
       background: linear-gradient(234deg,#96aaff 0%, #1c43ff 100%);
       border-radius: 3px;
+      margin-top: 10px;
+      margin-bottom: 14px;
 
       &-disabled{
         opacity: 0.5;
@@ -257,12 +322,30 @@ function computedForm() {
     }
   }
 
+  .img-phone{
+    width: 20px;
+    height: 20px;
+  }
+
   .order-last{
     font-size: 14px;
     font-family: PingFang SC, PingFang SC-Regular;
     font-weight: Regular;
     color: #507afd;
   }
+
+  .code{
+    font-size: 15px;
+    font-family: PingFang SC, PingFang SC-Regular;
+    font-weight: Regular;
+    color: #507afd;
+    margin-left: 12px;
+
+    &-count{
+      font-size: 14px;
+      color: #999999;
+    }
+  }
 }
 ::v-deep(.n-form-item-feedback--error) {
   // color: #FF4E4F !important;
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index f0760b6..b6ffe9e 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { useMessage } from 'naive-ui'
 import captcha from './captcha.vue'
 import Login from './components/Login.vue'
+import Forget from './components/Forget.vue'
 import { PageEnum } from '@/enums/pageEnum'
 import { useUserStore } from '@/store/modules/user'
 import { ResultEnum } from '@/enums/httpEnum'
@@ -27,6 +28,9 @@ const userStore = useUserStore()
 const router = useRouter()
 const route = useRoute()
 const show = ref(true)
+const showForget = ref(true)
+const ifLogin = ref(true)
+
 const formInline: FormState = reactive({
   enterprisecode: '三方系统标识8',
   username: '13311111111',
@@ -99,6 +103,11 @@ function handleSubmit(e) {
 function showLogin() {
   show.value = true
 }
+
+function forget() {
+  show.value = false
+  showForget.value = true
+}
 </script>
 
 <template>
@@ -106,7 +115,7 @@ function showLogin() {
     <div class="content">
       <div class="header f-c-b">
         <img class="img-logo" src="@/assets/images/login/logo.png" alt="">
-        <div class="btn-login f-c-c">
+        <div class="btn-login f-c-c" @click="showLogin">
           登录
         </div>
       </div>
@@ -188,7 +197,8 @@ function showLogin() {
       <img class="item-footer" src="../../assets/images/login/footer.png" alt="">
     </div>
     <n-modal v-model:show="show" :mask-closable="false">
-      <Login @close="show = false" />
+      <Login v-if="ifLogin" @close="show = false" @forget="ifLogin = !ifLogin" />
+      <Forget v-else @close="show = false" @forget="ifLogin = !ifLogin" />
     </n-modal>
   </div>
 </template>