Press Plus

# ConvertRecordCash 兑换记录明细

兑换记录明细组件，支持竖版和横版两种布局模式，用于展示用户的积分获得、消耗和兑换记录。

# 引入

import PressConvertRecordCash from 'press-plus/press-convert-record-cash/press-convert-record-cash';

export default {
  components: {
    PressConvertRecordCash,
  }
}

# 代码演示

# 基础用法（竖版布局）

<template>
  <div>
    <button @click="showDialog = true">打开兑换记录明细</button>
    
    <PressConvertRecordCash
      :show="showDialog"
      :tab-index="currentTabIndex"
      :tab-list="tabOptions"
      :point-name="pointName"
      :point-amount="userPointAmount"
      :point-num="totalPointNum"
      :expire-time="pointExpireTime"
      :list="recordList"
      :loading="isLoading"
      :finished="isFinished"
      @close="showDialog = false"
      @go-back="showDialog = false"
      @change-tab="handleTabChange"
      @load="handleLoadMore"
      @jump-to-feedback="handleJumpToFeedback"
      @go-jump="handleGoToTask"
      @goto-goods-detail="handleGoodsDetail"
      @record-refresh="handleRecordRefresh"
    >
      <!-- 记录文本 Slot：自定义记录项文本显示 -->
      <template #record-text="{ item, tabIndex, pointName }">
        <template v-if="tabIndex === 1">
          <!-- 获得记录：+2 抽奖次数、9 代币名称 -->
          <span class="demo-highlight">+{{ item.point }}</span> 抽奖次数、<span class="demo-highlight">{{ item.point }}</span> {{ pointName }}
        </template>
        <template v-else-if="tabIndex === 3">
          <!-- 消耗记录：根据 consumeType 显示不同文案 -->
          <template v-if="item.consumeType === '抽奖次数'">
            <span class="demo-highlight">-{{ item.point }}</span> 抽奖次数
          </template>
          <template v-else>
            <span class="demo-highlight">-{{ item.point }}</span> {{ pointName }}
          </template>
        </template>
      </template>
      
      <!-- 记录提示 Slot：自定义累计统计文案 -->
      <template #record-tip>
        <template v-if="currentTabIndex === 1">
          累计获得<span class="highlight">{{ calculateTotal(recordList) }}</span>抽奖次数、<span class="highlight">{{ calculateTotal(recordList) }}</span>{{ pointName }}
        </template>
        <template v-else-if="currentTabIndex === 3">
          累计消耗<span class="highlight">{{ calculateConsumeTotal(recordList, '抽奖次数') }}</span>抽奖次数、<span class="highlight">{{ calculateConsumeTotal(recordList, '积分') }}</span>{{ pointName }}
        </template>
      </template>
    </PressConvertRecordCash>
  </div>
</template>

<script>
import { getMockData } from 'src/packages/press-convert-record-cash/demo-data/index.ts';

export default {
  data() {
    return {
      showDialog: false,
      currentTabIndex: 1,
      ...getMockData(),
    };
  },
  methods: {
    // 计算累计总数
    calculateTotal(list) {
      if (!list || list.length === 0) return '0';
      return list.reduce((sum, item) => sum + parseInt(item.point || 0, 10), 0);
    },
    // 按消耗类型计算总数（抽奖次数/积分分开统计）
    calculateConsumeTotal(list, consumeType) {
      if (!list || list.length === 0) return '0';
      const filteredList = list.filter(item => item.consumeType === consumeType);
      return filteredList.reduce((sum, item) => sum + parseInt(item.point || 0, 10), 0);
    },
  },
};
</script>

<style scoped>
.highlight {
  color: #f16253;
}

.demo-highlight {
  color: #ff6b6b;
  font-weight: bold;
}
</style>

# 横版布局（通过 styleName 切换）

<template>
  <PressConvertRecordCash
    :show="showDialog"
    style-name="tip-hori"
    :tab-index="currentTabIndex"
    :tab-list="tabOptions"
    :point-name="pointName"
    :point-amount="userPointAmount"
    :point-num="totalPointNum"
    :expire-time="pointExpireTime"
    :list="recordList"
    @close="showDialog = false"
  />
