@pisell/materials 1.10.12 → 1.10.14

package/lib/components/PisellProcedure/components/ProcedureHeader.js

@@ -15,7 +15,7 @@ react = require_runtime.__toESM(react);
 * @author Pisell Team
 */
 const ProcedureHeader = ({ headerProps, currentStep, className, goPrev, goToStep, onClose, onFirstStepBack, onBackConfirm, onCloseConfirm }) => {
-	var _modalConfig$config2, _modalConfig$config3;
+	var _mergedStepsProps$mob, _mergedStepsProps$mob2, _modalConfig$config2, _modalConfig$config3;
 	/** 确认弹窗类型（back: 返回确认，close: 关闭确认，null: 不显示） */
 	const [modalType, setModalType] = (0, react.useState)(null);
 	/** 目标步骤索引（用于步骤跳转，-1 表示返回上一步） */
@@ -194,8 +194,8 @@ const ProcedureHeader = ({ headerProps, currentStep, className, goPrev, goToStep
 			else handleBackClick();
 		}
 	}, actualLeftSlot), (headerProps === null || headerProps === void 0 ? void 0 : headerProps.showSteps) !== false && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-procedure-header__center" }, /* @__PURE__ */ react.default.createElement(require_index$2.default, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, mergedStepsProps), {}, {
