@pisell/materials 1.0.934 → 1.0.936

package/es/components/pisellWalletPassCard/index.d.ts

@@ -0,0 +1,140 @@
+import React from 'react';
+import './index.less';
+export interface FormatOption {
+    /** 原始 DOM 元素 */
+    originDom: React.ReactNode;
+    /** 是否选中状态 */
+    active: boolean;
+    /** 完整的组件数据 */
+    data: PisellWalletPassCardProps;
+}
+export interface PisellWalletPassCardProps {
+    id: number;
+    /** 卡片样式 */
+    type: 'default' | 'mini';
+    /** 商品名称 */
+    name: string;
+    /** 二维码 */
+    qrCode: string;
+    /** 共享店铺名称 */
+    storeName: string;
+    /** 余额 */
+    balance?: number;
+    /** 识别码编号 */
+    code: string;
+    /** 有效期 */
+    validDate: string;
+    /** 使用金额 */
+    redeem?: number;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 禁用原因 */
+    disabledReason?: string;
+    /** 是否展示禁用原因 */
+    showDisabledReason?: boolean;
+    /** 封面图 */
+    cover?: string;
+    /** 余额标题文案 */
+    balanceTitle?: string;
+    /** 使用金额标题文案 */
+    redeemTitle?: string;
+    /** 是否选中 */
+    active?: boolean;
+    /** 是否展示商品名称 */
+    showName?: boolean;
+    /** 是否展示共享店铺名称 */
+    showStoreName?: boolean | ((data: any) => boolean);
+    /** 是否展示使用金额 */
+    showRedeem?: boolean;
+    /** 是否展示余额 */
+    showBalance?: boolean;
+    /** 是否展示识别码编号 */
+    showCode?: boolean;
+    /** 是否展示有效期 */
+    showValidDate?: boolean;
+    /** 使用日程信息计算有效期 */
+    validDateBySchedule?: boolean;
+    /** 日程列表 */
+    scheduleList?: any[];
+    /** 是否展示右上角详情按钮 */
+    showDetail?: boolean;
+    /** 是否展示qrCode */
+    showQrCode?: boolean;
+    /** 是否展示封面 */
+    showCover?: boolean;
+    /** 是否展示余额货币符号 */
+    showBalanceSymbol?: boolean;
+    /** 展示操作按钮 */
+    showActions?: boolean;
+    /** 操作按钮配置 */
+    actions?: {
+        /** 按钮展示方式 */
+        layout: 'expanded' | 'collapsed';
+        /** detail 按钮配置 */
+        detail?: {
+            visible: boolean;
+            iconColor: string;
+        };
+        /** edit按钮配置 */
+        edit?: {
+            visible: boolean;
+            iconColor: string;
+            dialogTitle: string;
+            enableDialog: boolean;
+            fields: {
+                name: string;
+                label: string;
+            };
+        };
+    };
+    /** 编辑编辑按钮后，弹窗展示之前 */
+    beforeEdit?: (value: any) => Promise<any> | boolean | void;
+    /** 编辑弹窗点击提交 */
+    onConfirmEdit?: (value: any) => void;
+    /** 编辑金额事件 */
+    onConfirmEditAmount?: (value: number) => void;
+    /** 详情按钮点击事件 */
+    onDetail?: (data: {
+        id: number;
+        name: string;
+        storeName: string;
+        balance?: number;
+        redeem?: number;
+        code: string;
+        validDate: string;
+        originData?: any;
+    }) => void;
+    /** 是否使用外部详情处理（当为 true 且提供了 onDetail 时，不显示内部模态框） */
+    useExternalDetail?: boolean;
+    /** 单选或者多选 */
+    mode?: 'multiple' | 'single';
+    /** 是否展示选中图标 */
+    showActiveIcon?: boolean;
+    /** 开启编辑金额 */
+    enableEditAmount?: boolean;
+    /** 显示状态标识 */
+    showStatus?: boolean;
+    /** 名称标题字号字重颜色配置 */
+    nameTitleStyle?: {
+        fontSize: number;
+        fontWeight: number;
+        color: string;
+    };
+    /** 卡片状态 */
+    cardStatus?: 'used' | 'expired' | 'disabled' | 'conflict' | 'lastPayment';
+    /** 自定义余额格式化函数，如果提供则优先使用 */
+    formatBalance?: (balance?: number, option?: FormatOption) => React.ReactNode;
+    /** 自定义余额标题格式化函数，如果提供则优先使用 */
+    formatBalanceTitle?: (balanceTitle?: string, option?: FormatOption) => React.ReactNode;
+    /** 自定义使用金额格式化函数，如果提供则优先使用 */
+    formatRedeem?: (redeem?: number, option?: FormatOption) => React.ReactNode;
+    /** 自定义使用金额标题格式化函数，如果提供则优先使用 */
+    formatRedeemTitle?: (redeemTitle?: string, option?: FormatOption) => React.ReactNode;
+    /** 最大使用金额 */
+    maxRedeem?: number;
+    /** 编辑金额前事件 */
+    onBeforeEditAmount?: (value: any) => Promise<any> | boolean | void;
+    [key: string]: any;
+}
+declare const PisellWalletPassCard: (props: PisellWalletPassCardProps) => JSX.Element;
+export default PisellWalletPassCard;

package/es/components/pisellWalletPassCard/index.js

