BizAmount 金额文本

金额展示规范化：分转元、千分位、精度控制、正负着色（正数绿 / 负数红）、人民币大写转换（元角分 / 零 / 整规则）。纯展示组件，用于电商与财务系统的金额统一渲染。

基础用法

分转元（129900 分 → ¥1,299.00）¥1,299.00

千分位大金额（¥123,456,789.56 + 大写）¥123,456,789.56壹亿贰仟叁佰肆拾伍万陆仟柒佰捌拾玖元伍角陆分

正负着色（退款红 / 收入绿）¥-86.50

精度 0（整数金额）¥2,000

零与纯小数（0 → 零元整 / 0.05 → 伍分）¥0.05伍分

零值（uppercase）¥0.00零元整

unit: 'cent' 自动分转元；uppercase 在主数值下方以小字追加人民币大写；color 按正负着色。

<script setup lang="ts">
/** 基础用法：分转元 / 千分位 / 大写 / 正负着色组合 */
import { BizAmount } from 'vue3-ep-biz-lib'

const rows = [
  { label: '分转元（129900 分 → ¥1,299.00）', props: { value: 129900, unit: 'cent' as const, symbol: '¥' } },
  { label: '千分位大金额（¥123,456,789.56 + 大写）', props: { value: '123456789.56', symbol: '¥', uppercase: true } },
  { label: '正负着色（退款红 / 收入绿）', props: { value: -86.5, color: true, symbol: '¥' } },
  { label: '精度 0（整数金额）', props: { value: 2000, precision: 0, symbol: '¥' } },
  { label: '零与纯小数（0 → 零元整 / 0.05 → 伍分）', props: { value: 0.05, uppercase: true, symbol: '¥' } },
]
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 14px; font-size: 15px">
    <div v-for="(row, index) in rows" :key="index" style="display: flex; gap: 12px; align-items: baseline">
      <span style="color: var(--el-text-color-secondary); font-size: 13px; min-width: 260px">{{ row.label }}</span>
      <BizAmount v-bind="row.props" />
    </div>
    <div style="display: flex; gap: 12px; align-items: baseline">
      <span style="color: var(--el-text-color-secondary); font-size: 13px; min-width: 260px">零值（uppercase）</span>
      <BizAmount :value="0" symbol="¥" uppercase />
    </div>
  </div>
</template>

显示代码

对账单与插槽定制

千分位分组

门店销售入账¥1,586,423.00（分账口径）

平台手续费¥-46,208.00（分账口径）

退款支出¥-230,050.00（分账口径）

合计（应计）¥1,310,215.00（分账口径）壹佰叁拾壹万贰佰壹拾伍元整

prefix 插槽替代默认符号：到手价 88.5元

对账单场景：后端分单位金额直接传入（unit="cent"），配合 color 正负着色、合计行 uppercase 大写；thousand 动态开关对比格式；prefix / suffix 插槽替代默认符号与追加单位。

<script setup lang="ts">
/** 进阶：对账单场景（分单位输入 + 正负着色 + 合计大写）、prefix/suffix 插槽、千分位动态开关 */
import { ref } from 'vue'
import { ElSwitch } from 'element-plus'
import { BizAmount } from 'vue3-ep-biz-lib'

const thousand = ref(true)

interface LedgerRow {
  label: string
  value: number
}

/** 后端分单位金额（cent），交给组件统一归一化为元 */
const ledger: LedgerRow[] = [
  { label: '门店销售入账', value: 158642300 },
  { label: '平台手续费', value: -4620800 },
  { label: '退款支出', value: -23005000 },
  { label: '合计（应计）', value: 131021500 },
]
</script>

