@pisell/private-materials 6.0.22 → 6.0.23

package/lib/components/walletList/index.less

@@ -0,0 +1,367 @@
+.pisell-lowcode__walletList {
+  position: relative;
+  margin: 0;
+  /* 移除负边距 */
+
+  .slick-list {
+    padding: 0 !important;
+    /* 确保没有内边距，避免第一个和最后一个元素有额外边距 */
+    margin: 0;
+  }
+
+  .slick-track {
+    display: flex;
+    align-items: stretch;
+    // gap: 24px;
+    /* 只在元素之间添加24px间距 */
+    margin: 0 !important;
+    /* 确保track本身没有外边距 */
+  }
+
+  .slick-slide {
+    height: auto;
+    opacity: 0.5;
+    transition: opacity 0.3s ease;
+    margin: 0 !important;
+    /* 确保slide元素本身没有外边距 */
+    padding: 0 !important;
+    /* 确保slide元素本身没有内边距 */
+
+    &.slick-active {
+      opacity: 1;
+    }
+
+    >div {
+      height: 100%;
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  /* 保留默认箭头样式并增强可见性 */
+  .slick-arrow {
+    font-size: 0;
+    opacity: 0;
+    /* 设置为0，隐藏默认箭头 */
+    width: 40px;
+    height: 40px;
+    z-index: 100;
+
+    &.slick-prev {
+      left: 20px;
+    }
+
+    &.slick-next {
+      right: 20px;
+    }
+
+    &:before {
+      content: '';
+      /* 确保不显示箭头内容 */
+    }
+  }
+
+  /* 完全隐藏内置导航点 */
+  .slick-dots {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+    height: 0 !important;
+    width: 0 !important;
+    overflow: hidden !important;
+    position: absolute !important;
+    left: -9999px !important;
+
+    /* 确保子元素也不可见 */
+    * {
+      display: none !important;
+      visibility: hidden !important;
+      opacity: 0 !important;
+      pointer-events: none !important;
+    }
+  }
+
+  .slick-dots.slick-dots-bottom {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+    /*
+    padding: 12px;
+    border-radius: 17px;
+    background: rgba(255, 255, 255, 0.90);
+    height: 34px;
+    box-sizing: border-box;
+    bottom: -12px;
+    left: 50%;
+    transform: translateX(-50%);
+    backdrop-filter: blur(4px);
+    width: fit-content;
+    margin: 0;
+    position: absolute;
+    */
+  }
+}
+
+.pisell-wallet-list-container {
+  overflow: visible;
+  /* 修改为visible允许内容溢出显示 */
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  /* 防止flex子项溢出 */
+  padding-bottom: 8px;
+  /* 添加底部padding确保按钮阴影完整显示 */
+
+  .wallet-content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    /* 防止flex子项溢出 */
+
+    /* 确保内置箭头不可见但功能可用 */
+    .slick-prev,
+    .slick-next {
+      opacity: 0;
+      /* 设置为0，隐藏箭头 */
+      pointer-events: auto;
+      /* 保留点击事件 */
+      z-index: -1;
+      /* 确保在其他元素之下 */
+    }
+
+    .slick-slider {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-height: 0;
+      /* 防止flex子项溢出 */
+    }
+
+    .slick-list {
+      flex: 1;
+      min-height: 0;
+      padding: 0 !important;
+      margin: 0;
+      /* 防止flex子项溢出 */
+    }
+
+    .slick-track {
+      display: flex;
+      min-height: 0;
+      // gap: 24px;
+      /* 元素之间保持24px间距 */
+      margin: 0 !important;
+      /* 确保没有外边距 */
+    }
+
+    .slick-slide {
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+  }
+
+  /* 为卡片容器添加样式 */
+  .wallet-card-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    /* 防止flex子项溢出 */
+
+    /* 确保WalletCard组件可以正确展示 */
+    .pisell-wallet-card {
+      width: 100%;
+      display: block;
+      margin-bottom: 0;
+    }
+  }
+
+  /* 确保底部容器的overflow设置不会影响阴影显示 */
+  .wallet-navigation {
+    cursor: default;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 12px;
+    /* 保持固定的12px顶部间距 */
+    position: relative;
+    /* 确保相对于容器定位 */
+    overflow: visible;
+    /* 确保阴影可以溢出容器 */
+    z-index: 5;
+    /* 提高z-index确保在其他元素之上 */
+
+    /* 增加一个透明的遮罩层，确保点击事件不会穿透 */
+    &::before {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      top: -10px;
+      left: -10px;
+      right: -10px;
+      bottom: -10px;
+      pointer-events: none;
+      /* 该遮罩自身不接收事件 */
+    }
+  }
+
+  .wallet-nav-button {
+    cursor: pointer;
+    width: 44px;
+    height: 44px;
+    background-color: #FFFFFF;
+    border-radius: 50%;
+    display: flex;
+    padding: 10px;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 22px;
+    background: rgba(255, 255, 255, 0.90);
+    backdrop-filter: blur(4px);
+    box-shadow: 0px 2px 4px rgba(16, 24, 40, 0.1), 0px 1px 3px rgba(16, 24, 40, 0.1);
+    z-index: 10;
+    position: relative;
+    /* 确保相对定位 */
+    touch-action: manipulation;
+    /* 优化触摸事件处理 */
+    pointer-events: auto;
+    /* 确保按钮可以接收点击事件 */
+
+    /* 为图标设置样式 */
+    .anticon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+    }
+
+    &:hover {
+      background-color: #FFFFFF;
+      box-shadow: 0px 3px 6px rgba(16, 24, 40, 0.15), 0px 2px 4px rgba(16, 24, 40, 0.1);
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+      opacity: 0.7;
+
+      &:hover {
+        box-shadow: 0px 2px 4px rgba(16, 24, 40, 0.1), 0px 1px 3px rgba(16, 24, 40, 0.1);
+      }
+    }
+
+    /* 确保所有子元素不会阻止点击事件 */
+    * {
+      pointer-events: none;
+    }
+  }
+
+  .wallet-dots-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 12px;
+    border-radius: 17px;
+    background: rgba(255, 255, 255, 0.90);
+    backdrop-filter: blur(4px);
+    height: 34px;
+    z-index: 100;
+    box-shadow: 0px 2px 4px rgba(16, 24, 40, 0.1), 0px 1px 3px rgba(16, 24, 40, 0.1);
+
+    .wallet-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: #F2F4F7;
+      margin: 0 8px;
+      transition: all 0.3s ease;
+
+      &.active {
+        width: 8px;
+        height: 8px;
+        border-radius: 4px;
+        background-color: #6941C6;
+      }
+    }
+  }
+
+  /* 添加计数器样式 */
+  .wallet-counter {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #FFFFFF;
+    min-width: 70px;
+    text-align: center;
+
+    color: var(--Gray-500, #667085);
+
+    /* Text xl/Semibold */
+    font-family: Inter;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 30px;
+    /* 150% */
+  }
+
+  .pisell-lowcode__walletList {
+    flex: 1;
+    /* 让走马灯填充剩余空间 */
+    min-height: 0;
+    /* 防止flex子项溢出 */
+
+    .slick-slide {
+      box-sizing: border-box;
+    }
+
+    .slick-dots {
+      display: none;
+
+      li {
+        button {
+          background: rgba(0, 0, 0, 0.2);
+          border-radius: 4px;
+          transition: all 0.3s ease;
+
+          &:hover {
+            background: rgba(0, 0, 0, 0.4);
+          }
+        }
+
+        &.slick-active {
+          button {
+            background: var(--theme-color, #7f56d9);
+          }
+        }
+      }
+    }
+  }
+
+
+  .pisell-lowcode__error {
+    text-align: center;
+    padding: 20px;
+    color: #ff4d4f;
+    font-size: 14px;
+  }
+
+  .pisell-lowcode__empty {
+    text-align: center;
+    padding: 20px;
+    color: #8c8c8c;
+    font-size: 14px;
+  }
+
+  /* 简化骨架屏样式，使用组件库自带的骨架屏 */
+  .pisell-wallet-skeleton {
+    padding: 16px;
+  }
+}

package/lib/components/walletList/model.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { State, WalletListContextType } from './types';
+export declare const initialState: State;
+export declare const Context: React.Context<WalletListContextType>;
+export declare const Provider: (Component: React.ComponentType<any>) => (props: any) => JSX.Element;
+export * from './types';

package/lib/components/walletList/model.js

@@ -0,0 +1,72 @@
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+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/walletList/model.tsx
+var model_exports = {};
+__export(model_exports, {
+  Context: () => Context,
+  Provider: () => Provider,
+  initialState: () => initialState
+});
+module.exports = __toCommonJS(model_exports);
+var import_react = __toESM(require("react"));
+__reExport(model_exports, require("./types"), module.exports);
+var initialState = {
+  list: [],
+  balance: null,
+  loading: false,
+  error: null,
+  authError: false,
+  hasAttempted: false
+};
+var Context = (0, import_react.createContext)({
+  state: initialState,
+  dispatch: () => null
+});
+var Provider = (Component) => {
+  return function ProviderWrapper(props) {
+    const [state, dispatch] = (0, import_react.useReducer)(reducer, initialState);
+    return /* @__PURE__ */ import_react.default.createElement(Context.Provider, { value: { state, dispatch } }, /* @__PURE__ */ import_react.default.createElement(Component, { ...props }));
+  };
+};
+function reducer(state, action) {
+  switch (action.type) {
+    case "setState":
+      return { ...state, ...action.payload };
+    default:
+      return state;
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Context,
+  Provider,
+  initialState,
+  ...require("./types")
+});

package/lib/components/walletList/serve.d.ts

@@ -0,0 +1,12 @@
+import { WalletPass, WalletBalance } from './types';
+/**
+ * 获取 wallet 列表
+ * @param params
+ * @returns
+ */
+export declare const getWalletList: () => Promise<WalletPass[]>;
+/**
+ * 获取钱包余额
+ * @returns
+ */
+export declare const getWalletBalance: () => Promise<WalletBalance | null>;

package/lib/components/walletList/serve.js

@@ -0,0 +1,47 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/walletList/serve.ts
+var serve_exports = {};
+__export(serve_exports, {
+  getWalletBalance: () => getWalletBalance,
+  getWalletList: () => getWalletList
+});
+module.exports = __toCommonJS(serve_exports);
+var import_utils = require("./../../utils");
+var getWalletList = async () => {
+  try {
+    const { data } = await import_utils.request.getRequest().get("/h5/wallet", {});
+    return data || [];
+  } catch (error) {
+    return [];
+  }
+};
+var getWalletBalance = async () => {
+  try {
+    const { data } = await import_utils.request.getRequest().get("/h5/wallet/wallet-pass/balance", {});
+    return data || null;
+  } catch (error) {
+    return null;
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getWalletBalance,
+  getWalletList
+});

package/lib/components/walletList/types/index.d.ts

@@ -0,0 +1,194 @@
+import React from 'react';
+export interface MultiLanguageName {
+    original: string;
+    'zh-CN': string;
+    'zh-HK': string;
+    en: string;
+    [key: string]: string;
+}
+export interface WalletMetadata {
+    name: MultiLanguageName;
+    welcomeText?: string | MultiLanguageName;
+    customerName?: string;
+    coverImage?: string;
+    icon?: string;
+    barcodetype: 'barCode' | 'orCode';
+    showcaseWalletPass?: ('rechargeable' | 'piont' | 'voucher' | 'discount')[];
+}
+export interface Shop {
+    id: number;
+    name: string;
+    default_url: string;
+}
+export interface Wallet {
+    id: string | null;
+    shop_id: string | null;
+    shop?: Shop;
+    status: string | null;
+    name: MultiLanguageName;
+    valid_for: {
+        type: string;
+        unit?: string;
+        unit_type?: string;
+        custom_date?: string;
+    };
+    metadata: WalletMetadata;
+    created_at: string | null;
+}
+export interface WalletPass {
+    id: string | null;
+    shop_id: string | null;
+    code: string;
+    status: string | null;
+    wallet_id: string | null;
+    customer_id: string | null;
+    expired_at: string | null;
+    created_at: string;
+    shop: Shop;
+    wallet: Wallet;
+    icon?: string;
+    isLogin?: boolean;
+    showIcon?: boolean;
+}
+export interface WalletBalance {
+    gift_card_balance: number;
+    point_card_balance: number;
+    voucher_count: number;
+    discount_card_count: number;
+}
+export interface WalletBalanceItem {
+    key: string;
+    label: string;
+    value: number;
+}
+export interface WalletCardItem {
+    key: string;
+    label: string;
+    hidden: boolean;
+    value?: number;
+}
+export interface State {
+    list: WalletPass[];
+    balance: WalletBalance | null;
+    loading: boolean;
+    error: Error | null;
+    authError?: boolean;
+    hasAttempted: boolean;
+    isLoggedIn?: boolean;
+}
+export interface Action {
+    type: string;
+    payload: Partial<State>;
+}
+export interface Balance {
+    gift_card_balance: number;
+    point_card_balance: number;
+    voucher_count: number;
+    discount_card_count: number;
+}
+export interface IWallList {
+    tag?: string;
+    sales_status?: string;
+    machine_search?: string;
+    createdDate?: string;
+    limit_status?: string;
+    relation_id?: string;
+    relation_type?: string;
+    customer_id?: string;
+    sort?: string;
+    order_by?: string;
+    used_status?: string;
+    num?: number;
+    skip?: number;
+}
+export interface WalletListProps {
+    globalState?: {
+        platform?: 'pc' | 'h5' | 'ipad';
+        mode?: 'dark' | 'light';
+        cardStyle?: 'normal' | 'full';
+        codeType?: 'barCode' | 'orCode';
+        codeDirection?: 'bottom' | 'top';
+        shopName?: boolean;
+        showWalletName?: boolean;
+        showShopName?: boolean;
+        cardNo?: string;
+        showCardNo?: boolean;
+        showCode?: boolean;
+        points?: boolean;
+        balance?: boolean;
+        coupon?: boolean;
+        pointsValue?: number;
+        balanceValue?: number;
+        couponValue?: number;
+        symbol?: string;
+        showIcon?: boolean;
+        iconImg?: string;
+        customBackgroundImage?: string;
+        walletName?: string;
+    };
+}
+export interface WalletCardProps {
+    platform?: 'pc' | 'h5' | 'ipad';
+    mode?: 'dark' | 'light';
+    cardStyle?: 'normal' | 'full';
+    codeType?: 'barCode' | 'orCode';
+    codeDirection?: 'bottom' | 'top';
+    shopName?: boolean;
+    showIcon?: boolean;
+    iconImg?: string;
+    showWalletName?: boolean;
+    showShopName?: boolean;
+    cardNo?: string;
+    showCardNo?: boolean;
+    showCode?: boolean;
+    points?: boolean;
+    balance?: boolean;
+    coupon?: boolean;
+    pointsValue?: number;
+    balanceValue?: number;
+    couponValue?: number;
+    isLogin?: boolean;
+    items: WalletCardItem[];
+}
+export interface DivProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+export interface WalletListContextType {
+    state: State;
+    dispatch: React.Dispatch<Action>;
+}
+export declare const DEFAULT_CARD_CONFIG: {
+    readonly mode: "light";
+    readonly cardStyle: "normal";
+    readonly codeDirection: "bottom";
+    readonly showShopName: true;
+    readonly showWalletName: true;
+    readonly showIcon: true;
+    readonly iconImg: "";
+    readonly showCardNo: true;
+    readonly showCode: true;
+    readonly points: true;
+    readonly balance: true;
+    readonly coupon: true;
+};
+export interface CarouselSettings {
+    className: string;
+    arrows: boolean;
+    infinite: boolean;
+    slidesToShow: number;
+    slidesToScroll: number;
+    centerMode: boolean;
+    centerPadding: string;
+    autoplay: boolean;
+    autoplaySpeed: number;
+    dots: boolean;
+    appendDots?: (dots: React.ReactNode) => React.ReactNode;
+    responsive?: Array<{
+        breakpoint: number;
+        settings: {
+            slidesToShow: number;
+            slidesToScroll: number;
+            centerPadding: string;
+        };
+    }>;
+}