BizMemberCard 会员卡与积分

会员档案聚合卡：档案头（头像 / 等级徽标 / 卡号 / 掩码手机号 / 到期临期红标）+ 成长值晋级进度（当前级 → 下一级「再得 N 晋级」）+ 积分 / 储值 / 等级门槛三数值块 + 当前等级权益清单 + 积分流水（获取 / 消耗 / 过期三态色标，携带业务单号）+ 储值充值（快捷金额 + 自定义，本地叠加或 rechargeRequest 以服务端余额回填）。适用于零售 / 餐饮会员系统、健身房私教储值、连锁门店会员中台、积分商城兑换入口等场景，与 BizCouponCard（券）天然搭配。

基础用法

会员卡

陆

陆佳佳黄金

卡号 VIP-2024-06688 · 138****6688

成长值 6820 · 再得 13180 晋级 黑卡

12,500积分余额

¥ 860.50储值余额

5000+黄金级门槛

黄金 会员权益

积分累积 1.2 倍生日礼包免运费券 ×3专属客服

积分流水

订单消费返积分2026-10-25 18:24 · SO20261020001

+320

积分商城兑换 · 保温杯2026-10-23 09:11 · EX20261018003

-2000

签到连击 7 天奖励2026-10-20 08:00

+150

2025 年度积分过期清分2026-10-06 00:00

-500

积分抵现 · 订单立减 8 元2026-10-01 20:45 · SO20260930007

-800

黄金会员完整档案：晋级差值提示、四档权益标签、五条流水（含过期清分）。

