Press Plus

# ExchangeList

A component for displaying a list of redeemable items with points, supporting custom styles, status display, and interactive events.

# Import

import PressConvertExchangeList from 'press-plus/press-convert-exchange-list/press-convert-exchange-list';

export default {
  components: {
    PressConvertExchangeList,
  }
}

# Usage

# Basic Usage

Pass the exchange list data through the exchange-list prop and set the point icon via point-icon.

<PressConvertExchangeList
  :exchange-list="exchangeList"
  :point-icon="pointIcon"
  @exchangeClick="onExchangeClick"
  @showRewardExplain="onShowRewardExplain"
/>

export default {
  data() {
    return {
      pointIcon: 'https://example.com/point-icon.png',
      exchangeList: [
        {
          pic: 'https://example.com/reward1.png',
          num: 100,
          name: '10 Yuan Phone Credit',
          disabled: false,
          showMoney: true,
          need_money: 500,
          btnTxt: 'Redeem',
        },
      ],
    };
  },
  methods: {
    onExchangeClick(item) {
      console.log('Exchange clicked:', item);
    },
    onShowRewardExplain(index) {
      console.log('Show reward details:', index);
    },
  },
};

# Custom Styles

Customize the component appearance through style-related props.

<PressConvertExchangeList
  :exchange-list="exchangeList"
  :point-icon="pointIcon"
  exchange-list-bg="https://example.com/bg.png"
  tag-bg="https://example.com/tag-bg.png"
  redeem-reward-bg="https://example.com/reward-bg.png"
  reward-text-color="#333333"
  reward-btn-bg="https://example.com/btn-bg.png"
  reward-btn-text-color="#ffffff"
/>

# Different States

The component supports multiple status displays:

  • Normal state: num > 50 and disabled: false
  • Sold out: num === 0, shows "已抢光" badge
  • Limited quantity: 0 < num < 50, shows "仅剩X件" badge
  • Disabled state: disabled: true, button is grayed out
exchangeList: [
  {
    pic: 'https://example.com/reward1.png',
    num: 100,
    name: 'Normal State',
    disabled: false,
    showMoney: true,
    need_money: 500,
    btnTxt: 'Redeem',
  },
  {
    pic: 'https://example.com/reward2.png',
    num: 0,
    name: 'Sold Out',
    disabled: true,
    showMoney: true,
    need_money: 1000,
    btnTxt: 'Sold Out',
  },
  {
    pic: 'https://example.com/reward3.png',
    num: 5,
    name: 'Limited Quantity',
    disabled: false,
    showMoney: true,
    need_money: 1500,
    btnTxt: 'Redeem',
  },
  {
    pic: 'https://example.com/reward4.png',
    num: 100,
    name: 'Disabled State',
    disabled: true,
    showMoney: true,
    need_money: 2000,
    btnTxt: 'Not Available',
  },
]

# API

# Props

Property Description Type Default
exchange-list List of redeemable items Array []
point-icon Point icon image URL String ''
exchange-list-bg Background image for list String ''
tag-bg Background image for tag String ''
redeem-reward-bg Background image for reward String ''
reward-text-color Text color for reward name String ''
reward-btn-bg Background image for button String ''
reward-btn-text-color Text color for button String ''

# ExchangeList Data Structure

Key Description Type
pic Item image URL String
num Remaining quantity Number
name Item name String
disabled Whether the item is disabled Boolean
showMoney Whether to show the required points Boolean
need_money Required points (shows 9999+ if over 9999) Number
btnTxt Button text String

# Events

Event Description Parameters
exchangeClick Triggered when redeem button is clicked item: Current item object
showRewardExplain Triggered when item image is clicked index: Current item index

# Notes

  1. When num === 0, a "已抢光" (sold out) badge is shown; when 0 < num < 50, a "仅剩X件" (only X left) badge is shown
  2. When need_money exceeds 9999, it displays as 9999+
  3. When disabled: true, the button gets a disabled style, but click events still fire — business logic should handle the check
  4. Image URLs must be valid network addresses or local paths

← ConvertExchangeTemplate →