更新记录

1.0.0（2026-06-04）

1.0.0 2024-01-15 初始版本 1.1.0 2024-06-04 添加标签禁用状态、图片懒加载、点击反馈、按钮尺寸自定义、卡片背景色和边框样式自定义

平台兼容性

uni-app(3.7.9)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ √ √ √ √ - √ √ √
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
√ √ √ √ - - - - - - - -

OrderManager 订单管理组件

简介

OrderManager 是一个基于 uni-app 框架 开发的高性能订单管理组件，集成了订单分类标签栏和订单列表展示功能。组件采用组件化架构设计，支持多店铺和单店铺两种展示模式，并提供丰富的自定义配置选项，能够快速适配各种订单管理场景。

功能特性

特性 说明 状态
订单分类标签 支持自定义标签列表，带有角标计数显示，支持禁用状态，可控制显示/隐藏 ✅
多店铺模式 每个店铺一张订单卡片，展示店铺级别的订单信息 ✅
单店铺模式 所有商品在一张卡片中展示，简化订单展示 ✅
下拉刷新 支持下拉刷新订单列表，用户体验流畅 ✅
上拉加载更多 支持滚动到底部自动加载更多订单 ✅
字段映射 通过 fieldMap 属性支持自定义字段映射，适配不同接口返回的数据结构 ✅
样式自定义 通过 styles 属性自定义各元素的字体大小和颜色 ✅
自定义按钮 支持完全自定义订单操作按钮，按钮栏可控制显示/隐藏 ✅
空状态展示 支持自定义空状态图标和提示文字 ✅
动态高度 滚动区域高度根据是否显示标签栏自动计算 ✅
图片懒加载 支持商品图片懒加载，提升页面性能 ✅
点击反馈 按钮和商品卡片点击时有缩放和透明度变化效果 ✅

设计理念

组件化架构

组件采用分层设计，职责清晰：

OrderManager（订单管理主组件）
├── OrderTabs（标签栏组件）
│   └── 负责订单分类切换、标签滚动、角标显示
├── OrderCard（订单卡片组件）
│   ├── 负责订单信息展示、商品列表渲染
│   └── OrderActions（操作按钮组件）
│       └── 负责操作按钮渲染和事件分发
└── NoData（空状态组件）
    └── 负责无数据时的友好提示

核心设计原则

  1. 数据驱动：所有展示内容由数据驱动，通过 fieldMap 实现字段映射
  2. 配置化：支持丰富的配置选项，满足不同业务需求
  3. 性能优化：支持图片懒加载、虚拟滚动（预留）
  4. 可扩展性：组件结构清晰，易于扩展和定制

快速开始

安装方式

方式一：手动引入

将组件目录复制到项目的 components 目录下，然后在页面中引入：

<template>
  <OrderManager 
    :tabs="tabs"
    :orders="orders"
    :activeTab="activeTab"
    @tabChange="handleTabChange"
    @action="handleAction"
  />
</template>

<script>
import OrderManager from '@/components/OrderManager/OrderManager.vue'

export default {
  components: {
    OrderManager
  }
}
</script>

方式二：npm 安装（待支持）

npm install @uni/order-manager --save

基本配置

在使用前，您需要准备以下数据：

// 1. 配置标签列表
const tabs = [
  { key: 0, label: '全部', count: 10 },
  { key: 1, label: '待付款', count: 3 },
  { key: 2, label: '待收货', count: 5 },
  { key: 3, label: '待评价', count: 2 },
  { key: 4, label: '已完成', count: 0 }
]

// 2. 准备订单数据
const orders = [
  {
    shopId: 'S001',
    shopName: '服饰精品店',
    status: 1,
    statusText: '待付款',
    createTime: '2024-01-15 10:30:00',
    list: [
      {
        itemId: 'P001',
        productName: '时尚T恤',
        spec: 'M码/白色',
        quantity: 2,
        price: 99.9,
        image: '/static/images/product1.jpg'
      }
    ]
  }
]

API 文档

Props 属性

属性名 类型 必填 默认值 说明
tabs Array 是 - 分类标签数据，支持 disabled 属性禁用标签
orders Array 否 [] 订单列表数据
activeTab Number 否 0 当前激活的标签索引
loading Boolean 否 false 是否正在加载中
hasMore Boolean 否 true 是否还有更多数据可加载
refreshing Boolean 否 false 是否正在刷新
emptyIcon String 否 '' 空状态图标地址
emptyText String 否 '暂无订单' 空状态提示文字
isMultiShop Boolean 否 true 是否为多店铺模式
showTabs Boolean 否 true 是否显示标签栏
showActions Boolean 否 true 是否显示操作按钮栏
lazyLoad Boolean 否 false 是否启用图片懒加载
fieldMap Object 否 默认映射 字段映射配置，适配不同接口字段
styles Object 否 {} 自定义样式配置，包括颜色、字体大小等
buttons Array 否 [] 自定义按钮列表，优先级高于默认按钮

