intelligent-etmf-system-applet/pages/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>
          <view class="avatar-wrapper">
            <image 
              class="avatar-image" 
              :src="basicInfo.avatar || '/static/default-avatar.svg'" 
              mode="aspectFill"
            />
            <view class="edit-btn" @click="handleEditAvatar">
              <text class="edit-btn-text">修改</text>
            </view>
          </view>
        </view>
        
        <!-- 昵称 -->
        <view class="info-item">
          <text class="item-label">{{ t('pagesContent.my.info.nickname') }}</text>
          <view class="value-wrapper">
            <text class="item-value">{{ basicInfo.nickname || '-' }}</text>
            <view class="edit-btn" @click="handleEditNickname">
              <text class="edit-btn-text">修改</text>
            </view>
          </view>
        </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="value-wrapper">
            <view class="gender-value">
              <text class="item-value" :class="genderClass">{{ genderDisplay }}</text>
            </view>
            <view class="edit-btn" @click="handleEditGender">
              <text class="edit-btn-text">修改</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 修改头像弹窗 -->
    <view v-if="showAvatarModal" class="modal-overlay" @click="closeAvatarModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">修改头像</text>
          <view class="modal-close" @click="closeAvatarModal">
            <text class="close-icon">×</text>
          </view>
        </view>
        <view class="modal-body">
          <view class="upload-area" @click="handleSelectImage">
            <image 
              v-if="tempAvatar" 
              class="preview-image" 
              :src="tempAvatar" 
              mode="aspectFill"
            />
            <view v-else class="upload-placeholder">
              <text class="placeholder-text">点击选择图片</text>
            </view>
          </view>
          <view class="modal-actions">
            <view class="action-btn cancel-btn" @click="closeAvatarModal">
              <text class="btn-text">取消</text>
            </view>
            <view class="action-btn confirm-btn" @click="confirmUpdateAvatar">
              <text class="btn-text">确认</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 修改昵称弹窗 -->
    <view v-if="showNicknameModal" class="modal-overlay" @click="closeNicknameModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">修改昵称</text>
          <view class="modal-close" @click="closeNicknameModal">
            <text class="close-icon">×</text>
          </view>
        </view>
        <view class="modal-body">
          <input 
            class="modal-input" 
            v-model="tempNickname" 
            placeholder="请输入昵称"
            maxlength="20"
          />
          <view class="modal-actions">
            <view class="action-btn cancel-btn" @click="closeNicknameModal">
              <text class="btn-text">取消</text>
            </view>
            <view class="action-btn confirm-btn" @click="confirmUpdateNickname">
              <text class="btn-text">确认</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 修改性别弹窗 -->
    <view v-if="showGenderModal" class="modal-overlay" @click="closeGenderModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">修改性别</text>
          <view class="modal-close" @click="closeGenderModal">
            <text class="close-icon">×</text>
          </view>
        </view>
        <view class="modal-body">
          <picker 
            mode="selector" 
            :range="genderDictListWithLabel" 
            range-key="displayLabel"
            :value="selectedGenderIndex"
            @change="handleGenderChange"
          >
            <view class="picker-value">
              <text class="value-text">{{ selectedGenderLabel || '请选择性别' }}</text>
              <text class="arrow-icon">▼</text>
            </view>
          </picker>
          <view class="modal-actions">
            <view class="action-btn cancel-btn" @click="closeGenderModal">
              <text class="btn-text">取消</text>
            </view>
            <view class="action-btn confirm-btn" @click="confirmUpdateGender">
              <text class="btn-text">确认</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { getBasicInfo, updateAvatar, updateNickname, updateGender, uploadToOss } 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 showAvatarModal = ref(false)
const showNicknameModal = ref(false)
const showGenderModal = ref(false)

// 临时数据
const tempAvatar = ref('')
const tempAvatarOssId = ref('')
const tempNickname = ref('')
const tempGender = ref('')

// 性别显示（为字典项添加displayLabel属性）
const genderDictListWithLabel = computed(() => {
  return genderDictList.value.map(item => {
    try {
      const labelObj = JSON.parse(item.dictLabel)
      const localeKey = locale.value.replace('-', '_')
      return {
        ...item,
        displayLabel: labelObj[localeKey] || labelObj['zh_CN'] || item.dictLabel
      }
    } catch (error) {
      return {
        ...item,
        displayLabel: item.dictLabel
      }
    }
  })
})

// 选中的性别索引
const selectedGenderIndex = computed(() => {
  if (!tempGender.value) return 0
  return genderDictListWithLabel.value.findIndex(item => 
    String(item.dictValue) === String(tempGender.value)
  )
})

// 选中的性别标签
const selectedGenderLabel = computed(() => {
  if (!tempGender.value) return ''
  const item = genderDictListWithLabel.value.find(item => 
    String(item.dictValue) === String(tempGender.value)
  )
  return item?.displayLabel || ''
})