-		mobileMode: "auto",
-		mobileBreakpoint: 744
+		mobileMode: (_mergedStepsProps$mob = mergedStepsProps.mobileMode) !== null && _mergedStepsProps$mob !== void 0 ? _mergedStepsProps$mob : "auto",
+		mobileBreakpoint: (_mergedStepsProps$mob2 = mergedStepsProps.mobileBreakpoint) !== null && _mergedStepsProps$mob2 !== void 0 ? _mergedStepsProps$mob2 : 744
 	}))), showActualRightArea && /* @__PURE__ */ react.default.createElement("div", {
 		className: "pisell-procedure-header__right",
 		onClick: () => {

package/lib/components/productCard/cartSkuCard/components/AmountFooter/index.js

@@ -11,9 +11,10 @@ classnames = require_runtime.__toESM(classnames);
 require("./index.less");
 //#region src/components/productCard/cartSkuCard/components/AmountFooter/index.tsx
 const Footer = ({ item, hideDivider, type, isOnlyTotal }) => {
-	const { total, origin_total, symbol, tip, num, discount_reason } = item;
+	const { total, origin_total, symbol, tip, num, discount_reason, amountFormatter } = item;
 	const weighingInfo = (0, _pisell_utils.resolveWeighingSnapshot)(item);
 	const formatFooterAmount = (amount, precision = 2) => {
+		if (amountFormatter) return amountFormatter(amount, precision);
 		if (!weighingInfo) return require_utils._formatAmount(amount, symbol, precision);
 		return (0, _pisell_utils.formatAmountWithOptions)(amount, symbol, {
 			precision,

package/lib/components/productCard/cartSkuCard/components/AmountFooter/index.less

@@ -23,7 +23,7 @@
   }
 
   &__footer-price-wrap--weighing {
-    font-size: var(--pisell-cart-sku-card-physical-text-height, 4mm);
+    font-size: var(--pisell-cart-sku-card-weighing-summary-font-size, 18px);
     line-height: 1.3;
     letter-spacing: -0.02em;
   }

package/lib/components/productCard/cartSkuCard/components/Gift/index.js

@@ -20,7 +20,6 @@ const Gift = (props) => {
 		return /* @__PURE__ */ react.default.createElement("div", { className: `product-cover-text` }, displayText);
 	}, [displayGifts]);
 	if (!isShow) return null;
-	console.log("Gift777", props, selectedCount);
 	return /* @__PURE__ */ react.default.createElement("div", {
 		className: `${prefixCls}`,
 		onClick

package/lib/components/productCard/cartSkuCard/components/basicInfo/index.js

@@ -13,7 +13,8 @@ require("./index.less");
 //#region src/components/productCard/cartSkuCard/components/basicInfo/index.tsx
 const BasicInfo = (props) => {
 	const { isShowImage, isShowQuantityBadge = true, dataSource = {}, style, isMainProduct, type, maxSpecsCount = 1, isBundle, showFooter, isShowOriginalPrice = false, isShowEditProduct = false, onEditProduct, disabledEditClick = false } = props;
-	const { image, bundle, options, product_option_string, name, price, symbol, total = 0, origin_total = 0, num = 1, holder_id, isFormSubject, totalDifference = 0 } = dataSource;
+	const { image, bundle, options, product_option_string, name, price, symbol, total = 0, origin_total = 0, num = 1, holder_id, isFormSubject, totalDifference = 0, amountFormatter } = dataSource;
+	const formatProductAmount = (value, precision = 2) => amountFormatter ? amountFormatter(value, precision) : (0, _pisell_utils.formatAmount)(value, precision, symbol);
 	const renderNumTag = () => {
 		return /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)(`num-tag`, { "is-main": isMainProduct }) }, num < 100 ? num : "99+");
 	};
@@ -35,7 +36,7 @@ const BasicInfo = (props) => {
 	};
 	const renderProductPrice = () => {
 		if (hasWeighingInfo) return null;
-		return (0, _pisell_utils.formatAmount)(price, 2, symbol);
+		return formatProductAmount(price !== null && price !== void 0 ? price : 0);
 	};
 	const renderImage = () => {
 		if (!isShowImage) return null;
@@ -81,12 +82,12 @@ const BasicInfo = (props) => {
 		return /* @__PURE__ */ react.default.createElement("div", {
 			className: basicInfoClassName,
 			style: style || {}
-		}, isShowQuantityBadge ? renderNumTag() : null, renderImage(), !isShowImage || !image && !name ? /* @__PURE__ */ react.default.createElement("div", { style: { width: 20 } }) : null, /* @__PURE__ */ react.default.createElement("div", { className: `product-info product-info-a9` }, /* @__PURE__ */ react.default.createElement("div", { className: `product-basic-info-wrap` }, /* @__PURE__ */ react.default.createElement("div", { className: `product-basic-info ${isBundle ? "row" : ""}` }, /* @__PURE__ */ react.default.createElement("div", { className: `product-name ${renderEdit ? "product-name-edit" : ""}` }, name), /* @__PURE__ */ react.default.createElement("div", { className: `product-price` }, /* @__PURE__ */ react.default.createElement("span", null, renderProductPrice()), _isShowOriginalPrice ? /* @__PURE__ */ react.default.createElement("span", { className: `original-price` }, (0, _pisell_utils.formatAmount)(origin_total, 2, symbol)) : null)), renderProductMeta()), renderEdit));
+		}, isShowQuantityBadge ? renderNumTag() : null, renderImage(), !isShowImage || !image && !name ? /* @__PURE__ */ react.default.createElement("div", { style: { width: 20 } }) : null, /* @__PURE__ */ react.default.createElement("div", { className: `product-info product-info-a9` }, /* @__PURE__ */ react.default.createElement("div", { className: `product-basic-info-wrap` }, /* @__PURE__ */ react.default.createElement("div", { className: `product-basic-info ${isBundle ? "row" : ""}` }, /* @__PURE__ */ react.default.createElement("div", { className: `product-name ${renderEdit ? "product-name-edit" : ""}` }, name), /* @__PURE__ */ react.default.createElement("div", { className: `product-price` }, /* @__PURE__ */ react.default.createElement("span", null, renderProductPrice()), _isShowOriginalPrice ? /* @__PURE__ */ react.default.createElement("span", { className: `original-price` }, formatProductAmount(origin_total)) : null)), renderProductMeta()), renderEdit));
 	}
 	return /* @__PURE__ */ react.default.createElement("div", {
 		className: basicInfoClassName,
 		style: style || {}
-	}, isShowQuantityBadge ? renderNumTag() : null, renderImage(), !isShowImage || !image && !name ? /* @__PURE__ */ react.default.createElement("div", { style: { width: 20 } }) : null, /* @__PURE__ */ react.default.createElement("div", { className: `product-info` }, /* @__PURE__ */ react.default.createElement("div", { className: `product-name` }, name), hasProductMeta ? renderProductMeta() : /* @__PURE__ */ react.default.createElement("div", { className: `product-price` }, renderProductPrice())), /* @__PURE__ */ react.default.createElement("div", { className: `product-amount` }, /* @__PURE__ */ react.default.createElement("div", { className: `total-amont` }, (0, _pisell_utils.formatAmount)(total * num - (totalDifference !== null && totalDifference !== void 0 ? totalDifference : 0), 2, symbol)), origin_total && Number(total) !== Number(origin_total) ? /* @__PURE__ */ react.default.createElement("div", { className: `origin-amount` }, (0, _pisell_utils.formatAmount)(origin_total * num, 2, symbol)) : null));
+	}, isShowQuantityBadge ? renderNumTag() : null, renderImage(), !isShowImage || !image && !name ? /* @__PURE__ */ react.default.createElement("div", { style: { width: 20 } }) : null, /* @__PURE__ */ react.default.createElement("div", { className: `product-info` }, /* @__PURE__ */ react.default.createElement("div", { className: `product-name` }, name), hasProductMeta ? renderProductMeta() : /* @__PURE__ */ react.default.createElement("div", { className: `product-price` }, renderProductPrice())), /* @__PURE__ */ react.default.createElement("div", { className: `product-amount` }, /* @__PURE__ */ react.default.createElement("div", { className: `total-amont` }, formatProductAmount(total * num - (totalDifference !== null && totalDifference !== void 0 ? totalDifference : 0))), origin_total && Number(total) !== Number(origin_total) ? /* @__PURE__ */ react.default.createElement("div", { className: `origin-amount` }, formatProductAmount(origin_total * num)) : null));
 };
 //#endregion
 exports.default = BasicInfo;

package/lib/components/productCard/cartSkuCard/components/packages/index.js

@@ -11,7 +11,7 @@ let antd = require("antd");
 require("./index.less");
 //#region src/components/productCard/cartSkuCard/components/packages/index.tsx
 const Packages = ({ isShowImage, isShowQuantityBadge, dataSource = {}, type }) => {
-	const { bundle = [], symbol = "$" } = dataSource;
+	const { bundle = [], symbol = "$", amountFormatter } = dataSource;
 	const showFooter = (0, react.useCallback)((_bundle) => {
 		const { options = [], bundle = [] } = _bundle;
 		const hasSpecs = (bundle === null || bundle === void 0 ? void 0 : bundle.length) || (options === null || options === void 0 ? void 0 : options.length);
@@ -31,7 +31,8 @@ const Packages = ({ isShowImage, isShowQuantityBadge, dataSource = {}, type }) =
 				dataSource: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, item), {}, {
 					name: item.title,
 					image: item.cover,
-					symbol
+					symbol,
+					amountFormatter
 				}),
 				type,
 				isBundle: true,
@@ -39,7 +40,8 @@ const Packages = ({ isShowImage, isShowQuantityBadge, dataSource = {}, type }) =
 			}), showFooter(item) ? /* @__PURE__ */ react.default.createElement(require_index$1.default, {
 				item: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, item), {}, {
 					total: item === null || item === void 0 ? void 0 : item.price,
-					symbol: dataSource === null || dataSource === void 0 ? void 0 : dataSource.symbol
+					symbol: dataSource === null || dataSource === void 0 ? void 0 : dataSource.symbol,
+					amountFormatter
 				}),
 				hideDivider: false,
 				type: "total"