tabs 属性说明

tabs: [
  { key: 0, label: '全部', count: 10 },
  { key: 1, label: '待付款', count: 3 },
  { key: 2, label: '待收货', count: 5 },
  { key: 3, label: '待评价', count: 2 },
  { key: 4, label: '已完成', count: 0 },
  { key: 5, label: '暂不可用', disabled: true }  // 禁用状态
]
字段 类型 说明
key Number 标签标识，对应订单状态
label String 标签显示文字
count Number 该状态的订单数量（用于角标显示）
disabled Boolean 是否禁用该标签（可选）

fieldMap 属性说明

用于适配不同接口返回的字段名：

fieldMap: {
  list: 'list',           // 商品列表字段名
  itemId: 'itemId',       // 商品ID字段名
  productName: 'productName', // 商品名称字段名
  spec: 'spec',           // 规格字段名
  quantity: 'quantity',   // 数量字段名
  price: 'price',         // 价格字段名
  image: 'image',         // 图片字段名
  shopId: 'shopId',       // 店铺ID字段名
  shopName: 'shopName',   // 店铺名称字段名
  status: 'status',       // 订单状态字段名
  statusText: 'statusText', // 状态文本字段名
  createTime: 'createTime' // 创建时间字段名
}

styles 属性说明

用于自定义各元素的样式：

styles: {
  // 文字样式配置
  shopName: { fontSize: '28rpx', color: '#333' },      // 店铺名称样式
  shopTotal: { fontSize: '32rpx', color: '#ff5722' },   // 店铺订单总金额样式
  shopCount: { fontSize: '24rpx', color: '#999' },      // 商品数量样式
  shopTime: { fontSize: '24rpx', color: '#999' },       // 下单时间样式
  productName: { fontSize: '26rpx', color: '#333' },    // 商品名称样式
  productPrice: { fontSize: '24rpx', color: '#666' },   // 商品价格样式
  productSubtotal: { fontSize: '28rpx', color: '#ff5722' }, // 小计金额样式
  productStatus: { fontSize: '22rpx', color: '#ff5722' },  // 状态标签全局样式
  productTime: { fontSize: '24rpx', color: '#999' },    // 下单时间样式（单店铺模式）
  loadingText: { fontSize: '26rpx', color: '#999' },    // 加载提示样式
  emptyText: { fontSize: '26rpx', color: '#999' },      // 空状态提示样式

  // 背景色配置
  cardBgColor: '#ffffff',        // 卡片背景色
  productRowBgColor: '#fafafa',  // 商品行背景色

  // 边框样式配置
  borderColor: '#f0f0f0',       // 边框颜色
  borderStyle: 'solid',          // 边框样式 (solid/dashed/dotted)
  borderRadius: '16rpx',        // 边框圆角
  borderWidth: '2rpx',          // 边框宽度

  // 状态颜色配置
  pendingColor: '#ff5722',      // 待付款状态文字颜色
  shippedColor: '#1989fa',      // 待收货状态文字颜色
  reviewColor: '#ff9500',       // 待评价状态文字颜色
  completedColor: '#666',       // 已完成状态文字颜色
  pendingBgColor: '',           // 待付款状态背景颜色
  shippedBgColor: '',           // 待收货状态背景颜色
  reviewBgColor: '',            // 待评价状态背景颜色
  completedBgColor: '',         // 已完成状态背景颜色

  // 标签栏样式配置
  activeColor: '#ff5722',       // 标签选中状态文字颜色
  activeBgColor: '',            // 标签选中状态背景颜色
  activeBorderColor: '#ff5722', // 标签选中状态底部边框颜色
  inactiveColor: '#666',        // 标签未选中状态文字颜色
  badgeBgColor: '#ff0000',      // 标签角标背景颜色
  badgeTextColor: '#ffffff',    // 标签角标文字颜色

  // 按钮样式配置
  btnWidth: 148,                // 按钮宽度（rpx）
  btnHeight: 56,               // 按钮高度（rpx）
  cancelBtnColor: '#666',       // 取消按钮文字颜色
  cancelBtnBorderColor: '#ddd', // 取消按钮边框颜色
  secondaryBtnColor: '#666',    // 次要按钮文字颜色
  secondaryBtnBorderColor: '#ddd', // 次要按钮边框颜色
  primaryBtnBgColor: '#ff5722', // 主要按钮背景色
  primaryBtnTextColor: '#fff'   // 主要按钮文字颜色
}