<script setup lang="ts">
/** 基础用法：黄金会员档案 + 成长值晋级进度 + 权益清单 + 积分流水（获取/消耗/过期） */
import { ref } from 'vue'
import { BizMemberCard } from 'vue3-ep-biz-lib'
import type { BizMemberInfo, BizPointsRecord } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number, hm = '10:00') => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hm}`
}

const member = ref<BizMemberInfo>({
  name: '陆佳佳',
  phoneMasked: '138****6688',
  level: '黄金',
  growth: 6820,
  points: 12500,
  balance: 860.5,
  cardNo: 'VIP-2024-06688',
  expireAt: dayAt(120),
})

const records = ref<BizPointsRecord[]>([
  { id: 'p1', type: 'earn', points: 320, title: '订单消费返积分', no: 'SO20261020001', time: dayAt(-1, '18:24') },
  { id: 'p2', type: 'spend', points: 2000, title: '积分商城兑换 · 保温杯', no: 'EX20261018003', time: dayAt(-3, '09:11') },
  { id: 'p3', type: 'earn', points: 150, title: '签到连击 7 天奖励', time: dayAt(-6, '08:00') },
  { id: 'p4', type: 'expire', points: 500, title: '2025 年度积分过期清分', time: dayAt(-20, '00:00') },
  { id: 'p5', type: 'spend', points: 800, title: '积分抵现 · 订单立减 8 元', no: 'SO20260930007', time: dayAt(-25, '20:45') },
])
</script>

<template>
  <div style="max-width: 520px">
    <BizMemberCard :member="member" :points-records="records" />
  </div>
</template>

显示代码

等级阶梯

晋级中（白银 → 黄金）

测

测试会员白银

成长值 1320 · 再得 3680 晋级 黄金

1,320积分余额

1000+白银级门槛

白银 会员权益

积分累积生日礼包免运费券 ×1

顶级会员

顶

顶级会员黑卡

成长值 21500 · 已达最高等级

21,500积分余额

20000+黑卡级门槛

黑卡 会员权益

积分累积 1.5 倍生日双礼免运费不限量专属客服线下活动优先

自定义 levels 阶梯；晋级中显示「再得 N 晋级」，最高级显示「已达最高等级」。

<script setup lang="ts">
/** 等级阶梯：自定义 levels（普通/白银/黄金/黑卡），再得 N 成长值晋级提示；最高级显示「已达最高等级」 */
import { ref } from 'vue'
import { BizMemberCard } from 'vue3-ep-biz-lib'
import type { BizMemberInfo } from 'vue3-ep-biz-lib'

const mk = (growth: number, level: string): BizMemberInfo => ({ name: '测试会员', level, growth, points: growth })

const silver = ref(mk(1320, '白银'))
const black = ref({ ...mk(21500, '黑卡'), name: '顶级会员' })
</script>

<template>
  <div style="display: flex; gap: 16px; flex-wrap: wrap">
    <div style="flex: 1; min-width: 360px">
      <BizMemberCard title="晋级中（白银 → 黄金）" :member="silver" />
    </div>
    <div style="flex: 1; min-width: 360px">
      <BizMemberCard title="顶级会员" :member="black" />
    </div>
  </div>
</template>

显示代码

权益清单

会员卡

黑

黑卡会员黑卡

成长值 23000 · 已达最高等级

56,000积分余额

¥ 3,200.00储值余额

20000+黑卡级门槛

黑卡 会员权益

积分累积 1.5 倍生日双礼免运费不限量专属客服线下活动优先机场贵宾厅 ×2

本月贵宾厅权益待领取 →

当前等级 perks 标签化展示；perks-extra 槽位追加权益领取入口。

<script setup lang="ts">
/** 权益清单：当前等级 perks 标签化展示，perks-extra 槽位追加权益领取入口 */
import { ref } from 'vue'
import { BizMemberCard } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'
import type { BizMemberInfo } from 'vue3-ep-biz-lib'

const member = ref<BizMemberInfo>({ name: '黑卡会员', level: '黑卡', growth: 23000, points: 56000, balance: 3200 })
</script>

<template>
  <div style="max-width: 520px">
    <BizMemberCard
      :member="member"
      :levels="[
        { name: '普通', threshold: 0, perks: ['积分累积'] },
        { name: '黑卡', threshold: 20000, perks: ['积分累积 1.5 倍', '生日双礼', '免运费不限量', '专属客服', '线下活动优先', '机场贵宾厅 ×2'] },
      ]"
    >
      <template #perks-extra>
        <a style="margin-top: 8px; font-size: 12px; color: var(--el-color-primary); cursor: pointer" @click="ElMessage.success('权益领取已发放至券包')">
          本月贵宾厅权益待领取 →
        </a>
      </template>
    </BizMemberCard>
  </div>
</template>

显示代码

积分流水

会员卡

流

流水展示白银

成长值 1200 · 再得 3800 晋级 黄金

900积分余额

1000+白银级门槛

白银 会员权益

积分累积生日礼包免运费券 ×1

积分流水

消费返积分2026-10-26 12:00 · NO-001

+100

积分抵现2026-10-25 12:00 · NO-002

-300

评价奖励2026-10-24 12:00

+50

过期清分2026-10-23 12:00

-200

分享奖励2026-10-22 12:00

+80

积分兑换2026-10-21 12:00 · NO-003

-500

points-limit 控制展示条数；获取（绿 +）/ 消耗（橙 −）/ 过期（灰 −）三态，按时间倒序。

<script setup lang="ts">
/** 积分流水：points-limit 控制条数，获取 / 消耗 / 过期三态色标与业务单号 */
import { ref } from 'vue'
import { BizMemberCard } from 'vue3-ep-biz-lib'
import type { BizMemberInfo, BizPointsRecord } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number, hm = '12:00') => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hm}`
}

const member = ref<BizMemberInfo>({ name: '流水展示', level: '白银', growth: 1200, points: 900 })

const records = ref<BizPointsRecord[]>([
  { id: 'a', type: 'earn', points: 100, title: '消费返积分', no: 'NO-001', time: dayAt(0) },
  { id: 'b', type: 'spend', points: 300, title: '积分抵现', no: 'NO-002', time: dayAt(-1) },
  { id: 'c', type: 'earn', points: 50, title: '评价奖励', time: dayAt(-2) },
  { id: 'd', type: 'expire', points: 200, title: '过期清分', time: dayAt(-3) },
  { id: 'e', type: 'earn', points: 80, title: '分享奖励', time: dayAt(-4) },
  { id: 'f', type: 'spend', points: 500, title: '积分兑换', no: 'NO-003', time: dayAt(-5) },
])
</script>

<template>
  <div style="max-width: 520px">
    <BizMemberCard :member="member" :points-records="records" :points-limit="8" />
  </div>
</template>

显示代码

储值充值（本地）

会员卡

储

储值客户黄金

成长值 6000 · 再得 14000 晋级 黑卡

3,000积分余额