</template>

# 空数据状态

<template>
  <PressConvertRecordCash
    :show="showDialog"
    :tab-index="currentTabIndex"
    :tab-list="tabOptions"
    :point-name="pointName"
    :point-amount="0"
    :point-num="0"
    :list="[]"
    @close="showDialog = false"
  />
</template>

# API

# Props

参数 说明 类型 默认值
show 是否显示组件 boolean false
z-index 组件层级 number 1000
tab-index 当前选中的tab索引 number 1
tab-list tab列表数据 array []
style-name 样式类名，用于游戏主题适配 string ''
money-type 货币类型 number 0
point-name 积分名称 string ''
point-num 累计获得/消耗的积分数量 string ''
point-amount 用户当前拥有的积分总数 string ''
expire-time 积分失效时间（毫秒时间戳） number 0
list 兑换记录列表数据 array []
loading 是否正在加载更多数据 boolean false
finished 是否已加载完所有数据 boolean false
immediate-check 是否立即检查加载状态 boolean false

# Events

事件名 说明 参数
close 关闭组件 -
go-back 返回上一页 -
load 加载更多数据 -
change-tab 切换tab tabId: number
jump-to-feedback 跳转到反馈页面 -
go-jump 跳转到任务页面 -
record-refresh 积分失效后刷新数据 -
goto-goods-detail 查看奖励详情 item: object

# Slots

名称 说明 参数
expire-time 自定义失效时间显示 { pointName: string, expireTime: number, onFinish: function }
record-text 自定义记录项文本显示 { item: object, tabIndex: number, pointName: string }
record-tip 自定义记录统计提示文案 -

# Slot 使用说明

expire-time Slot

用于自定义积分失效时间的显示内容和格式。组件提供默认的倒计时显示。

<template #expire-time="{ pointName, expireTime, onFinish }">
  <div v-if="expireTime > 0">
    {{ pointName }}
    <span class="custom-highlight">
      {{ formatCountdown(expireTime) }}
    </span> 后失效
  </div>
</template>

参数说明：

  • pointName：积分名称（如"幸运币"）
  • expireTime：失效时间戳（毫秒）
  • onFinish：倒计时结束回调函数

record-text Slot

用于自定义记录项的文本显示内容和格式。只在 item.showViewButton 为 false 或不存在时显示。

<template #record-text="{ item, tabIndex, pointName }">
  <template v-if="tabIndex === 1">
    <!-- 获得记录：+2 抽奖次数、9 代币名称 -->
    <span class="demo-highlight">+{{ item.point }}</span> 抽奖次数、<span class="demo-highlight">{{ item.point }}</span> {{ pointName }}
  </template>
  <template v-else-if="tabIndex === 3">
    <!-- 消耗记录：根据 consumeType 显示不同文案 -->
    <template v-if="item.consumeType === '抽奖次数'">
      <span class="demo-highlight">-{{ item.point }}</span> 抽奖次数
    </template>
    <template v-else>
      <span class="demo-highlight">-{{ item.point }}</span> {{ pointName }}
    </template>
  </template>
</template>

参数说明：

  • item：记录项数据
  • tabIndex：当前 Tab 索引（1: 获得记录, 2: 获得奖励, 3: 消耗记录）
  • pointName：积分名称（如"幸运币"）

record-tip Slot

用于自定义记录列表顶部的统计提示文案，支持不同 Tab 显示不同内容。

<template #record-tip>
  <template v-if="currentTabIndex === 1">
    累计获得<span class="highlight">{{ calculateTotal(list) }}</span>抽奖次数、<span class="highlight">{{ calculateTotal(list) }}</span>{{ pointName }}
  </template>
  <template v-else-if="currentTabIndex === 3">
    累计消耗<span class="highlight">{{ calculateConsumeTotal(list, '抽奖次数') }}</span>抽奖次数、<span class="highlight">{{ calculateConsumeTotal(list, '积分') }}</span>{{ pointName }}
  </template>
</template>

计算方法示例：