buttons 属性说明

用于自定义订单操作按钮：

buttons: [
  { key: 'cancel', text: '取消订单', type: 'cancel' },
  { key: 'pay', text: '去付款', type: 'primary' },
  { key: 'logistics', text: '查看物流', type: 'secondary' },
  { key: 'confirm', text: '确认收货', type: 'primary' },
  { key: 'review', text: '评价', type: 'primary' },
  { key: 'refund', text: '申请退款', type: 'secondary' },
  { key: 'custom', text: '自定义按钮', type: 'secondary', width: 160, height: 60 }
]
字段 类型 说明
key String 按钮标识，用于事件处理
text String 按钮显示文字
type String 按钮类型：cancel（取消按钮）、secondary（次要按钮）、primary（主要按钮）
width Number 按钮宽度（可选，单位 rpx）
height Number 按钮高度（可选，单位 rpx）

按钮类型说明：

类型 样式 说明
cancel 灰色边框，灰色文字 取消类按钮
secondary 灰色边框，灰色文字 次要操作按钮
primary 主色渐变背景，白色文字 主要操作按钮

Events 事件

事件名 参数 说明
tabChange key: Number 标签切换时触发，返回选中的标签 key
refresh - 下拉刷新时触发
loadmore - 上拉加载更多时触发
action key: String, data: Object 操作按钮点击时触发
itemClick item: Object 商品项点击时触发

状态与按钮映射

默认情况下，组件会根据订单状态自动显示对应的操作按钮：

状态码 状态名称 显示按钮
1 待付款 取消订单、去付款
2 待收货 查看物流、确认收货、申请退款
3 待评价 评价
4 已完成 无操作
5 待发货 取消订单
6 退款/售后 评价

使用示例

基础用法

<template>
  <OrderManager 
    :tabs="tabs"
    :orders="orders"
    :activeTab="activeTab"
    :loading="loading"
    :hasMore="hasMore"
    :refreshing="refreshing"
    @tabChange="handleTabChange"
    @refresh="handleRefresh"
    @loadmore="handleLoadMore"
    @action="handleAction"
    @itemClick="handleItemClick"
  />
</template>

<script>
import OrderManager from '@/components/OrderManager/OrderManager.vue'

export default {
  components: {
    OrderManager
  },
  data() {
    return {
      tabs: [
        { key: 0, label: '全部', count: 0 },
        { key: 1, label: '待付款', count: 3 },
        { key: 2, label: '待收货', count: 2 },
        { key: 3, label: '待评价', count: 1 },
        { key: 4, label: '已完成', count: 5 }
      ],
      orders: [],
      activeTab: 0,
      loading: false,
      hasMore: true,
      refreshing: false
    }
  },
  methods: {
    handleTabChange(key) {
      this.activeTab = key
      this.loadOrders()
    },
    handleRefresh() {
      this.refreshing = true
      this.loadOrders()
    },
    handleLoadMore() {
      if (this.loading || !this.hasMore) return
      this.loadMoreOrders()
    },
    handleAction(key, data) {
      switch(key) {
        case 'cancel':
          uni.showToast({ title: `取消订单: ${data.shopId}`, icon: 'none' })
          break
        case 'pay':
          uni.showToast({ title: `去付款: ${data.shopId}`, icon: 'none' })
          break
        case 'logistics':
          uni.showToast({ title: `查看物流: ${data.shopId}`, icon: 'none' })
          break
        case 'confirm':
          uni.showToast({ title: `确认收货: ${data.shopId}`, icon: 'none' })
          break
        case 'review':
          uni.showToast({ title: `评价: ${data.shopId}`, icon: 'none' })
          break
        case 'refund':
          uni.showToast({ title: `申请退款: ${data.shopId}`, icon: 'none' })
          break
      }
    },
    handleItemClick(item) {
      uni.navigateTo({ url: `/pages/detail/index?id=${item.itemId}` })
    },
    loadOrders() {},
    loadMoreOrders() {}
  }
}
</script>

自定义按钮配置

<template>
  <OrderManager 
    :tabs="tabs"
    :orders="orders"
    :buttons="customButtons"
    @action="handleAction"
  />
</template>

<script>
export default {
  data() {
    return {
      customButtons: [
        { key: 'pay', text: '立即支付', type: 'primary' },
        { key: 'confirm', text: '确认收货', type: 'primary' },
        { key: 'review', text: '去评价', type: 'secondary' }
      ]
    }
  },
  methods: {
    handleAction(key, data) {
      console.log('按钮点击:', key, data)
    }
  }
}
</script>