¥ 258.00储值余额

5000+黄金级门槛

黄金 会员权益

积分累积 1.2 倍生日礼包免运费券 ×3专属客服

快捷金额（¥100/300/500/1000）+ 自定义；本地模式直接叠加余额，recharge 事件外抛。

<script setup lang="ts">
/** 储值充值：快捷金额 + 自定义金额，本地模式直接叠加余额；recharge 事件外抛 */
import { ref } from 'vue'
import { BizMemberCard } from 'vue3-ep-biz-lib'
import type { BizMemberInfo, BizMemberRechargePayload } from 'vue3-ep-biz-lib'

const member = ref<BizMemberInfo>({ name: '储值客户', level: '黄金', growth: 6000, points: 3000, balance: 258 })
const log = ref<string[]>([])
</script>

<template>
  <div style="max-width: 520px">
    <BizMemberCard
      :member="member"
      @recharge="(p: BizMemberRechargePayload) => log.push(`+${p.amount} → ${p.balanceAfter}`)"
    />
    <p v-if="log.length" style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">充值流水：{{ log.join(' ｜ ') }}</p>
  </div>
</template>

显示代码

储值充值（远程）

会员卡

云

云端会员白银

成长值 1500 · 再得 3500 晋级 黄金

2,100积分余额

¥ 520.00储值余额

1000+白银级门槛

白银 会员权益

积分累积生日礼包免运费券 ×1

服务端余额 ¥520；单笔超过 ¥2000 演示服务端限额拒绝。

recharge-request 返回服务端最新余额回填（以服务端为准）；失败本地不变，演示单笔限额拒绝。

<script setup lang="ts">
/** 远程充值：rechargeRequest 返回服务端最新余额（以服务端为准回填），失败本地不变 */
import { ref } from 'vue'
import { BizMemberCard } from 'vue3-ep-biz-lib'
import type { BizMemberInfo } from 'vue3-ep-biz-lib'

const serverBalance = ref(520)

const member = ref<BizMemberInfo>({ name: '云端会员', level: '白银', growth: 1500, points: 2100, balance: 520 })

const rechargeRequest = (amount: number) =>
  new Promise<number>((resolve, reject) => {
    setTimeout(() => {
      if (amount > 2000) reject(new Error('limit'))
      else {
        serverBalance.value = Math.round((serverBalance.value + amount) * 100) / 100
        resolve(serverBalance.value)
      }
    }, 600)
  })
</script>

<template>
  <div style="max-width: 520px">
    <BizMemberCard :member="member" :recharge-request="rechargeRequest" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      服务端余额 ¥{{ serverBalance }}；单笔超过 ¥2000 演示服务端限额拒绝。
    </p>
  </div>
</template>

显示代码

到期临期提醒

会员卡

12 天后到期，续费享等级保留

临

临期会员黄金

成长值 5200 · 再得 14800 晋级 黑卡

800积分余额

5000+黄金级门槛

黄金 会员权益

积分累积 1.2 倍生日礼包免运费券 ×3专属客服

expireAt 在 expiring-days（默认 30 天）内显示红标「N 天后到期，续费享等级保留」。

<script setup lang="ts">
/** 到期临期提醒：expireAt 在 expiring-days（默认 30 天）内显示红标续费提示 */
import { ref } from 'vue'
import { BizMemberCard } from 'vue3-ep-biz-lib'
import type { BizMemberInfo } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number) => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
}

const member = ref<BizMemberInfo>({ name: '临期会员', level: '黄金', growth: 5200, points: 800, expireAt: dayAt(12) })
</script>

<template>
  <div style="max-width: 520px">
    <BizMemberCard :member="member" />
  </div>
</template>

显示代码

无储值形态

会员卡

积

积分制会员普通

成长值 320 · 再得 680 晋级 白银

450积分余额

0+普通级门槛

普通 会员权益

积分累积

不传 balance 时隐藏储值块与充值按钮，纯等级 + 积分视图（积分制会员）。

<script setup lang="ts">
/** 无储值形态：不传 balance 时隐藏储值块与充值按钮，纯等级 + 积分视图（积分制会员） */
import { ref } from 'vue'
import { BizMemberCard } from 'vue3-ep-biz-lib'
import type { BizMemberInfo } from 'vue3-ep-biz-lib'

