import type { ReactNode } from 'react'; import type { ViewStyle, ImageStyle } from 'react-native'; import type { TagPreset, TagVariant } from '../DbTag/DbTag.types'; import type { DbIconProps } from '../DbIcon/index'; /** * 文本样式(颜色限定为 string 避免类型冲突) */ interface CustomTextStyle { color?: string; fontFamily?: string; fontSize?: number; fontStyle?: 'normal' | 'italic'; fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; letterSpacing?: number; lineHeight?: number; textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify'; textDecorationLine?: 'none' | 'underline' | 'line-through' | 'underline line-through'; textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed'; textDecorationColor?: string; textShadowColor?: string; textShadowOffset?: { width: number; height: number; }; textShadowRadius?: number; textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase'; } /** * 订单商品信息配置 * 统一维护商品参数,避免单个传递冗余 */ export interface OrderProductInfo { /** 商品标题 */ title: string; /** 商品单价 */ price: number; /** 商品原价 */ originalPrice?: number; /** 购买数量 */ count: number; /** 商品图片URL */ image: string; /** 商品图片宽度(默认80) */ imageWidth?: number; /** 商品图片高度(默认80) */ imageHeight?: number; /** SKU 描述文本(例如:白色 164cm) */ skuText?: string; /** SKU 明细列表(展开时显示) */ skuDetails?: string[]; /** 是否显示SKU展开箭头 */ showSkuExpand?: boolean; /** 标签列表 */ tags?: Array<{ text: string; preset?: TagPreset; color?: string; variant?: TagVariant; }>; /** 店铺名称 */ shopName?: string; /** 订单号 */ orderNo?: string; /** 订单状态文本 */ status?: string; /** 实付款金额 */ totalAmount?: number; } /** * 数量显示配置 */ export interface CountDisplayConfig { /** 是否使用图标模式(默认false) */ useIcon?: boolean; /** 图标配置(useIcon为true时生效) */ icon?: DbIconProps; /** 文本格式(默认 'x{count}') */ format?: string; /** 样式 */ style?: CustomTextStyle; } /** * 头部样式配置 */ export interface HeaderStyleConfig { /** 主标题(店铺/订单号)样式 */ mainTitle?: CustomTextStyle; /** 副标题(状态)样式 */ subTitle?: CustomTextStyle; /** 容器样式 */ container?: ViewStyle; } /** * 商品区域样式配置 */ export interface ProductStyleConfig { /** 标题样式 */ title?: CustomTextStyle; /** 价格样式 */ price?: CustomTextStyle; /** SKU文本样式 */ sku?: CustomTextStyle; /** 数量显示配置 */ count?: CountDisplayConfig; /** 容器样式 */ container?: ViewStyle; } /** * 标签样式配置 */ export interface TagsStyleConfig { /** 标签间距 */ gap?: number; /** 容器样式 */ container?: ViewStyle; } /** * 实付款样式配置 */ export interface TotalAmountStyleConfig { /** 标签文本(默认'实付款') */ label?: string; /** 标签样式 */ labelStyle?: CustomTextStyle; /** 金额样式 */ amount?: CustomTextStyle; /** 容器样式 */ container?: ViewStyle; } /** * 显示控制配置 */ export interface DisplayConfig { /** 是否显示头部(默认true) */ showHeader?: boolean; /** 是否显示SKU(默认true) */ showSku?: boolean; /** 是否显示标签(默认true) */ showTags?: boolean; /** 是否显示数量(默认true) */ showCount?: boolean; /** 是否显示实付款(默认true) */ showTotalAmount?: boolean; /** 是否显示操作栏(默认true) */ showActionBar?: boolean; } /** * 操作按钮配置 */ export interface OrderActionButton { /** 按钮文本 */ text: string; /** 按钮类型(简化版) */ type?: 'primary' | 'default' | 'danger' | 'secondary'; /** 按钮变体(优先于 type) */ variant?: 'primary' | 'secondary' | 'outline' | 'ghost'; /** 按钮尺寸 */ size?: 'small' | 'medium' | 'large' | 'mini'; /** 自定义背景色 */ backgroundColor?: string; /** 自定义文字颜色 */ textColor?: string; /** 点击回调 */ onPress?: () => void; /** 是否显示在更多菜单中 */ inMore?: boolean; } /** * DbOrderCard 组件属性 */ export interface DbOrderCardProps { /** 商品信息配置 */ productInfo: OrderProductInfo; /** 操作按钮列表 */ actions?: OrderActionButton[]; /** 更多按钮点击回调 */ onMorePress?: () => void; /** 卡片点击回调 */ onPress?: () => void; /** 扩展插槽(位于商品信息底部) */ extra?: ReactNode; /** 自定义操作栏插槽(替换默认操作栏) */ actionBar?: ReactNode; /** 操作栏左侧扩展插槽 */ actionBarLeft?: ReactNode; /** 操作栏右侧扩展插槽(在按钮之前) */ actionBarRight?: ReactNode; /** * 自定义头部插槽(替换默认头部) * 传入null则不显示头部 */ headerSlot?: ReactNode | null; /** * 自定义SKU插槽(替换默认SKU显示) * 传入null则不显示SKU */ skuSlot?: ReactNode | null; /** * 自定义标签插槽(替换默认标签) * 传入null则不显示标签 */ tagsSlot?: ReactNode | null; /** * 自定义商品区域插槽(替换默认商品区域) * 传入null则不显示商品区域 */ productSlot?: ReactNode | null; /** * 自定义实付款插槽(替换默认实付款显示) * 传入null则不显示实付款 */ totalAmountSlot?: ReactNode | null; /** 样式配置对象 */ styles?: { /** 容器样式 */ container?: ViewStyle; /** 头部样式 */ header?: HeaderStyleConfig; /** 商品区域样式 */ product?: ProductStyleConfig; /** 标签样式 */ tags?: TagsStyleConfig; /** 实付款样式 */ totalAmount?: TotalAmountStyleConfig; /** 图片样式 */ image?: ImageStyle; }; /** 显示控制配置 */ display?: DisplayConfig; /** SKU展开/收起回调 */ onSkuExpandChange?: (expanded: boolean) => void; /** 是否默认展开SKU */ defaultSkuExpanded?: boolean; } /** * 订单操作栏组件属性 */ export interface OrderActionBarProps { /** 操作按钮列表 */ actions: OrderActionButton[]; /** 更多按钮点击回调 */ onMorePress?: () => void; /** 容器样式 */ style?: ViewStyle; /** 按钮圆角(默认6) */ buttonRadius?: number; /** 最大显示按钮数量(默认3) */ maxVisibleButtons?: number; } export {};