format amount split

src/pages/product/component/CustomerOrderRankChart.vue

@@ -13,7 +13,7 @@
 import type { EChartsOption } from "echarts";
 import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
 import type { GaoCustomerOrderRankView } from "@/types/GaoChart";
-import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
+import { buildHorizontalBarOption, formatChartYuan, getNumber } from "@/pages/product/component/chartUtils";
 
 defineOptions({
 	name: "CustomerOrderRankChart"
@@ -33,13 +33,14 @@ const chartOption = computed<EChartsOption>(() => {
 			type: "value",
 			axisLabel: {
 				color: "#52607a",
-				formatter: (value: number) => `${value.toLocaleString("zh-CN")} 元`
+				formatter: (value: number) => `${formatChartYuan(value)} 元`
 			},
 			splitLine: { lineStyle: { color: "rgba(148, 163, 184, .2)" } }
 		},
 		series: [{
 			name: "净收款",
 			type: "bar",
+			tooltip: { valueFormatter: value => `${formatChartYuan(Number(value))} 元` },
 			data: list.map(item => getNumber(item.netPaidAmount) / 100)
 		}]
 	};

src/pages/product/component/OrderDailyChart.vue

@@ -14,7 +14,7 @@
 import type { EChartsOption } from "echarts";
 import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
 import type { GaoSalesOrderDailyStatView } from "@/types/GaoChart";
-import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+import { buildAxisChartOption, formatChartYuan, formatQuantity, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
 
 defineOptions({
 	name: "OrderDailyChart"
@@ -48,7 +48,7 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
 				name: "元",
 				axisLabel: {
 					color: "#52607a",
-					formatter: (value: number) => value.toLocaleString("zh-CN")
+					formatter: (value: number) => formatChartYuan(value)
 				},
 				splitLine: { show: false }
 			}
@@ -58,6 +58,7 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
 				name: "订单数",
 				type: "bar",
 				yAxisIndex: 0,
+				tooltip: { valueFormatter: value => formatQuantity(Number(value)) },
 				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.orderCount))
 			},
 			{
@@ -65,6 +66,7 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
 				type: "line",
 				yAxisIndex: 1,
 				smooth: true,
+				tooltip: { valueFormatter: value => `${formatChartYuan(Number(value))} 元` },
 				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.saleAmount) / 100)
 			},
 			{
@@ -72,6 +74,7 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
 				type: "line",
 				yAxisIndex: 1,
 				smooth: true,
+				tooltip: { valueFormatter: value => `${formatChartYuan(Number(value))} 元` },
 				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.netPaidAmount) / 100)
 			}
 		]

src/pages/product/component/ProductSkuEditor.vue

@@ -148,7 +148,7 @@ import { BottomPopup } from "timi-tdesign-mobile";
 import type { ProductType } from "@/types/Product";
 import type { ProductSkuForm, ProductSpecForm, ProductSkuUnitForm } from "@/types/ProductEditor";
 import PhotoScroller from "@/components/PhotoScroller.vue";
-import { getProductSkuSpecEntries } from "@/utils/product";
+import { formatProductAmount, getProductSkuSpecEntries, parseProductAmount } from "@/utils/product";
 import { uploadPhotoList } from "@/utils/photo";
 
 defineOptions({ name: "ProductSkuEditor" });
@@ -195,7 +195,8 @@ function setSkuStatus(value: boolean | string | number): void {
 
 function getUnitSummary(unit: ProductSkuUnitForm): string {
 	const quantityText = unit.isBase ? "基础单位" : `1 ${unit.name || "单位"} = ${unit.baseQuantityPerUnit || "?"} 基础单位`;
-	const priceText = unit.salePriceText ? `￥${unit.salePriceText}` : "未定价";
+	const salePrice = parseProductAmount(unit.salePriceText);
+	const priceText = salePrice === undefined ? "未定价" : `￥${formatProductAmount(salePrice)}`;
 	const saleText = unit.allowSale ? "可销售" : "停售";
 	const purchaseText = unit.allowPurchase ? "可采购" : "禁采购";
 	return `${quantityText} · ${priceText} · ${saleText} · ${purchaseText}`;

src/pages/product/component/chartUtils.ts

@@ -1,4 +1,5 @@
 import type { EChartsOption } from "echarts";
+import { formatCentsAmount, formatYuanAmount } from "@/utils/money";
 
 export const chartColorList = ["#2563eb", "#0f766e", "#d97706", "#db2777", "#7c3aed", "#0891b2"];
 
@@ -175,10 +176,11 @@ export function formatQuantity(value?: number): string {
 }
 
 export function formatMoney(value?: number): string {
-	return `¥${(getNumber(value) / 100).toLocaleString("zh-CN", {
-		minimumFractionDigits: 2,
-		maximumFractionDigits: 2
-	})}`;
+	return `¥${formatCentsAmount(getNumber(value))}`;
+}
+
+export function formatChartYuan(value?: number): string {
+	return formatYuanAmount(getNumber(value));
 }
 
 export function getDateStart(date: Date): Date {