package/lib/components/productCard/cartSkuCard/components/specs/index.js

@@ -8,7 +8,8 @@ require("./index.less");
 //#region src/components/productCard/cartSkuCard/components/specs/index.tsx
 const Specs = (props) => {
 	const { dataSource = {}, maxSpecsCount = 1, type } = props;
-	const { bundle, options, product_option_string, symbol } = dataSource;
+	const { bundle, options, product_option_string, symbol, amountFormatter } = dataSource;
+	const formatSpecAmount = (value) => amountFormatter ? amountFormatter(value, 2) : `${symbol || ""}${value}`;
 	const more = /* @__PURE__ */ react.default.createElement("div", { className: `${require_index$1.PREFIX}__specs-more` }, _pisell_utils.locales.getText("pisell2.cart.sku-card.more"));
 	/**
 	* @description: 渲染多规格字符串
@@ -19,7 +20,8 @@ const Specs = (props) => {
 	};
 	if (type === "a9") return /* @__PURE__ */ react.default.createElement("div", { className: `${require_index$1.PREFIX}__specs-a9-wrap` }, product_option_string ? /* @__PURE__ */ react.default.createElement("div", { className: "option-string-wrap" }, renderOptionString()) : null, options && (options === null || options === void 0 ? void 0 : options.length) > 0 ? /* @__PURE__ */ react.default.createElement(require_index.default, {
 		options,
-		amountSymbol: symbol
+		amountSymbol: symbol,
+		amountFormatter
 	}) : null);
 	if (Array.isArray(bundle) && (bundle === null || bundle === void 0 ? void 0 : bundle.length) > 0) {
 		const displayItems = bundle.slice(0, maxSpecsCount);
@@ -31,7 +33,7 @@ const Specs = (props) => {
 		return /* @__PURE__ */ react.default.createElement("div", { className: `${require_index$1.PREFIX}__specs` }, displayItems.map((item, index) => /* @__PURE__ */ react.default.createElement("div", {
 			className: "spec-item",
 			key: index
-		}, /* @__PURE__ */ react.default.createElement("span", { className: "spec-name" }, item.name), /* @__PURE__ */ react.default.createElement("span", { className: "spec-num" }, /* @__PURE__ */ react.default.createElement("span", null, symbol, item.price), /* @__PURE__ */ react.default.createElement("span", null), "x", /* @__PURE__ */ react.default.createElement("span", null, item.num)))), options.length > maxSpecsCount ? more : null);
+		}, /* @__PURE__ */ react.default.createElement("span", { className: "spec-name" }, item.name), /* @__PURE__ */ react.default.createElement("span", { className: "spec-num" }, /* @__PURE__ */ react.default.createElement("span", null, formatSpecAmount(item.price)), /* @__PURE__ */ react.default.createElement("span", null), "x", /* @__PURE__ */ react.default.createElement("span", null, item.num)))), options.length > maxSpecsCount ? more : null);
 	}
 	return null;
 };

package/lib/components/productCard/cartSkuCard/components/specs/index.less

@@ -47,9 +47,9 @@
 
   .pisell-cart-sku-card__product-meta--weighing & {
     .pisell-lowcode-packages-product-bundle-option {
-      font-size: var(--pisell-cart-sku-card-physical-text-height, 4mm);
+      font-size: var(--pisell-cart-sku-card-weighing-meta-font-size, 18px);
       line-height: 1.3;
-      letter-spacing: -0.04em;
+      letter-spacing: -0.01em;
     }
   }
 
@@ -62,8 +62,13 @@
 
 .pisell-cart-sku-card__product-meta--weighing {
   .pisell-cart-sku-card__specs {
-    font-size: var(--pisell-cart-sku-card-physical-text-height, 4mm);
+    font-size: var(--pisell-cart-sku-card-weighing-meta-font-size, 18px);
     line-height: 1.3;
-    letter-spacing: -0.04em;
+    letter-spacing: -0.01em;
+  }
+
+  .pisell-cart-sku-card__specs-more {
+    font-size: 14px;
+    line-height: 18px;
   }
 }

package/lib/components/productCard/cartSkuCard/components/swipeAction/index.js