methods: {
  // 计算累计总数
  calculateTotal(list) {
    if (!list || list.length === 0) return '0';
    return list.reduce((sum, item) => sum + parseInt(item.point || 0, 10), 0);
  },
  // 按消耗类型计算总数（抽奖次数/积分分开统计）
  calculateConsumeTotal(list, consumeType) {
    if (!list || list.length === 0) return '0';
    const filteredList = list.filter(item => item.consumeType === consumeType);
    return filteredList.reduce((sum, item) => sum + parseInt(item.point || 0, 10), 0);
  },
}

# 数据结构

# tabList 格式

[
  { id: 1, name: '获得记录' },
  { id: 2, name: '消耗记录' },
  { id: 3, name: '兑换记录' },
]

# list 格式

[
  {
    orderid: '订单ID',
    desc: '记录描述',
    time: '时间字符串',
    opertype: 1, // 1:获得次数 2:获得奖励 3:消耗抽奖次数 4:兑换扣除积分 5:过期清零
    point: '积分数量', // 积分数量或抽奖次数
    showViewButton: true, // 是否显示"查看奖励"按钮（可选）
    rewardType: '抽奖奖励', // 奖励类型（可选，用于业务逻辑）
    consumeType: '抽奖次数' | '积分' // 消耗类型（可选，仅消耗记录）
  }
]

# 功能特性

# Slot 架构设计

组件采用 UI 与业务逻辑完全分离 的设计理念：

  1. expire-time Slot：完全自定义失效时间显示

    • 组件提供默认倒计时显示
    • 使用方可控制：显示条件、文案格式、时间格式化逻辑

  2. record-text Slot：完全自定义记录项文本显示

    • 组件只提供容器样式
    • 使用方控制：不同 Tab 的文案格式、高亮样式
    • 当 item.showViewButton 为 true 时，组件自动显示"查看奖励"按钮，不显示此 Slot

  3. record-tip Slot：完全自定义统计提示文案

    • 组件只提供容器样式
    • 使用方控制：不同 Tab 的统计逻辑、文案格式、高亮样式

设计优势：

  • ✅ UI 组件职责单一，只负责样式和结构
  • ✅ 业务逻辑灵活可控，不同项目可自定义实现
  • ✅ 通过 showViewButton 字段灵活控制按钮显示

# 其他特性

  1. 多Tab支持：支持获得记录、奖励记录、消耗记录等多个Tab切换
  2. 倒计时功能：显示积分失效倒计时，支持自定义格式
  3. 无限滚动：支持加载更多数据，带有加载状态提示
  4. 空状态处理：无数据时自动显示空状态页面
  5. 响应式设计：自动适配横竖版布局切换
  6. 统计显示：显示不同记录类型的累计统计数据

# 样式定制

组件样式使用 SCSS 编写，所有样式定义在 css/index.scss 文件中。如需定制样式，可以：

  1. 通过 customClass 属性：传入自定义类名覆盖默认样式
  2. 通过 styleName 属性：传入游戏主题样式类名（如 tip-hori 横版布局）
  3. 直接修改源码：在 css/index.scss 中修改样式定义

# 样式适配

组件支持横竖版自动切换，通过 style-name 传入游戏主题样式：

// 竖版
styleName: 'tip-pvp tip-vert'

// 横版  
styleName: 'tip-pvp tip-hori'

# 注意事项

  1. Slot 使用：组件采用 Slot 架构设计，record-text 和 record-tip Slot 由使用方提供业务逻辑
  2. 查看奖励按钮：通过记录数据的 showViewButton 字段控制显示，为 true 时显示按钮，为 false 或不存在时显示 record-text Slot 内容
  3. 样式类名：demo 文件应使用自定义样式类（如 demo-highlight），不使用组件内部的 BEM 类名
  4. 固定定位：组件使用固定定位实现全屏覆盖
  5. 横版适配：横版时会自动隐藏返回按钮组件和许愿按钮
  6. 倒计时回调：积分失效倒计时结束后会自动触发 record-refresh 事件
  7. 空数据状态：空数据状态会自动显示空状态页面
  8. 记录类型：不同记录类型通过 opertype 字段区分（1:获得次数 2:获得奖励 3:消耗抽奖次数 4:兑换扣除积分 5:过期清零）

← RecordDetail →