<template>
  <div style="max-width: 500px">
    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px">
      <span style="font-size: 13px; color: var(--el-text-color-secondary)">千分位分组</span>
      <ElSwitch v-model="thousand" />
    </div>
    <div
      v-for="row in ledger"
      :key="row.label"
      style="display: flex; justify-content: space-between; align-items: baseline; padding: 8px 4px; border-bottom: 1px dashed var(--el-border-color-lighter)"
    >
      <span>{{ row.label }}</span>
      <BizAmount
        :value="row.value"
        unit="cent"
        :thousand="thousand"
        symbol="¥"
        color
        :uppercase="row.label.startsWith('合计')"
      >
        <template #suffix>
          <span style="font-size: 12px; color: var(--el-text-color-secondary)">（分账口径）</span>
        </template>
      </BizAmount>
    </div>
    <div style="margin-top: 12px; display: flex; gap: 8px; align-items: baseline">
      <span style="font-size: 13px; color: var(--el-text-color-secondary)">prefix 插槽替代默认符号：</span>
      <BizAmount :value="88.5" :precision="1">
        <template #prefix>
          <span style="color: var(--el-color-success); font-size: 13px">到手价 </span>
        </template>
        <template #suffix>
          <span style="font-size: 12px">元</span>
        </template>
      </BizAmount>
    </div>
  </div>
</template>

显示代码

合同 / 发票金额栏

合同总金额（含税）¥12,998.00壹万贰仟玖佰玖拾捌元整

未税金额¥1,150,265.49

税额（13%）¥149,534.51

违约金（冲抵）¥-2,000.00

本期应付¥12,978.00（已冲抵违约金）

合同金额拆解场景：分单位输入（unit="cent"）、税额拆分、违约金负数着色、合计行人民币大写与后缀插槽注释——财务凭证式金额栏一次配齐。

<script setup lang="ts">
/** 场景：合同/发票金额栏——含税拆解 + 人民币大写 + 负数（违约金）着色 */
import { BizAmount } from 'vue3-ep-biz-lib'

interface AmountRow {
  label: string
  value: number | string
  props: Record<string, unknown>
}

const rows: AmountRow[] = [
  { label: '合同总金额（含税）', value: 1299800, props: { unit: 'cent', symbol: '¥', uppercase: true } },
  { label: '未税金额', value: 1150265.49, props: { symbol: '¥' } },
  { label: '税额（13%）', value: 149534.51, props: { symbol: '¥' } },
  { label: '违约金（冲抵）', value: -2000, props: { symbol: '¥', color: true } },
]
</script>

<template>
  <div style="max-width: 480px; border: 1px solid var(--el-border-color-lighter); border-radius: 6px; padding: 4px 16px">
    <div
      v-for="row in rows"
      :key="row.label"
      style="display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px dashed var(--el-border-color-lighter)"
    >
      <span style="color: var(--el-text-color-regular)">{{ row.label }}</span>
      <BizAmount :value="row.value" v-bind="row.props" />
    </div>
    <div style="display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0">
      <span style="font-weight: 600">本期应付</span>
      <BizAmount :value="1297800" unit="cent" symbol="¥" color :precision="2">
        <template #suffix>
          <span style="font-size: 12px; color: var(--el-text-color-secondary)">（已冲抵违约金）</span>
        </template>
      </BizAmount>
    </div>
  </div>
</template>

显示代码

售后退款单

退款金额（用户实付）¥599.00

渠道手续费¥-5.00

商家实际承担¥-594.00负伍佰玖拾肆元整

售后场景：用户实付、渠道手续费、商家实际承担三层拆解——负数红字（color）+ 合计行人民币大写防篡改。

<script setup lang="ts">
/** 场景：售后退款单——手续费/实退计算、负数红字、大写防篡改 */
import { computed, ref } from 'vue'
import { BizAmount } from 'vue3-ep-biz-lib'

const refund = ref(59900)
const fee = ref(500)

const actual = computed(() => refund.value - fee.value)
</script>

<template>
  <div style="max-width: 440px; border: 1px solid var(--el-border-color-lighter); border-radius: 6px; padding: 4px 16px">
    <div style="display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--el-border-color-lighter)">
      <span>退款金额（用户实付）</span>
      <BizAmount :value="refund" unit="cent" symbol="¥" />
    </div>
    <div style="display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--el-border-color-lighter)">
      <span>渠道手续费</span>
      <BizAmount :value="-fee" unit="cent" symbol="¥" color />
    </div>
    <div style="display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0">
      <span style="font-weight: 600">商家实际承担</span>
      <BizAmount :value="-actual" unit="cent" symbol="¥" color uppercase />
    </div>
  </div>
</template>

显示代码

经营看板 KPI

今日 GMV¥26,184.00 较昨日 +¥1,284.00

今日订单数¥1,842 较昨日 -¥-96

