登录

src/views/login/components/Login.vue

@@ -0,0 +1,270 @@
+<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'])
+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 formInline: FormState = reactive({
+  enterprisecode: '三方系统标识8',
+  username: '13311111111',
+  password: '123456',
+  captcha: '',
+})
+const tab = ref(0)
+
+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() {
+  console.log(888)
+  emit('close')
+}
+
+function switchTab(type: number) {
+  tab.value = type
+}
+
+function computedForm() {
+  return !formInline.enterprisecode || !formInline.username || !formInline.password
+}
+</script>
+
+<template>
+  <div class="form-login">
+    <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="line" />
+      </div>
+      <div :class="{ 'tab-item-active': tab === 1 }" class="tab-item" @click="switchTab(1)">
+        短信登录
+        <div class="line" />
+      </div>
+    </div>
+    <div 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="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>
+          <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">
+              <a href="javascript:">忘记密码</a>
+            </div>
+          </div>
+        </n-form-item>
+      </n-form>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.form-login {
+  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%);
+  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 0;
+
+  .img-close{
+    position: absolute;
+    right: 0;
+    top: -44px;
+    width: 28px;
+    height: 28px;
+    cursor: pointer;
+  }
+
+  .tab{
+    display: flex;
+    .tab-item{
+      width: 72px;
+      height: 25px;
+      font-size: 18px;
+      font-family: PingFang SC, PingFang SC-Medium;
+      font-weight: 600;
+      text-align: left;
+      color: #666666;
+      line-height: 33px;
+      margin-right: 24px;
+
+      &-active{
+        width: 96px;
+        height: 33px;
+        font-size: 24px;
+        font-family: PingFang SC, PingFang SC-Medium;
+        font-weight: 600;
+        text-align: left;
+        color: #507afd;
+        line-height: 33px;
+
+        .line{
+          background: linear-gradient(234deg,#96aaff 0%, #1c43ff 100%);
+        }
+      }
+
+      .line{
+        width: 32px;
+        height: 4px;
+        border-radius: 2px;
+        margin: 0 auto;
+        margin-top: 9px;
+      }
+    }
+  }
+
+  .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;
+
+      &-disabled{
+        opacity: 0.5;
+        background: linear-gradient(234deg,#96aaff 0%, #1c43ff 100%);
+      }
+    }
+  }
+
+  .order-last{
+    font-size: 14px;
+    font-family: PingFang SC, PingFang SC-Regular;
+    font-weight: Regular;
+    color: #507afd;
+  }
+}
+::v-deep(.n-form-item-feedback--error) {
+  // color: #FF4E4F !important;
+}
+</style>

src/views/login/index.vue

@@ -3,6 +3,7 @@ import { reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useMessage } from 'naive-ui'
 import captcha from './captcha.vue'
+import Login from './components/Login.vue'
 import { PageEnum } from '@/enums/pageEnum'
 import { useUserStore } from '@/store/modules/user'
 import { ResultEnum } from '@/enums/httpEnum'
@@ -25,7 +26,7 @@ const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME
 const userStore = useUserStore()
 const router = useRouter()
 const route = useRoute()
-
+const show = ref(true)
 const formInline: FormState = reactive({
   enterprisecode: '三方系统标识8',
   username: '13311111111',
@@ -94,13 +95,17 @@ function handleSubmit(e) {
     }
   })
 }
+
+function showLogin() {
+  show.value = true
+}
 </script>
 
 <template>
   <div class="wrap-login">
     <div class="content">
       <div class="header f-c-b">
-        <img class="img-logo" src="../../assets/images/login/logo.png" alt="">
+        <img class="img-logo" src="@/assets/images/login/logo.png" alt="">
         <div class="btn-login f-c-c">
           登录
         </div>
@@ -130,7 +135,7 @@ function handleSubmit(e) {
         企业级 SaaS 智能审批解决方案
       </div>
       <img class="img-icon-2" src="../../assets/images/login/img-icon-2.png" alt="">
-      <div class="btn-login-2 f-c-c">
+      <div class="btn-login-2 f-c-c" @click="showLogin">
         立即登录 ->
       </div>
       <div class="item-wrap f-c">
@@ -182,6 +187,9 @@ function handleSubmit(e) {
       </div>
       <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" />
+    </n-modal>
   </div>
 </template>