src/pages/profile/profile.vue

<template>
  <view class="container">
    <!-- 用户信息头部 -->
    <view class="user-header">
      <view class="user-info">
        <image class="avatar" src="https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=friendly+human+avatar+minimalist&image_size=square" mode="aspectFill"></image>
        <view class="info-right">
          <text class="nickname">微信用户</text>
          <text class="phone">138****8888</text>
        </view>
      </view>
    </view>

    <!-- 数据统计栏 -->
    <view class="stats-bar">
      <view class="stats-item" v-for="(item, index) in stats" :key="index">
        <text class="stats-num">{{ item.num }}</text>
        <text class="stats-label">{{ item.label }}</text>
      </view>
    </view>

    <!-- 功能列表 -->
    <view class="menu-list">
      <view class="menu-item" v-for="(item, index) in menuItems" :key="index" @tap="handleMenuClick(item)">
        <view class="menu-left">
          <uni-icons :type="item.icon" size="20" :color="item.color"></uni-icons>
          <text class="menu-text">{{ item.text }}</text>
        </view>
        <uni-icons type="right" size="16" color="#ccc"></uni-icons>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <button class="logout-btn" @tap="handleLogout">退出登录</button>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 统计数据
const stats = ref([
  { num: '12', label: '收藏' },
  { num: '8', label: '足迹' },
  { num: '3', label: '优惠券' },
  { num: '100', label: '积分' }
])

// 菜单项
const menuItems = ref([
  { text: '我的订单', icon: 'list', color: '#1890ff' },
  { text: '收货地址', icon: 'location', color: '#52c41a' },
  { text: '我的收藏', icon: 'heart', color: '#f5222d' },
  { text: '意见反馈', icon: 'email', color: '#faad14' },
  { text: '关于我们', icon: 'info', color: '#722ed1' }
])

// 菜单点击
const handleMenuClick = (item: any) => {
  uni.showToast({
    title: `点击了${item.text}`,
    icon: 'none'
  })
}

// 退出登录
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        uni.reLaunch({ url: '/pages/login/login' })
      }
    }
  })
}
</script>

<style lang="scss">
.container {
  background-color: #f8f8f8;
  min-height: 100vh;
  /* #ifdef H5 */
  padding-top: 50px;
  min-height: calc(100vh - 100px);
  /* #endif */
}

.user-header {
  background: linear-gradient(to bottom, #1890ff, #40a9ff);
  padding: 60rpx 40rpx 100rpx;
  
  .user-info {
    display: flex;
    align-items: center;
    
    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      border: 4rpx solid rgba(255,255,255,0.8);
      margin-right: 30rpx;
    }
    
    .info-right {
      display: flex;
      flex-direction: column;
      
      .nickname {
        font-size: 36rpx;
        font-weight: bold;
        color: #fff;
        margin-bottom: 10rpx;
      }
      
      .phone {
        font-size: 24rpx;
        color: rgba(255,255,255,0.8);
      }
    }
  }
}

.stats-bar {
  display: flex;
  background-color: #fff;
  margin: -40rpx 30rpx 20rpx;
  border-radius: 16rpx;
  padding: 30rpx 0;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  
  .stats-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-right: none;
    }
    
    .stats-num {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 8rpx;
    }
    
    .stats-label {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.menu-list {
  background-color: #fff;
  margin: 0 30rpx 40rpx;
  border-radius: 16rpx;
  padding: 0 30rpx;
  
  .menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .menu-left {
      display: flex;
      align-items: center;
      
      .menu-text {
        font-size: 28rpx;
        color: #333;
        margin-left: 20rpx;
      }
    }
  }
}

.logout-btn {
  margin: 0 30rpx;
  background-color: #fff;
  color: #f5222d;
  font-size: 30rpx;
  border-radius: 16rpx;
  height: 90rpx;
  line-height: 90rpx;
  border: none;
  
  &::after {
    border: none;
  }
}
</style>