@@ -52,6 +52,10 @@ const SwipeAction = (0, react.forwardRef)((p, ref) => {
 	const rootRef = (0, react.useRef)(null);
 	const leftRef = (0, react.useRef)(null);
 	const rightRef = (0, react.useRef)(null);
+	const resizeObserverRef = (0, react.useRef)(null);
+	const touchOutsideCleanupRef = (0, react.useRef)(null);
+	const latestPropsRef = (0, react.useRef)(props);
+	latestPropsRef.current = props;
 	const [containerHeight, setContainerHeight] = (0, react.useState)(0);
 	function getWidth(ref) {
 		const element = ref.current;
@@ -72,6 +76,29 @@ const SwipeAction = (0, react.forwardRef)((p, ref) => {
 	function getRootHeight() {
 		return getHeight(rootRef);
 	}
+	function syncActionHeightClasses(height) {
+		const rightContainer = rightRef.current;
+		if (!rightContainer) return;
+		const heightSize = height > 180 ? "large" : height > 120 ? "medium" : "small";
+		rightContainer.classList.remove(`${classPrefix}-height-large`, `${classPrefix}-height-medium`, `${classPrefix}-height-small`);
+		rightContainer.classList.add(`${classPrefix}-height-${heightSize}`);
+		Array.from(rightContainer.children).forEach((element) => {
+			element.classList.remove(`${classPrefix}-action-height-large`, `${classPrefix}-action-height-medium`, `${classPrefix}-action-height-small`);
+			element.classList.add(`${classPrefix}-action-height-${heightSize}`);
+		});
+	}
+	function updateHeight() {
+		const height = getRootHeight();
+		syncActionHeightClasses(height);
+		setContainerHeight((currentHeight) => currentHeight === height ? currentHeight : height);
+	}
+	function startHeightTracking() {
+		if (resizeObserverRef.current) return;
+		updateHeight();
+		const resizeObserver = new ResizeObserver(updateHeight);
+		resizeObserverRef.current = resizeObserver;
+		if (rootRef.current) resizeObserver.observe(rootRef.current);
+	}
 	const [{ x }, api] = (0, _react_spring_web.useSpring)(() => ({
 		x: 0,
 		config: {
@@ -86,9 +113,43 @@ const SwipeAction = (0, react.forwardRef)((p, ref) => {
 		(_dragCancelRef$curren = dragCancelRef.current) === null || _dragCancelRef$curren === void 0 || _dragCancelRef$curren.call(dragCancelRef);
 		draggingRef.current = false;
 	}
+	function stopTouchOutsideListener() {
+		const cleanup = touchOutsideCleanupRef.current;
+		if (!cleanup) return;
+		cleanup();
+		touchOutsideCleanupRef.current = null;
+	}
+	function startTouchOutsideListener() {
+		if (!latestPropsRef.current.closeOnTouchOutside || touchOutsideCleanupRef.current) return;
+		const eventType = "ontouchstart" in window ? "touchstart" : "mousedown";
+		const handle = (e) => {
+			const latestProps = latestPropsRef.current;
+			if (e.target && latestProps.escapeDom) {
+				const container = document.querySelector(latestProps.escapeDom);
+				if (container === null || container === void 0 ? void 0 : container.contains(e.target)) return;
+			}
+			if (x.get() === 0) {
+				stopTouchOutsideListener();
+				return;
+			}
+			const root = rootRef.current;
+			if (root && !root.contains(e.target)) {
+				var _latestProps$onClose;
+				api.start({ x: 0 });
+				forceCancelDrag();
+				stopTouchOutsideListener();
+				(_latestProps$onClose = latestProps.onClose) === null || _latestProps$onClose === void 0 || _latestProps$onClose.call(latestProps);
+			}
+		};
+		document.addEventListener(eventType, handle);
+		touchOutsideCleanupRef.current = () => {
+			document.removeEventListener(eventType, handle);
+		};
+	}
 	const bind = (0, _use_gesture_react_dist_use_gesture_react_cjs.useDrag)((state) => {
 		dragCancelRef.current = state.cancel;
 		if (!state.intentional) return;
+		startHeightTracking();
 		if (state.down) draggingRef.current = true;
 		if (!draggingRef.current) return;
 		const [offsetX] = state.offset;
@@ -107,8 +168,9 @@ const SwipeAction = (0, react.forwardRef)((p, ref) => {
 			api.start({ x: targetX });
 			if (targetX !== 0) {
 				var _p$onActionsReveal;
+				startTouchOutsideListener();
 				(_p$onActionsReveal = p.onActionsReveal) === null || _p$onActionsReveal === void 0 || _p$onActionsReveal.call(p, targetX > 0 ? "left" : "right");
-			}
+			} else stopTouchOutsideListener();
 			window.setTimeout(() => {
 				draggingRef.current = false;
 			});
@@ -134,46 +196,32 @@ const SwipeAction = (0, react.forwardRef)((p, ref) => {
 		var _props$onClose;
 		api.start({ x: 0 });
 		forceCancelDrag();
+		stopTouchOutsideListener();
 		(_props$onClose = props.onClose) === null || _props$onClose === void 0 || _props$onClose.call(props);
 	};
 	(0, react.useImperativeHandle)(ref, () => ({
 		show: (side = "right") => {
 			var _p$onActionsReveal2;
+			startHeightTracking();
 			if (side === "right") api.start({ x: -getRightWidth() });
 			else if (side === "left") api.start({ x: getLeftWidth() });
+			startTouchOutsideListener();
 			(_p$onActionsReveal2 = p.onActionsReveal) === null || _p$onActionsReveal2 === void 0 || _p$onActionsReveal2.call(p, side);
 		},
 		close
 	}));
 	(0, react.useEffect)(() => {
-		const updateHeight = () => {
-			setContainerHeight(getRootHeight());
-		};
-		updateHeight();
-		const resizeObserver = new ResizeObserver(updateHeight);
-		if (rootRef.current) resizeObserver.observe(rootRef.current);
 		return () => {
-			resizeObserver.disconnect();
+			var _resizeObserverRef$cu;
+			(_resizeObserverRef$cu = resizeObserverRef.current) === null || _resizeObserverRef$cu === void 0 || _resizeObserverRef$cu.disconnect();
+			resizeObserverRef.current = null;
+			stopTouchOutsideListener();
 		};
 	}, []);
 	(0, react.useEffect)(() => {
-		if (!props.closeOnTouchOutside) return;
-		function handle(e) {
-			if (e.target && props.escapeDom) {
-				const container = document.querySelector(props.escapeDom);
-				if (container === null || container === void 0 ? void 0 : container.contains(e.target)) return;
-			}
-			if (x.get() === 0) return;
-			const root = rootRef.current;
-			if (root && !root.contains(e.target)) close();
-		}
-		if ("ontouchstart" in window) document.addEventListener("touchstart", handle);
-		else document.addEventListener("mousedown", handle);
-		return () => {
-			document.removeEventListener("touchstart", handle);
-			document.removeEventListener("mousedown", handle);
-		};
-	}, [props.closeOnTouchOutside, props.escapeDom]);
+		if (!props.closeOnTouchOutside) stopTouchOutsideListener();
+		else if (x.get() !== 0) startTouchOutsideListener();
+	}, [props.closeOnTouchOutside]);
 	const getRightContainerClass = () => {
 		const baseClass = `${classPrefix}-actions ${classPrefix}-actions-right`;
 		if (containerHeight > 180) return `${baseClass} ${classPrefix}-height-large`;
@@ -204,6 +252,9 @@ const SwipeAction = (0, react.forwardRef)((p, ref) => {
 	}
 	return withNativeProps(props, /* @__PURE__ */ react.default.createElement("div", require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ className: classPrefix }, bind()), {}, {
 		ref: rootRef,
+		onPointerDownCapture: startHeightTracking,
+		onTouchStartCapture: startHeightTracking,
+		onMouseDownCapture: startHeightTracking,
 		onClickCapture: (e) => {
 			if (draggingRef.current) {
 				e.stopPropagation();

package/lib/components/productCard/cartSkuCard/index.js

@@ -66,7 +66,6 @@ const CartSkuCard = (props) => {
 	const useOpenNoteRef = (0, react.useRef)();
 	const context = require_useEngineContext.default();
 	_pisell_utils.locales.init(require_locales.default, ((_context$appHelper$ut = context.appHelper.utils) === null || _context$appHelper$ut === void 0 || (_context$appHelper$ut = _context$appHelper$ut.storage) === null || _context$appHelper$ut === void 0 ? void 0 : _context$appHelper$ut.get("umi_locale")) || "en");
-	console.log("prodcut props", props);
 	const { isShowAction, actionText } = dataSource;
 	const _rightActions = (0, react.useMemo)(() => {
 		const deleteAction = {

package/lib/components/productCard/cartSkuCard/index.less

@@ -36,6 +36,9 @@
     var(--pisell-cart-sku-card-weighing-font-base) *
       var(--pisell-cart-sku-card-device-font-scale)
   );
+  // 称重卡片的辅助信息保持易读，但不与毛重/净重争夺视觉层级。
+  --pisell-cart-sku-card-weighing-meta-font-size: 18px;
+  --pisell-cart-sku-card-weighing-summary-font-size: 18px;
 
   padding: 4px 8px 4px 4px;
   border-radius: inherit;

package/lib/components/productCard/components/Packages/components/options/index.js

@@ -5,12 +5,13 @@ react = require_runtime.__toESM(react);
 require("./index.less");
 //#region src/components/productCard/components/Packages/components/options/index.tsx
 const prefix = "pisell-lowcode-";
-const Options = ({ options, amountSymbol }) => {
+const Options = ({ options, amountSymbol, amountFormatter }) => {
+	const formatOptionAmount = (value) => amountFormatter ? amountFormatter(value, 2) : require_utils._formatAmount(value, amountSymbol);
 	return (options === null || options === void 0 ? void 0 : options.length) > 0 ? /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}packages-product-bundle-option` }, options.map((option, index) => {
 		return /* @__PURE__ */ react.default.createElement("div", {
 			key: option.id,
 			className: `${prefix}packages-product-bundle-option-item`
-		}, /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}packages-product-bundle-option-item-left` }, /* @__PURE__ */ react.default.createElement("span", null, option === null || option === void 0 ? void 0 : option.name), /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}packages-product-bundle-option-item-left-amount` }, /* @__PURE__ */ react.default.createElement("span", null, require_utils._formatAmount(option === null || option === void 0 ? void 0 : option.price, amountSymbol)), /* @__PURE__ */ react.default.createElement("span", null, "×"), /* @__PURE__ */ react.default.createElement("span", null, option === null || option === void 0 ? void 0 : option.num))), /* @__PURE__ */ react.default.createElement("span", { className: `${prefix}packages-product-bundle-option-item-amount` }, require_utils._formatAmount((option === null || option === void 0 ? void 0 : option.price) * (option === null || option === void 0 ? void 0 : option.num), amountSymbol)));
+		}, /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}packages-product-bundle-option-item-left` }, /* @__PURE__ */ react.default.createElement("span", null, option === null || option === void 0 ? void 0 : option.name), /* @__PURE__ */ react.default.createElement("div", { className: `${prefix}packages-product-bundle-option-item-left-amount` }, /* @__PURE__ */ react.default.createElement("span", null, formatOptionAmount(option === null || option === void 0 ? void 0 : option.price)), /* @__PURE__ */ react.default.createElement("span", null, "×"), /* @__PURE__ */ react.default.createElement("span", null, option === null || option === void 0 ? void 0 : option.num))), /* @__PURE__ */ react.default.createElement("span", { className: `${prefix}packages-product-bundle-option-item-amount` }, formatOptionAmount((option === null || option === void 0 ? void 0 : option.price) * (option === null || option === void 0 ? void 0 : option.num))));
 	})) : null;
 };
 //#endregion

package/lib/components/productCard/components/Time/components/SelectHolderMultiple/index.js

@@ -33,9 +33,7 @@ const SelectHolderMultiple = ({ lists, value, onChange, holderMode, isShowAddHol
 			return acc;
 		}, {});
 	}, [lists]);
-	console.log(optionsMap, value, "optionsMap");
 	const handleClose = (item) => {
-		console.log("item", item, value);
 		handleChange(value.filter((d) => d !== item));
 	};
 	const renderHolder = () => {

package/lib/components/productCard/lineItem/BookingLineItem.js

@@ -66,8 +66,9 @@ const getStatusOption = (status, statusOptions = []) => {
 	};
 };
 const BookingLineItem = (props) => {
-	var _ref, _ref2, _dataSource$promotion;
+	var _ref, _ref2, _dataSource$promotion, _dataSource$giftData;
 	const { dataSource, type, cartSkuType, isShowBookingHeader, relatedProductDataSource, addTimeProductDataSources = [], rightActions = [], rightActionsDisplay = "swipe", escapeDom, isShowImage, isShowQuantityBadge = true, isFormSubject, isShowDelete, isShowInlineDelete = isShowDelete, isShowNote, isShowAmountFooter, disabledClick, disabledEdit, statusOptions = [], statusLoading = false, statusDisabled = false, isShowRelatedProduct = true, holderOptions, onBookingStatusChange, onAddTimeProductCard, onAction, onDelete, onNote, onCard, onPromotion, onGift } = props, other = require_objectWithoutProperties._objectWithoutProperties(props, _excluded);
+	const shouldRenderRelatedProduct = isShowRelatedProduct && Boolean(relatedProductDataSource);
 	const [isAddTimeProductsExpanded, setIsAddTimeProductsExpanded] = (0, react.useState)(false);
 	const { isShowAction, actionText } = dataSource;
 	const currentStatus = (0, react.useMemo)(() => getStatusOption(dataSource === null || dataSource === void 0 ? void 0 : dataSource.appointment_status, statusOptions), [dataSource === null || dataSource === void 0 ? void 0 : dataSource.appointment_status, statusOptions]);
@@ -118,7 +119,7 @@ const BookingLineItem = (props) => {
 	const renderProductCard = (productDataSource, source, options = {}) => {
 		var _productDataSource$pr;
 		if (!productDataSource || (productDataSource === null || productDataSource === void 0 ? void 0 : productDataSource.isGift)) return null;
-		const { showProductPromotion = true } = options;
+		const { showProductPromotion = true, showAmountFooter = true } = options;
 		const productPromotion = (productDataSource === null || productDataSource === void 0 || (_productDataSource$pr = productDataSource.promotions) === null || _productDataSource$pr === void 0 ? void 0 : _productDataSource$pr.length) ? /* @__PURE__ */ react.default.createElement(require_index$7.default, {
 			promotions: productDataSource.promotions,
 			onClick: (item) => onPromotion === null || onPromotion === void 0 ? void 0 : onPromotion(item)
@@ -134,7 +135,7 @@ const BookingLineItem = (props) => {
 			isShowImage,
 			isShowQuantityBadge,
 			type: cartSkuType
-		}), isShowAmountFooter ? /* @__PURE__ */ react.default.createElement(require_index$6.default, {
+		}), isShowAmountFooter && showAmountFooter ? /* @__PURE__ */ react.default.createElement(require_index$6.default, {
 			item: productDataSource,
 			hideDivider: false,
 			type: "total"
@@ -174,7 +175,8 @@ const BookingLineItem = (props) => {
 		}, _pisell_utils.locales.getText(isAddTimeProductsExpanded ? "pisell2.line-item.collapse" : "pisell2.line-item.show-all")) : null));
 	};
 	if (dataSource === null || dataSource === void 0 ? void 0 : dataSource.isGift) return null;
-	const cardContent = /* @__PURE__ */ react.default.createElement("div", {
+	const shouldRenderFullWidthAmountFooter = rightActionsDisplay === "inline" && isShowAmountFooter && shouldRenderRelatedProduct;
+	const cardContent = /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", {
 		className: (0, classnames.default)(PREFIX, `${PREFIX}--booking`, `${PREFIX}--${type}`),
 		onClick: (e) => {
 			if (disabledClick) return;
@@ -195,16 +197,23 @@ const BookingLineItem = (props) => {
 		dataSource,
 		holderOptions: resolvedHolderOptions,
 		isFormSubject: resolvedIsFormSubject
-	}) : null), !isShowBookingHeader ? renderDeleteButton(true) : null), isShowRelatedProduct && relatedProductDataSource ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(antd.Divider, { style: { margin: 0 } }), /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}__related-product` }, /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}__related-product-card` }, renderProductCard(relatedProductDataSource, dataSource, { showProductPromotion: false }), renderPromotion, isShowAction && actionText ? /* @__PURE__ */ react.default.createElement(require_index$1.default, {
+	}) : null), !isShowBookingHeader ? renderDeleteButton(true) : null), shouldRenderRelatedProduct ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(antd.Divider, { style: { margin: 0 } }), /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}__related-product` }, /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}__related-product-card` }, renderProductCard(relatedProductDataSource, dataSource, {
+		showProductPromotion: false,
+		showAmountFooter: !shouldRenderFullWidthAmountFooter
+	}), renderPromotion, isShowAction && actionText ? /* @__PURE__ */ react.default.createElement(require_index$1.default, {
 		item: dataSource,
 		onAction: () => onAction === null || onAction === void 0 ? void 0 : onAction(dataSource)
-	}) : null))) : null, renderAddTimeProducts());
-	return /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)(`${PREFIX}-wrapper-container`, { [`${PREFIX}-wrapper-container--inline`]: rightActionsDisplay === "inline" }) }, rightActionsDisplay === "inline" ? /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)(`${PREFIX}-wrapper`, `${PREFIX}-wrapper--inline`) }, /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}-inline-content` }, cardContent), /* @__PURE__ */ react.default.createElement(require_index$9.default, { actions: bookingRightActions })) : /* @__PURE__ */ react.default.createElement(require_index$4.SwipeAction, {
+	}) : null))) : null, renderAddTimeProducts()));
+	return /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)(`${PREFIX}-wrapper-container`, { [`${PREFIX}-wrapper-container--inline`]: rightActionsDisplay === "inline" }) }, rightActionsDisplay === "inline" ? /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)(`${PREFIX}-wrapper`, `${PREFIX}-wrapper--inline`) }, /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}-inline-main` }, /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}-inline-content` }, cardContent), /* @__PURE__ */ react.default.createElement(require_index$9.default, { actions: bookingRightActions })), shouldRenderFullWidthAmountFooter ? /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}__inline-amount-footer` }, /* @__PURE__ */ react.default.createElement(require_index$6.default, {
+		item: relatedProductDataSource,
+		hideDivider: false,
+		type: "total"
+	})) : null) : /* @__PURE__ */ react.default.createElement(require_index$4.SwipeAction, {
 		closeOnAction: false,
 		className: (0, classnames.default)(`${PREFIX}-wrapper`),
 		rightActions: bookingRightActions,
 		escapeDom
-	}, cardContent), /* @__PURE__ */ react.default.createElement(require_index$8.default, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, (dataSource === null || dataSource === void 0 ? void 0 : dataSource.giftData) || {}), {}, { onClick: () => onGift === null || onGift === void 0 ? void 0 : onGift(dataSource) })));
+	}, cardContent), (dataSource === null || dataSource === void 0 || (_dataSource$giftData = dataSource.giftData) === null || _dataSource$giftData === void 0 ? void 0 : _dataSource$giftData.isShow) ? /* @__PURE__ */ react.default.createElement(require_index$8.default, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, dataSource.giftData), {}, { onClick: () => onGift === null || onGift === void 0 ? void 0 : onGift(dataSource) })) : null);
 };
 //#endregion
 exports.default = BookingLineItem;