// 性别显示
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 windowInfo = uni.getWindowInfo()
  statusBarHeight.value = windowInfo.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 handleEditAvatar = () => {
  tempAvatar.value = basicInfo.value.avatar || ''
  tempAvatarOssId.value = ''
  showAvatarModal.value = true
}

// 关闭修改头像弹窗
const closeAvatarModal = () => {
  showAvatarModal.value = false
  tempAvatar.value = ''
  tempAvatarOssId.value = ''
}

// 选择图片
const handleSelectImage = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: async (res) => {
      tempAvatar.value = res.tempFilePaths[0]
    }
  })
}

// 确认修改头像
const confirmUpdateAvatar = async () => {
  if (!tempAvatar.value) {
    uni.showToast({
      title: '请选择图片',
      icon: 'none'
    })
    return
  }
  
  try {
    uni.showLoading({
      title: '上传中...',
      mask: true
    })
    
    // 先上传图片到OSS
    const uploadResponse = await uploadToOss(tempAvatar.value)
    
    if (uploadResponse && uploadResponse.code === 200 && uploadResponse.data) {
      // 使用返回的ossId更新头像
      const updateResponse = await updateAvatar({
        avatar: uploadResponse.data.ossId
      })
      
      uni.hideLoading()
      
      if (updateResponse && updateResponse.code === 200) {
        uni.showToast({
          title: '修改成功',
          icon: 'success'
        })
        
        closeAvatarModal()
        // 重新获取基本信息
        fetchBasicInfo()
      } else {
        uni.showToast({
          title: updateResponse.msg || '修改失败',
          icon: 'none'
        })
      }
    } else {
      uni.hideLoading()
      uni.showToast({
        title: uploadResponse.msg || '上传失败',
        icon: 'none'
      })
    }
  } catch (error) {
    uni.hideLoading()
    console.error('修改头像失败:', error)
    uni.showToast({
      title: '修改失败',
      icon: 'none'
    })
  }
}

// 打开修改昵称弹窗
const handleEditNickname = () => {
  tempNickname.value = basicInfo.value.nickname || ''
  showNicknameModal.value = true
}

// 关闭修改昵称弹窗
const closeNicknameModal = () => {
  showNicknameModal.value = false
  tempNickname.value = ''
}

// 确认修改昵称
const confirmUpdateNickname = async () => {
  if (!tempNickname.value || !tempNickname.value.trim()) {
    uni.showToast({
      title: '请输入昵称',
      icon: 'none'
    })
    return
  }
  
  try {
    uni.showLoading({
      title: '修改中...',
      mask: true
    })
    
    const response = await updateNickname({
      nickname: tempNickname.value.trim()
    })
    
    uni.hideLoading()
    
    if (response && response.code === 200) {
      uni.showToast({
        title: '修改成功',
        icon: 'success'
      })
      
      closeNicknameModal()
      // 重新获取基本信息
      fetchBasicInfo()
    } else {
      uni.showToast({
        title: response.msg || '修改失败',
        icon: 'none'
      })
    }
  } catch (error) {
    uni.hideLoading()
    console.error('修改昵称失败:', error)
    uni.showToast({
      title: '修改失败',
      icon: 'none'
    })
  }
}

// 打开修改性别弹窗
const handleEditGender = () => {
  tempGender.value = basicInfo.value.gender || ''
  showGenderModal.value = true
}

// 关闭修改性别弹窗
const closeGenderModal = () => {
  showGenderModal.value = false
  tempGender.value = ''
}

// 性别选择变化
const handleGenderChange = (e) => {
  const index = e.detail.value
  tempGender.value = genderDictListWithLabel.value[index].dictValue
}

// 确认修改性别
const confirmUpdateGender = async () => {
  if (!tempGender.value && tempGender.value !== 0) {
    uni.showToast({
      title: '请选择性别',
      icon: 'none'
    })
    return
  }
  
  try {
    uni.showLoading({
      title: '修改中...',
      mask: true
    })
    
    const response = await updateGender({
      gender: tempGender.value
    })
    
    uni.hideLoading()
    
    if (response && response.code === 200) {
      uni.showToast({
        title: '修改成功',
        icon: 'success'
      })
      
      closeGenderModal()
      // 重新获取基本信息
      fetchBasicInfo()
    } else {
      uni.showToast({
        title: response.msg || '修改失败',
        icon: 'none'
      })
    }
  } catch (error) {
    uni.hideLoading()
    console.error('修改性别失败:', error)
    uni.showToast({
      title: '修改失败',
      icon: 'none'
    })
  }
}

