Press Plus

# PointCost

A component for displaying user points and expiration time, with refresh functionality and customizable content slots.

# Import

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

export default {
  components: {
    PressConvertPointCost,
  }
}

# Usage

# Basic Usage

Pass in the point information object to display the point icon and count.

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

export default {
  data() {
    return {
      pointInfo: {
        pointIcon: 'https://example.com/icon.png', // Point icon URL
        pointCount: 1000,                           // Point count
        expireTime: 0,                              // Expiration hint (0 means no expiry)
      }
    }
  },
  methods: {
    handleRefresh() {
      console.log('Refresh point info');
    }
  }
}

# Custom Text Color

Customize text color via the text-color prop.

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

# With Expiration Time

When expireTime is greater than 0, an expiration notice "X后失效" will be displayed.

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

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

# Using Slots

Use the default slot to add custom content such as exchange buttons or action button groups.

<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">Exchange Now</span>
    </button>
  </div>
</PressConvertPointCost>

# API

# Props

Prop Description Type Default
point-info Point information object (icon, count, expiration) Object {}
text-color Text color String ''

# PointInfo Object Structure

Property Description Type Default
pointIcon Point icon URL (required) String -
pointCount Point count (required) Number -
expireTime Expiration hint value. When > 0, displays "X后失效"; 0 = no expiry Number/String 0

# Events

Event Description Callback Parameters
refresh Triggered when refresh is clicked -

# Slots

Name Description
default Custom content area for buttons, descriptions

# Notes

  1. pointIcon must be a valid image URL
  2. When expireTime is greater than 0, the text "X后失效" is displayed (X is the value of expireTime)
  3. Clicking the refresh button triggers the refresh event; business logic must implement the refresh functionality
  4. Slot content styles need to be defined by the business side

← ConvertRecordCash →