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

<template>
  <view class="container">
    <view class="header">
      <!-- 语言切换按钮 -->
      <view class="language-switcher" @click="switchLanguage">
        <text class="language-icon">🌐</text>
        <text class="language-text">{{ currentLanguageName }}</text>
      </view>
      
      <view class="avatar">
        <image class="avatar-img" src="/static/default-avatar.png" mode="aspectFill"></image>
      </view>
      <text class="username">{{ userStore.nickname }}</text>
    </view>
    
    <view class="content">
      <view class="menu-list">
        <view class="menu-item" @click="handleMenuClick('profile')">
          <text class="menu-icon">👤</text>
          <text class="menu-text">{{ $t('mine.profile') }}</text>
          <text class="menu-arrow">›</text>
        </view>
        
        <view class="menu-item" @click="handleMenuClick('settings')">
          <text class="menu-icon">⚙️</text>
          <text class="menu-text">{{ $t('mine.settings') }}</text>
          <text class="menu-arrow">›</text>
        </view>
        
        <view class="menu-item" @click="handleMenuClick('about')">
          <text class="menu-icon">ℹ️</text>
          <text class="menu-text">{{ $t('mine.about') }}</text>
          <text class="menu-arrow">›</text>
        </view>
      </view>
      
      <view class="logout-section">
        <button class="logout-btn" @click="handleLogout">
          {{ $t('mine.logout') }}
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { 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'

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

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

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

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

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

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

// 菜单点击
const handleMenuClick = (type) => {
  uni.showToast({
    title: `${t('mine.' + type)}`,
    icon: 'none'
  })
}

// 退出登录
const handleLogout = () => {
  uni.showModal({
    title: t('mine.confirmLogout'),
    content: t('mine.logoutMessage'),
    success: (res) => {
      if (res.confirm) {
        // 清除用户信息
        userStore.logout()
        
        uni.showToast({
          title: t('mine.logoutSuccess'),
          icon: 'success',
          duration: 1500
        })
        
        // 跳转到登录页
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/login/login'
          })
        }, 1500)
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60rpx 40rpx 80rpx;
  text-align: center;
  position: relative;
  
  .language-switcher {
    position: absolute;
    top: 60rpx;
    right: 32rpx;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10rpx);
    border-radius: 40rpx;
    padding: 16rpx 28rpx;
    transition: all 0.3s;
    z-index: 10;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    
    &:active {
      transform: scale(0.95);
      background: rgba(255, 255, 255, 0.35);
    }
    
    .language-icon {
      font-size: 36rpx;
      margin-right: 8rpx;
    }
    
    .language-text {
      font-size: 28rpx;
      color: #ffffff;
      font-weight: 500;
    }
  }
  
  .avatar {
    width: 140rpx;
    height: 140rpx;
    margin: 0 auto 20rpx;
    border-radius: 50%;
    background-color: #ffffff;
    overflow: hidden;
    
    .avatar-img {
      width: 100%;
      height: 100%;
    }
  }
  
  .username {
    display: block;
    font-size: 32rpx;
    font-weight: bold;
    color: #ffffff;
  }
}

.content {
  margin-top: -40rpx;
  padding: 0 40rpx;
  
  .menu-list {
    background-color: #ffffff;
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    
    .menu-item {
      display: flex;
      align-items: center;
      padding: 30rpx 40rpx;
      border-bottom: 1rpx solid #f0f0f0;
      transition: background-color 0.3s;
      
      &:last-child {
        border-bottom: none;
      }
      
      &:active {
        background-color: #f5f5f5;
      }
      
      .menu-icon {
        font-size: 40rpx;
        margin-right: 24rpx;
      }
      
      .menu-text {
        flex: 1;
        font-size: 28rpx;
        color: #333333;
      }
      
      .menu-arrow {
        font-size: 48rpx;
        color: #cccccc;
        font-weight: 300;
      }
    }
  }
  
  .logout-section {
    margin-top: 40rpx;
    padding: 0 40rpx;
    
    .logout-btn {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
      color: #ffffff;
      font-size: 32rpx;
      font-weight: bold;
      border-radius: 44rpx;
      border: none;
      box-shadow: 0 4rpx 20rpx rgba(238, 90, 111, 0.3);
      transition: all 0.3s;
      
      &:active {
        opacity: 0.8;
        transform: scale(0.98);
      }
    }
  }
}
</style>