wuye / webui

  <template>
    <div class="login-wrapper">
      <!-- 左侧品牌面板 -->
      <div class="login-brand">
        <div class="brand-overlay"></div>
        <div class="brand-content">
          <h1 class="brand-title">西荣物业</h1>
          <p class="brand-subtitle">智慧社区管理平台</p>
          <div class="brand-features">
            <div class="feature-item">
              <i class="el-icon-s-home"></i>
              <span>智能物业管理</span>
            </div>
            <div class="feature-item">
              <i class="el-icon-s-data"></i>
              <span>数据驱动决策</span>

            </div>

            <div class="feature-item">
              <i class="el-icon-s-custom"></i>
              <span>高效社区服务</span>
            </div>
          </div>
        </div>
        <div class="brand-footer">©2020-2026 <span v-html="companyName"></span></div>

      </div>

  
      <!-- 右侧登录面板 -->
      <div class="login-form-panel">
        <div class="form-card">
          <h2 class="form-title">欢迎登录</h2>
          <p class="form-desc">请输入您的账号信息</p>
  
          <el-form
            :model="loginForm"
            :rules="rules"
            ref="loginForm"
            class="login-form"
            @submit.native.prevent
          >
            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                :placeholder="$t('login.usernamePlaceholder')"
                prefix-icon="el-icon-user"
                size="medium"
              />
            </el-form-item>
  
            <el-form-item prop="passwd">
              <el-input
                v-model="loginForm.passwd"
                type="password"
                :placeholder="$t('login.passwordPlaceholder')"
                prefix-icon="el-icon-lock"
                size="medium"
                @keyup.enter.native="submitForm('loginForm')"
              />
            </el-form-item>
  
            <el-form-item prop="validateCode">
              <div class="captcha-row">
                <el-input
                  v-model="loginForm.validateCode"
                  :placeholder="$t('login.captchaPlaceholder')"
                  prefix-icon="el-icon-picture-outline"
                  size="medium"
                  class="captcha-input"
                  @keyup.enter.native="submitForm('loginForm')"
                />
                <img
                  :src="captchaUrl"
                  @click="refreshCaptcha"
                  class="captcha-img"
                  title="点击刷新验证码"
                  alt="验证码"
                />
              </div>
            </el-form-item>
  
            <el-form-item>
              <el-button
                type="primary"
                @click="submitForm('loginForm')"
                :loading="loading"
                class="login-btn"
                size="medium"
              >
                {{ loading ? '登录中...' : $t('login.login') }}
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
  
      <select-login-user ref="selectLoginUserRef" @select="handleSelect" />

    </div>
  </template>
  
  <script>
  import { login, getCaptcha, _loadStaffPrivileges } from '@/api/user/loginApi';
  import { _loadCommunityInfo } from '@/api/community/communityApi';

  import { listSystemInfo } from '@/api/system/systemInfoManageApi';

  import selectLoginUser from '@/components/user/selectLoginUser.vue';
  

  export default {
    name: 'Login',

    components: { selectLoginUser },

    data() {
      return {

        companyName: '',

        loginForm: {

          username: '',
          passwd: '',

          validateCode: ''
        },
        captchaUrl: '',
        loading: false,
        rules: {
          username: [
            { required: true, message: this.$t('login.usernamePlaceholder'), trigger: 'blur' }
          ],
          passwd: [
            { required: true, message: this.$t('login.passwordPlaceholder'), trigger: 'blur' }
          ],
          validateCode: [
            { required: true, message: this.$t('login.captchaPlaceholder'), trigger: 'blur' }
          ]
        }
      };
    },
    created() {

      localStorage.clear();

      this.getSystemInfo();

      setTimeout(() => {
        this.refreshCaptcha();
      }, 1000);

    },
    methods: {

      async getSystemInfo() {

        try {
          const { data } = await listSystemInfo({ page: 1, row: 1 });
          this.companyName = data[0].companyName;
        } catch (e) {
          console.error('获取系统信息失败', e);
        }

      },

      async submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {

          if (!valid) return false;
          this.loading = true;
          try {
            const { data } = await login(this.loginForm).catch((error) => {
              this.$message.error(error);

              this.refreshCaptcha();

              return { data: [] };
            });
            if (!data || data.length === 0) {

              this.loading = false;

              return;

            }

            if (data.length > 1) {
              this.$refs.selectLoginUserRef.openDialog(data);
              this.loading = false;
              return;
            }
            this.handleSelect(data[0]);
          } catch (error) {
            console.error('登录失败：', error);
            this.refreshCaptcha();
            this.loading = false;

          }
        });
      },
      async handleSelect(_userData) {
        localStorage.setItem('token', _userData.token);

        const _user = {

          userId: _userData.userId,
          name: _userData.name,
          tel: _userData.tel

        };

        localStorage.setItem('user', JSON.stringify(_user));
        await _loadStaffPrivileges();
        await _loadCommunityInfo();
        this.$router.push('/');
      },
      async refreshCaptcha() {
        try {
          const res = await getCaptcha();

          this.captchaUrl = res;
        } catch (error) {
          console.error('获取验证码失败：', error);
          this.$message.error(this.$t('login.getCaptchaFailed'));
        }
      }
    }
  };
  </script>
  
  <style scoped>

  .login-wrapper {

    display: flex;

    height: 100vh;

    overflow: hidden;
    font-family: 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  }
  
  /* ===== 左侧品牌面板 ===== */
  .login-brand {
    width: 42%;

    position: relative;

    background: linear-gradient(135deg, #0c2646 0%, #1a4a7a 40%, #1e6eb8 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    overflow: hidden;
  }
  

  .brand-overlay {

    position: absolute;

    inset: 0;
    background:
      radial-gradient(ellipse at 20% 50%, rgba(255, 255, 255, 0.06) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 80%, rgba(30, 159, 255, 0.15) 0%, transparent 50%);

  }
  

  /* 装饰圆环 */
  .login-brand::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.06);
    top: -200px;
    right: -200px;
  }
  
  .login-brand::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.04);
    bottom: -100px;
    left: -100px;
  }
  
  .brand-content {
    position: relative;
    z-index: 2;
    text-align: center;

    color: #fff;

    padding: 0 60px;
  }
  
  .brand-title {
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 8px;
    margin: 0 0 12px 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  }
  
  .brand-subtitle {
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 4px;
    opacity: 0.8;
    margin: 0 0 48px 0;
  }
  
  .brand-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
  }
  
  .feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    font-weight: 300;
    opacity: 0.75;
    letter-spacing: 1px;
    transition: opacity 0.3s;
  }
  
  .feature-item:hover {
    opacity: 1;
  }
  
  .feature-item i {
    font-size: 20px;
    width: 36px;
    height: 36px;
    line-height: 36px;

    text-align: center;

    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    backdrop-filter: blur(4px);

  }
  

  .brand-footer {
    position: absolute;
    bottom: 32px;
    z-index: 2;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    letter-spacing: 1px;

  }
  

  /* ===== 右侧登录面板 ===== */
  .login-form-panel {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f7fa;
    position: relative;
  }
  
  /* 面板装饰 */
  .login-form-panel::before {
    content: '';
    position: absolute;
    top: 60px;
    right: 80px;
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, rgba(30, 110, 184, 0.04) 0%, rgba(30, 110, 184, 0.01) 100%);
    border-radius: 24px;
    transform: rotate(12deg);
  }
  
  .login-form-panel::after {
    content: '';
    position: absolute;
    bottom: 80px;
    left: 60px;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(30, 110, 184, 0.03) 0%, rgba(30, 110, 184, 0.01) 100%);
    border-radius: 16px;
    transform: rotate(-8deg);
  }
  
  .form-card {
    position: relative;
    z-index: 1;
    width: 400px;
    padding: 48px 44px 40px;

    background: #fff;

    border-radius: 16px;
    box-shadow:
      0 4px 24px rgba(0, 0, 0, 0.04),
      0 16px 48px rgba(0, 0, 0, 0.04);
  }
  
  .form-title {
    font-size: 26px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 8px 0;
    letter-spacing: 1px;
  }
  
  .form-desc {
    font-size: 14px;
    color: #999;
    margin: 0 0 36px 0;
  }
  
  .login-form .el-form-item {
    margin-bottom: 22px;
  }
  
  .login-form >>> .el-input__inner {
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    height: 44px;
    line-height: 44px;
    background: #fafbfc;
    transition: all 0.3s;
    font-size: 14px;
  }
  
  .login-form >>> .el-input__inner:focus,
  .login-form >>> .el-input__inner:hover {
    border-color: #1e6eb8;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(30, 110, 184, 0.06);
  }
  
  .login-form >>> .el-input__prefix {
    color: #b0b8c4;
    line-height: 44px;

  }
  

  .login-form >>> .el-input--prefix .el-input__inner {
    padding-left: 38px;
  }
  
  .captcha-row {

    display: flex;

    gap: 12px;

    align-items: center;

  }
  

  .captcha-input {
    flex: 1;

  }
  
  .captcha-img {

    height: 44px;
    width: 120px;
    border-radius: 8px;

    cursor: pointer;

    border: 1px solid #e4e7ed;
    transition: all 0.3s;
    object-fit: cover;
  }
  
  .captcha-img:hover {
    border-color: #1e6eb8;
    box-shadow: 0 0 0 3px rgba(30, 110, 184, 0.08);

  }
  

  .login-btn {

    width: 100%;

    height: 46px;
    border-radius: 8px;
    font-size: 16px;
    letter-spacing: 4px;

    border: none;

    background: linear-gradient(135deg, #1e6eb8 0%, #155d9e 100%);
    transition: all 0.3s;
    margin-top: 4px;

  }
  

  .login-btn:hover {
    background: linear-gradient(135deg, #2580cc 0%, #1a6aaf 100%);
    box-shadow: 0 6px 20px rgba(30, 110, 184, 0.35);
    transform: translateY(-1px);

  }
  

  .login-btn:active {
    transform: translateY(0);

  }
  

  .login-btn.is-loading {
    background: linear-gradient(135deg, #1e6eb8 0%, #155d9e 100%);
  }
  
  /* ===== 响应式 ===== */
  @media (max-width: 768px) {
    .login-brand {
      display: none;
    }
  
    .form-card {
      width: 90%;
      max-width: 400px;
      padding: 36px 28px 30px;
    }
  
    .login-form-panel::before,
    .login-form-panel::after {
      display: none;
    }

  }

  </style>