intelligent-etmf-system-applet/pages-content/my/info/index.vue

<template>
  <view class="basic-info-page">
    <!-- 自定义头部 -->
    <view class="custom-header" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="header-content">
        <view class="back-btn" @click="handleBack">
          <text class="back-icon">‹</text>
        </view>
        <text class="header-title">{{ t('pagesContent.my.info.title') }}</text>
        <view class="placeholder"></view>
      </view>
    </view>
    
    <!-- 页面内容 -->
    <view class="page-body">
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-state">
        <text class="loading-text">{{ t('pagesContent.my.info.loading') }}</text>
      </view>
      
      <!-- 信息列表 -->
      <view v-else class="info-list">
        <!-- 头像 -->
        <view class="info-item avatar-item">
          <text class="item-label">{{ t('pagesContent.my.info.avatar') }}</text>
          <image 
            class="avatar-image" 
            :src="basicInfo.avatar || '/static/default-avatar.svg'" 
            mode="aspectFill"
          />
        </view>
        
        <!-- 昵称 -->
        <view class="info-item">
          <text class="item-label">{{ t('pagesContent.my.info.nickname') }}</text>
          <text class="item-value">{{ basicInfo.nickname || '-' }}</text>
        </view>
        
        <!-- 手机号 -->
        <view class="info-item">
          <text class="item-label">{{ t('pagesContent.my.info.phoneNumber') }}</text>
          <text class="item-value">{{ basicInfo.phoneNumber || '-' }}</text>
        </view>
        
        <!-- 性别 -->
        <view class="info-item">
          <text class="item-label">{{ t('pagesContent.my.info.gender') }}</text>
          <view class="gender-value">
            <text class="item-value" :class="genderClass">{{ genderDisplay }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { getBasicInfo } from '@/apis/auth'
import { getDictDataByType } from '@/apis/dict'

const { t, locale } = useI18n()

// 定义事件
const emit = defineEmits(['back'])

// 状态栏高度
const statusBarHeight = ref(0)

// 基本信息
const basicInfo = ref({
  nickname: '',
  phoneNumber: '',
  avatar: '',
  gender: ''
})

// 加载状态
const loading = ref(false)

// 性别字典数据
const genderDictList = ref([])

// 性别显示
const genderDisplay = computed(() => {
  if (basicInfo.value.gender === null || basicInfo.value.gender === undefined || basicInfo.value.gender === '') return '-'
  
  // 从字典数据中查找匹配的项，使用dictValue匹配gender
  const genderItem = genderDictList.value.find(item => 
    String(item.dictValue) === String(basicInfo.value.gender)
  )
  
  if (!genderItem) return '-'
  
  // 解析dictLabel的JSON字符串
  try {
    const labelObj = JSON.parse(genderItem.dictLabel)
    // 将locale格式从 zh-CN 转换为 zh_CN
    const localeKey = locale.value.replace('-', '_')
    // 根据当前语言返回对应的标签
    return labelObj[localeKey] || labelObj['zh_CN'] || genderItem.dictLabel
  } catch (error) {
    // 如果解析失败，直接返回dictLabel
    return genderItem.dictLabel
  }
})

// 性别样式类
const genderClass = computed(() => {
  if (basicInfo.value.gender === null || basicInfo.value.gender === undefined || basicInfo.value.gender === '') return ''
  
  const genderItem = genderDictList.value.find(item => 
    String(item.dictValue) === String(basicInfo.value.gender)
  )
  
  return genderItem?.listClass || ''
})

onMounted(() => {
  // 获取系统信息
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight || 0
  
  // 获取字典数据
  fetchGenderDict()
  
  // 获取基本信息
  fetchBasicInfo()
})

// 获取性别字典数据
const fetchGenderDict = async () => {
  try {
    const response = await getDictDataByType('sys_user_sex')
    
    if (response && response.data) {
      genderDictList.value = response.data
    }
  } catch (error) {
    console.error('获取性别字典失败:', error)
  }
}

// 获取基本信息
const fetchBasicInfo = async () => {
  try {
    loading.value = true
    
    const response = await getBasicInfo()
    
    if (response && response.data) {
      basicInfo.value = response.data
    }
  } catch (error) {
    console.error('获取基本信息失败:', error)
    
    uni.showToast({
      title: t('pagesContent.my.info.loadFailed'),
      icon: 'none',
      duration: 2000
    })
  } finally {
    loading.value = false
  }
}

// 返回
const handleBack = () => {
  emit('back')
}
</script>

<style lang="scss" scoped>
.basic-info-page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f8fcff 0%, #ffffff 100%);
  
  // 自定义头部
  .custom-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    border-bottom: 1rpx solid #e5e5e5;
    z-index: 100;
    
    .header-content {
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 32rpx;
      
      .back-btn {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .back-icon {
          font-size: 56rpx;
          color: #333333;
          font-weight: 300;
        }
      }
      
      .header-title {
        flex: 1;
        text-align: center;
        font-size: 32rpx;
        font-weight: 500;
        color: #000000;
      }
      
      .placeholder {
        width: 60rpx;
      }
    }
  }
  
  // 页面内容
  .page-body {
    flex: 1;
    margin-top: 88rpx;
    padding: 40rpx;
    
    // 加载状态
    .loading-state {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 120rpx 0;
      
      .loading-text {
        font-size: 28rpx;
        color: #999999;
      }
    }
    
    // 信息列表
    .info-list {
      margin-top: 100rpx;
      background-color: #ffffff;
      border-radius: 20rpx;
      overflow: hidden;
      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
      
      .info-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 36rpx 40rpx;
        border-bottom: 1rpx solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        &.avatar-item {
          .avatar-image {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50rpx;
            border: 4rpx solid #6ec7f5;
          }
        }
        
        .item-label {
          font-size: 30rpx;
          color: #666666;
          font-weight: 500;
        }
        
        .gender-value {
          display: flex;
          align-items: center;
        }
        
        .item-value {
          font-size: 30rpx;
          color: #333333;
          font-weight: 500;
          
          // 字典listClass样式
          &.default {
            color: #909399;
          }
          
          &.primary {
            color: #6ec7f5;
          }
          
          &.success {
            color: #67c23a;
          }
          
          &.info {
            color: #909399;
          }
          
          &.warning {
            color: #e6a23c;
          }
          
          &.danger {
            color: #f56c6c;
          }
        }
      }
    }
  }
}
</style>