客单价¥142.16 较昨日 +¥3.20

看板场景：GMV / 订单数 / 客单价三卡，主数值 22px 大字号 + 较昨日涨跌（color 正负着色），订单数 precision=0 整数。

<script setup lang="ts">
/** 场景：经营看板 KPI 卡——今日/昨日对比、正负着色、整数精度 */
import { BizAmount } from 'vue3-ep-biz-lib'

const kpis = [
  { label: '今日 GMV', value: 2618400, diff: 128400, unit: 'cent' as const },
  { label: '今日订单数', value: 1842, diff: -96, unit: 'yuan' as const, precision: 0, thousandFlag: true },
  { label: '客单价', value: 14216, diff: 320, unit: 'cent' as const },
]
</script>

<template>
  <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 720px">
    <div
      v-for="kpi in kpis"
      :key="kpi.label"
      style="display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--el-border-color-lighter); border-radius: 6px"
    >
      <span style="font-size: 13px; color: var(--el-text-color-secondary)">{{ kpi.label }}</span>
      <BizAmount
        :value="kpi.value"
        :unit="kpi.unit"
        symbol="¥"
        :precision="kpi.precision ?? 2"
        :thousand="kpi.thousandFlag ?? true"
        style="font-size: 22px; font-weight: 600"
      />
      <span style="font-size: 12px; color: var(--el-text-color-secondary)">
        较昨日
        <BizAmount :value="kpi.diff" :unit="kpi.unit" :precision="kpi.precision ?? 2" color :symbol="kpi.diff >= 0 ? '+¥' : '-¥'" />
      </span>
    </div>
  </div>
</template>

显示代码

工资条表格

薪酬场景：应发 / 社保 / 公积金 / 实发四列统一金额渲染——扣缴列负数红字，实发列加粗去千分位。

<script setup lang="ts">
/** 场景：工资条表格——应发/扣缴/实发列统一金额渲染 */
import { ElTable, ElTableColumn } from 'element-plus'
import { BizAmount } from 'vue3-ep-biz-lib'

type SalaryRow = {
  name: string
  gross: number
  insurance: number
  fund: number
  net: number
}

const rows: SalaryRow[] = [
  { name: '张三', gross: 189600, insurance: -14200, fund: -9500, net: 165900 },
  { name: '李四', gross: 236500, insurance: -17800, fund: -11800, net: 206900 },
  { name: '王五', gross: 158000, insurance: -11900, fund: -7900, net: 138200 },
]
</script>

<template>
  <ElTable :data="rows" size="small" border style="max-width: 640px">
    <ElTableColumn prop="name" label="姓名" width="80" />
    <ElTableColumn label="应发（元）" align="right">
      <template #default="{ row }"><BizAmount :value="row.gross" unit="cent" symbol="¥" /></template>
    </ElTableColumn>
    <ElTableColumn label="社保（元）" align="right">
      <template #default="{ row }"><BizAmount :value="row.insurance" unit="cent" symbol="¥" color /></template>
    </ElTableColumn>
    <ElTableColumn label="公积金（元）" align="right">
      <template #default="{ row }"><BizAmount :value="row.fund" unit="cent" symbol="¥" color /></template>
    </ElTableColumn>
    <ElTableColumn label="实发（元）" align="right">
      <template #default="{ row }"><BizAmount :value="row.net" unit="cent" symbol="¥" :thousand="false" style="font-weight: 600" /></template>
    </ElTableColumn>
  </ElTable>
</template>

显示代码

Props

属性名	类型	默认值	说明
value	number / string	—（必填）	金额数值（字符串支持千分位）
unit	'yuan' / 'cent'	'yuan'	输入单位，cent 自动转元
precision	number	2	小数位数
thousand	boolean	true	千分位分组
uppercase	boolean	false	追加人民币大写（小字行）
color	boolean	false	正负着色（正绿 / 负红）
symbol	string	''	货币符号前缀（如 '¥'）

Events

事件名	参数	说明
—	—	无自定义事件

Slots

插槽名	说明
prefix	数值前缀（默认 symbol）
suffix	数值后缀（如 '元'）

Expose

属性/方法	说明
yuanValue	归一化后的元数值
formatted	千分位格式化结果
uppercased	人民币大写结果