huimv-baqing/ruoyi-ui-app/pages/login/index.vue

<template>
  <view :key="layoutKey" :class="pageRootClass" class="login-page">
    <!-- 顶部品牌区 -->
    <view class="login-hero">
      <view class="login-hero__orb login-hero__orb--1" />
      <view class="login-hero__orb login-hero__orb--2" />
      <view class="login-hero__orb login-hero__orb--3" />
      <view class="login-hero__brand">
        <!-- <view class="login-hero__logo">
          <up-icon name="home-fill" color="#ffffff" :size="44" />
        </view> -->
        <text class="login-hero__app text-body">{{ $t('app.name') }}</text>
        <text class="login-hero__welcome text-body">{{ $t('loginPage.welcome') }}</text>
      </view>
    </view>

    <!-- 表单卡片 -->
    <view class="login-body">
      <view class="login-card">
        <text class="login-card__title text-body">{{ $t('loginPage.title') }}</text>
        <text class="login-card__sub text-body">{{ $t('loginPage.subtitle') }}</text>

        <view class="login-field">
          <view class="login-field__box">
            <view class="login-field__icon">
              <up-icon name="account" color="#6b7f72" :size="22" />
            </view>
            <input
              v-model="form.username"
              class="login-field__input text-body"
              type="text"
              :placeholder="$t('loginPage.usernamePlaceholder')"
              placeholder-class="login-field__placeholder"
              confirm-type="next"
            />
          </view>
        </view>

        <view class="login-field">
          <view class="login-field__box">
            <view class="login-field__icon">
              <up-icon name="lock" color="#6b7f72" :size="22" />
            </view>
            <input
              v-model="form.password"
              class="login-field__input text-body"
              type="password"
              :placeholder="$t('loginPage.passwordPlaceholder')"
              placeholder-class="login-field__placeholder"
              confirm-type="done"
              @confirm="handleLogin"
            />
          </view>
        </view>

        <view v-if="captchaEnabled" class="login-field login-captcha">
          <view class="login-field__box login-captcha__input-wrap">
            <view class="login-field__icon">
              <up-icon name="order" color="#6b7f72" :size="22" />
            </view>
            <input
              v-model="form.code"
              class="login-field__input text-body"
              type="text"
              :placeholder="$t('loginPage.codePlaceholder')"
              placeholder-class="login-field__placeholder"
            />
          </view>
          <image
            v-if="codeUrl"
            class="login-captcha__img"
            :src="codeUrl"
            mode="aspectFit"
            @click="loadCaptcha"
          />
        </view>

        <view class="login-remember" @click="form.rememberMe = !form.rememberMe">
          <view :class="['login-remember__check', { 'login-remember__check--on': form.rememberMe }]">
            <up-icon v-if="form.rememberMe" name="checkmark" color="#ffffff" :size="14" />
          </view>
          <text class="login-remember__txt text-body">{{ $t('loginPage.rememberMe') }}</text>
        </view>

        <view
          :class="['login-btn', { 'login-btn--loading': loading }]"
          role="button"
          @click="handleLogin"
        >
          <text class="login-btn__txt text-body">
            {{ loading ? $t('loginPage.submitting') : $t('loginPage.submit') }}
          </text>
        </view>
      </view>

      <text class="login-footer text-body">{{ $t('loginPage.footerHint') }}</text>
    </view>
  </view>
</template>

<script>
import UIcon from 'uview-plus/components/u-icon/u-icon.vue'
import { getCodeImg } from '@/api/login'
import { getToken } from '@/utils/auth'
import { useUserStore } from '@/store/user'
import { REMEMBER_USERNAME_KEY } from '@/config'

const HOME_URL = '/pages/home/index'

