intelligent-etmf-system-applet/pages/login/login.vue

<template>
  <view class="login-container">
    <!-- 语言切换按钮 -->
    <view class="language-switcher" @click="switchLanguage">
      <text class="language-icon">🌐</text>
      <text class="language-text">{{ currentLanguageName }}</text>
    </view>
    
    <view class="login-box">
      <view class="logo-section">
        <text class="app-title">{{ $t('login.appTitle') }}</text>
        <text class="app-subtitle">{{ $t('login.welcome') }}</text>
      </view>
      
      <view class="form-section">
        <view class="form-item">
          <view class="input-wrapper">
            <text class="input-icon">📱</text>
            <input
              v-model="phone"
              type="text"
              maxlength="11"
              :placeholder="$t('login.phonePlaceholder')"
              class="input-field"
              @input="onPhoneInput"
            />
          </view>
        </view>
        
        <view class="form-item">
          <view class="input-wrapper">
            <text class="input-icon">🔒</text>
            <input
              v-model="password"
              :password="!showPassword"
              :placeholder="$t('login.passwordPlaceholder')"
              class="input-field"
            />
            <text 
              class="toggle-password" 
              @click="togglePassword"
            >
              {{ showPassword ? '👁' : '👁‍🗨' }}
            </text>
          </view>
        </view>
        
        <button 
          class="login-btn"
          @click="handleLogin"
        >
          {{ $t('login.loginButton') }}
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
import { useUserStore } from '@/store/index'
import { useLocaleStore } from '@/store/locale'
import { login } from '@/apis/auth'

const { t, locale } = useI18n()
const userStore = useUserStore()
const localeStore = useLocaleStore()

const phone = ref('')
const password = ref('')
const showPassword = ref(false)

// 当前语言名称
const currentLanguageName = computed(() => {
  return localeStore.getCurrentLocaleName()
})

// 设置页面标题
const setPageTitle = () => {
  uni.setNavigationBarTitle({
    title: t('login.title')
  })
}

// 页面显示时设置标题
onShow(() => {
  setPageTitle()
})

// 监听语言变化，更新标题
watch(locale, () => {
  setPageTitle()
})

// 切换语言
const switchLanguage = () => {
  localeStore.toggleLocale()
  uni.showToast({
    title: t('common.language.switchSuccess'),
    icon: 'success',
    duration: 1500
  })
}

// 验证手机号格式
const isValidPhone = computed(() => {
  return /^1[3-9]\d{9}$/.test(phone.value)
})

// 是否可以提交
const canSubmit = computed(() => {
  return isValidPhone.value && password.value.length >= 6
})

// 手机号输入处理
const onPhoneInput = (e) => {
  // 限制只能输入数字
  phone.value = e.detail.value.replace(/[^\d]/g, '')
}

// 切换密码显示
const togglePassword = () => {
  showPassword.value = !showPassword.value
}

// 登录处理
const handleLogin = async () => {
  // 验证手机号
  if (!isValidPhone.value) {
    uni.showToast({
      title: t('login.phoneError'),
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  // 验证密码
  if (password.value.length < 6) {
    uni.showToast({
      title: t('login.passwordError'),
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  try {
    uni.showLoading({
      title: t('login.loggingIn'),
      mask: true
    })
    
    const res = await login({
      phoneNumber: phone.value,
      password: password.value
    })
    
    // 保存 token
    userStore.setToken(res.data.token)
    
    uni.hideLoading()
    
    uni.showToast({
      title: t('login.loginSuccess'),
      icon: 'success',
      duration: 1500
    })
    
    // 延迟跳转到首页
    setTimeout(() => {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }, 1500)
    
  } catch (error) {
    uni.hideLoading()
    console.error('登录失败:', error)
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 40rpx;
  padding-top: 270rpx;
  position: relative;
}

.language-switcher {
  align-self: flex-end;
  margin-bottom: 32rpx;
  margin-right: 40rpx;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10rpx);
  border-radius: 40rpx;
  padding: 16rpx 28rpx;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  
  &:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.35);
  }
}

.login-box {
  width: 100%;
  max-width: 600rpx;
  background: #ffffff;
  border-radius: 32rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
}

.language-icon {
  font-size: 36rpx;
  margin-right: 8rpx;
}

.language-text {
  font-size: 28rpx;
  color: #ffffff;
  font-weight: 500;
}

.logo-section {
  text-align: center;
  margin-bottom: 80rpx;
}

.app-title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}

.app-subtitle {
  display: block;
  font-size: 28rpx;
  color: #999;
}

.form-section {
  width: 100%;
}

.form-item {
  margin-bottom: 32rpx;
}

.input-wrapper {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 16rpx;
  padding: 0 24rpx;
  height: 96rpx;
  transition: all 0.3s;
  border: 2rpx solid transparent;
  
  &:focus-within {
    background: #fff;
    border-color: #667eea;
    box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
  }
}

.input-icon {
  font-size: 40rpx;
  margin-right: 16rpx;
}

.input-field {
  flex: 1;
  font-size: 32rpx;
  color: #333;
  
  &::placeholder {
    color: #999;
  }
}

.toggle-password {
  font-size: 40rpx;
  cursor: pointer;
  padding: 8rpx;
}

.login-btn {
  width: 100%;
  height: 96rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  font-size: 32rpx;
  font-weight: bold;
  border-radius: 16rpx;
  border: none;
  margin-top: 48rpx;
  transition: all 0.3s;
  
  &:active {
    opacity: 0.8;
    transform: scale(0.98);
  }
}

.login-btn-disabled {
  background: #ccc;
  opacity: 0.6;
  
  &:active {
    transform: none;
  }
}
</style>