u

code/link56/link56-frontend-new/src/views/auth/login.vue

@@ -1,35 +1,125 @@
 <script lang="ts" setup>
-import { reactive } from 'vue'
-
+import type { FormInstance } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { loginApi } from '@/request/api/auth'
+import { useUserStore } from '@/store/user'
 
+const userStore = useUserStore()
 const router = useRouter()
 
+const carouselList = [
+  {
+    title: '值得信赖',
+    company: '恒星科技有限公司',
+    content: '我们已经连续三年使用该平台，数据处理稳定高效，团队协作体验非常顺畅。',
+  },
+  {
+    title: '安全 · 高效',
+    company: '博越信息技术',
+    content: '平台的权限管理做得很好，操作简单清晰，极大提升了内部管理效率。',
+  },
+  {
+    title: '稳定可靠',
+    company: '远航供应链集团',
+    content: '系统运行非常稳定，几乎没有出现过宕机情况，客服响应速度也很快。',
+  },
+  {
+    title: '智能化体验',
+    company: '蓝海数据服务中心',
+    content: '智能报表和自动化功能非常实用，减少了大量人工整理数据的时间。',
+  },
+  {
+    title: '灵活易用',
+    company: '中联创投有限公司',
+    content: 'UI设计简洁友好，新员工上手很快，各项业务流程也能灵活配置。',
+  },
+]
+
+const form = reactive<{
+  loginCredential: string
+  password: string
+  rememberMe: boolean
+}>({
+  loginCredential: '',
+  password: '',
+  rememberMe: true,
+})
+const formRef = ref<FormInstance>()
+const formRules = {
+  loginCredential: [
+    { required: true, message: '邮箱 / 账号不能为空', trigger: 'blur' },
+  ],
+  password: [
+    { required: true, message: '密码不能为空', trigger: 'blur' },
+  ],
+}
+
+const saveLoading = ref(false)
+
+async function submitForm(formEl: FormInstance | undefined) {
+  if (!formEl)
+    return
+  await formEl.validate((valid) => {
+    if (valid) {
+      saveLoading.value = true
+      loginApi({
+        loginCredential: form.loginCredential,
+        password: form.password,
+      }).then((res) => {
+        if (res.isSuccess) {
+          userStore.setUserInfo({
+            id: res.data.id,
+            account: res.data.account,
+            email: res.data.email,
+            name: res.data.name,
+            token: res.data.token,
+            avatar: res.data.avatar || '/no-avatar.png',
+          })
+
+          ElMessage.success('登录成功')
+          router.push('/')
+        }
+        else {
+          ElMessage.error(res.message || '登录失败，请稍后再试！')
+        }
+      }).catch((err) => {
+        console.log(err)
+      }).finally(() => {
+        saveLoading.value = false
+      })
+    }
+  })
+}
+
 function navigateTo(path: string) {
   router.push(path)
 }
-
-// do not use same name with ref
-const form = reactive({
-  name: '',
-  region: '',
-  date1: '',
-  date2: '',
-  delivery: false,
-  type: [],
-  resource: '',
-  desc: '',
-})
-
-function onSubmit() {
-  console.log('submit!')
-}
 </script>
 
 <template>
   <div class="auth-wrapper">
     <div class="auth-bg">
       <img src="/auth-bg.jpg">
+      <div class="bg-content">
+        <el-carousel
+          height="150px"
+          indicator-position="none"
+        >
+          <el-carousel-item v-for="(item, index) in carouselList" :key="index">
+            <div class="carousel-item">
+              <h2 class="title">
+                {{ item.title }}
+              </h2>
+
+              <span class="content">{{ item.content }}</span>
+
+              <span class="company"> - {{ item.company }}</span>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
     </div>
 
     <div class="login-form">
@@ -43,29 +133,38 @@ function onSubmit() {
           输入你的 邮箱/账号 和 密码 登录账户.
         </p>
         <el-form
+          ref="formRef"
           :model="form"
+          :rules="formRules"
           label-width="auto"
           label-position="top"
+          hide-required-asterisk
         >
-          <el-form-item label="邮箱 / 账号">
-            <el-input v-model="form.name" placeholder="请输入邮箱 / 账号" size="large" />
+          <el-form-item label="邮箱 / 账号" prop="loginCredential">
+            <el-input v-model="form.loginCredential" placeholder="请输入邮箱 / 账号" size="large" />
           </el-form-item>
-          <el-form-item>
+
+          <el-form-item prop="password">
             <template #label>
-              <div class="form-label-flex">
+              <span class="form-label-flex">
                 <span>密码</span>
                 <span class="forgot" @click="navigateTo('/auth/forget')">忘记密码?</span>
-              </div>
+              </span>
             </template>
-
-            <el-input v-model="form.name" placeholder="请输入密码" size="large" />
+            <el-input
+              v-model="form.password"
+              placeholder="请输入密码"
+              size="large"
+              @keyup.enter="submitForm(formRef)"
+            />
           </el-form-item>
 
           <el-form-item>
-            <el-checkbox label="记住我" class="remeber" />
+            <el-checkbox v-model="form.rememberMe" label="记住我" class="remeber" />
           </el-form-item>
+
           <el-form-item>
-            <el-button type="primary" class="form-btn">
+            <el-button type="primary" class="form-btn" :loading="saveLoading" @click="submitForm(formRef)">
               登录
             </el-button>
           </el-form-item>
@@ -89,12 +188,39 @@ function onSubmit() {
   .auth-bg {
     width: 70%;
     height: 100%;
+    position: relative;
 
     img {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
+
+    .bg-content {
+      position: absolute;
+      left: 50%;
+      bottom: 10%;
+      transform: translateX(-50%);
+      text-align: center;
+      color: #fff;
+      width: 600px;
+
+      .carousel-item {
+        display: flex;
+        flex-direction: column;
+        .title {
+          font-size: 28px;
+          line-height: 28px;
+          margin-bottom: 16px;
+        }
+        .content {
+          margin-bottom: 8px;
+        }
+        .company {
+          font-size: 14px;
+        }
+      }
+    }
   }
   .form-label-flex {
     display: flex;
@@ -112,7 +238,7 @@ function onSubmit() {
     flex: 1;
     display: flex;
     flex-direction: column;
-    padding: 48px 56px 24px 56px;
+    padding: 36px;
 
     .logo {
       height: 70px;