@pisell/private-materials 3.0.212 → 3.0.213

package/lib/components/eventBooking/components/Provider/SelectProduct/index.js

@@ -0,0 +1,69 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/eventBooking/components/Provider/SelectProduct/index.tsx
+var SelectProduct_exports = {};
+__export(SelectProduct_exports, {
+  default: () => SelectProduct_default
+});
+module.exports = __toCommonJS(SelectProduct_exports);
+var import_react = __toESM(require("react"));
+var import_Sales = require("../../../Sales");
+var import_utils = require("@pisell/utils");
+var import_materials = require("@pisell/materials");
+var import_index = require("./index.less");
+var SelectProduct = () => {
+  var _a;
+  const { data } = (0, import_Sales.useSales)();
+  const { addToCart, cartData } = (0, import_Sales.useCart)();
+  const handleAddToCart = (product) => {
+    addToCart(product);
+  };
+  const renderProductCard = (product) => {
+    var _a2;
+    const isSelected = (_a2 = cartData == null ? void 0 : cartData.cartItems) == null ? void 0 : _a2.some(
+      (item) => item.id === product.id
+    );
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: product.id,
+        className: `product-card ${isSelected ? "product-card-selected" : ""}`,
+        onClick: () => handleAddToCart(product)
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_materials.PisellCard, { bodyStyle: { padding: "16px" } }, /* @__PURE__ */ import_react.default.createElement("div", { className: "product-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "product-title" }, product.title), /* @__PURE__ */ import_react.default.createElement("div", { className: "product-price" }, product.price, " ", product.currency)))
+    );
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "select-product-container" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "step-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "step-number" }, "Step 1"), /* @__PURE__ */ import_react.default.createElement("div", { className: "step-title" }, "Select Product")), /* @__PURE__ */ import_react.default.createElement("div", { className: "category-section" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "category-title" }, "Other"), /* @__PURE__ */ import_react.default.createElement("div", { className: "product-list" }, renderProductCard({
+    id: "1",
+    title: "appointment",
+    price: "1.00",
+    currency: "AUD"
+  }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "cart-section" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "cart-title" }, "Your cart"), ((_a = cartData == null ? void 0 : cartData.cartItems) == null ? void 0 : _a.length) ? /* @__PURE__ */ import_react.default.createElement("div", { className: "cart-items" }, cartData.cartItems.map((item) => /* @__PURE__ */ import_react.default.createElement("div", { key: item.id, className: "cart-item" }, item.title))) : /* @__PURE__ */ import_react.default.createElement("div", { className: "cart-empty" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "cart-empty-icon" }, "🛒"), /* @__PURE__ */ import_react.default.createElement("div", { className: "cart-empty-text" }, import_utils.locales.getText("pisell2.event.cart.empty")))));
+};
+var SelectProduct_default = SelectProduct;

package/lib/components/eventBooking/components/Provider/SelectProduct/index.less