// 获取基本信息
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 = () => {
  uni.navigateBack({
    fail: () => {
      // 如果返回失败（比如没有上一页），则跳转到我的页面
      uni.reLaunch({
        url: '/pages/my/index'
      })
    }
  })
}
</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-wrapper {
            display: flex;
            align-items: center;
            gap: 24rpx;
            
            .avatar-image {
              width: 100rpx;
              height: 100rpx;
              border-radius: 50rpx;
              border: 4rpx solid #6ec7f5;
            }
          }
        }
        
        .value-wrapper {
          display: flex;
          align-items: center;
          gap: 16rpx;
        }
        
        .edit-btn {
          padding: 10rpx 24rpx;
          background: linear-gradient(135deg, #1ec9c9 0%, #17b3b3 100%);
          border-radius: 20rpx;
          
          &:active {
            opacity: 0.8;
          }
          
          .edit-btn-text {
            font-size: 24rpx;
            color: #ffffff;
            font-weight: 500;
            white-space: nowrap;
          }
        }
        
        .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;
          }
        }
      }
    }
  }
  
  // 弹窗样式
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4rpx);
    
    .modal-content {
      width: 620rpx;
      max-width: 90%;
      background: #ffffff;
      border-radius: 24rpx;
      overflow: hidden;
      box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
      animation: modalSlideIn 0.3s ease-out;
      
      @keyframes modalSlideIn {
        from {
          opacity: 0;
          transform: translateY(-40rpx) scale(0.95);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }
      
      .modal-header {
        padding: 40rpx 32rpx 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: linear-gradient(135deg, #f8fcff 0%, #ffffff 100%);
        
        .modal-title {
          font-size: 34rpx;
          font-weight: 600;
          color: #1a1a1a;
          letter-spacing: 1rpx;
        }
        
        .modal-close {
          width: 56rpx;
          height: 56rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          background: rgba(0, 0, 0, 0.04);
          transition: all 0.2s;
          
          &:active {
            background: rgba(0, 0, 0, 0.08);
            transform: scale(0.9);
          }
          
          .close-icon {
            font-size: 44rpx;
            color: #666666;
            line-height: 1;
            font-weight: 300;
          }
        }
      }
      
      .modal-body {
        padding: 32rpx;
        
        .upload-area {
          width: 100%;
          height: 420rpx;
          border: 3rpx dashed #d9d9d9;
          border-radius: 16rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          margin-bottom: 32rpx;
          background: #fafafa;
          transition: all 0.3s;
          position: relative;
          
          &:active {
            border-color: #1ec9c9;
            background: #f0fffe;
          }
          
          .preview-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          
          .upload-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 16rpx;
            
            &::before {
              content: '+';
              font-size: 80rpx;
              color: #1ec9c9;
              font-weight: 300;
              line-height: 1;
            }
            
            .placeholder-text {
              font-size: 28rpx;
              color: #999999;
            }
          }
        }
        
        .modal-input {
          width: 100%;
          padding: 28rpx 24rpx;
          border: 2rpx solid #e8e8e8;
          border-radius: 16rpx;
          font-size: 30rpx;
          color: #333333;
          margin-bottom: 32rpx;
          box-sizing: border-box;
          background: #fafafa;
          transition: all 0.3s;
          line-height: 1.5;
          min-height: 88rpx;
          
          &:focus {
            border-color: #1ec9c9;
            background: #ffffff;
            box-shadow: 0 0 0 4rpx rgba(30, 201, 201, 0.1);
          }
        }
        
        .picker-value {
          width: 100%;
          padding: 28rpx 24rpx;
          border: 2rpx solid #e8e8e8;
          border-radius: 16rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 32rpx;
          background: #fafafa;
          transition: all 0.2s;
          box-sizing: border-box;
          min-height: 88rpx;
          
          &:active {
            background: #f0f0f0;
          }
          
          .value-text {
            font-size: 30rpx;
            color: #333333;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          
          .arrow-icon {
            font-size: 24rpx;
            color: #999999;
            transition: transform 0.3s;
            margin-left: 16rpx;
            flex-shrink: 0;
          }
        }
        
        .modal-actions {
          display: flex;
          gap: 20rpx;
          margin-top: 8rpx;
          
          .action-btn {
            flex: 1;
            padding: 28rpx;
            border-radius: 16rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
            
            &:active {
              transform: scale(0.98);
            }
            
            .btn-text {
              font-size: 30rpx;
              font-weight: 500;
              letter-spacing: 1rpx;
            }
            
            &.cancel-btn {
              background: #f5f5f5;
              box-shadow: none;
              
              &:active {
                background: #e8e8e8;
              }
              
              .btn-text {
                color: #666666;
              }
            }
            
            &.confirm-btn {
              background: linear-gradient(135deg, #1ec9c9 0%, #17b3b3 100%);
              box-shadow: 0 4rpx 16rpx rgba(30, 201, 201, 0.3);
              
              &:active {
                box-shadow: 0 2rpx 8rpx rgba(30, 201, 201, 0.3);
              }
              
              .btn-text {
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }
}
</style>