更新记录

1.0.0（2025-11-16） 下载此版本

新增

• 初始版本发布
• 支持用户信息展示
• 支持统计数据展示
• 支持菜单列表配置
• 支持三种主题风格
• 支持退出登录功能
• 支持多种图标类型
• 支持动态更新数据

平台兼容性

uni-app(3.6.14)

uni-app x(3.6.14)

其他

hy-my-profile

一个简单易用的 uniapp 个人中心页面模板插件，开箱即用，高度可配置。

✨ 特性

• 🚀 开箱即用：简单配置即可快速集成
• 🎨 多种主题：支持默认、暗黑、渐变三种主题风格
• 📱 完美适配：支持 H5、小程序、APP 等多端
• ⚡ uni-app x 支持：提供 .uvue 文件，完美支持 uni-app x
• 🔧 灵活配置：支持头像形状、主题色、菜单项等自定义配置
• 🎯 事件丰富：提供完整的事件监听机制
• 💪 TypeScript/UTS：提供完整的类型定义
• 🔄 响应式：支持动态更新用户信息和统计数据

🚀 快速开始

基础使用

<template>
  <view>
    <hy-my-profile
      :userInfo="userInfo"
      :menus="menus"
      @menu-click="onMenuClick"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: 'https://your-avatar-url.jpg',
        nickname: '用户昵称',
        desc: 'VIP会员'
      },
      menus: [
        { icon: 'order', title: '我的订单', path: '/pages/order/list' },
        { icon: 'wallet', title: '我的钱包', path: '/pages/wallet/index' },
        { icon: 'setting', title: '设置', path: '/pages/setting/index' }
      ]
    }
  },
  methods: {
    onMenuClick(menu) {
      console.log('菜单点击:', menu)
    }
  }
}
</script>

📖 API 文档

Props 属性

userInfo 对象结构

{
  avatar: 'https://xxx.jpg',  // 头像地址
  nickname: '用户昵称',        // 用户昵称
  desc: '个人简介'             // 个人简介
}

stats 数组结构

[
  {
    label: '收藏',    // 标签名称
    value: 123,      // 统计值
    key: 'favorite'  // 唯一标识
  }
]

menus 数组结构

[
  {
    icon: 'order',           // 图标（emoji类型时使用内置图标名）
    iconType: 'emoji',       // 图标类型：emoji / image / iconfont
    title: '我的订单',       // 菜单标题
    badge: 5,                // 徽章数字，0或不传则不显示
    path: '/pages/order/list' // 跳转路径（可选）
  }
]

图标类型说明

1. emoji 类型（默认）

{ icon: 'order', iconType: 'emoji' }
// 内置图标：order(📦)、wallet(💰)、coupon(🎫)、address(📍)、service(👨‍💼)、setting(⚙️)

2. image 类型

{ icon: '/static/icon/order.png', iconType: 'image' }

3. iconfont 类型

{ icon: 'iconfont icon-order', iconType: 'iconfont' }

Events 事件

Methods 方法

通过 ref 调用组件方法：

// 获取组件实例
const profile = this.$refs.profile

// 更新用户信息
profile.updateUserInfo({
  nickname: '新昵称',
  desc: '新简介'
})

// 更新统计数据
profile.updateStats([
  { label: '收藏', value: 100, key: 'favorite' }
])

// 更新单个菜单徽章
profile.updateMenuBadge(0, 5) // 第一个菜单徽章设为5

// 批量更新菜单徽章
profile.updateMenuBadges([
  { index: 0, badge: 5 },
  { index: 2, badge: 3 }
])

🎨 使用示例

示例1：基础配置

<template>
  <hy-my-profile
    :userInfo="userInfo"
    :menus="menus"
  />
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: 'https://xxx.jpg',
        nickname: '张三',
        desc: 'VIP会员'
      },
      menus: [
        { icon: 'order', title: '我的订单', path: '/pages/order/list' },
        { icon: 'setting', title: '设置', path: '/pages/setting/index' }
      ]
    }
  }
}
</script>