自定义字段映射

<template>
  <OrderManager 
    :orders="orders"
    :fieldMap="customFieldMap"
  />
</template>

<script>
export default {
  data() {
    return {
      customFieldMap: {
        list: 'products',
        itemId: 'id',
        productName: 'name',
        spec: 'specification',
        quantity: 'count',
        price: 'amount',
        image: 'imgUrl',
        shopId: 'storeId',
        shopName: 'storeName',
        status: 'orderStatus',
        statusText: 'statusDesc',
        createTime: 'orderTime'
      }
    }
  }
}
</script>

自定义样式

<template>
  <OrderManager 
    :orders="orders"
    :styles="customStyles"
  />
</template>

<script>
export default {
  data() {
    return {
      customStyles: {
        primaryBtnBgColor: '#4a9eff',
        activeColor: '#4a9eff',
        activeBorderColor: '#4a9eff',
        pendingColor: '#ff5722',
        shippedColor: '#1989fa',
        shopName: { fontSize: '30rpx', color: '#333' },
        productName: { fontSize: '28rpx', color: '#333' }
      }
    }
  }
}
</script>

隐藏标签栏

<template>
  <OrderManager 
    :tabs="tabs"
    :orders="orders"
    :showTabs="false"
  />
</template>

效果：标签栏不显示，滚动区域高度自动扩展为全屏。

隐藏操作按钮栏

<template>
  <OrderManager 
    :tabs="tabs"
    :orders="orders"
    :showActions="false"
  />
</template>

效果：订单卡片底部的操作按钮栏不显示，适用于只展示订单信息的场景。

启用图片懒加载

<template>
  <OrderManager 
    :tabs="tabs"
    :orders="orders"
    :lazyLoad="true"
  />
</template>

效果：商品图片在进入可视区域时才加载，提升页面性能。

禁用指定标签

<template>
  <OrderManager 
    :tabs="tabs"
    :orders="orders"
  />
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { key: 0, label: '全部', count: 10 },
        { key: 1, label: '待付款', count: 3 },
        { key: 2, label: '暂不可用', disabled: true },
        { key: 3, label: '待评价', count: 2 }
      ]
    }
  }
}
</script>

效果：禁用的标签显示灰色，不可点击。

自定义卡片背景色和边框样式

<template>
  <OrderManager 
    :tabs="tabs"
    :orders="orders"
    :styles="customStyles"
  />
</template>

<script>
export default {
  data() {
    return {
      customStyles: {
        // 背景色配置
        cardBgColor: '#f8f9fa',        // 卡片背景色
        productRowBgColor: '#ffffff',   // 商品行背景色

        // 边框样式配置
        borderColor: '#e8e8e8',       // 边框颜色
        borderStyle: 'solid',          // 边框样式 (solid/dashed/dotted)
        borderRadius: '20rpx',        // 边框圆角
        borderWidth: '2rpx'           // 边框宽度
      }
    }
  }
}
</script>

效果：订单卡片使用自定义的背景色和边框样式。

订单数据格式

多店铺模式数据格式

orders: [
  {
    shopId: 'S001',
    shopName: '店铺A',
    list: [
      {
        itemId: 'P001',
        productName: '商品名称',
        spec: '规格描述',
        quantity: 2,
        price: 99.9,
        image: 'https://example.com/product.jpg',
        status: 1,
        statusText: '待付款'
      }
    ],
    totalAmount: 199.8,
    createTime: '2024-01-15 10:30:00'
  }
]

单店铺模式数据格式

orders: [
  {
    itemId: 'P001',
    productName: '商品名称',
    spec: '规格描述',
    quantity: 2,
    price: 99.9,
    image: 'https://example.com/product.jpg',
    status: 1,
    statusText: '待付款',
    createTime: '2024-01-15 10:30:00'
  }
]

注意事项

  1. 数据格式：确保传入的订单数据格式与 fieldMap 配置一致
  2. 状态码：订单状态码应与组件内部定义的状态映射一致（1-待付款、2-待收货、3-待评价、4-已完成、5-待发货、6-退款/售后）
  3. 按钮权限：自定义按钮会根据订单状态进行过滤，只有状态允许的按钮才会显示
  4. 图片资源：商品图片应使用可访问的 URL 地址

版本历史

版本 更新日期 更新内容
1.0.0 2024-01-15 初始版本
1.1.0 2024-06-04 添加标签禁用状态、图片懒加载、点击反馈、按钮尺寸自定义

许可证

MIT License

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论 向官方投诉

暂无用户评论。