Press Plus

# ExchangeList 兑换列表

用于展示积分兑换商品列表，支持自定义样式、状态展示和交互事件。

# 引入

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

export default {
  components: {
    PressConvertExchangeList,
  }
}

# 代码演示

# 基础用法

通过 exchange-list 属性传入兑换商品列表数据，通过 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元话费券',
          disabled: false,
          showMoney: true,
          need_money: 500,
          btnTxt: '兑换',
        },
      ],
    };
  },
  methods: {
    onExchangeClick(item) {
      console.log('点击兑换:', item);
    },
    onShowRewardExplain(index) {
      console.log('查看奖励说明:', index);
    },
  },
};

# 自定义样式

通过样式相关属性自定义组件外观。

<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"
/>

# 不同状态

组件支持多种状态展示：

  • 正常状态：num > 50 且 disabled: false
  • 已抢光：num === 0，显示"已抢光"角标
  • 仅剩少量：0 < num < 50，显示"仅剩X件"角标
  • 禁用状态：disabled: true，按钮置灰不可点击
exchangeList: [
  {
    pic: 'https://example.com/reward1.png',
    num: 100,
    name: '正常状态',
    disabled: false,
    showMoney: true,
    need_money: 500,
    btnTxt: '兑换',
  },
  {
    pic: 'https://example.com/reward2.png',
    num: 0,
    name: '已抢光状态',
    disabled: true,
    showMoney: true,
    need_money: 1000,
    btnTxt: '已抢光',
  },
  {
    pic: 'https://example.com/reward3.png',
    num: 5,
    name: '仅剩少量',
    disabled: false,
    showMoney: true,
    need_money: 1500,
    btnTxt: '兑换',
  },
  {
    pic: 'https://example.com/reward4.png',
    num: 100,
    name: '禁用状态',
    disabled: true,
    showMoney: true,
    need_money: 2000,
    btnTxt: '不可兑换',
  },
]

# API

# Props

参数 说明 类型 默认值
exchange-list 兑换商品列表 Array []
point-icon 积分图标 String ''
exchange-list-bg 兑换列表背景图 String ''
tag-bg 兑换列表标签背景图 String ''
redeem-reward-bg 奖励框背景图 String ''
reward-text-color 奖励文字颜色 String ''
reward-btn-bg 奖励按钮背景图 String ''
reward-btn-text-color 奖励按钮文字颜色 String ''

# ExchangeList 数据结构

键名 说明 类型
pic 商品图片 URL String
num 剩余数量 Number
name 商品名称 String
disabled 是否禁用 Boolean
showMoney 是否显示积分数量 Boolean
need_money 所需积分（超过 9999 显示 9999+） Number
btnTxt 按钮文字 String

# Events

事件名 说明 回调参数
exchangeClick 点击兑换按钮时触发 item: 当前商品对象
showRewardExplain 点击商品图片时触发 index: 当前商品索引

# 注意事项

  1. num === 0 时显示"已抢光"角标，0 < num < 50 时显示"仅剩X件"角标
  2. need_money 超过 9999 时，显示为 9999+
  3. disabled: true 时按钮添加禁用样式，但点击事件仍会触发，业务方需自行判断
  4. 图片 URL 需要是有效的网络地址或本地路径

← ConvertExchangeTemplate →