base-callcenter-web/src/views/login/login.vue

<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen flex">
    <!-- 左侧品牌区 -->
    <div class="w-2/5 relative overflow-hidden">
      <img class="absolute w-full h-full object-cover"
        :src="loginImage" alt="背景图" />  
      <div class="relative z-10 flex flex-col h-full p-12 text-white">
        <div class="mb-12">
          <h1 class="text-3xl font-bold mb-2">12356心理援助热线</h1>
          <p class="text-lg opacity-80">全方位的客户服务解决方案</p>
        </div>
        <div class="mt-auto">
          <p class="text-sm opacity-70">打造智能化、数字化的客户服务体验</p>
        </div>
      </div>
    </div>

    <!-- 右侧登录区 -->
    <div class="w-3/5 bg-white flex items-center justify-center p-12">
      <div class="w-96">
        <h2 class="text-3xl font-bold mb-8 text-gray-800">欢迎登录</h2>
        <div class="space-y-6">
          <!-- 用户名输入框 -->
          <div class="relative">
            <el-input v-model="username" placeholder="请输入用户名" class="h-12 text-base" :prefix-icon="User" />
          </div>

          <!-- 密码输入框 -->
          <div class="relative">
            <el-input v-model="password" :type="showPassword ? 'text' : 'password'" placeholder="请输入密码"
              class="h-12 text-base" :prefix-icon="Lock">
              <template #suffix>
                <el-icon class="cursor-pointer" @click="showPassword = !showPassword">
                  <component :is="showPassword ? View : Hide" />
                </el-icon>
              </template>
            </el-input>
          </div>

          <!-- 验证码 -->
          <div class="flex gap-4">
            <el-input v-model="captcha" placeholder="请输入验证码" class="h-12 text-base" :prefix-icon="Key" />
            <div class="w-32 h-12 bg-gray-100 flex items-center justify-center cursor-pointer" @click="getCode">
              <img class="w-32 h-12" :src="codeUrl" alt="验证码" />
            </div>
          </div>

          <!-- 记住密码 -->
          <div class="flex items-center justify-between">
            <el-checkbox v-model="rememberMe">记住密码</el-checkbox>
            <!-- <a href="#" class="text-blue-600 hover:text-blue-800 text-sm">忘记密码？</a> -->
          </div>

          <!-- 登录按钮 -->
          <el-button type="primary" class="w-full h-12 text-base !rounded-button" @click="handleLogin" :loading="loading">
            登录
          </el-button>
        </div>

        <!-- 底部信息 -->
        <div class="mt-12 text-center text-gray-500 text-sm">
          <p>12356心理援助热线 v2.0.1</p>
          <p class="mt-2">© 2024 All Rights Reserved</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { getCodeImg } from '@/api/login'
import { User, Lock, View, Hide, Key } from '@element-plus/icons-vue';
import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt'
import useUserStore from '@/store/modules/user'
import loginImage from '@/assets/images/login.jpg'; // 默认头像 @/assets/images/login.jng

const userStore = useUserStore()
const router = useRouter()
const { proxy } = getCurrentInstance()
const redirect = ref(undefined)

const username = ref('');
const password = ref('');
const captcha = ref('');
const showPassword = ref(false);
const rememberMe = ref(false);
const captchaText = ref('ABCD1234');

const refreshCaptcha = () => {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  let result = '';
  for (let i = 0; i < 8; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  captchaText.value = result;
};

const codeUrl = ref('')
const loading = ref(false)
// 验证码开关
const captchaEnabled = ref(true)
const uuid = ref('');
const getCode = () => {
  getCodeImg().then((res) => {
    captchaEnabled.value =
      res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled
    if (captchaEnabled.value) {
      codeUrl.value = 'data:image/gif;base64,' + res.data.img
      uuid.value = res.data.uuid
    }
  })
}

const handleLogin = () => {
  if (!username.value) {
    ElMessage.warning('请输入用户名');
    return;
  }
  if (!password.value) {
    ElMessage.warning('请输入密码');
    return;
  }
  if (!captcha.value) {
    ElMessage.warning('请输入验证码');
    return;
  }
  loading.value = true

  if (rememberMe.value) {
    Cookies.set('username', username.value, { expires: 30 })
    Cookies.set('password', encrypt(password.value), {
      expires: 30
    })
    Cookies.set('rememberMe', rememberMe.value, { expires: 30 })
  } else {
    // 否则移除
    Cookies.remove('username')
    Cookies.remove('password')
    Cookies.remove('rememberMe')
  }
  loading.value = true
  // 调用action的登录方法
  userStore
    .login({
      username: username.value,
      password: password.value,
      rememberMe: rememberMe.value,
      code: captcha.value,
      uuid: uuid.value
    })
    .then(() => {
      router.push({ path: redirect.value || '/' })
    })
    .catch(() => {
      loading.value = false
      // 重新获取验证码
      if (captchaEnabled.value) {
        getCode()
      }
    })

};

getCode();
</script>

<style scoped>
.el-input :deep(.el-input__wrapper) {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: none !important;
}

.el-input :deep(.el-input__wrapper.is-focus) {
  border-color: #409eff;
}

.el-input :deep(.el-input__inner) {
  height: 100%;
}

.el-input :deep(.el-input__prefix) {
  font-size: 1.25rem;
  color: #64748b;
}
</style>