package/lib/components/productCard/lineItem/index.js

@@ -8,9 +8,9 @@ const require_locales = require("../cartSkuCard/locales.js");
 const require_index = require("../cartSkuCard/index.js");
 const require_locales$1 = require("./locales.js");
 const require_BookingLineItem = require("./BookingLineItem.js");
+const require_useInitLocalesOnce = require("../../../hooks/useInitLocalesOnce.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
-let _pisell_utils = require("@pisell/utils");
 require("./index.less");
 //#region src/components/productCard/lineItem/index.tsx
 const _excluded = [
@@ -40,7 +40,9 @@ const _excluded = [
 	"onNote",
 	"onCard",
 	"onPromotion",
-	"onGift"
+	"onGift",
+	"symbol",
+	"amountFormatter"
 ];
 const isBookingItem = (dataSource) => {
 	var _dataSource$_extend;
@@ -77,7 +79,7 @@ const convertBundleOption = (option, translationOriginal) => {
 		num: (_ref = (_option$num = option.num) !== null && _option$num !== void 0 ? _option$num : option.quantity) !== null && _ref !== void 0 ? _ref : 1
 	});
 };
-const convertBundle = (bundle, translationOriginal) => {
+const convertBundle = (bundle, translationOriginal, amountFormatter) => {
 	const options = (bundle.option || []).map((option) => convertBundleOption(option, translationOriginal));
 	const bundlePrice = bundle.price_type === "markdown" && Number.isFinite(Number(bundle.price)) ? -Math.abs(Number(bundle.price)) : bundle.price;
 	return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, bundle), {}, {
@@ -94,6 +96,7 @@ const convertBundle = (bundle, translationOriginal) => {
 		custom_price_type_ext: bundle.price_type_ext,
 		options,
 		option: options,
+		amountFormatter,
 		_origin: bundle
 	});
 };
@@ -124,10 +127,10 @@ const mapLineItemOptions = (options, translationOriginal) => options.map((option
 		num: (_ref2 = (_option$num2 = option.num) !== null && _option$num2 !== void 0 ? _option$num2 : option.quantity) !== null && _ref2 !== void 0 ? _ref2 : 1
 	});
 });