@@ -0,0 +1,131 @@
+.select-product-container {
+  padding: 24px;
+  background: #fff;
+
+  .step-header {
+    margin-bottom: 24px;
+
+    .step-number {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 8px;
+    }
+
+    .step-title {
+      font-size: 24px;
+      font-weight: 500;
+      color: #333;
+    }
+  }
+
+  .category-section {
+    margin-bottom: 24px;
+
+    .category-title {
+      font-size: 16px;
+      font-weight: 500;
+      color: #333;
+      margin-bottom: 16px;
+    }
+
+    .product-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      gap: 16px;
+    }
+  }
+
+  .product-card {
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:hover {
+      transform: translateY(-2px);
+    }
+
+    &.product-card-selected {
+      .pisell-card {
+        border-color: #1890ff;
+        background: rgba(24, 144, 255, 0.05);
+      }
+    }
+
+    .product-content {
+      text-align: center;
+
+      .product-title {
+        font-size: 16px;
+        color: #333;
+        margin-bottom: 8px;
+      }
+
+      .product-price {
+        font-size: 14px;
+        color: #666;
+      }
+    }
+  }
+
+  .cart-section {
+    background: #f5f5f5;
+    border-radius: 4px;
+    padding: 24px;
+
+    .cart-title {
+      font-size: 18px;
+      font-weight: 500;
+      color: #333;
+      margin-bottom: 16px;
+    }
+
+    .cart-empty {
+      text-align: center;
+      padding: 32px 0;
+
+      .cart-empty-icon {
+        font-size: 24px;
+        margin-bottom: 8px;
+      }
+
+      .cart-empty-text {
+        color: #999;
+      }
+    }
+
+    .cart-items {
+      .cart-item {
+        padding: 12px;
+        background: #fff;
+        border-radius: 4px;
+        margin-bottom: 8px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
+
+// 移动端适配
+@media screen and (max-width: 768px) {
+  .select-product-container {
+    padding: 16px;
+
+    .step-header {
+      margin-bottom: 16px;
+
+      .step-title {
+        font-size: 20px;
+      }
+    }
+
+    .product-list {
+      grid-template-columns: 1fr !important;
+    }
+
+    .cart-section {
+      padding: 16px;
+    }
+  }
+}

package/lib/components/eventBooking/components/bookingAvailabilityCalendar/components/CalendarDate/index.js

@@ -184,6 +184,7 @@ var CalendarDate = (props, ref) => {
     {
       open,
       title: "device",
+      mobileModalHeight: "auto",
       platform: (0, import_utils.isMobile)() ? "h5" : "pc",
       bodyStyle: { padding: (0, import_utils.isMobile)() ? "16px 24px" : 32 },
       destroyOnClose: true,

package/lib/components/eventBooking/components/bookingDetailModal/index.js

@@ -53,6 +53,7 @@ var BookingDetailModal = (props) => {
   const [isScrolling, setIsScrolling] = (0, import_react.useState)(false);
   const [openCheckout, setOpenCheckout] = (0, import_react.useState)(false);
   const isUserClickRef = (0, import_react.useRef)(false);
+  const scrollTimeoutRef = (0, import_react.useRef)(null);
   const anchorOptions = (0, import_react.useMemo)(
     () => [
       {
@@ -101,66 +102,89 @@ var BookingDetailModal = (props) => {
     if (!modalContentRef.current || !open)
       return;
     const handleScroll = () => {
-      var _a2, _b, _c;
       if (isScrolling || isUserClickRef.current)
         return;
       const container2 = modalContentRef.current;
       if (!container2)
         return;
-      const scrollTop = container2.scrollTop;
-      const headerHeight = 58;
-      const containerHeight = container2.clientHeight;
-      const scrollHeight = container2.scrollHeight;
-      const lastOption = anchorOptions[anchorOptions.length - 1];
-      const isExactBottom = Math.abs(scrollTop + containerHeight - scrollHeight) <= 1;
-      if (isExactBottom && activeTab !== lastOption.id) {
-        setActiveTab(lastOption.id);
-        (_a2 = tabsRef == null ? void 0 : tabsRef.current) == null ? void 0 : _a2.scroll(lastOption.id);
-        return;
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
       }
-      const isNearBottom = scrollTop + containerHeight + 100 >= scrollHeight;
-      const lastElement = document.getElementById(lastOption.id);
-      if (isNearBottom && lastElement) {
-        const rect = lastElement.getBoundingClientRect();
-        if (rect.top < containerHeight && activeTab !== lastOption.id) {
-          setActiveTab(lastOption.id);
-          (_b = tabsRef == null ? void 0 : tabsRef.current) == null ? void 0 : _b.scroll(lastOption.id);
+      scrollTimeoutRef.current = setTimeout(() => {
+        const scrollTop = container2.scrollTop;
+        const headerHeight = 58;
+        const containerHeight = container2.clientHeight;
+        const scrollHeight = container2.scrollHeight;
+        const viewportMiddle = headerHeight + (containerHeight - headerHeight) / 2;
+        const sectionPositions = anchorOptions.map((option) => {
+          const element = document.getElementById(option.id);
+          if (!element)
+            return null;
+          const rect = element.getBoundingClientRect();
+          return {
+            id: option.id,
+            top: rect.top,
+            bottom: rect.bottom,
+            height: rect.height,
+            // 添加可见度计算
+            visibleTop: Math.max(rect.top, headerHeight),
+            visibleBottom: Math.min(rect.bottom, containerHeight),
+            // 计算元素中点到视口中点的距离
+            distanceToCenter: Math.abs((rect.top + rect.bottom) / 2 - viewportMiddle)
+          };
+        }).filter((section) => section !== null);
+        const isAtBottom = Math.abs(scrollTop + containerHeight - scrollHeight) <= 2;
+        if (isAtBottom) {
+          const lastOption = anchorOptions[anchorOptions.length - 1];
+          if (activeTab !== lastOption.id) {
+            setActiveTab(lastOption.id);
+          }
           return;
         }
-      }
-      const visibleElements = anchorOptions.map((option) => {
-        const element = document.getElementById(option.id);
-        if (!element)
-          return null;
-        const rect = element.getBoundingClientRect();
-        const elementTop = rect.top;
-        const elementBottom = rect.bottom;
-        const topDistance = Math.abs(elementTop - headerHeight);
-        const isVisible = elementTop < containerHeight && elementBottom > headerHeight;
-        return {
-          id: option.id,
-          topDistance,
-          isVisible,
-          top: elementTop
-        };
-      }).filter(Boolean);
-      const currentElement = visibleElements.filter((el) => el.isVisible).sort((a, b) => {
-        if (a.top > headerHeight && b.top > headerHeight) {
-          return a.top - b.top;
-        }
-        if (a.top < headerHeight && b.top < headerHeight) {
-          return b.top - a.top;
+        let bestSection = null;
+        const sectionsWithPriority = sectionPositions.map((section) => {
+          const visibleHeight = section.visibleBottom - section.visibleTop;
+          const visibilityRatio = visibleHeight / section.height;
+          const topDistance = Math.abs(section.top - headerHeight);
+          const priority = (
+            // 基础可见度权重
+            visibilityRatio * 0.6 + // 小内容区域补偿
+            (section.height < 200 ? 0.3 : 0) + // 距离权重（反比，越近权重越大）
+            0.4 * (1 - Math.min(topDistance / containerHeight, 1))
+          );
+          return {
+            ...section,
+            visibilityRatio,
+            topDistance,
+            priority
+          };
+        });
+        sectionsWithPriority.sort((a, b) => {
+          if (a.visibilityRatio > 0.1 && b.visibilityRatio > 0.1) {
+            if (Math.abs(a.topDistance - b.topDistance) < 50) {
+              return b.priority - a.priority;
+            }
+            return a.topDistance - b.topDistance;
+          }
+          return b.priority - a.priority;
+        });
+        bestSection = sectionsWithPriority[0];
+        if (bestSection && activeTab !== bestSection.id) {
+          const currentSection = sectionPositions.find((s) => s.id === activeTab);
+          if (!currentSection || bestSection.priority > (currentSection.priority || 0) + 0.2 || bestSection.visibilityRatio > 0.3 && bestSection.topDistance < currentSection.topDistance) {
+            setActiveTab(bestSection.id);
+          }
         }
-        return a.top > headerHeight ? -1 : 1;
-      })[0];
-      if (currentElement && activeTab !== currentElement.id) {
-        setActiveTab(currentElement.id);
-        (_c = tabsRef == null ? void 0 : tabsRef.current) == null ? void 0 : _c.scroll(currentElement.id);
-      }
+      }, 200);
     };
     const container = modalContentRef.current;
     container.addEventListener("scroll", handleScroll);
-    return () => container.removeEventListener("scroll", handleScroll);
+    return () => {
+      container.removeEventListener("scroll", handleScroll);
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
   }, [anchorOptions, activeTab, open, isScrolling]);
   const handleTabChange = (key) => {
     if (isUserClickRef.current) {
@@ -224,11 +248,10 @@ var BookingDetailModal = (props) => {
       open,
       title: import_utils.locales.getText("pisell2.event.details"),
       platform: (0, import_utils.isMobile)() ? "h5" : "pc",
-      bodyStyle: { padding: 0, overflow: "hidden" },
+      bodyStyle: { padding: 0 },
       destroyOnClose: true,
-      mobileModalHeight: "80vh",
       className: "booking-detail-modal",
-      onCancel: () => onCloseEventDetail(),
+      onCancel: onCloseEventDetail,
       okText: import_utils.locales.getText("pisell2.event.add.to.cart"),
       cancelVisible: false,
       onOk: handleOk,

package/lib/components/eventBooking/components/bookingDetailModal/index.less

@@ -2,7 +2,7 @@
   .booking-detail-modal-content {
     display: flex;
     flex-direction: column;
-    height: calc(80vh - 140px);
+    height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
     scroll-behavior: smooth;

package/lib/components/eventBooking/components/selectHolder/index.js

@@ -81,7 +81,7 @@ var PisellSelectHolder = ({
         onOk && onOk(e);
       },
       bodyStyle: { padding: (0, import_utils.isMobile)() ? "0 16px 16px" : 20 },
-      mobileModalHeight: "90%",
+      mobileModalHeight: "auto",
       destroyOnClose: true,
       className: `select-holder-modal ${(0, import_utils.isMobile)() ? "select-holder-modal-mobile" : ""}`,
       headerDivider: false

package/lib/components/eventBooking/index.less

@@ -14,6 +14,8 @@
 }
 
 .event-booking-mobile-wrap {
+  background: #ffffff;
+  min-height: 100vh;
   .pisell-section-headers-content {
     width: 100%;
   }

package/lib/components/tabProduct/tabs/index.less

@@ -108,9 +108,19 @@
         white-space: nowrap;
       }
 
-      &:hover {
-        .pisell-tabs-tab-content {
-          background-color: #f1f1f1;
+      @media (min-width: 769px) {
+        &:hover {
+          .pisell-tabs-tab-content {
+            background-color: #f1f1f1;
+          }
+        }
+      }
+
+      @media (max-width: 768px) {
+        &:hover {
+          .pisell-tabs-tab-content {
+            background-color: transparent;
+          }
         }
       }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/private-materials",
-  "version": "3.0.212",
+  "version": "3.0.213",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -60,7 +60,7 @@
     "rc-virtual-list": "^3.11.3",
     "decimal.js": "^10.4.3",
     "@pisell/utils": "1.0.42",
-    "@pisell/materials": "3.0.65",
+    "@pisell/materials": "3.0.66",
     "@pisell/icon": "0.0.11",
     "@pisell/date-picker": "3.0.2"
   },