integral-shop/single_uniapp22miao/pages/sub-pages/user-info/index.vue

<template>
  <view class="user-info-page">
    <!-- 头像 -->
    <view class="info-item" @click="chooseAvatar">
      <view class="label">头像</view>
      <view class="value">
        <image :src="userInfo.avatar || '/static/images/default-avatar.png'" class="avatar"></image>
        <text class="arrow">›</text>
      </view>
    </view>
    
    <!-- 昵称 -->
    <view class="info-item" @click="showNicknameDialog">
      <view class="label">昵称</view>
      <view class="value">
        <text class="text">{{ userInfo.nickname || '未设置' }}</text>
        <text class="arrow">›</text>
      </view>
    </view>
    
    <!-- 手机号 -->
    <view class="info-item">
      <view class="label">手机号</view>
      <view class="value">
        <text class="text">{{ userInfo.mobile }}</text>
      </view>
    </view>
    
    <!-- 用户ID -->
    <view class="info-item">
      <view class="label">用户ID</view>
      <view class="value">
        <text class="text">{{ userInfo.id }}</text>
      </view>
    </view>
    
    <!-- 注册时间 -->
    <view class="info-item">
      <view class="label">注册时间</view>
      <view class="value">
        <text class="text">{{ userInfo.created_at }}</text>
      </view>
    </view>
    
    <!-- 昵称修改弹窗 -->
    <view class="modal" v-if="showModal" @click="hideModal">
      <view class="modal-content" @click.stop>
        <view class="modal-title">修改昵称</view>
        <input 
          v-model="newNickname"
          placeholder="请输入新昵称"
          class="modal-input"
          maxlength="20"
        />
        <view class="modal-footer">
          <button class="cancel-btn" @click="hideModal">取消</button>
          <button class="confirm-btn" @click="updateNickname">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
      showModal: false,
      newNickname: ''
    }
  },
  
  onLoad() {
    this.loadUserInfo();
  },
  
  methods: {
    // 加载用户信息
    async loadUserInfo() {
      try {
        const res = await this.$http.post('/api/user/info');
        if (res.code === 0) {
          this.userInfo = res.data;
          uni.setStorageSync('userInfo', res.data);
        }
      } catch (error) {
        console.error('加载用户信息失败:', error);
      }
    },
    
    // 选择头像
    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.uploadAvatar(res.tempFilePaths[0]);
        }
      });
    },
    
    // 上传头像
    async uploadAvatar(filePath) {
      uni.showLoading({ title: '上传中...' });
      
      try {
        const token = uni.getStorageSync('token');
        
        uni.uploadFile({
          url: this.$config.baseUrl + '/api/user/avatar',
          filePath: filePath,
          name: 'file',
          header: {
            'Authori-zation': 'Bearer ' + token
          },
          success: (uploadRes) => {
            const data = JSON.parse(uploadRes.data);
            if (data.code === 0) {
              this.userInfo.avatar = data.data.avatar;
              uni.showToast({ title: '上传成功', icon: 'success' });
            }
          }
        });
      } catch (error) {
        uni.showToast({ title: '上传失败', icon: 'none' });
      } finally {
        uni.hideLoading();
      }
    },
    
    // 显示昵称修改弹窗
    showNicknameDialog() {
      this.newNickname = this.userInfo.nickname;
      this.showModal = true;
    },
    
    // 隐藏弹窗
    hideModal() {
      this.showModal = false;
    },
    
    // 更新昵称
    async updateNickname() {
      if (!this.newNickname || !this.newNickname.trim()) {
        uni.showToast({
          title: '请输入昵称',
          icon: 'none'
        });
        return;
      }
      
      try {
        const res = await this.$http.post('/api/user/nickname', {
          nickname: this.newNickname
        });
        
        if (res.code === 0) {
          this.userInfo.nickname = this.newNickname;
          uni.setStorageSync('userInfo', this.userInfo);
          uni.showToast({ title: '修改成功', icon: 'success' });
          this.hideModal();
        }
      } catch (error) {
        uni.showToast({
          title: error.msg || '修改失败',
          icon: 'none'
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.user-info-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx 0;
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 30rpx;
  margin-bottom: 2rpx;
  background-color: #fff;
  
  .label {
    font-size: 28rpx;
    color: #333;
  }
  
  .value {
    display: flex;
    align-items: center;
    
    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 10rpx;
    }
    
    .text {
      font-size: 28rpx;
      color: #666;
      margin-right: 10rpx;
    }
    
    .arrow {
      font-size: 40rpx;
      color: #ccc;
    }
  }
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  
  .modal-content {
    width: 600rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 40rpx 30rpx;
    
    .modal-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      text-align: center;
      margin-bottom: 30rpx;
    }
    
    .modal-input {
      height: 80rpx;
      padding: 0 20rpx;
      background-color: #f5f5f5;
      border-radius: 40rpx;
      font-size: 28rpx;
      margin-bottom: 30rpx;
    }
    
    .modal-footer {
      display: flex;
      gap: 20rpx;
      
      button {
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 40rpx;
        font-size: 28rpx;
        border: none;
      }
      
      .cancel-btn {
        background-color: #f5f5f5;
        color: #666;
      }
      
      .confirm-btn {
        background: linear-gradient(90deg, #FF6B6B, #FF4757);
        color: #fff;
      }
    }
  }
}
</style>