vue3 + js 金额处理

53 阅读1分钟

1 封装转化方法

const formatAmount = (value, decimals = 2) => {
  // 明确检查空值
  if (value === null || value === undefined || value === "") {
    return new Decimal(0);
  }
  
  try {
    return new Decimal(value).toDecimalPlaces(decimals);
  } catch (e) {
    console.warn("Invalid value for Decimal conversion:", value);
    return new Decimal(0);
  }
};

2 加减乘除

import Decimal from 'decimal.js';

const a = new Decimal(10.5);
const b = new Decimal(3.2);

// 加法 - 使用 .plus() 方法
const sum = a.plus(b); // 不是 a + b

// 减法 - 使用 .minus() 方法  
const difference = a.minus(b); // 不是 a - b

// 乘法 - 使用 .times() 方法
const product = a.times(b); // 不是 a * b

// 除法 - 使用 .dividedBy() 方法
const quotient = a.dividedBy(b); // 不是 a / b

3 转成数值类型

const regularNumber = decimalValue.toNumber(); // 转换为数字

4 比较运算

// 标准写法
amount.greaterThan(100)      // 是否大于100
amount.greaterThanOrEqualTo(100) // 是否大于等于100  
amount.lessThan(100)         // 是否小于100
amount.lessThanOrEqualTo(100)    // 是否小于等于100
amount.equals(100)           // 是否等于100

// 快捷写法
amount.gt(100)    // greaterThan 的简写
amount.gte(100)   // greaterThanOrEqualTo 的简写  
amount.lt(100)    // lessThan 的简写
amount.lte(100)   // lessThanOrEqualTo 的简写
amount.eq(100)    // equals 的简写

5 绝对值、零的用法

const changeAmount = computed(() => {
  return remainAmount.value.lessThan(0) ? remainAmount.value.abs() : new Decimal(0);
})

6 合计

const verifiedAmount = computed(() => {
  const paymentSum = (props.orderData.salesOrderPaymentList || []).reduce((sum, item) => {
    return sum.plus(proxy.formatAmount(item.payAmount));
  }, new Decimal(0)) ;
  return paymentSum.plus(proxy.formatAmount(props.orderData.zeroAmount));
})