Press Plus

# RecordDetail 记录详情

用于展示用户的抽奖记录、中奖记录等列表详情，支持竖版和横版两种展示模式。

# 引入

import PressRecordDetail from 'press-plus/press-record-detail/press-record-detail';

export default {
  components: {
    PressRecordDetail,
  }
}

# 代码演示

# 基础用法

通过 record-list 属性传入记录列表数据，每条记录包含 name（名称）、time（时间）、btnText（按钮文案）字段。

<press-record-detail
  :record-list="recordList"
  @onClickBtn="handleClickBtn"
  @onClickBack="handleClickBack"
/>

export default {
  data() {
    return {
      recordList: [
        {
          name: '一等奖 - iPhone 15 Pro Max',
          time: '2024-01-15 14:30:25',
          btnText: '查看详情',
        },
        {
          name: '二等奖 - AirPods Pro',
          time: '2024-01-14 10:20:15',
          btnText: '已领取',
        },
      ],
    };
  },
  methods: {
    handleClickBtn(item, index) {
      console.log('点击按钮:', item, index);
    },
    handleClickBack() {
      console.log('点击返回');
    },
  },
};

# 自定义标题和空状态

通过 title 属性自定义标题，通过 empty-text 属性自定义空状态文案。

<press-record-detail
  title="我的中奖记录"
  empty-text="暂无中奖记录"
  :record-list="[]"
/>

# 横版样式

通过 style-name 属性设置为 tip-hori 可切换为横版样式，适用于横屏场景。

<press-record-detail
  style-name="tip-hori"
  title="横版记录明细"
  :record-list="recordList"
  @onClickBtn="handleClickBtn"
  @onClickBack="handleClickBack"
/>

# API

# Props

参数 说明 类型 默认值
title 标题文案 string 抽奖记录明细
style-name 样式类名，设置为 tip-hori 为横版样式 string ''
record-list 记录列表数据 array []
empty-text 空状态文案 string 还没有抽奖记录，快去输入口令抽奖吧~

# RecordList 数据结构

字段 说明 类型
name 记录名称 string
time 记录时间 string
btnText 按钮文案 string

# Events

事件名 说明 回调参数
onClickBtn 点击记录按钮时触发 (item, index) - 记录项和索引
onClickBack 点击返回按钮时触发 -

# 样式变量

组件使用 BEM 命名规范，主要类名如下：

类名 说明
press-record-detail 根容器
press-record-detail__header 头部容器
press-record-detail__title 标题
press-record-detail__back 返回按钮
press-record-detail__list 列表容器
press-record-detail__item 列表项
press-record-detail__name 记录名称
press-record-detail__time 记录时间
press-record-detail__btn 操作按钮
press-record-detail__empty-box 空状态容器
press-record-detail__empty-icon 空状态图标
press-record-detail__empty-text 空状态文案

# 注意事项

  • 横版样式（tip-hori）会显示固定头部和返回按钮，适用于横屏场景
  • 竖版样式默认不显示头部，适用于嵌入在其他页面中的场景
  • 记录列表为空时会自动显示空状态

← Share →