baby-app/src/pages/myUser/myuser.vue

<route lang="json5">
{
  layout: 'tabbar',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '%tabbar.myuser%',
  },
}
</route>

<template>
  <view class="container">
    <!-- 头像 -->
    <view class="profile-section">
      <view class="avatar-container" @click="modifyBtn">
        <image :src="userInfo.avatar" class="avatar" mode="aspectFill" />
        <view class="avatar-badge">
          <image style="width: 26px; height: 26px" src="/src/static/icon/modify.svg"></image>
        </view>
      </view>
      <text class="user-id">{{ userInfo.id }}</text>
    </view>

    <!-- 菜单列表 -->
    <view class="menu-list">
      <view
        v-for="(item, index) in menuItems"
        :key="index"
        class="menu-item"
        @click="handleMenuClick(item.key, index)"
      >
        <image style="width: 24px; height: 24px" :src="item.icon"></image>
        <view class="menu-label">{{ item.label }}</view>
        <image style="width: 24px; height: 24px; margin-right: 15px" :src="item.right"></image>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'

  const userInfo = ref({
    id: '199****3465',
    avatar: 'https://ai-public.mastergo.com/ai/img_res/522a9d6767d9f1ad533cf624f7dd95ea.jpg',
  })
  const menuItems = ref([
    {
      key: 'baby',
      label: '我的宝宝',
      icon: '/src/static/icon/fi-rr-child-head.svg',
      right: '/src/static/icon/chevron-right.svg',
    },
    {
      key: 'notification',
      label: '消息通知',
      icon: '/src/static/icon/fi-rr-bell.svg',
      right: '/src/static/icon/chevron-right.svg',
    },
    {
      key: 'settings',
      label: '设置中心',
      icon: '/src/static/icon/setup.svg',
      right: '/src/static/icon/chevron-right.svg',
    },
  ])
  //  页面跳转
  const handleMenuClick = (item, index) => {
    console.log('Clicked menu item:', item, index)
    if (item === 'baby') {
      uni.navigateTo({
        url: '/pages/myUser/component/babyInformation',
      })
    } else if (item === 'notification') {
      uni.navigateTo({
        url: '/pages/myUser/component/messageCenter',
      })
    } else if (item === 'settings') {
      uni.navigateTo({
        url: '/pages/myUser/component/setFocus',
      })
    }
  }
  const modifyBtn = () => {
    console.log('修改头像')
  }
</script>

<style scoped>
  .container {
    min-height: 100vh;
    font-size: 16px;
    background-color: #f9fafb;
  }

  .profile-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 175px;
    padding: 36px 16px 0px 16px;
  }

  .avatar-container {
    position: relative;
  }

  .avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
  }

  .avatar-badge {
    position: absolute;
    right: 0;
    bottom: 0;
    background: #f88842;
    border-radius: 24px;
  }

  .user-id {
    margin-top: 0.75rem;
    color: #4b5563;
  }

  .menu-list {
    padding: 16px;
  }

  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    padding-bottom: 1rem;
    cursor: pointer;
    border-bottom: 1px solid #e5e7eb;
  }
  .menu-label {
    flex: 1;
    margin-left: 0.75rem;
    color: #374151;
  }
</style>