export default {
  components: {
    'up-icon': UIcon
  },
  data() {
    return {
      layoutKey: 0,
      loading: false,
      captchaEnabled: false,
      codeUrl: '',
      form: {
        username: '',
        password: '',
        code: '',
        uuid: '',
        rememberMe: false
      }
    }
  },
  computed: {
    lang() {
      return this.$i18n.locale
    },
    pageRootClass() {
      return this.lang === 'bo' ? 'lang-bo' : 'lang-zh'
    }
  },
  onLoad() {
    if (getToken()) {
      this.goHome()
      return
    }
    this.loadRememberedUsername()
    this.loadCaptcha()
  },
  methods: {
    loadCaptcha() {
      getCodeImg()
        .then((res) => {
          this.captchaEnabled =
            res.captchaEnabled === undefined ? true : !!res.captchaEnabled
          if (this.captchaEnabled && res.img) {
            this.codeUrl = 'data:image/gif;base64,' + res.img
            this.form.uuid = res.uuid || ''
          }
        })
        .catch(() => {
          this.captchaEnabled = false
        })
    },
    loadRememberedUsername() {
      const saved = uni.getStorageSync(REMEMBER_USERNAME_KEY)
      if (saved) {
        this.form.username = saved
        this.form.rememberMe = true
      }
    },
    goHome() {
      uni.switchTab({ url: HOME_URL })
    },
    validateForm() {
      if (!(this.form.username || '').trim()) {
        uni.showToast({ title: this.$t('loginPage.errUsername'), icon: 'none' })
        return false
      }
      if (!this.form.password) {
        uni.showToast({ title: this.$t('loginPage.errPassword'), icon: 'none' })
        return false
      }
      if (this.captchaEnabled && !(this.form.code || '').trim()) {
        uni.showToast({ title: this.$t('loginPage.errCode'), icon: 'none' })
        return false
      }
      return true
    },
    handleLogin() {
      if (!this.validateForm() || this.loading) {
        return
      }
      if (this.form.rememberMe) {
        uni.setStorageSync(REMEMBER_USERNAME_KEY, this.form.username.trim())
      } else {
        uni.removeStorageSync(REMEMBER_USERNAME_KEY)
      }
      this.loading = true
      const userStore = useUserStore()
      userStore.fedLogOut()
      const payload = {
        username: this.form.username.trim(),
        password: this.form.password,
        code: this.captchaEnabled ? (this.form.code || '').trim() : '',
        uuid: this.captchaEnabled ? this.form.uuid : ''
      }
      userStore
        .login(payload)
        .then(() => userStore.fetchUserInfo())
        .then(() => {
          this.goHome()
        })
        .catch(() => {
          if (this.captchaEnabled) {
            this.loadCaptcha()
          }
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/morandi.scss';

.login-page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
  background: $morandi-bg-page;
}

/* ---------- 顶部渐变品牌区 ---------- */
.login-hero {
  position: relative;
  flex-shrink: 0;
  min-height: 420rpx;
  padding: 80rpx 48rpx 120rpx;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(145deg, #3d9b6e 0%, #22c55e 42%, #86efac 100%);
}

.login-hero__orb {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.login-hero__orb--1 {
  width: 320rpx;
  height: 320rpx;
  top: -80rpx;
  right: -60rpx;
}

.login-hero__orb--2 {
  width: 200rpx;
  height: 200rpx;
  bottom: 40rpx;
  left: -40rpx;
}

.login-hero__orb--3 {
  width: 120rpx;
  height: 120rpx;
  top: 120rpx;
  left: 60%;
  background: rgba(255, 255, 255, 0.08);
}

.login-hero__brand {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16rpx;
  min-width: 0;
}

.login-hero__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24rpx;
  border-radius: 28rpx;
  background: rgba(255, 255, 255, 0.22);
  border: 1rpx solid rgba(255, 255, 255, 0.35);
  box-sizing: border-box;
}

.login-hero__app {
  font-size: 44rpx;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.login-hero__welcome {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ---------- 表单区（卡片上浮） ---------- */
.login-body {
  flex: 1;
  min-width: 0;
  margin-top: 24px;
  padding: 0 40rpx 48rpx;
  box-sizing: border-box;
}

.login-card {
  display: flex;
  flex-direction: column;
  gap: 28rpx;
  min-width: 0;
  padding: 48rpx 40rpx 44rpx;
  border-radius: 32rpx;
  background: $morandi-bg-card;
  border: 1rpx solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 16rpx 48rpx rgba(74, 69, 66, 0.08);
  box-sizing: border-box;
}

.login-card__title {
  font-size: 36rpx;
  font-weight: 600;
  color: $morandi-text;
  line-height: 1.35;
}

.login-card__sub {
  font-size: 26rpx;
  color: $morandi-text-muted;
  line-height: 1.55;
  margin-top: -12rpx;
  margin-bottom: 8rpx;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.login-field {
  min-width: 0;
}

.login-field__box {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16rpx;
  min-width: 0;
  padding: 8rpx 24rpx 8rpx 20rpx;
  border-radius: 20rpx;
  background: $morandi-composer;
  border: 1rpx solid $morandi-border-soft;
  box-sizing: border-box;
}

.login-field__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-field__input {
  flex: 1;
  min-width: 0;
  min-height: 72rpx;
  font-size: 30rpx;
  color: $morandi-text;
  line-height: 1.5;
}

.login-field__placeholder {
  color: $morandi-text-soft;
  font-size: 28rpx;
}

.login-captcha {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16rpx;
  min-width: 0;
}

.login-captcha__input-wrap {
  flex: 1;
  min-width: 0;
}

.login-captcha__img {
  flex-shrink: 0;
  width: 200rpx;
  height: 72rpx;
  border-radius: 12rpx;
  border: 1rpx solid $morandi-border-soft;
  background: $morandi-bg-card-inner;
}

.login-remember {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16rpx;
  min-width: 0;
  padding: 4rpx 0;
}

.login-remember__check {
  flex-shrink: 0;
  width: 36rpx;
  height: 36rpx;
  border-radius: 10rpx;
  border: 2rpx solid $morandi-border-strong;
  background: $morandi-bg-card-inner;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.login-remember__check--on {
  background: #22c55e;
  border-color: #22c55e;
}

.login-remember__txt {
  font-size: 28rpx;
  color: $morandi-text-secondary;
  line-height: 1.45;
}

.login-btn {
  margin-top: 12rpx;
  min-width: 0;
  padding: 28rpx 32rpx;
  border-radius: 48rpx;
  background: linear-gradient(90deg, #16a34a 0%, #22c55e 50%, #4ade80 100%);
  box-shadow: 0 12rpx 32rpx rgba(34, 197, 94, 0.35);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-btn--loading {
  opacity: 0.75;
}

.login-btn__txt {
  font-size: 32rpx;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 4rpx;
}

.login-footer {
  display: block;
  margin-top: 40rpx;
  text-align: center;
  font-size: 24rpx;
  color: $morandi-text-soft;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
}
</style>