-const convertProductToLineItemProduct = (product, translationOriginal, symbol) => {
+const convertProductToLineItemProduct = (product, translationOriginal, symbol, amountFormatter) => {
 	var _product$metadata2, _ref3, _product$num, _ref4, _product$num2, _product$metadata3, _product$metadata4, _product$discount_lis, _product$discount_lis2, _product$metadata5, _product$metadata6, _ref5, _product$num3;
 	const title = translateText(product.product_title || product.title, translationOriginal);
-	const bundle = (product.product_bundle || []).map((bundleItem) => convertBundle(bundleItem, translationOriginal));
+	const bundle = (product.product_bundle || []).map((bundleItem) => convertBundle(bundleItem, translationOriginal, amountFormatter));
 	const lineOriginTotal = resolveLineOriginTotal(product);
 	const lineOptions = mapLineItemOptions(resolveLineItemOptions(product), translationOriginal);
 	return {
@@ -151,6 +154,7 @@ const convertProductToLineItemProduct = (product, translationOriginal, symbol) =
 		payment_price: product.payment_price,
 		tax_fee: product.tax_fee,
 		symbol,
+		amountFormatter,
 		note: product.note,
 		product_sku: product.product_sku,
 		product_bundle: bundle,
@@ -180,33 +184,36 @@ const convertProductToLineItemProduct = (product, translationOriginal, symbol) =
 };
 const LineItem = (props) => {
 	var _context$appHelper$ut, _context$appHelper$ut2, _context$appHelper$ut3, _context$appHelper$ut4, _dataSource$_extend2, _dataSource$_extend4;
-	const { dataSource = require_status.defaultValue.dataSource, itemType, type = "a9", isShowBookingHeader, rightActions = [], rightActionsDisplay = "swipe", escapeDom, isShowImage = require_status.defaultValue.isShowImage, isShowDelete = require_status.defaultValue.isShowDelete, isShowInlineDelete = isShowDelete, isShowNote = require_status.defaultValue.isShowNote, isShowAmountFooter = require_status.defaultValue.isShowAmountFooter, disabledClick = require_status.defaultValue.disabledClick, disabledEdit = require_status.defaultValue.disabledEdit, statusOptions = [], statusLoading = false, statusDisabled = false, isShowRelatedProduct = true, holderOptions, onBookingStatusChange, onAddTimeProductCard, onAction, onDelete, onNote, onCard, onPromotion, onGift } = props, other = require_objectWithoutProperties._objectWithoutProperties(props, _excluded);
-	console.log("LineItem xxxxxxxxx", props);
+	const { dataSource = require_status.defaultValue.dataSource, itemType, type = "a9", isShowBookingHeader, rightActions = [], rightActionsDisplay = "swipe", escapeDom, isShowImage = require_status.defaultValue.isShowImage, isShowDelete = require_status.defaultValue.isShowDelete, isShowInlineDelete = isShowDelete, isShowNote = require_status.defaultValue.isShowNote, isShowAmountFooter = require_status.defaultValue.isShowAmountFooter, disabledClick = require_status.defaultValue.disabledClick, disabledEdit = require_status.defaultValue.disabledEdit, statusOptions = [], statusLoading = false, statusDisabled = false, isShowRelatedProduct = true, holderOptions, onBookingStatusChange, onAddTimeProductCard, onAction, onDelete, onNote, onCard, onPromotion, onGift, symbol: amountSymbol, amountFormatter } = props, other = require_objectWithoutProperties._objectWithoutProperties(props, _excluded);
+	const itemKind = itemType || (isBookingItem(dataSource) ? "booking" : "product");
 	const context = require_useEngineContext.default();
 	const translationOriginal = require_useTranslationOriginal.default();
-	const symbol = context.appHelper.utils.getSymbolic();
+	const symbol = amountSymbol || context.appHelper.utils.getSymbolic();
 	const locale = ((_context$appHelper$ut = context.appHelper.utils) === null || _context$appHelper$ut === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut.getApp) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut2.call(_context$appHelper$ut)) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut2.locales) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut3 = _context$appHelper$ut2.getLocale) === null || _context$appHelper$ut3 === void 0 ? void 0 : _context$appHelper$ut3.call(_context$appHelper$ut2)) || ((_context$appHelper$ut4 = context.appHelper.utils) === null || _context$appHelper$ut4 === void 0 || (_context$appHelper$ut4 = _context$appHelper$ut4.storage) === null || _context$appHelper$ut4 === void 0 ? void 0 : _context$appHelper$ut4.get("umi_locale")) || "en-US";