@@ -20,8 +20,9 @@ import { CheckCircleFilled, EditOutlined, ExclamationCircleOutlined, MoreOutline
 import { Dropdown, Form, Input, InputNumber, DatePicker, Radio } from 'antd';
 import dayjs from 'dayjs';
 import Iconfont from "../iconfont";
-import { PisellModal } from "../../index";
+import { PisellModal, usePisellConfig } from "../../index";
 import PisellTag from "../pisellTags";
+import { getScheduleSummary } from "./utils";
 import Amount from "../pisellText/components/Amount";
 import AmountCpt from "../virtual-keyboard/Amount";
 
@@ -70,6 +71,7 @@ var PisellWalletPassCard = function PisellWalletPassCard(props) {
     _React$useState12 = _slicedToArray(_React$useState11, 2),
     pressTimer = _React$useState12[0],
     setPressTimer = _React$useState12[1];
+  var config = usePisellConfig();
 
   // 添加 useEffect 清理定时器
   useEffect(function () {
@@ -143,7 +145,9 @@ var PisellWalletPassCard = function PisellWalletPassCard(props) {
     formatBalanceTitle = props.formatBalanceTitle,
     formatRedeem = props.formatRedeem,
     formatRedeemTitle = props.formatRedeemTitle,
-    maxRedeem = props.maxRedeem;
+    maxRedeem = props.maxRedeem,
+    validDateBySchedule = props.validDateBySchedule,
+    scheduleList = props.scheduleList;
   useEffect(function () {
     document.body.id = 'body';
   }, []);
@@ -314,6 +318,12 @@ var PisellWalletPassCard = function PisellWalletPassCard(props) {
     }
     setLastTap(now);
   };
+  var formatValidDate = useMemo(function () {
+    if (validDateBySchedule && scheduleList && (scheduleList === null || scheduleList === void 0 ? void 0 : scheduleList.length) > 0) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, getText('pisell-wallet-pass-card-valid'), ' ', getScheduleSummary(scheduleList, config === null || config === void 0 ? void 0 : config.locale) || validDate);
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, getText('pisell-wallet-pass-card-valid-to'), ' ', !!validDate ? validDate : getText('pisell-wallet-pass-card-expireDate'));
+  }, [validDateBySchedule, scheduleList, validDate]);
   var _onConfirmEdit = function _onConfirmEdit() {
     form.validateFields().then(function (values) {
       var _values$validDate;
@@ -389,10 +399,12 @@ var PisellWalletPassCard = function PisellWalletPassCard(props) {
       }, showStatus && cardStatus && /*#__PURE__*/React.createElement("div", {
         className: "pisell-card-status-icon"
       }, /*#__PURE__*/React.createElement(PisellTag, {
-        style: {
+        style: _objectSpread({
           borderRadius: '6px',
           padding: '2px 8px'
-        },
+        }, cardStatus === 'lastPayment' && {
+          fontSize: '12px'
+        }),
         type: "pill_color",
         color: cardStatusMap[cardStatus]
       }, getText("pisell-wallet-pass-card-status-".concat(cardStatus)))), (actions === null || actions === void 0 ? void 0 : actions.detail) && (actions === null || actions === void 0 || (_actions$detail3 = actions.detail) === null || _actions$detail3 === void 0 ? void 0 : _actions$detail3.visible) && /*#__PURE__*/React.createElement("div", {
@@ -545,10 +557,13 @@ var PisellWalletPassCard = function PisellWalletPassCard(props) {
       useThousandsSeparator: true,
       value: discount
     })) : /*#__PURE__*/React.createElement(React.Fragment, null, discount, "% ", getText('pisell-discount-card-unit'))))), /*#__PURE__*/React.createElement("div", {
-      className: "pisell-card-code-wrap"
+      className: "pisell-card-code-wrap",
+      style: {
+        marginRight: showValidDate ? 60 : 0
+      }
     }, /*#__PURE__*/React.createElement("div", {
       className: "pisell-card-code"
-    }, showCode && !isMini && /*#__PURE__*/React.createElement("div", null, code), showValidDate && /*#__PURE__*/React.createElement("div", null, getText('pisell-wallet-pass-card-valid-to'), ' ', !!validDate ? validDate : getText('pisell-wallet-pass-card-expireDate')))));
+    }, showCode && !isMini && /*#__PURE__*/React.createElement("div", null, code), showValidDate && /*#__PURE__*/React.createElement("div", null, formatValidDate))));
   };
   var getInputItem = function getInputItem(name) {
     if ('validDate' === name) {

package/es/components/pisellWalletPassCard/utils.d.ts

@@ -0,0 +1,44 @@
+export declare type Locale = 'en' | 'zh-CN' | 'zh-HK';
+interface ScheduleItem {
+    id: number;
+    name: string | {
+        [key: string]: string;
+    };
+    type: 'standard' | 'time-slots' | 'designation';
+    start_time: string | null;
+    end_time: string | null;
+    repeat_type: 'none' | 'daily' | 'weekly' | 'monthly' | 'yearly';
+    repeat_rule: {
+        end: {
+            type: 'never' | 'date' | 'occurrence';
+            end_date: string | null;
+            occurrence: number | null;
+        };
+        frequency: number;
+        excluded_date: Array<{
+            start: string;
+            end: string;
+        }>;
+        included_date: any[];
+        frequency_date: number[];
+    } | null;
+    designation: Array<{
+        start_date: string;
+        start_time: string;
+        end_date: string;
+        end_time: string;
+    }> | null;
+    is_all: number;
+    time_slot: Array<{
+        start_time: string;
+        end_time: string;
+    }>;
+}
+/**
+ * 获取schedule摘要信息
+ * @param scheduleList 日程列表
+ * @param locale 语言设置
+ * @returns 摘要文本
+ */
+export declare function getScheduleSummary(scheduleList: ScheduleItem[], locale?: Locale): string;
+export {};