示例2：完整配置

<template>
  <hy-my-profile
    theme="gradient"
    primaryColor="#ff6b6b"
    avatarShape="rounded"
    :userInfo="userInfo"
    :stats="stats"
    :menus="menus"
    :showStats="true"
    :showLogout="true"
    logoutText="安全退出"
    loginPath="/pages/login/index"
    profilePath="/pages/user/info"
    @user-click="onUserClick"
    @login-click="onLoginClick"
    @stat-click="onStatClick"
    @menu-click="onMenuClick"
    @logout-click="onLogoutClick"
    ref="profile"
  />
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: 'https://xxx.jpg',
        nickname: '李四',
        desc: '超级VIP会员 | 积分：9999'
      },
      stats: [
        { label: '收藏', value: 23, key: 'favorite' },
        { label: '关注', value: 56, key: 'follow' },
        { label: '粉丝', value: 128, key: 'fans' },
        { label: '积分', value: 3560, key: 'points' }
      ],
      menus: [
        { 
          icon: 'order', 
          title: '我的订单', 
          badge: 3, 
          path: '/pages/order/list',
          iconType: 'emoji'
        },
        { 
          icon: '/static/icon/wallet.png', 
          title: '我的钱包', 
          path: '/pages/wallet/index',
          iconType: 'image'
        },
        { 
          icon: 'iconfont icon-coupon', 
          title: '优惠券', 
          badge: 5,
          path: '/pages/coupon/list',
          iconType: 'iconfont'
        }
      ]
    }
  },
  methods: {
    onUserClick(userInfo) {
      console.log('用户卡片点击', userInfo)
    },
    onLoginClick() {
      uni.navigateTo({ url: '/pages/login/index' })
    },
    onStatClick(stat) {
      console.log('统计项点击', stat)
    },
    onMenuClick(menu) {
      console.log('菜单点击', menu)
    },
    onLogoutClick() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 执行退出登录逻辑
          }
        }
      })
    }
  }
}
</script>

示例3：动态更新数据

<template>
  <hy-my-profile
    :userInfo="userInfo"
    :stats="stats"
    :menus="menus"
    ref="profile"
  />
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
      stats: [],
      menus: []
    }
  },
  onLoad() {
    this.loadUserData()
  },
  methods: {
    async loadUserData() {
      // 从接口获取用户信息
      const res = await uni.request({ url: '/api/user/info' })
      this.userInfo = res.data.userInfo
      this.stats = res.data.stats

      // 或者使用组件方法更新
      this.$refs.profile.updateUserInfo(res.data.userInfo)
      this.$refs.profile.updateStats(res.data.stats)
    }
  }
}
</script>

示例4：自定义主题

<template>
  <view>
    <!-- 默认主题 -->
    <hy-my-profile theme="default" :userInfo="userInfo" />

    <!-- 暗黑主题 -->
    <hy-my-profile theme="dark" :userInfo="userInfo" />

    <!-- 渐变主题 -->
    <hy-my-profile 
      theme="gradient" 
      primaryColor="#ff6b6b"
      :userInfo="userInfo" 
    />
  </view>
</template>

🎯 常见问题

1. 如何自定义菜单图标？

支持三种图标类型：

• emoji：使用内置图标名（order、wallet等）
• image：传入图片路径
• iconfont：传入iconfont类名

2. 如何处理未登录状态？

组件会自动判断，当用户信息为默认值或昵称为"点击登录"时，点击用户卡片会触发 login-click 事件或跳转到 loginPath。

3. 如何自定义页面跳转？

设置 loginPath 和 profilePath 为空字符串，然后监听对应事件自行处理：

<hy-my-profile
  loginPath=""
  profilePath=""
  @login-click="handleLogin"
  @profile-click="handleProfile"
/>