@pisell/private-materials 6.2.35 → 6.2.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/lowcode/assets-daily.json +11 -11
- package/build/lowcode/assets-dev.json +2 -2
- package/build/lowcode/assets-prod.json +11 -11
- package/build/lowcode/index.js +1 -1
- package/build/lowcode/meta.js +1 -1
- package/build/lowcode/preview.js +13 -29
- package/build/lowcode/render/default/view.css +1 -1
- package/build/lowcode/render/default/view.js +6 -6
- package/build/lowcode/view.css +1 -1
- package/build/lowcode/view.js +8 -8
- package/es/components/appointmentBooking/components/Content/index.js +1 -1
- package/es/components/appointmentBooking/components/Content/index.less +3 -3
- package/es/components/appointmentBooking/components/Services/index.js +2 -2
- package/es/components/appointmentBooking/index.js +8 -2
- package/es/components/booking/components/voucher/index.js +5 -0
- package/es/components/booking/deposit/ClientItem/index.js +1 -1
- package/es/components/booking/deposit/DepositItem/index.js +1 -1
- package/es/components/booking/forms/single/RenderValueById.d.ts +1 -0
- package/es/components/booking/forms/single/RenderValueById.js +68 -17
- package/es/components/booking/forms/single/index.less +67 -1
- package/es/components/booking/hooks/useQuotation.js +1 -1
- package/es/components/booking/info/clientVariant/utils.d.ts +2 -0
- package/es/components/booking/info/clientVariant/utils.js +7 -0
- package/es/components/booking/info/clientVariant/vertical/index.js +3 -2
- package/es/components/booking/info2/service/addService/utils.js +2 -1
- package/es/components/booking/info2/service/addTimeModal/index.js +0 -1
- package/es/components/booking/info2/service/editService/index.js +37 -29
- package/es/components/booking/info2/utilsByBooking.js +4 -4
- package/es/components/booking/locales.d.ts +3 -0
- package/es/components/booking/locales.js +6 -3
- package/es/components/booking/materiels/duration/index.js +1 -1
- package/es/components/booking/materiels/startTime/index.d.ts +1 -0
- package/es/components/booking/materiels/startTime/index.js +1 -1
- package/es/components/booking/utils.js +3 -3
- package/es/components/eftposPay/amount.d.ts +1 -1
- package/es/components/eftposPay/device.d.ts +1 -1
- package/es/components/eftposPay/store/index.d.ts +3 -3
- package/es/components/eventBooking/index.js +8 -1
- package/es/components/productSelect/components/TabProduct/index.js +7 -2
- package/es/components/schedules/utils.d.ts +1 -1
- package/es/components/shoppingCart/components/Cart/Product.js +2 -1
- package/es/components/ticketBooking/components/addServiceVariant/addService.js +172 -91
- package/es/components/ticketBooking/components/timeBar/index.js +3 -3
- package/es/components/ticketBooking/utils/index.d.ts +3 -1
- package/es/components/ticketBooking/utils/index.js +18 -2
- package/es/hooks/useWindowSize.js +8 -1
- package/es/plus/productSelect/CategoryTabs/CategorySkeleton.d.ts +10 -0
- package/es/plus/productSelect/CategoryTabs/CategorySkeleton.js +29 -0
- package/es/plus/productSelect/CategoryTabs/CategorySkeleton.less +30 -0
- package/es/plus/productSelect/CategoryTabs/index.d.ts +18 -0
- package/es/plus/productSelect/CategoryTabs/index.js +171 -0
- package/es/plus/productSelect/ProductCard/ProductCardSkeleton.d.ts +10 -0
- package/es/plus/productSelect/ProductCard/ProductCardSkeleton.js +37 -0
- package/es/plus/productSelect/ProductCard/ProductCardSkeleton.less +81 -0
- package/es/plus/productSelect/ProductCard/index.d.ts +45 -0
- package/es/plus/productSelect/ProductCard/index.js +170 -0
- package/es/plus/productSelect/ProductCard/index.less +270 -0
- package/es/plus/productSelect/ProductList/gridComponents.d.ts +44 -0
- package/es/plus/productSelect/ProductList/gridComponents.js +149 -0
- package/es/plus/productSelect/ProductList/index.d.ts +22 -0
- package/es/plus/productSelect/ProductList/index.js +72 -0
- package/es/plus/productSelect/ProductList/index.less +0 -0
- package/es/plus/productSelect/components/IntersectionObserver.d.ts +42 -0
- package/es/plus/productSelect/components/IntersectionObserver.js +276 -0
- package/es/plus/productSelect/components/TabsStructure/TabsStructure.d.ts +30 -0
- package/es/plus/productSelect/components/TabsStructure/TabsStructure.js +357 -0
- package/es/plus/productSelect/components/TabsStructure/TabsStructure.less +224 -0
- package/es/plus/productSelect/components/TabsStructure/hooks.d.ts +22 -0
- package/es/plus/productSelect/components/TabsStructure/hooks.js +243 -0
- package/es/plus/productSelect/components/TabsStructure/index.d.ts +5 -0
- package/es/plus/productSelect/components/TabsStructure/index.js +13 -0
- package/es/plus/productSelect/components/TabsStructure/styles.d.ts +47 -0
- package/es/plus/productSelect/components/TabsStructure/styles.js +87 -0
- package/es/plus/productSelect/components/TabsStructure/types.d.ts +105 -0
- package/es/plus/productSelect/components/TabsStructure/types.js +1 -0
- package/es/plus/productSelect/components/TabsStructure/utils.d.ts +12 -0
- package/es/plus/productSelect/components/TabsStructure/utils.js +56 -0
- package/es/plus/productSelect/components/pisellPriceText/index.d.ts +11 -0
- package/es/plus/productSelect/components/pisellPriceText/index.js +43 -0
- package/es/plus/productSelect/hooks/useToken.d.ts +18 -0
- package/es/plus/productSelect/hooks/useToken.js +34 -0
- package/es/plus/productSelect/index.d.ts +31 -0
- package/es/plus/productSelect/index.js +270 -0
- package/es/plus/productSelect/index.less +56 -0
- package/es/plus/productSelect/locales.d.ts +18 -0
- package/es/plus/productSelect/locales.js +17 -0
- package/es/plus/productSelect/theme/token.d.ts +17 -0
- package/es/plus/productSelect/theme/token.js +19 -0
- package/es/plus/productSelect/utils.d.ts +39 -0
- package/es/plus/productSelect/utils.js +162 -0
- package/es/pro/pisellNumberSelector/index.js +3 -3
- package/es/pro/pisellPhoneKeyboard/index.js +1 -1
- package/es/utils/index.d.ts +1 -1
- package/lib/components/appointmentBooking/components/Content/index.js +1 -1
- package/lib/components/appointmentBooking/components/Content/index.less +3 -3
- package/lib/components/appointmentBooking/components/Services/index.js +2 -2
- package/lib/components/appointmentBooking/index.js +6 -1
- package/lib/components/booking/components/voucher/index.js +5 -0
- package/lib/components/booking/deposit/ClientItem/index.js +1 -1
- package/lib/components/booking/deposit/DepositItem/index.js +1 -1
- package/lib/components/booking/forms/single/RenderValueById.d.ts +1 -0
- package/lib/components/booking/forms/single/RenderValueById.js +37 -9
- package/lib/components/booking/forms/single/index.less +67 -1
- package/lib/components/booking/hooks/useQuotation.js +1 -1
- package/lib/components/booking/info/clientVariant/utils.d.ts +2 -0
- package/lib/components/booking/info/clientVariant/utils.js +13 -2
- package/lib/components/booking/info/clientVariant/vertical/index.js +7 -6
- package/lib/components/booking/info2/service/addService/utils.js +3 -3
- package/lib/components/booking/info2/service/addTimeModal/index.js +0 -1
- package/lib/components/booking/info2/service/editService/index.js +22 -12
- package/lib/components/booking/info2/utilsByBooking.js +7 -8
- package/lib/components/booking/locales.d.ts +3 -0
- package/lib/components/booking/locales.js +6 -3
- package/lib/components/booking/materiels/duration/index.js +1 -1
- package/lib/components/booking/materiels/startTime/index.d.ts +1 -0
- package/lib/components/booking/materiels/startTime/index.js +1 -1
- package/lib/components/booking/utils.js +3 -3
- package/lib/components/eftposPay/amount.d.ts +1 -1
- package/lib/components/eftposPay/device.d.ts +1 -1
- package/lib/components/eftposPay/store/index.d.ts +3 -3
- package/lib/components/eventBooking/index.js +6 -1
- package/lib/components/productSelect/components/TabProduct/index.js +7 -1
- package/lib/components/schedules/utils.d.ts +1 -1
- package/lib/components/shoppingCart/components/Cart/Product.js +7 -4
- package/lib/components/ticketBooking/components/addServiceVariant/addService.js +87 -14
- package/lib/components/ticketBooking/components/timeBar/index.js +89 -70
- package/lib/components/ticketBooking/utils/index.d.ts +3 -1
- package/lib/components/ticketBooking/utils/index.js +21 -0
- package/lib/hooks/useWindowSize.js +6 -1
- package/lib/plus/productSelect/CategoryTabs/CategorySkeleton.d.ts +10 -0
- package/lib/plus/productSelect/CategoryTabs/CategorySkeleton.js +62 -0
- package/lib/plus/productSelect/CategoryTabs/CategorySkeleton.less +30 -0
- package/lib/plus/productSelect/CategoryTabs/index.d.ts +18 -0
- package/lib/plus/productSelect/CategoryTabs/index.js +183 -0
- package/lib/plus/productSelect/ProductCard/ProductCardSkeleton.d.ts +10 -0
- package/lib/plus/productSelect/ProductCard/ProductCardSkeleton.js +58 -0
- package/lib/plus/productSelect/ProductCard/ProductCardSkeleton.less +81 -0
- package/lib/plus/productSelect/ProductCard/index.d.ts +45 -0
- package/lib/plus/productSelect/ProductCard/index.js +184 -0
- package/lib/plus/productSelect/ProductCard/index.less +270 -0
- package/lib/plus/productSelect/ProductList/gridComponents.d.ts +44 -0
- package/lib/plus/productSelect/ProductList/gridComponents.js +148 -0
- package/lib/plus/productSelect/ProductList/index.d.ts +22 -0
- package/lib/plus/productSelect/ProductList/index.js +86 -0
- package/lib/plus/productSelect/ProductList/index.less +0 -0
- package/lib/plus/productSelect/components/IntersectionObserver.d.ts +42 -0
- package/lib/plus/productSelect/components/IntersectionObserver.js +269 -0
- package/lib/plus/productSelect/components/TabsStructure/TabsStructure.d.ts +30 -0
- package/lib/plus/productSelect/components/TabsStructure/TabsStructure.js +393 -0
- package/lib/plus/productSelect/components/TabsStructure/TabsStructure.less +224 -0
- package/lib/plus/productSelect/components/TabsStructure/hooks.d.ts +22 -0
- package/lib/plus/productSelect/components/TabsStructure/hooks.js +209 -0
- package/lib/plus/productSelect/components/TabsStructure/index.d.ts +5 -0
- package/lib/plus/productSelect/components/TabsStructure/index.js +92 -0
- package/lib/plus/productSelect/components/TabsStructure/styles.d.ts +47 -0
- package/lib/plus/productSelect/components/TabsStructure/styles.js +122 -0
- package/lib/plus/productSelect/components/TabsStructure/types.d.ts +105 -0
- package/lib/plus/productSelect/components/TabsStructure/types.js +17 -0
- package/lib/plus/productSelect/components/TabsStructure/utils.d.ts +12 -0
- package/lib/plus/productSelect/components/TabsStructure/utils.js +72 -0
- package/lib/plus/productSelect/components/pisellPriceText/index.d.ts +11 -0
- package/lib/plus/productSelect/components/pisellPriceText/index.js +72 -0
- package/lib/plus/productSelect/hooks/useToken.d.ts +18 -0
- package/lib/plus/productSelect/hooks/useToken.js +50 -0
- package/lib/plus/productSelect/index.d.ts +31 -0
- package/lib/plus/productSelect/index.js +299 -0
- package/lib/plus/productSelect/index.less +56 -0
- package/lib/plus/productSelect/locales.d.ts +18 -0
- package/lib/plus/productSelect/locales.js +41 -0
- package/lib/plus/productSelect/theme/token.d.ts +17 -0
- package/lib/plus/productSelect/theme/token.js +47 -0
- package/lib/plus/productSelect/utils.d.ts +39 -0
- package/lib/plus/productSelect/utils.js +138 -0
- package/lib/pro/pisellNumberSelector/index.js +3 -3
- package/lib/pro/pisellPhoneKeyboard/index.js +1 -1
- package/lib/utils/index.d.ts +1 -1
- package/package.json +4 -4
@@ -0,0 +1,81 @@
|
|
1
|
+
.product-card-skeleton {
|
2
|
+
display: flex;
|
3
|
+
gap: 12px;
|
4
|
+
padding: 8px;
|
5
|
+
border-radius: 12px;
|
6
|
+
background: #fff;
|
7
|
+
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
|
8
|
+
|
9
|
+
&__cover {
|
10
|
+
width: 180px;
|
11
|
+
height: 126px;
|
12
|
+
border-radius: 6px;
|
13
|
+
flex-shrink: 0;
|
14
|
+
}
|
15
|
+
|
16
|
+
&__content {
|
17
|
+
flex: 1;
|
18
|
+
display: flex;
|
19
|
+
flex-direction: column;
|
20
|
+
gap: 8px;
|
21
|
+
}
|
22
|
+
|
23
|
+
&__title {
|
24
|
+
height: 20px;
|
25
|
+
border-radius: 4px;
|
26
|
+
}
|
27
|
+
|
28
|
+
&__specs {
|
29
|
+
display: flex;
|
30
|
+
gap: 6px;
|
31
|
+
flex-wrap: wrap;
|
32
|
+
}
|
33
|
+
|
34
|
+
&__spec-item {
|
35
|
+
height: 24px;
|
36
|
+
width: 60px;
|
37
|
+
border-radius: 12px;
|
38
|
+
}
|
39
|
+
|
40
|
+
&__price {
|
41
|
+
height: 18px;
|
42
|
+
width: 60%;
|
43
|
+
border-radius: 4px;
|
44
|
+
}
|
45
|
+
}
|
46
|
+
|
47
|
+
.skeleton-item {
|
48
|
+
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
49
|
+
background-size: 200% 100%;
|
50
|
+
display: block;
|
51
|
+
position: relative;
|
52
|
+
overflow: hidden;
|
53
|
+
|
54
|
+
&--animated {
|
55
|
+
animation: skeleton-loading 1.5s ease-in-out infinite;
|
56
|
+
}
|
57
|
+
}
|
58
|
+
|
59
|
+
@keyframes skeleton-loading {
|
60
|
+
0% {
|
61
|
+
background-position: 200% 0;
|
62
|
+
}
|
63
|
+
100% {
|
64
|
+
background-position: -200% 0;
|
65
|
+
}
|
66
|
+
}
|
67
|
+
|
68
|
+
// 网格布局中的产品卡片骨架屏样式调整
|
69
|
+
.product-grid-wrapper {
|
70
|
+
.product-card-skeleton {
|
71
|
+
min-width: unset;
|
72
|
+
width: 100%;
|
73
|
+
}
|
74
|
+
}
|
75
|
+
|
76
|
+
// 列表布局中的产品卡片骨架屏样式调整
|
77
|
+
.product-list-wrapper {
|
78
|
+
.product-card-skeleton {
|
79
|
+
width: 100%;
|
80
|
+
}
|
81
|
+
}
|
@@ -0,0 +1,45 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import ProductCardSkeleton from './ProductCardSkeleton';
|
3
|
+
import './index.less';
|
4
|
+
declare type BoolConfigVal = 0 | 1;
|
5
|
+
export interface ProductCardConfig {
|
6
|
+
isProductCover?: BoolConfigVal;
|
7
|
+
imgWidth?: string;
|
8
|
+
imgHeight?: string;
|
9
|
+
radius?: number;
|
10
|
+
isTitle?: BoolConfigVal;
|
11
|
+
isSubtitle?: BoolConfigVal;
|
12
|
+
showSpec?: boolean;
|
13
|
+
isTag?: BoolConfigVal;
|
14
|
+
isPrice?: BoolConfigVal;
|
15
|
+
isOriginPrice?: BoolConfigVal;
|
16
|
+
showZeroPrice?: boolean;
|
17
|
+
showMarketingTag?: boolean;
|
18
|
+
showRemark?: boolean;
|
19
|
+
isStock?: BoolConfigVal;
|
20
|
+
}
|
21
|
+
export interface ProductCardProps {
|
22
|
+
item: any;
|
23
|
+
index: number;
|
24
|
+
context?: {
|
25
|
+
onItemIntersectionIn: (item: any) => void;
|
26
|
+
onItemIntersectionOut: (item: any) => void;
|
27
|
+
};
|
28
|
+
className?: string;
|
29
|
+
onSelectProduct?: (item: any) => void;
|
30
|
+
currentProductId?: number;
|
31
|
+
onSelect?: (item: any) => void;
|
32
|
+
isSelected?: boolean;
|
33
|
+
decorateConfig?: ProductCardConfig;
|
34
|
+
}
|
35
|
+
export declare const ProductCard: React.MemoExoticComponent<({ item, index, context, onSelect, isSelected, className, decorateConfig, }: ProductCardProps) => JSX.Element>;
|
36
|
+
export declare const DefaultItemContent: React.MemoExoticComponent<(props: {
|
37
|
+
item: any;
|
38
|
+
index: number;
|
39
|
+
context?: {
|
40
|
+
onItemIntersectionIn: (item: any) => void;
|
41
|
+
onItemIntersectionOut: (item: any) => void;
|
42
|
+
} | undefined;
|
43
|
+
}) => JSX.Element>;
|
44
|
+
export default ProductCard;
|
45
|
+
export { ProductCardSkeleton };
|
@@ -0,0 +1,184 @@
|
|
1
|
+
var __create = Object.create;
|
2
|
+
var __defProp = Object.defineProperty;
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
7
|
+
var __export = (target, all) => {
|
8
|
+
for (var name in all)
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
10
|
+
};
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
13
|
+
for (let key of __getOwnPropNames(from))
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
16
|
+
}
|
17
|
+
return to;
|
18
|
+
};
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
25
|
+
mod
|
26
|
+
));
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
28
|
+
|
29
|
+
// src/plus/productSelect/ProductCard/index.tsx
|
30
|
+
var ProductCard_exports = {};
|
31
|
+
__export(ProductCard_exports, {
|
32
|
+
DefaultItemContent: () => DefaultItemContent,
|
33
|
+
ProductCard: () => ProductCard,
|
34
|
+
ProductCardSkeleton: () => import_ProductCardSkeleton.default,
|
35
|
+
default: () => ProductCard_default
|
36
|
+
});
|
37
|
+
module.exports = __toCommonJS(ProductCard_exports);
|
38
|
+
var import_react = __toESM(require("react"));
|
39
|
+
var import_classnames = __toESM(require("classnames"));
|
40
|
+
var import_utils = require("@pisell/utils");
|
41
|
+
var import_decimal = __toESM(require("decimal.js"));
|
42
|
+
var import_IntersectionObserver = require("../components/IntersectionObserver");
|
43
|
+
var import_pisellPriceText = __toESM(require("../components/pisellPriceText"));
|
44
|
+
var import_ProductCardSkeleton = __toESM(require("./ProductCardSkeleton"));
|
45
|
+
var import_index = require("./index.less");
|
46
|
+
var import__ = require("../index");
|
47
|
+
var defaultConfig = {
|
48
|
+
isProductCover: 1,
|
49
|
+
imgWidth: "180px",
|
50
|
+
imgHeight: "126px",
|
51
|
+
radius: 8,
|
52
|
+
isTitle: 1,
|
53
|
+
isSubtitle: 0,
|
54
|
+
showSpec: true,
|
55
|
+
isTag: 0,
|
56
|
+
isPrice: 0,
|
57
|
+
isOriginPrice: 0,
|
58
|
+
showZeroPrice: false,
|
59
|
+
showMarketingTag: true,
|
60
|
+
showRemark: true,
|
61
|
+
isStock: 0
|
62
|
+
};
|
63
|
+
var ProductCard = (0, import_react.memo)(
|
64
|
+
({
|
65
|
+
item,
|
66
|
+
index,
|
67
|
+
context,
|
68
|
+
onSelect,
|
69
|
+
isSelected,
|
70
|
+
className,
|
71
|
+
decorateConfig = {}
|
72
|
+
}) => {
|
73
|
+
const finalConfig = { ...defaultConfig, ...decorateConfig };
|
74
|
+
const {
|
75
|
+
imgHeight,
|
76
|
+
imgWidth,
|
77
|
+
isOriginPrice,
|
78
|
+
isPrice,
|
79
|
+
isProductCover,
|
80
|
+
isStock,
|
81
|
+
isSubtitle,
|
82
|
+
isTitle,
|
83
|
+
radius,
|
84
|
+
showZeroPrice
|
85
|
+
} = finalConfig;
|
86
|
+
const { __typename } = item;
|
87
|
+
if (__typename === "category") {
|
88
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
89
|
+
"div",
|
90
|
+
{
|
91
|
+
className: (0, import_classnames.default)(`${import__.PREFIX}__product-category`, className),
|
92
|
+
"data-index": index,
|
93
|
+
"data-item-index": index
|
94
|
+
},
|
95
|
+
/* @__PURE__ */ import_react.default.createElement("div", { className: "category-title" }, item.name)
|
96
|
+
);
|
97
|
+
}
|
98
|
+
const getStockText = (item2) => {
|
99
|
+
if (item2.is_track === 0) {
|
100
|
+
return false;
|
101
|
+
}
|
102
|
+
return `${import_utils.locales.getText("pisell2.product-select.stock")}:${item2.stock_quantity}`;
|
103
|
+
};
|
104
|
+
const getTextCover = (title) => {
|
105
|
+
if (!title) return "";
|
106
|
+
const cleanTitle = title.trim();
|
107
|
+
if (cleanTitle.length === 0) return "";
|
108
|
+
return cleanTitle.substring(0, 2).toUpperCase();
|
109
|
+
};
|
110
|
+
const renderPrice = (item2) => {
|
111
|
+
const {
|
112
|
+
price: _price,
|
113
|
+
original_price: _original_price,
|
114
|
+
is_bundle,
|
115
|
+
minimum_markup_price
|
116
|
+
} = item2;
|
117
|
+
let price = _price;
|
118
|
+
let original_price = _original_price;
|
119
|
+
if (is_bundle) {
|
120
|
+
price = new import_decimal.default(price).plus(new import_decimal.default(minimum_markup_price)).toFixed(2);
|
121
|
+
original_price = new import_decimal.default(original_price).plus(new import_decimal.default(minimum_markup_price)).toFixed(2);
|
122
|
+
}
|
123
|
+
if (!showZeroPrice && !parseFloat(price)) return null;
|
124
|
+
return !!isPrice || !!isOriginPrice ? /* @__PURE__ */ import_react.default.createElement("div", { className: "price-info" }, isPrice ? /* @__PURE__ */ import_react.default.createElement("div", { className: "price" }, /* @__PURE__ */ import_react.default.createElement(import_pisellPriceText.default, { value: price, isMini: is_bundle })) : null, !!isOriginPrice && parseFloat(original_price) ? /* @__PURE__ */ import_react.default.createElement("div", { className: "original-price" }, /* @__PURE__ */ import_react.default.createElement(import_pisellPriceText.default, { value: original_price, isMini: is_bundle })) : null) : null;
|
125
|
+
};
|
126
|
+
const cardContent = /* @__PURE__ */ import_react.default.createElement(
|
127
|
+
"div",
|
128
|
+
{
|
129
|
+
className: (0, import_classnames.default)(`${import__.PREFIX}__product-card`, className, {
|
130
|
+
selected: isSelected
|
131
|
+
}),
|
132
|
+
onClick: () => {
|
133
|
+
onSelect == null ? void 0 : onSelect(item);
|
134
|
+
},
|
135
|
+
"data-index": index,
|
136
|
+
"data-item-index": index
|
137
|
+
},
|
138
|
+
isProductCover ? /* @__PURE__ */ import_react.default.createElement(
|
139
|
+
"div",
|
140
|
+
{
|
141
|
+
className: "card-left",
|
142
|
+
style: {
|
143
|
+
width: imgWidth || "auto",
|
144
|
+
height: imgHeight || "auto"
|
145
|
+
}
|
146
|
+
},
|
147
|
+
item.cover ? /* @__PURE__ */ import_react.default.createElement(
|
148
|
+
"img",
|
149
|
+
{
|
150
|
+
loading: "lazy",
|
151
|
+
src: import_utils.image.ali(item.cover, 360),
|
152
|
+
alt: item.title,
|
153
|
+
style: { borderRadius: radius }
|
154
|
+
}
|
155
|
+
) : /* @__PURE__ */ import_react.default.createElement("div", { className: "text-cover", style: { borderRadius: radius } }, getTextCover(item.title))
|
156
|
+
) : null,
|
157
|
+
/* @__PURE__ */ import_react.default.createElement("div", { className: "card-right" }, !!isTitle ? /* @__PURE__ */ import_react.default.createElement("div", { className: "title" }, item.title) : null, !!isSubtitle && item.subtitle ? /* @__PURE__ */ import_react.default.createElement("div", { className: "subtitle" }, item.subtitle) : null, !!isStock && !!item.is_track ? /* @__PURE__ */ import_react.default.createElement("div", { className: "stock" }, getStockText(item)) : null, renderPrice(item))
|
158
|
+
);
|
159
|
+
if (context) {
|
160
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
161
|
+
import_IntersectionObserver.IntersectionTrigger,
|
162
|
+
{
|
163
|
+
onShow: () => context.onItemIntersectionIn(item)
|
164
|
+
},
|
165
|
+
cardContent
|
166
|
+
);
|
167
|
+
}
|
168
|
+
return cardContent;
|
169
|
+
}
|
170
|
+
);
|
171
|
+
ProductCard.displayName = "ProductCard";
|
172
|
+
var DefaultItemContent = (0, import_react.memo)(
|
173
|
+
(props) => {
|
174
|
+
return /* @__PURE__ */ import_react.default.createElement(ProductCard, { ...props });
|
175
|
+
}
|
176
|
+
);
|
177
|
+
DefaultItemContent.displayName = "DefaultItemContent";
|
178
|
+
var ProductCard_default = ProductCard;
|
179
|
+
// Annotate the CommonJS export names for ESM import in node:
|
180
|
+
0 && (module.exports = {
|
181
|
+
DefaultItemContent,
|
182
|
+
ProductCard,
|
183
|
+
ProductCardSkeleton
|
184
|
+
});
|
@@ -0,0 +1,270 @@
|
|
1
|
+
.pisell-product-select {
|
2
|
+
&__product-category {
|
3
|
+
padding: 4px 0;
|
4
|
+
|
5
|
+
&[data-index='0'] {
|
6
|
+
padding-top: 0px;
|
7
|
+
}
|
8
|
+
.category-title {
|
9
|
+
color: var(--ps-category-text-color, #000);
|
10
|
+
font-size: 18px;
|
11
|
+
font-style: normal;
|
12
|
+
font-weight: 600;
|
13
|
+
line-height: 24px;
|
14
|
+
}
|
15
|
+
}
|
16
|
+
|
17
|
+
&__product-card {
|
18
|
+
user-select: none;
|
19
|
+
cursor: pointer;
|
20
|
+
border-radius: 12px;
|
21
|
+
background: var(--ps-card-bg, #fff);
|
22
|
+
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
|
23
|
+
0px 1px 2px 0px rgba(0, 0, 0, 0.06);
|
24
|
+
padding: 8px;
|
25
|
+
display: flex;
|
26
|
+
gap: 20px;
|
27
|
+
position: relative;
|
28
|
+
overflow: hidden;
|
29
|
+
min-height: 142px;
|
30
|
+
height: 100%;
|
31
|
+
align-items: center;
|
32
|
+
box-sizing: border-box;
|
33
|
+
|
34
|
+
// 只在非触摸设备上启用hover效果
|
35
|
+
@media (hover: hover) {
|
36
|
+
&:hover {
|
37
|
+
background: var(--ps-card-hover-bg, #eaecf0);
|
38
|
+
}
|
39
|
+
}
|
40
|
+
|
41
|
+
&.selected {
|
42
|
+
background: var(--ps-card-selected-bg, #8157d5);
|
43
|
+
|
44
|
+
.card-right {
|
45
|
+
.title,
|
46
|
+
.subtitle,
|
47
|
+
.price {
|
48
|
+
color: var(--ps-card-selected-text-color, #ffffff);
|
49
|
+
}
|
50
|
+
|
51
|
+
.spec-item,
|
52
|
+
.original-price,
|
53
|
+
.stock {
|
54
|
+
color: var(
|
55
|
+
--ps-card-selected-secondary-text-color,
|
56
|
+
rgba(255, 255, 255, 0.7)
|
57
|
+
);
|
58
|
+
}
|
59
|
+
}
|
60
|
+
}
|
61
|
+
|
62
|
+
.marketing-tags-wrapper {
|
63
|
+
position: absolute;
|
64
|
+
top: 0;
|
65
|
+
left: 0;
|
66
|
+
pointer-events: none;
|
67
|
+
user-select: none;
|
68
|
+
z-index: 1;
|
69
|
+
|
70
|
+
.marketing-tags {
|
71
|
+
display: flex;
|
72
|
+
flex-direction: column;
|
73
|
+
row-gap: 6px;
|
74
|
+
}
|
75
|
+
|
76
|
+
.marketing-tag-item {
|
77
|
+
display: flex;
|
78
|
+
padding: 6px 10px;
|
79
|
+
justify-content: center;
|
80
|
+
align-items: center;
|
81
|
+
gap: 10px;
|
82
|
+
border-radius: 0 12px 12px 0;
|
83
|
+
background: var(--Error-100, #fee4e2);
|
84
|
+
color: var(--Error-700, #b42318);
|
85
|
+
text-align: center;
|
86
|
+
font-size: 14px;
|
87
|
+
font-style: normal;
|
88
|
+
font-weight: 500;
|
89
|
+
line-height: 20px;
|
90
|
+
|
91
|
+
&:nth-of-type(1) {
|
92
|
+
border-radius: 0 0 12px 0;
|
93
|
+
}
|
94
|
+
}
|
95
|
+
}
|
96
|
+
|
97
|
+
.card-left {
|
98
|
+
flex-shrink: 0;
|
99
|
+
|
100
|
+
img {
|
101
|
+
border-radius: 8px;
|
102
|
+
background: lightgray 50% / cover no-repeat;
|
103
|
+
width: 100%;
|
104
|
+
height: 100%;
|
105
|
+
object-fit: cover;
|
106
|
+
}
|
107
|
+
|
108
|
+
.text-cover {
|
109
|
+
width: 100%;
|
110
|
+
height: 100%;
|
111
|
+
display: flex;
|
112
|
+
align-items: center;
|
113
|
+
justify-content: center;
|
114
|
+
background: #dedede;
|
115
|
+
color: #6c6c6c;
|
116
|
+
font-size: 60px;
|
117
|
+
font-weight: 600;
|
118
|
+
text-align: center;
|
119
|
+
line-height: 1;
|
120
|
+
letter-spacing: 1px;
|
121
|
+
border-radius: 8px;
|
122
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
123
|
+
}
|
124
|
+
}
|
125
|
+
|
126
|
+
.card-right {
|
127
|
+
display: flex;
|
128
|
+
flex-direction: column;
|
129
|
+
row-gap: 8px;
|
130
|
+
min-height: 92px;
|
131
|
+
overflow: hidden;
|
132
|
+
flex: 1;
|
133
|
+
|
134
|
+
.title {
|
135
|
+
color: var(--ps-color-text, #1b1b1b);
|
136
|
+
font-size: 18px;
|
137
|
+
font-style: normal;
|
138
|
+
font-weight: 600;
|
139
|
+
line-height: 28px;
|
140
|
+
display: -webkit-box;
|
141
|
+
-webkit-line-clamp: 2;
|
142
|
+
-webkit-box-orient: vertical;
|
143
|
+
overflow: hidden;
|
144
|
+
text-overflow: ellipsis;
|
145
|
+
}
|
146
|
+
|
147
|
+
.subtitle {
|
148
|
+
color: var(--ps-color-text, #1b1b1b);
|
149
|
+
font-size: 16px;
|
150
|
+
font-style: normal;
|
151
|
+
font-weight: 500;
|
152
|
+
line-height: 24px;
|
153
|
+
display: -webkit-box;
|
154
|
+
-webkit-line-clamp: 2;
|
155
|
+
-webkit-box-orient: vertical;
|
156
|
+
overflow: hidden;
|
157
|
+
text-overflow: ellipsis;
|
158
|
+
}
|
159
|
+
|
160
|
+
.stock,
|
161
|
+
.specs {
|
162
|
+
overflow: hidden;
|
163
|
+
color: var(--ps-color-text-secondary, #4e4e4e);
|
164
|
+
text-overflow: ellipsis;
|
165
|
+
font-size: 14px;
|
166
|
+
font-style: normal;
|
167
|
+
font-weight: 500;
|
168
|
+
line-height: 20px;
|
169
|
+
|
170
|
+
.spec-item {
|
171
|
+
margin-top: 8px;
|
172
|
+
|
173
|
+
&:nth-of-type(1) {
|
174
|
+
margin-top: 0;
|
175
|
+
}
|
176
|
+
}
|
177
|
+
}
|
178
|
+
|
179
|
+
.tags {
|
180
|
+
display: flex;
|
181
|
+
gap: 8px;
|
182
|
+
flex-wrap: wrap;
|
183
|
+
|
184
|
+
.tag-item {
|
185
|
+
display: flex;
|
186
|
+
padding: 4px 12px;
|
187
|
+
align-items: center;
|
188
|
+
border-radius: 16px;
|
189
|
+
border: 1px solid var(--Error-200, #fecdca);
|
190
|
+
background: var(--Error-50, #fef3f2);
|
191
|
+
mix-blend-mode: multiply;
|
192
|
+
color: var(--Error-700, #b42318);
|
193
|
+
text-align: center;
|
194
|
+
font-size: 14px;
|
195
|
+
font-style: normal;
|
196
|
+
font-weight: 500;
|
197
|
+
line-height: 20px;
|
198
|
+
}
|
199
|
+
}
|
200
|
+
|
201
|
+
.price-info {
|
202
|
+
display: flex;
|
203
|
+
align-items: center;
|
204
|
+
gap: 8px;
|
205
|
+
}
|
206
|
+
|
207
|
+
.price {
|
208
|
+
color: var(--ps-color-text, #1b1b1b);
|
209
|
+
font-size: 18px;
|
210
|
+
font-style: normal;
|
211
|
+
font-weight: 600;
|
212
|
+
line-height: 28px;
|
213
|
+
}
|
214
|
+
|
215
|
+
.original-price {
|
216
|
+
color: var(--ps-color-text-secondary, #4e4e4e);
|
217
|
+
font-size: 16px;
|
218
|
+
font-style: normal;
|
219
|
+
font-weight: 400;
|
220
|
+
line-height: 24px;
|
221
|
+
position: relative;
|
222
|
+
|
223
|
+
&::before {
|
224
|
+
content: '';
|
225
|
+
display: block;
|
226
|
+
position: absolute;
|
227
|
+
top: 50%;
|
228
|
+
left: 0;
|
229
|
+
width: 100%;
|
230
|
+
height: 1px;
|
231
|
+
background-color: #4e4e4e;
|
232
|
+
transform: translateY(-50%);
|
233
|
+
}
|
234
|
+
|
235
|
+
> span {
|
236
|
+
vertical-align: middle;
|
237
|
+
}
|
238
|
+
}
|
239
|
+
|
240
|
+
.remark {
|
241
|
+
color: var(--Warning-600, #dc6803);
|
242
|
+
font-size: 14px;
|
243
|
+
font-style: normal;
|
244
|
+
font-weight: 600;
|
245
|
+
line-height: 20px;
|
246
|
+
}
|
247
|
+
}
|
248
|
+
}
|
249
|
+
|
250
|
+
// 网格布局中的产品卡片样式调整
|
251
|
+
.product-grid-wrapper {
|
252
|
+
.pisell-product-select__product-card {
|
253
|
+
min-width: unset;
|
254
|
+
width: 100%;
|
255
|
+
}
|
256
|
+
}
|
257
|
+
|
258
|
+
// 列表布局中的产品卡片样式调整
|
259
|
+
.product-list-wrapper {
|
260
|
+
.pisell-product-select__product-card {
|
261
|
+
min-width: 363px;
|
262
|
+
max-width: unset;
|
263
|
+
margin-top: 12px;
|
264
|
+
|
265
|
+
&:first-child {
|
266
|
+
margin-top: 0;
|
267
|
+
}
|
268
|
+
}
|
269
|
+
}
|
270
|
+
}
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
export interface GridConfig {
|
3
|
+
grid: boolean;
|
4
|
+
config: string;
|
5
|
+
}
|
6
|
+
export declare const parseGridConfig: (config: string) => number[];
|
7
|
+
export declare const createGridComponents: (layout?: GridConfig | null) => {
|
8
|
+
List: React.MemoExoticComponent<({ children, ...props }: any) => JSX.Element>;
|
9
|
+
Item: React.MemoExoticComponent<({ children, index, item, ...props }: any) => JSX.Element>;
|
10
|
+
};
|
11
|
+
export declare const GRID_LAYOUTS: {
|
12
|
+
readonly SINGLE_COLUMN: {
|
13
|
+
readonly grid: false;
|
14
|
+
readonly config: "12";
|
15
|
+
};
|
16
|
+
readonly TWO_COLUMNS: {
|
17
|
+
readonly grid: true;
|
18
|
+
readonly config: "12:12";
|
19
|
+
};
|
20
|
+
readonly THREE_COLUMNS: {
|
21
|
+
readonly grid: true;
|
22
|
+
readonly config: "8:8:8";
|
23
|
+
};
|
24
|
+
readonly FOUR_COLUMNS: {
|
25
|
+
readonly grid: true;
|
26
|
+
readonly config: "6:6:6:6";
|
27
|
+
};
|
28
|
+
readonly UNEQUAL_TWO: {
|
29
|
+
readonly grid: true;
|
30
|
+
readonly config: "8:16";
|
31
|
+
};
|
32
|
+
readonly UNEQUAL_THREE: {
|
33
|
+
readonly grid: true;
|
34
|
+
readonly config: "6:12:6";
|
35
|
+
};
|
36
|
+
};
|
37
|
+
export declare const createTwoColumnGrid: () => {
|
38
|
+
List: React.MemoExoticComponent<({ children, ...props }: any) => JSX.Element>;
|
39
|
+
Item: React.MemoExoticComponent<({ children, index, item, ...props }: any) => JSX.Element>;
|
40
|
+
};
|
41
|
+
export declare const createCustomGrid: (config: string) => {
|
42
|
+
List: React.MemoExoticComponent<({ children, ...props }: any) => JSX.Element>;
|
43
|
+
Item: React.MemoExoticComponent<({ children, index, item, ...props }: any) => JSX.Element>;
|
44
|
+
};
|