@pisell/private-materials 6.5.13 → 6.5.15

package/lowcode/sku-card/snippets.ts

@@ -0,0 +1,372 @@
+import { IPublicTypeSnippet } from '@alilc/lowcode-types';
+
+const snippets: IPublicTypeSnippet[] = [
+  {
+    title: 'SkuCard',
+    screenshot: '',
+    schema: {
+      componentName: 'SkuCard',
+      props: {
+        // 数据源
+        dataSource: {
+          id: 1,
+          title: '商品1',
+          cover:
+            'https://file.mypisell-dev.com/pisel/image/9/61e08d4ca8b40217e6d92939fe77bca52025_06_12_17_27_00_899_00069361109__2912_1632__.png',
+          price: 0,
+          original_price: 100,
+          stock: 100,
+          duration: '1hr, 20 mins',
+          time: '8月10日18：00开始',
+          resources: '由李技师服务',
+          member_price: 80,
+          capacity: 100,
+          tooltip_tags: [
+            {
+              title: '2 for $12',
+            },
+            {
+              title: '2 for $12',
+            },
+          ],
+          sortKeys: [
+            'title',
+            'subtitle',
+            'tags',
+            'stock',
+            'capacity',
+            'duration',
+            'time',
+            'resource',
+            'countdown',
+            'memberPrice',
+            'promotions',
+            'price',
+          ],
+        },
+
+        // 基础配置
+        skuCardConfig: {
+          displayMode: 'display_a1',
+          layoutDirection: 'row',
+          background: '#ffffff',
+          paddingY: 8,
+          paddingX: 8,
+          marginY: 0,
+          marginX: 0,
+          radius: 12,
+          isBorderVisible: false,
+          borderWidth: 1,
+          borderColor: '#ffffff',
+          isFoldable: true,
+          slot: null,
+        },
+
+        // 图片区域配置
+        skuImageConfig: {
+          isCover: true,
+          // isVideo: true,
+          // isMultiMode: true,
+          width: '180px',
+          height: '126px',
+          isTextFallback: true,
+          background: '#ffffff',
+          skuImageRadius: 12,
+          slot: null,
+          slotPosition: 'left_top',
+        },
+
+        // 操作区域配置
+        skuActionConfig: {
+          isOpen: true,
+          method: 'icon',
+          iconMethod: {
+            background: '#000000',
+            paddingY: 10,
+            paddingX: 10,
+            radius: 8,
+            isBorder: false,
+            borderWidth: 1,
+            borderColor: '#000000',
+            icon: {
+              type: 'JSSlot',
+              value: [
+                {
+                  componentName: 'Icon',
+                  props: {
+                    type: 'pisell2-arrow-right',
+                    size: 24,
+                    rotate: 0,
+                    spin: false,
+                    color: '#ffffff',
+                  },
+                },
+              ],
+            },
+          },
+          radioMethod: {
+            background: '#DC6803',
+            paddingY: 10,
+            paddingX: 10,
+            radius: 60,
+            isBorder: false,
+            borderWidth: 1,
+            borderColor: '#DC6803',
+            icon: {
+              type: 'JSSlot',
+              value: [
+                {
+                  componentName: 'Icon',
+                  props: {
+                    type: 'pisell2-plus',
+                    size: 24,
+                    rotate: 0,
+                    spin: false,
+                    color: '#ffffff',
+                  },
+                },
+              ],
+            },
+          },
+
+          checkboxMethod: {
+            text: 'Option',
+            fontSize: 16,
+            fontWeight: 600,
+            color: '#344054',
+            background: '#ffffff',
+            paddingY: 10,
+            paddingX: 18,
+            radius: 8,
+            isBorder: true,
+            borderWidth: 1,
+            borderColor: '#D0D5DD',
+          },
+
+          buttonMethod: {
+            text: 'Add',
+            fontSize: 16,
+            fontWeight: 600,
+            color: '#344054',
+            background: '#ffffff',
+            paddingY: 10,
+            paddingX: 18,
+            radius: 50,
+            isBorder: true,
+            borderWidth: 1,
+            borderColor: '#D0D5DD',
+          },
+        },
+
+        // 额外区域配置
+        skuExtraConfig: {
+          isOpen: true,
+          isStepper: true,
+          stepperSize: 'small',
+          stepperColor: '#ffffff',
+          isFavorite: true,
+          favoritePosition: 'right_top',
+          favoriteBackground: '#ffffff',
+          favoritePaddingY: 4,
+          favoritePaddingX: 4,
+          favoriteRadius: 60,
+          isFavoriteBorder: false,
+          favoriteBorderWidth: 1,
+          favoriteBorderColor: 'black',
+          isTooltipTag: true,
+          isTooltipTagSlotEnabled: null,
+          favoriteIcon: {
+            type: 'JSSlot',
+            value: [
+              {
+                componentName: 'Icon',
+                props: {
+                  type: 'HeartFilled',
+                  size: 20,
+                  rotate: 0,
+                  spin: false,
+                  color: '#DC6803',
+                },
+              },
+            ],
+          },
+        },
+
+        // 状态叠加配置
+        skuStatusOverlayConfig: {
+          isOpen: false,
+          background: 'rgba(255, 255, 255, 0.70)',
+          text: '活动已结束',
+          fontSize: 18,
+          fontWeight: 600,
+          color: 'black',
+          slot: null,
+        },
+
+        // 文本区域配置
+        skuTextConfig: {
+          infoConfig: {
+            paddingY: 0,
+            justifyContent: 'center',
+            alignItems: 'start',
+            slot: null,
+          },
+
+          // 商品名称
+          skuNameConfig: {
+            isOpen: true,
+            value: 'Title',
+            fontSize: 18,
+            fontWeight: 600,
+            color: '#101828',
+            ellipsisCount: 1,
+          },
+
+          // 副标题/简述
+          skuSubtitleConfig: {
+            isOpen: true,
+            value: { 'zh-CN': '副标题', en: 'Subtitle' },
+            fontSize: 14,
+            fontWeight: 400,
+            color: '#101828',
+            ellipsisCount: 1,
+          },
+
+          // 价格
+          skuPriceConfig: {
+            isOpen: true,
+            isPrice: true,
+            priceFontSize: 18,
+            priceFontWeight: 600,
+            priceColor: '#101828',
+            isShowZeroPrice: true,
+            isShowFreePrice: false,
+            isOriginPrice: true,
+            originPriceFontSize: 16,
+            originPriceFontWeight: 400,
+            originPriceColor: '#667085',
+            isTaxPrice: true,
+            isCustomText: false,
+            customTextType: 'from',
+            customTextValue: 0,
+            customTextMinValue: 0,
+            customTextMaxValue: 0,
+          },
+
+          // 库存
+          skuStockConfig: {
+            isOpen: true,
+            fontSize: 14,
+            fontWeight: 500,
+            color: '#667085',
+            customText: null,
+          },
+
+          // 容量
+          skuCapacityConfig: {
+            isOpen: true,
+            fontSize: 14,
+            fontWeight: 500,
+            color: '#667085',
+            customText: null,
+          },
+
+          // 倒计时
+          skuCountdownConfig: {
+            isOpen: true,
+            fontSize: 14,
+            fontWeight: 500,
+            color: '#D92D20',
+            customText: null,
+          },
+
+          // 会员价标识
+          skuMemberPriceConfig: {
+            isOpen: true,
+            isMemberPrice: true,
+            fontSize: 18,
+            fontWeight: 600,
+            color: '#079455',
+            isIndicator: true,
+            indicatorBackground: '#079455',
+            indicatorPaddingY: 4,
+            indicatorPaddingX: 4,
+            indicatorMarginX: 4,
+            indicatorRadius: 4,
+            isIndicatorBorder: true,
+            indicatorBorderWidth: 1,
+            indicatorBorderColor: '#079455',
+            indicatorFontSize: 12,
+            indicatorFontWeight: 400,
+            indicatorColor: 'white',
+            indicatorIcon: {
+              type: 'JSSlot',
+              value: [
+                {
+                  componentName: 'Icon',
+                  props: {
+                    type: 'pisell2-check-verified-02',
+                    size: 12,
+                    rotate: 0,
+                    spin: false,
+                    color: '#CA8504',
+                  },
+                },
+              ],
+            },
+            customText: null,
+          },
+
+          // 标签区
+          skuTagsConfig: {
+            isOpen: true,
+            lists: [],
+            marginX: 4,
+            size: 'small',
+            isShowAll: true,
+            maxCount: 4,
+          },
+
+          // 时长
+          skuDurationConfig: {
+            isOpen: true,
+            fontSize: 14,
+            fontWeight: 500,
+            color: '#667085',
+            customText: null,
+          },
+
+          // 时间信息
+          skuTimeConfig: {
+            isOpen: true,
+            fontSize: 14,
+            fontWeight: 500,
+            color: '#667085',
+            customText: null,
+          },
+
+          // 资源信息
+          skuResourceConfig: {
+            isOpen: true,
+            fontSize: 14,
+            fontWeight: 500,
+            color: '#667085',
+            customText: null,
+          },
+
+          // 促销信息
+          skuPromotionsConfig: {
+            isOpen: true,
+            lists: [],
+            marginX: 4,
+            size: 'small',
+            isShowAll: true,
+            maxCount: 4,
+          },
+        },
+      },
+    },
+  },
+];
+
+export default snippets;