const member = ref<BizMemberInfo>({ name: '积分制会员', level: '普通', growth: 320, points: 450 })
</script>

<template>
  <div style="max-width: 520px">
    <BizMemberCard :member="member" />
  </div>
</template>

显示代码

头像与档案

会员卡

林思远黄金

卡号 VIP-2023-00233 · 186****2233

成长值 7400 · 再得 12600 晋级 黑卡

9,800积分余额

¥ 120.00储值余额

5000+黄金级门槛

黄金 会员权益

积分累积 1.2 倍生日礼包免运费券 ×3专属客服

真实头像（cover 裁剪）+ 掩码手机号 + 卡号；缺省头像回落姓名首字圆形。

<script setup lang="ts">
/** 头像与档案形态：真实头像图 + 掩码手机号 + 卡号；缺省头像回落首字圆形 */
import { ref } from 'vue'
import { BizMemberCard } from 'vue3-ep-biz-lib'
import type { BizMemberInfo } from 'vue3-ep-biz-lib'

const member = ref<BizMemberInfo>({
  name: '林思远',
  avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  phoneMasked: '186****2233',
  level: '黄金',
  growth: 7400,
  points: 9800,
  balance: 120,
  cardNo: 'VIP-2023-00233',
})
</script>

<template>
  <div style="max-width: 520px">
    <BizMemberCard :member="member" />
  </div>
</template>

显示代码

只读小屏

会员识别成功

收

收银确认 · 王先生白银

成长值 1100 · 再得 3900 晋级 黄金

640积分余额

¥ 88.00储值余额

1000+白银级门槛

白银 会员权益

积分累积生日礼包免运费券 ×1

readonly 隐藏充值等操作，收银台 / 打印小票场景的会员识别确认卡。

<script setup lang="ts">
/** 只读小屏：readonly 隐藏充值等操作，收银台 / 打印小票场景的会员确认卡 */
import { ref } from 'vue'
import { BizMemberCard } from 'vue3-ep-biz-lib'
import type { BizMemberInfo } from 'vue3-ep-biz-lib'

const member = ref<BizMemberInfo>({ name: '收银确认 · 王先生', level: '白银', growth: 1100, points: 640, balance: 88 })
</script>

<template>
  <div style="max-width: 520px">
    <BizMemberCard title="会员识别成功" readonly :member="member" />
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
title	string	'会员卡'	面板标题
member	BizMemberInfo	必填	会员档案：{ name, phoneMasked?, avatar?, level, growth, points, balance?, cardNo?, expireAt? }
levels	BizMemberLevel[]	四级默认阶梯	等级阶梯（按 threshold 升序使用）：{ name, threshold, perks? }
points-records	BizPointsRecord[]	[]	积分流水：{ id, type: 'earn'|'spend'|'expire', points, title, no?, time }
points-limit	number	5	流水展示条数
allow-recharge	boolean	true	储值充值入口（无 balance 时不展示）
recharge-request	(amount: number) => Promise<number>	—	充值请求（远程模式，resolve 服务端最新余额）
expiring-days	number	30	会员到期临期阈值（天）
readonly	boolean	false	只读展示（隐藏充值与操作区）

Events

事件名	参数	说明
recharge	(payload: BizMemberRechargePayload)	充值成功（amount 与 balanceAfter）

Slots

插槽名	说明
header-extra	{ member } 标题区追加
perks-extra	{ level } 权益区底部追加（权益领取入口等）
actions-extra	{ member } 操作区追加（积分兑换等业务按钮）

Expose

属性/方法	说明
getLevelProgress	() => { current, next, growthToNext } 当前 / 下一等级与晋级差值

口径说明

• 等级定位：按 levels.threshold 升序后取 member.level 名称匹配；成长值进度 = (growth − 当前级门槛) / (下一级门槛 − 当前级门槛)，无下一级时恒为 100%。
• 充值口径：远程模式以 rechargeRequest resolve 的服务端余额为准回填；本地模式按分取整叠加；余额展示统一千分位两位小数。
• 临期口径：expireDays = ⌈(expireAt − now) / 天⌉，处于 0 ≤ expireDays ≤ expiring-days 时红标。
• 流水排序：按 time 倒序截取 points-limit 条；points 一律正数存储，正负号由 type 派生。