Press Plus

# PointCost 积分消耗

积分展示组件，用于显示用户当前积分数量、过期时间，并支持刷新和自定义内容插槽。

# 引入

import PressConvertPointCost from 'press-plus/press-convert-point-cost/press-convert-point-cost';

export default {
  components: {
    PressConvertPointCost,
  }
}

# 代码演示

# 基础用法

传入积分信息对象，展示积分图标和数量。

<PressConvertPointCost
  :point-info="pointInfo"
  @refresh="handleRefresh"
/>

export default {
  data() {
    return {
      pointInfo: {
        pointIcon: 'https://example.com/icon.png', // 积分图标URL
        pointCount: 1000,                           // 积分数量
        expireTime: 0,                              // 过期时间（显示在"X后失效"中，0表示不过期）
      }
    }
  },
  methods: {
    handleRefresh() {
      // 刷新积分数据
      console.log('刷新积分信息');
    }
  }
}

# 自定义文字颜色

通过 text-color 属性自定义文字颜色。

<PressConvertPointCost
  :point-info="pointInfo"
  text-color="#ff6b6b"
  @refresh="handleRefresh"
/>

# 带过期时间

当积分有过期时间时，会显示"X后失效"的提示。

<PressConvertPointCost
  :point-info="pointInfo"
  text-color="#4ecb73"
  @refresh="handleRefresh"
/>

export default {
  data() {
    return {
      pointInfo: {
        pointIcon: 'https://example.com/icon.png',
        pointCount: 5200,
        expireTime: '7天', // 显示为"7天后失效"
      }
    }
  }
}

# 使用插槽

通过默认插槽可以添加自定义内容，如兑换按钮、积分规则说明、操作按钮组等。

# 兑换按钮示例

<PressConvertPointCost
  :point-info="pointInfo"
  @refresh="handleRefresh"
>
  <div class="slot-exchange">
    <button class="exchange-btn" @click="handleExchange">
      <span class="btn-icon">🎁</span>
      <span class="btn-text">立即兑换</span>
    </button>
  </div>
</PressConvertPointCost>

# API

# Props

参数 说明 类型 默认值
point-info 积分信息对象，包含图标、数量、过期时间等 Object {}
text-color 文字颜色 String ''

# PointInfo 对象结构

参数 说明 类型 默认值
pointIcon 积分图标 URL（必填） String -
pointCount 积分数量（必填） Number -
expireTime 过期时间，大于 0 时显示"X后失效"，0 表示不过期 Number/String 0

# Events

事件名 说明 回调参数
refresh 点击刷新按钮时触发 -

# Slots

名称 说明
default 自定义内容区域，可添加按钮、说明等内容

# 注意事项

  1. pointIcon 必须是有效的图片 URL
  2. 当 expireTime 大于 0 时，会显示"X后失效"提示（X 为 expireTime 的值）
  3. 刷新按钮点击后会触发 refresh 事件，业务方需要自行实现刷新逻辑
  4. 插槽内容的样式需要业务方自行定义，可参考 demo 中的样式示例

← ConvertRecordCash →