-	_pisell_utils.locales.init(require_locales$1.default, locale);
-	_pisell_utils.locales.init(require_locales.default, locale);
-	const itemKind = itemType || (isBookingItem(dataSource) ? "booking" : "product");
-	const productDataSource = (0, react.useMemo)(() => convertProductToLineItemProduct(dataSource, translationOriginal, symbol), [
+	require_useInitLocalesOnce.default(require_locales$1.default, locale);
+	require_useInitLocalesOnce.default(require_locales.default, locale);
+	const productDataSource = (0, react.useMemo)(() => itemKind === "product" ? convertProductToLineItemProduct(dataSource, translationOriginal, symbol, amountFormatter) : null, [
+		amountFormatter,
 		dataSource,
+		itemKind,
 		symbol,
 		translationOriginal
 	]);
 	const relatedProduct = dataSource === null || dataSource === void 0 || (_dataSource$_extend2 = dataSource._extend) === null || _dataSource$_extend2 === void 0 ? void 0 : _dataSource$_extend2.product;
 	const relatedProductDataSource = (0, react.useMemo)(() => {
 		if (!relatedProduct) return null;
-		return convertProductToLineItemProduct(relatedProduct, translationOriginal, symbol);
+		return convertProductToLineItemProduct(relatedProduct, translationOriginal, symbol, amountFormatter);
 	}, [
+		amountFormatter,
 		relatedProduct,
 		symbol,
 		translationOriginal
 	]);
 	const addTimeProductDataSources = (0, react.useMemo)(() => {
 		var _dataSource$_extend3;
-		return (Array.isArray(dataSource === null || dataSource === void 0 || (_dataSource$_extend3 = dataSource._extend) === null || _dataSource$_extend3 === void 0 ? void 0 : _dataSource$_extend3.addTimeProduct) ? dataSource._extend.addTimeProduct : []).map((item) => convertProductToLineItemProduct(item, translationOriginal, symbol));
+		return (Array.isArray(dataSource === null || dataSource === void 0 || (_dataSource$_extend3 = dataSource._extend) === null || _dataSource$_extend3 === void 0 ? void 0 : _dataSource$_extend3.addTimeProduct) ? dataSource._extend.addTimeProduct : []).map((item) => convertProductToLineItemProduct(item, translationOriginal, symbol, amountFormatter));
 	}, [
+		amountFormatter,
 		dataSource === null || dataSource === void 0 || (_dataSource$_extend4 = dataSource._extend) === null || _dataSource$_extend4 === void 0 ? void 0 : _dataSource$_extend4.addTimeProduct,
 		symbol,
 		translationOriginal

package/lib/components/productCard/lineItem/index.less

@@ -15,10 +15,16 @@
     box-sizing: border-box;
     width: 100%;
     display: flex;
-    align-items: stretch;
+    flex-direction: column;
   }
 }
 
+.pisell-line-item-inline-main {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+}
+
 .pisell-line-item-inline-content {
   min-width: 0;
   flex: 1;
@@ -249,6 +255,13 @@
     padding: 6px 8px 8px;
   }
 
+  // inline 操作仅占上方主体，价格栏放在其下方并占满整个预约卡。
+  &__inline-amount-footer {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 8px 4px;
+  }
+
   &__section-title {
     color: #101828;
     font-size: 12px;