Press Plus

# RecordDetail

Used to display user's lottery records, winning records and other list details, supporting both vertical and horizontal display modes.

# Import

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

export default {
  components: {
    PressRecordDetail,
  }
}

# Usage

# Basic Usage

Pass the record list data through the record-list prop. Each record contains name, time, and btnText fields.

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

export default {
  data() {
    return {
      recordList: [
        {
          name: 'First Prize - iPhone 15 Pro Max',
          time: '2024-01-15 14:30:25',
          btnText: 'View Details',
        },
        {
          name: 'Second Prize - AirPods Pro',
          time: '2024-01-14 10:20:15',
          btnText: 'Claimed',
        },
      ],
    };
  },
  methods: {
    handleClickBtn(item, index) {
      console.log('Button clicked:', item, index);
    },
    handleClickBack() {
      console.log('Back clicked');
    },
  },
};

# Custom Title and Empty Text

Customize the title through the title prop and the empty state text through the empty-text prop.

<press-record-detail
  title="My Winning Records"
  empty-text="No winning records yet"
  :record-list="[]"
/>

# Horizontal Style

Set style-name to tip-hori to switch to horizontal style, suitable for landscape scenarios.

<press-record-detail
  style-name="tip-hori"
  title="Horizontal Record Details"
  :record-list="recordList"
  @onClickBtn="handleClickBtn"
  @onClickBack="handleClickBack"
/>

# API

# Props

Prop Description Type Default
title Title text string 抽奖记录明细
style-name Style class name, set to tip-hori for horizontal string ''
record-list Record list data array []
empty-text Empty state text string 还没有抽奖记录，快去输入口令抽奖吧~

# RecordList Data Structure

Field Description Type
name Record name string
time Record time string
btnText Button text string

# Events

Event Description Callback Parameters
onClickBtn Triggered when record button is clicked (item, index) - Record item and index
onClickBack Triggered when back button is clicked -

# Style Classes

The component uses BEM naming convention. Main class names:

Class Name Description
press-record-detail Root container
press-record-detail__header Header container
press-record-detail__title Title
press-record-detail__back Back button
press-record-detail__list List container
press-record-detail__item List item
press-record-detail__name Record name
press-record-detail__time Record time
press-record-detail__btn Action button
press-record-detail__empty-box Empty container
press-record-detail__empty-icon Empty icon
press-record-detail__empty-text Empty text

# Notes

  • Horizontal style (tip-hori) displays a fixed header and back button, suitable for landscape scenarios
  • Vertical style hides the header by default, suitable for embedding in other pages
  • Empty state is automatically displayed when the record list is empty

← Share →