From 2d5005edbc09c975b8f154bdf0a5ddac83b6e0eb Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Thu, 5 Dec 2024 16:59:49 +0800 Subject: [PATCH 01/12] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E5=BE=AE?= =?UTF-8?q?=E4=BF=A1=E5=B0=8F=E7=A8=8B=E5=BA=8F=E6=BB=9A=E5=8A=A8=E6=8A=A5?= =?UTF-8?q?=E9=94=99=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/elevator/demos/taro/demo2.tsx | 2 +- src/packages/elevator/demos/taro/demo3.tsx | 1 + src/packages/elevator/demos/taro/demo4.tsx | 1 + src/packages/elevator/demos/taro/demo5.tsx | 1 + 4 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/packages/elevator/demos/taro/demo2.tsx b/src/packages/elevator/demos/taro/demo2.tsx index bd25162c9e..aa297b9228 100644 --- a/src/packages/elevator/demos/taro/demo2.tsx +++ b/src/packages/elevator/demos/taro/demo2.tsx @@ -113,7 +113,7 @@ const Demo2 = () => { } return ( { } return ( { } return ( { } return ( onItemClick(key, item)} From 570700f9d1ada6e556105687013b3d6e5361123e Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Wed, 18 Dec 2024 10:45:48 +0800 Subject: [PATCH 02/12] =?UTF-8?q?fix(countup):=20=E5=88=86=E9=9A=94?= =?UTF-8?q?=E7=AC=A6=E6=96=87=E5=AD=97=E9=A2=9C=E8=89=B2=E6=94=AF=E6=8C=81?= =?UTF-8?q?css=E5=8F=98=E9=87=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/animatingnumbers/countup.scss | 2 +- src/packages/animatingnumbers/demos/h5/demo2.tsx | 1 + src/packages/animatingnumbers/demos/taro/demo2.tsx | 1 + src/packages/animatingnumbers/doc.en-US.md | 1 + src/packages/animatingnumbers/doc.md | 1 + src/packages/animatingnumbers/doc.taro.md | 1 + src/packages/animatingnumbers/doc.zh-TW.md | 1 + src/styles/variables.scss | 4 ++++ 8 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/packages/animatingnumbers/countup.scss b/src/packages/animatingnumbers/countup.scss index 12779786c9..a2d53654cc 100644 --- a/src/packages/animatingnumbers/countup.scss +++ b/src/packages/animatingnumbers/countup.scss @@ -24,7 +24,7 @@ display: flex; height: 80%; align-items: flex-end; - color: $countup-bg-color; + color: $countup-separator-color; font-size: $countup-base-size; font-weight: $font-weight-bold; } diff --git a/src/packages/animatingnumbers/demos/h5/demo2.tsx b/src/packages/animatingnumbers/demos/h5/demo2.tsx index 324a8812e7..fe7dcf1399 100644 --- a/src/packages/animatingnumbers/demos/h5/demo2.tsx +++ b/src/packages/animatingnumbers/demos/h5/demo2.tsx @@ -7,6 +7,7 @@ const Demo2 = () => { nutuiCountupBgColor: `var(--nutui-color-primary)`, nutuiCountupColor: `#fff`, nutuiCountupLrMargin: `1px`, + nutuiCountupSeparatorColor: `var(--nutui-color-primary)`, } const [value, setEndNumer] = useState('1570.99') useEffect(() => { diff --git a/src/packages/animatingnumbers/demos/taro/demo2.tsx b/src/packages/animatingnumbers/demos/taro/demo2.tsx index a16bb9d4a5..caa6b8ac4a 100644 --- a/src/packages/animatingnumbers/demos/taro/demo2.tsx +++ b/src/packages/animatingnumbers/demos/taro/demo2.tsx @@ -7,6 +7,7 @@ const Demo2 = () => { nutuiCountupBgColor: `var(--nutui-color-primary)`, nutuiCountupColor: `#fff`, nutuiCountupLrMargin: `1px`, + nutuiCountupSeparatorColor: `var(--nutui-color-primary)`, } const [value, setEndNumer] = useState('1570.99') useEffect(() => { diff --git a/src/packages/animatingnumbers/doc.en-US.md b/src/packages/animatingnumbers/doc.en-US.md index da9320582e..f9fea38408 100644 --- a/src/packages/animatingnumbers/doc.en-US.md +++ b/src/packages/animatingnumbers/doc.en-US.md @@ -53,3 +53,4 @@ The component provides the following CSS variables, which can be used to customi | \--nutui-countup-lr-margin | margin of item | `0` | | \--nutui-countup-bg-color | background color of item | `inherit` | | \--nutui-countup-color | color of item | `$color-title` | +| \--nutui-countup-separator-color | The font color of the separator | `$color-title` | diff --git a/src/packages/animatingnumbers/doc.md b/src/packages/animatingnumbers/doc.md index f65ebf7ddc..78c824a6dc 100644 --- a/src/packages/animatingnumbers/doc.md +++ b/src/packages/animatingnumbers/doc.md @@ -53,3 +53,4 @@ import { AnimatingNumbers } from '@nutui/nutui-react' | \--nutui-countup-lr-margin | 每个数字的margin | `0` | | \--nutui-countup-bg-color | 每个数字块的背景色 | `inherit` | | \--nutui-countup-color | 每个数字块的字色 | `$color-title` | +| \--nutui-countup-separator-color | 分隔符的字体颜色 | `$color-title` | diff --git a/src/packages/animatingnumbers/doc.taro.md b/src/packages/animatingnumbers/doc.taro.md index cb821e0abd..13582470ea 100644 --- a/src/packages/animatingnumbers/doc.taro.md +++ b/src/packages/animatingnumbers/doc.taro.md @@ -53,3 +53,4 @@ import { AnimatingNumbers } from '@nutui/nutui-react-taro' | \--nutui-countup-lr-margin | 每个数字的margin | `0` | | \--nutui-countup-bg-color | 每个数字块的背景色 | `inherit` | | \--nutui-countup-color | 每个数字块的字色 | `$color-title` | +| \--nutui-countup-separator-color | 分隔符的字体颜色 | `$color-title` | diff --git a/src/packages/animatingnumbers/doc.zh-TW.md b/src/packages/animatingnumbers/doc.zh-TW.md index 8c50042e5f..7c7a85f486 100644 --- a/src/packages/animatingnumbers/doc.zh-TW.md +++ b/src/packages/animatingnumbers/doc.zh-TW.md @@ -53,3 +53,4 @@ import { AnimatingNumbers } from '@nutui/nutui-react' | \--nutui-countup-lr-margin | 每個數字的margin | `0` | | \--nutui-countup-bg-color | 每個數字塊的背景色 | `inherit` | | \--nutui-countup-color | 每個數字塊的字色 | `$color-title` | +| \--nutui-countup-separator-color | 分隔符的字體顏色 | `$color-title` | diff --git a/src/styles/variables.scss b/src/styles/variables.scss index ee8dc9720c..e995510c55 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -2423,6 +2423,10 @@ $countup-border-radius: var(--nutui-countup-border-radius, 4px) !default; $countup-lr-margin: var(--nutui-countup-lr-margin, 0) !default; $countup-bg-color: var(--nutui-countup-bg-color, inherit) !default; $countup-color: var(--nutui-countup-color, $color-title) !default; +$countup-separator-color: var( + --nutui-countup-separator-color, + $color-title +) !default; // layout（✅） $row-content-color: var(--nutui-row-content-color, #fff) !default; From fae6319c0508d211e2d00d3af370a04933a88afb Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 24 Dec 2024 16:50:20 +0800 Subject: [PATCH 03/12] feat(price): v15 --- src/packages/cell/cell.taro.tsx | 18 ++------- src/packages/cell/cell.tsx | 16 ++------ src/packages/cell/index.taro.ts | 2 +- src/packages/cell/index.ts | 2 +- src/packages/cell/types.ts | 14 +++++++ src/packages/price/demo.taro.tsx | 12 ++++-- src/packages/price/demo.tsx | 12 ++++-- src/packages/price/demos/h5/demo1.tsx | 15 +++++--- src/packages/price/demos/h5/demo2.tsx | 2 +- src/packages/price/demos/h5/demo3.tsx | 2 +- src/packages/price/demos/h5/demo4.tsx | 2 +- src/packages/price/demos/h5/demo5.tsx | 8 +--- src/packages/price/demos/h5/demo6.tsx | 2 +- src/packages/price/demos/h5/demo7.tsx | 2 +- src/packages/price/demos/h5/demo8.tsx | 6 +-- src/packages/price/demos/h5/demo9.tsx | 45 ++++++++++++++++++++++ src/packages/price/demos/taro/demo1.tsx | 15 +++++--- src/packages/price/demos/taro/demo2.tsx | 2 +- src/packages/price/demos/taro/demo3.tsx | 2 +- src/packages/price/demos/taro/demo4.tsx | 2 +- src/packages/price/demos/taro/demo5.tsx | 8 +--- src/packages/price/demos/taro/demo6.tsx | 2 +- src/packages/price/demos/taro/demo7.tsx | 2 +- src/packages/price/demos/taro/demo8.tsx | 6 +-- src/packages/price/demos/taro/demo9.tsx | 46 +++++++++++++++++++++++ src/packages/price/index.taro.ts | 2 +- src/packages/price/index.ts | 2 +- src/packages/price/price.scss | 50 ++++++++++++++++++++----- src/packages/price/price.taro.tsx | 20 +++------- src/packages/price/price.tsx | 20 +++------- src/packages/price/types.ts | 14 +++++++ src/styles/jd-font.scss | 10 ++++- src/styles/variables.scss | 48 ++++++++++++++++-------- 33 files changed, 278 insertions(+), 133 deletions(-) create mode 100644 src/packages/cell/types.ts create mode 100644 src/packages/price/demos/h5/demo9.tsx create mode 100644 src/packages/price/demos/taro/demo9.tsx create mode 100644 src/packages/price/types.ts diff --git a/src/packages/cell/cell.taro.tsx b/src/packages/cell/cell.taro.tsx index 22fdaafa43..241ad3894d 100644 --- a/src/packages/cell/cell.taro.tsx +++ b/src/packages/cell/cell.taro.tsx @@ -1,24 +1,12 @@ -import React, { FunctionComponent, ReactNode, useContext } from 'react' +import React, { FunctionComponent, useContext } from 'react' import classNames from 'classnames' import { ITouchEvent, View } from '@tarojs/components' -import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { ComponentDefaults } from '@/utils/typings' import { CellGroup } from '@/packages/cellgroup/cellgroup.taro' import CellGroupContext from '@/packages/cellgroup/context' import { useRtl } from '@/packages/configprovider/index.taro' import pxTransform from '@/utils/px-transform' - -export interface CellProps extends BasicComponent { - title: ReactNode - description: ReactNode - extra: ReactNode - radius: string | number - align: 'flex-start' | 'center' | 'flex-end' - clickable: boolean - isLast: boolean - onClick: ( - event: React.MouseEvent | ITouchEvent - ) => void -} +import { CellProps } from './types' const defaultProps = { ...ComponentDefaults, diff --git a/src/packages/cell/cell.tsx b/src/packages/cell/cell.tsx index 9281ee7a42..e63023173a 100644 --- a/src/packages/cell/cell.tsx +++ b/src/packages/cell/cell.tsx @@ -1,20 +1,10 @@ -import React, { FunctionComponent, ReactNode, useContext } from 'react' +import React, { FunctionComponent, useContext } from 'react' import classNames from 'classnames' -import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { ComponentDefaults } from '@/utils/typings' import CellGroup from '@/packages/cellgroup' import CellGroupContext from '@/packages/cellgroup/context' import { useRtl } from '@/packages/configprovider' - -export interface CellProps extends BasicComponent { - title: ReactNode - description: ReactNode - extra: ReactNode - radius: string | number - align: 'flex-start' | 'center' | 'flex-end' - clickable: boolean - isLast: boolean - onClick: (event: React.MouseEvent) => void -} +import { CellProps } from './types' const defaultProps = { ...ComponentDefaults, diff --git a/src/packages/cell/index.taro.ts b/src/packages/cell/index.taro.ts index 81c3a8f8db..0fd6bf07a4 100644 --- a/src/packages/cell/index.taro.ts +++ b/src/packages/cell/index.taro.ts @@ -1,4 +1,4 @@ import { Cell } from './cell.taro' -export type { CellProps } from './cell.taro' +export type { CellProps, CellAlign } from './types' export default Cell diff --git a/src/packages/cell/index.ts b/src/packages/cell/index.ts index 99f19d22a0..9f302af797 100644 --- a/src/packages/cell/index.ts +++ b/src/packages/cell/index.ts @@ -1,4 +1,4 @@ import { Cell } from './cell' -export type { CellProps } from './cell' +export type { CellProps, CellAlign } from './types' export default Cell diff --git a/src/packages/cell/types.ts b/src/packages/cell/types.ts new file mode 100644 index 0000000000..5c098df2a8 --- /dev/null +++ b/src/packages/cell/types.ts @@ -0,0 +1,14 @@ +import { BasicComponent } from '@/utils/typings' + +export type CellAlign = 'flex-start' | 'center' | 'flex-end' | 'baseline' + +export interface CellProps extends BasicComponent { + title: React.ReactNode + description: React.ReactNode + extra: React.ReactNode + radius: string | number + align: CellAlign + clickable: boolean + isLast: boolean + onClick: (event: React.MouseEvent) => void +} diff --git a/src/packages/price/demo.taro.tsx b/src/packages/price/demo.taro.tsx index 6a3eec9f03..e3e92ebfcd 100644 --- a/src/packages/price/demo.taro.tsx +++ b/src/packages/price/demo.taro.tsx @@ -11,11 +11,12 @@ import Demo5 from './demos/taro/demo5' import Demo6 from './demos/taro/demo6' import Demo7 from './demos/taro/demo7' import Demo8 from './demos/taro/demo8' +import Demo9 from './demos/taro/demo9' const PriceDemo = () => { const [translated] = useTranslate({ 'zh-CN': { - title1: '支持三种尺寸：small、normal、large', + title1: '支持尺寸：small、normal、large、xlarge', title2: '不保留小数', title3: '有人民币符号，无千位分隔', title4: '有人民币符号，有千位分隔，保留小数点后三位', @@ -23,9 +24,10 @@ const PriceDemo = () => { title6: '异步随机变更', title7: '不展示 symbol 符号', title8: '划线价', + title9: '场域分类：原子级、模块级、列表级、页面级', }, 'zh-TW': { - title1: '支持三種尺寸：small、normal、large', + title1: '支持尺寸：small、normal、large、xlarge', title2: '不保留小數', title3: '有人民幣符號，無千位分隔', title4: '有人民幣符號，有千位分隔，保留小數點後三位', @@ -33,9 +35,10 @@ const PriceDemo = () => { title6: '異步隨機變更', title7: '不展示 symbol 符號', title8: '劃線價', + title9: '場域分類：原子級、模塊級、列表級、頁面級', }, 'en-US': { - title1: 'Support three sizes：small、normal、large', + title1: 'Support sizes：small、normal、large、xlarge', title2: 'No decimals', title3: 'With RMB symbol, no thousands separator', title4: @@ -44,6 +47,7 @@ const PriceDemo = () => { title6: 'Asynchronous random changes', title7: 'Do not display symbol', title8: 'Line-through price', + title9: 'Field classification: atomic, module, list, page', }, }) return ( @@ -52,6 +56,8 @@ const PriceDemo = () => { {translated.title1} + {translated.title9} + {translated.title2} {translated.title3} diff --git a/src/packages/price/demo.tsx b/src/packages/price/demo.tsx index 28db3583b3..4b4f672e29 100644 --- a/src/packages/price/demo.tsx +++ b/src/packages/price/demo.tsx @@ -8,11 +8,12 @@ import Demo5 from './demos/h5/demo5' import Demo6 from './demos/h5/demo6' import Demo7 from './demos/h5/demo7' import Demo8 from './demos/h5/demo8' +import Demo9 from './demos/h5/demo9' const PriceDemo = () => { const [translated] = useTranslate({ 'zh-CN': { - title1: '支持三种尺寸：small、normal、large', + title1: '支持尺寸：small、normal、large、xlarge', title2: '不保留小数', title3: '有人民币符号，无千位分隔', title4: '有人民币符号，有千位分隔，保留小数点后三位', @@ -20,9 +21,10 @@ const PriceDemo = () => { title6: '异步随机变更', title7: '不展示 symbol 符号', title8: '划线价', + title9: '场域分类：原子级、模块级、列表级、页面级', }, 'zh-TW': { - title1: '支持三種尺寸：small、normal、large', + title1: '支持尺寸：small、normal、large、xlarge', title2: '不保留小數', title3: '有人民幣符號，無千位分隔', title4: '有人民幣符號，有千位分隔，保留小數點後三位', @@ -30,9 +32,10 @@ const PriceDemo = () => { title6: '異步隨機變更', title7: '不展示 symbol 符號', title8: '劃線價', + title9: '場域分類：原子級、模塊級、列表級、頁面級', }, 'en-US': { - title1: 'Support three sizes：small、normal、large', + title1: 'Support sizes：small、normal、large、xlarge', title2: 'No decimals', title3: 'With RMB symbol, no thousands separator', title4: @@ -41,6 +44,7 @@ const PriceDemo = () => { title6: 'Asynchronous random changes', title7: 'Do not display symbol', title8: 'Line-through price', + title9: 'Field classification: atomic, module, list, page', }, }) @@ -48,6 +52,8 @@ const PriceDemo = () => {

{translated.title1}

+

{translated.title9}

+

{translated.title2}

{translated.title3}

diff --git a/src/packages/price/demos/h5/demo1.tsx b/src/packages/price/demos/h5/demo1.tsx index c6f8175387..2c1df37ef5 100644 --- a/src/packages/price/demos/h5/demo1.tsx +++ b/src/packages/price/demos/h5/demo1.tsx @@ -1,19 +1,22 @@ import React from 'react' -import { Price, Cell } from '@nutui/nutui-react' +import { Price, Cell, CellGroup } from '@nutui/nutui-react' const Demo1 = () => { return ( - <> + - + - + - + - + + + + ) } export default Demo1 diff --git a/src/packages/price/demos/h5/demo2.tsx b/src/packages/price/demos/h5/demo2.tsx index fa16698314..77782262ee 100644 --- a/src/packages/price/demos/h5/demo2.tsx +++ b/src/packages/price/demos/h5/demo2.tsx @@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react' const Demo2 = () => { return ( - + ) } diff --git a/src/packages/price/demos/h5/demo3.tsx b/src/packages/price/demos/h5/demo3.tsx index 60b46ccf9f..492739b3ea 100644 --- a/src/packages/price/demos/h5/demo3.tsx +++ b/src/packages/price/demos/h5/demo3.tsx @@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react' const Demo3 = () => { return ( - + ) } diff --git a/src/packages/price/demos/h5/demo4.tsx b/src/packages/price/demos/h5/demo4.tsx index 34904db1d3..84f6c4c721 100644 --- a/src/packages/price/demos/h5/demo4.tsx +++ b/src/packages/price/demos/h5/demo4.tsx @@ -4,7 +4,7 @@ import { Price, Cell } from '@nutui/nutui-react' const Demo4 = () => { return ( - + ) } diff --git a/src/packages/price/demos/h5/demo5.tsx b/src/packages/price/demos/h5/demo5.tsx index efda097104..0e267ca7b6 100644 --- a/src/packages/price/demos/h5/demo5.tsx +++ b/src/packages/price/demos/h5/demo5.tsx @@ -4,13 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react' const Demo5 = () => { return ( - + ) } diff --git a/src/packages/price/demos/h5/demo6.tsx b/src/packages/price/demos/h5/demo6.tsx index 914071c963..bf0e9441be 100644 --- a/src/packages/price/demos/h5/demo6.tsx +++ b/src/packages/price/demos/h5/demo6.tsx @@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react' const Demo6 = () => { return ( - + ) } diff --git a/src/packages/price/demos/h5/demo7.tsx b/src/packages/price/demos/h5/demo7.tsx index 8c6bca6e44..3f1bd0c639 100644 --- a/src/packages/price/demos/h5/demo7.tsx +++ b/src/packages/price/demos/h5/demo7.tsx @@ -14,7 +14,7 @@ const Demo7 = () => { }, []) return ( - + ) } diff --git a/src/packages/price/demos/h5/demo8.tsx b/src/packages/price/demos/h5/demo8.tsx index b7f0c82e8d..97a79d55b8 100644 --- a/src/packages/price/demos/h5/demo8.tsx +++ b/src/packages/price/demos/h5/demo8.tsx @@ -3,10 +3,10 @@ import { Cell, Price } from '@nutui/nutui-react' const Demo8 = () => { return ( - - + +   - + ) } diff --git a/src/packages/price/demos/h5/demo9.tsx b/src/packages/price/demos/h5/demo9.tsx new file mode 100644 index 0000000000..b8fd69b3c1 --- /dev/null +++ b/src/packages/price/demos/h5/demo9.tsx @@ -0,0 +1,45 @@ +import React from 'react' +import { Cell, CellGroup, Price } from '@nutui/nutui-react' + +const Demo9 = () => { + const colorStyles = { + color: 'var(--nutui-color-primary)', + fontSize: '12px', + lineHeight: '16px', + } + const exclusivePriceStyles = { + margin: '0 8px 0 4px', + } + const seckillPriceStyles = { + margin: '0 8px 0 4px', + } + const priceStyles = { + margin: '0 4px 0 2px', + } + + return ( + + + + 专享价 + + + + + 粉丝到手价 + + + + + 秒杀价 + + + + + 专享价 + + + + ) +} +export default Demo9 diff --git a/src/packages/price/demos/taro/demo1.tsx b/src/packages/price/demos/taro/demo1.tsx index 8ad987499a..1ac546bffb 100644 --- a/src/packages/price/demos/taro/demo1.tsx +++ b/src/packages/price/demos/taro/demo1.tsx @@ -1,19 +1,22 @@ import React from 'react' -import { Price, Cell } from '@nutui/nutui-react-taro' +import { Price, Cell, CellGroup } from '@nutui/nutui-react-taro' const Demo1 = () => { return ( - <> + - + - + - + - + + + + ) } export default Demo1 diff --git a/src/packages/price/demos/taro/demo2.tsx b/src/packages/price/demos/taro/demo2.tsx index ad47a89ec3..03fdf3def3 100644 --- a/src/packages/price/demos/taro/demo2.tsx +++ b/src/packages/price/demos/taro/demo2.tsx @@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react-taro' const Demo2 = () => { return ( - + ) } diff --git a/src/packages/price/demos/taro/demo3.tsx b/src/packages/price/demos/taro/demo3.tsx index 7a60184001..9505f09abe 100644 --- a/src/packages/price/demos/taro/demo3.tsx +++ b/src/packages/price/demos/taro/demo3.tsx @@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react-taro' const Demo3 = () => { return ( - + ) } diff --git a/src/packages/price/demos/taro/demo4.tsx b/src/packages/price/demos/taro/demo4.tsx index 12bba9ecdf..658567849a 100644 --- a/src/packages/price/demos/taro/demo4.tsx +++ b/src/packages/price/demos/taro/demo4.tsx @@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react-taro' const Demo4 = () => { return ( - + ) } diff --git a/src/packages/price/demos/taro/demo5.tsx b/src/packages/price/demos/taro/demo5.tsx index 99d7d22d9a..cc23abd5f8 100644 --- a/src/packages/price/demos/taro/demo5.tsx +++ b/src/packages/price/demos/taro/demo5.tsx @@ -4,13 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react-taro' const Demo5 = () => { return ( - + ) } diff --git a/src/packages/price/demos/taro/demo6.tsx b/src/packages/price/demos/taro/demo6.tsx index 00fa1639c6..d1755c9480 100644 --- a/src/packages/price/demos/taro/demo6.tsx +++ b/src/packages/price/demos/taro/demo6.tsx @@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react-taro' const Demo6 = () => { return ( - + ) } diff --git a/src/packages/price/demos/taro/demo7.tsx b/src/packages/price/demos/taro/demo7.tsx index eb423cc18f..99fbf41da6 100644 --- a/src/packages/price/demos/taro/demo7.tsx +++ b/src/packages/price/demos/taro/demo7.tsx @@ -14,7 +14,7 @@ const Demo7 = () => { }, []) return ( - + ) } diff --git a/src/packages/price/demos/taro/demo8.tsx b/src/packages/price/demos/taro/demo8.tsx index 706db12db0..ec91299a2c 100644 --- a/src/packages/price/demos/taro/demo8.tsx +++ b/src/packages/price/demos/taro/demo8.tsx @@ -4,10 +4,10 @@ import { Text } from '@tarojs/components' const Demo8 = () => { return ( - - + +   - + ) } diff --git a/src/packages/price/demos/taro/demo9.tsx b/src/packages/price/demos/taro/demo9.tsx new file mode 100644 index 0000000000..e3f5042a90 --- /dev/null +++ b/src/packages/price/demos/taro/demo9.tsx @@ -0,0 +1,46 @@ +import React from 'react' +import { Cell, CellGroup, Price } from '@nutui/nutui-react-taro' +import { harmony } from '@/utils/platform-taro' + +const Demo9 = () => { + const colorStyles = { + color: harmony() ? '' : 'var(--nutui-color-primary)', + fontSize: '12px', + lineHeight: '16px', + } + const exclusivePriceStyles = { + margin: '0 8px 0 4px', + } + const seckillPriceStyles = { + margin: '0 8px 0 4px', + } + const priceStyles = { + margin: '0 4px 0 2px', + } + + return ( + + + + 专享价 + + + + + 粉丝到手价 + + + + + 秒杀价 + + + + + 专享价 + + + + ) +} +export default Demo9 diff --git a/src/packages/price/index.taro.ts b/src/packages/price/index.taro.ts index 647e5ce6ad..71e37a819a 100644 --- a/src/packages/price/index.taro.ts +++ b/src/packages/price/index.taro.ts @@ -1,4 +1,4 @@ import { Price } from './price.taro' -export type { PriceProps } from './price.taro' +export type { PriceProps, PriceSize, PriceType } from './types' export default Price diff --git a/src/packages/price/index.ts b/src/packages/price/index.ts index c9b2829a34..7aeeabd1a5 100644 --- a/src/packages/price/index.ts +++ b/src/packages/price/index.ts @@ -1,4 +1,4 @@ import { Price } from './price' -export type { PriceProps } from './price' +export type { PriceProps, PriceSize, PriceType } from './types' export default Price diff --git a/src/packages/price/price.scss b/src/packages/price/price.scss index 8d600e0312..5d72da0e05 100644 --- a/src/packages/price/price.scss +++ b/src/packages/price/price.scss @@ -4,19 +4,41 @@ display: flex; flex-direction: row; align-items: baseline; + height: fit-content; + background-color: bisque; &-symbol, &-integer, &-decimal { - color: $color-primary; + color: $price-color; + font-family: 'JD'; + line-height: 1; + } + + &-primary { + .nut-price { + &-symbol, + &-integer, + &-decimal { + //font-family: "JD-Bold"; + font-weight: 700; + color: $price-primary-color; + } + } } &-symbol { - font-size: $price-symbol-medium-size; padding-right: $price-symbol-padding-right; + &-xlarge { + font-size: $price-symbol-xlarge-size; + } &-large { - font-size: $price-symbol-big-size; + font-size: $price-symbol-large-size; + } + + &-normal { + font-size: $price-symbol-normal-size; } &-small { @@ -30,10 +52,16 @@ } &-integer { - font-size: $price-integer-medium-size; + &-xlarge { + font-size: $price-integer-xlarge-size; + } &-large { - font-size: $price-integer-big-size; + font-size: $price-integer-large-size; + } + + &-normal { + font-size: $price-integer-normal-size; } &-small { @@ -42,10 +70,16 @@ } &-decimal { - font-size: $price-decimal-medium-size; + &-xlarge { + font-size: $price-decimal-xlarge-size; + } &-large { - font-size: $price-decimal-big-size; + font-size: $price-decimal-large-size; + } + + &-normal { + font-size: $price-decimal-normal-size; } &-small { @@ -55,7 +89,5 @@ &-line { text-decoration: line-through $price-line-color; - font-size: $price-line-font-size; - color: $price-line-color; } } diff --git a/src/packages/price/price.taro.tsx b/src/packages/price/price.taro.tsx index 91484281ce..ebf8fd7863 100644 --- a/src/packages/price/price.taro.tsx +++ b/src/packages/price/price.taro.tsx @@ -1,30 +1,24 @@ import React, { FunctionComponent } from 'react' import { Text } from '@tarojs/components' import classNames from 'classnames' -import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { ComponentDefaults } from '@/utils/typings' import { useRtl } from '@/packages/configprovider/index.taro' +import { PriceProps } from './types' -export interface PriceProps extends BasicComponent { - price: number | string - symbol: string - digits: number - thousands: boolean - position: string - size: string - line: boolean -} const defaultProps = { ...ComponentDefaults, + type: 'primary', price: 0, symbol: '¥', digits: 2, thousands: false, position: 'before', - size: 'large', + size: 'normal', line: false, } as PriceProps export const Price: FunctionComponent> = (props) => { const { + type, price, symbol, digits, @@ -112,9 +106,7 @@ export const Price: FunctionComponent> = (props) => { return ( {symbol && position === 'before' ? renderSymbol() : null} diff --git a/src/packages/price/price.tsx b/src/packages/price/price.tsx index a6bbdabd6b..3fbb53c136 100644 --- a/src/packages/price/price.tsx +++ b/src/packages/price/price.tsx @@ -1,29 +1,23 @@ import React, { FunctionComponent } from 'react' import classNames from 'classnames' -import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { ComponentDefaults } from '@/utils/typings' import { useRtl } from '@/packages/configprovider/index' +import { PriceProps } from './types' -export interface PriceProps extends BasicComponent { - price: number | string - symbol: string - digits: number - thousands: boolean - position: string - size: string - line: boolean -} const defaultProps = { ...ComponentDefaults, + type: 'primary', price: 0, symbol: '¥', digits: 2, thousands: false, position: 'before', - size: 'large', + size: 'normal', line: false, } as PriceProps export const Price: FunctionComponent> = (props) => { const { + type, price, symbol, digits, @@ -101,9 +95,7 @@ export const Price: FunctionComponent> = (props) => { return (
diff --git a/src/packages/price/types.ts b/src/packages/price/types.ts new file mode 100644 index 0000000000..9ed08e2269 --- /dev/null +++ b/src/packages/price/types.ts @@ -0,0 +1,14 @@ +import { BasicComponent } from '@/utils/typings' + +export type PriceSize = 'xlarge' | 'large' | 'normal' | 'small' | 'mini' +export type PriceType = 'default' | 'primary' +export interface PriceProps extends BasicComponent { + type: PriceType + price: number | string + symbol: string + digits: number + thousands: boolean + position: string + size: PriceSize + line: boolean +} diff --git a/src/styles/jd-font.scss b/src/styles/jd-font.scss index bb20c0c72a..616644161b 100644 --- a/src/styles/jd-font.scss +++ b/src/styles/jd-font.scss @@ -1,8 +1,16 @@ @font-face { font-family: 'JD'; - src: url('data:font/ttf;charset=utf-8;base64,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') + src: url('data:font/ttf;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTamiMnsAAA7YAAAAHEdERUYAKQAYAAAOuAAAAB5PUy8yeoF5HQAAAVgAAABgY21hcGtpMjEAAAIAAAABcmdhc3D//wADAAAOsAAAAAhnbHlmcqvHpQAAA5wAAAXcaGVhZC36UY0AAADcAAAANmhoZWERxQaTAAABFAAAACRobXR4S/MGzQAAAbgAAABIbG9jYQ1iC/QAAAN0AAAAJm1heHAAXgBMAAABOAAAACBuYW1lrP1qywAACXgAAATecG9zdFeSjFQAAA5YAAAAVgABAAAAAgAAb+Mu6l8PPPUACwgAAAAAAONzNPoAAAAA44/SOgA9/mYHmgb2AAAACAACAAAAAAAAAAEAAAb2/mYDMwgaAAAAAAeaAAEAAAAAAAAAAAAAAAAAAAASAAEAAAASAEkACgAAAAAAAgAAAAEAAQAAAEAAAAAAAAAABASZAZAABQAABTMEzQAAAJoFMwTNAAACzQBmAo8AAAAAAAAAAAAAAAAAAAADCAAAAAAAABAAAAAAVUtXTgDAACD/5Qb2/mYDMwiPAZoAAAABAAAAAATNBfYAAAAgAAEERwDNAAAAAAKqAAABmQAAAbIAbwTSAFQDSwA9BNIAhQTSAH8E0gBEBNIAfwTSAGYE0gCJBNIAVATSAGQFeACeCBoAVgV4AJ4AAAADAAAAAwAAABwAAQAAAAAAbAADAAEAAAAcAAQAUAAAABAAEAADAAAAIAAuADkAoAClUUP/5f//AAAAIAAuADAAoAClUUP/5f///+P/1v/V/2P/aq7NACwAAQAAAAAAAAAAAAAAAAAAAAAAAAEGAAABAAAAAAAAAAECAAAAAgAAAAAAAAAAAAAAAAAAAAEAAAMAAAAAAAAAAAAAAAAABAAFBgcICQoLDA0OAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAGYAZgBmAIAAygDcARIBQgFgAZIBxgHaAiICWgKEAsQC7gAAAAoAzf5mA4MG9gADAA4AEgAeACQALgA0AEAARABIAAABESEREyE1IzczNSEVMwc1ITUhNSE1IxUzNTMVIzUjNSE1IxUhNTM1MzUhFTMVIzUhNSM1IzUhNSM1MzUhFTMVIxM1MxUDNTMVA4P9SqIBat+ZRv6WmZkBav6WAWrbTEfbRwFqSP7e24/+lo+PAWqP2wFqj4/+mI2PR9vbSAb293AIkPgISGZKSmbh+IP4ezNmrjHbkjSZSEhS1UqaOUhSR0dS+qhmZgQ9UFAAAAEAb/97AVoAZgAPAAAFMjY9ATQmKwEiBh0BFBYzARQdKSkdXh0qKh2FKR1eHSoqHV4dKQACAFT/ZAR/BgoAFQAzAAABMh4DEA4DIi4DNTQ+AwAQHgUzMj4FEC4FIyIOBAJoM1pdQioqQl1aZlldQSoQLkl8/j0nP1pdblovMFtuXVs/Jyc/W11uWzAvW21dWj8FSB9ZjfD+xvCOWR8fWY7wnWKstH9R/gf+zv6shEwvEBAvTISs/gEy/q2ETS8QEC9NhK0AAAAAAQA9/3sCfwX2AAYAAAUjEQU1JTMCf83+iwFj34UFpurk2wAAAQCF/3kEWgYKACAAAAUhNQE+AzU0JiMiBgcGByc2JDMyHgEVFA4DBwEhBFr8KwI3GDlBK6l4VY0kGgOuJQEFp4PdgS09Sy0N/lQCvIeRAqAaTGp6NXipXkw/LmWg0oHdg0WYdGw2Df4EAAAAAQB//2QEagX2ABsAAAEWABUUDgEjIiYnNx4BMzI2ECYjIgcnASE1IRUCedIBH47zj5r+Q6gopmWMxsaMcl2HAgT9vwNFA4cO/tDSkPWOooVjW27HARbFRocCOrS0AAAAAgBE/3sEewX2AAIADQAAAREBBzUBMxEzFSMRIxEC8v5B7wKR6b29zAGkAwT8/LSXBG/7rrT+iwF1AAAAAQB//2YEagX2AB0AAAEyHgEQDgEjIiYnNx4BMzI2ECYjIgYHJxMhFSEDNgJYkPSOjvSQmf1DpiqlZIzGxoxNhy6oXgMZ/ZMzZgOkkvr+2vqSoYZhWW7MASTMQTpjAyu0/jUtAAIAZv9mBG8F9gAJAB0AACQgNjU0JiMiBhAnNDc2ADczBgE2MzIeARAOASAuAQHkAQy+voaFvsFrFwFbWdl5/v48NIzui4vu/ujuiiW+hYa+vv70hqrFKwJUoNz+Rg2L7v7o7YmJ7QAAAQCJ/3sESgX2AAYAAAkBIwEhNSEESv3ZzQIZ/RoDwQVm+hUFx7QAAAMAVP9kBH8GCgAJACQALgAAJCA2NTQmIAYVFCc0NjcuATU0PgEzMgAVFAYHHgEVFA4BIyIuAQEUFjI2NTQmIgYB2wEaycn+5sfAfWxMV3zVfcABD1dNbICP95GQ9Y8BBp7gn5/gniW4gYK6uYOBgYLdRT+vYnjLdf7/t2KvP0XegYnpiIjpA31mkpJmZ5GRAAIAZP95BG0GCgAJAB8AAAAQFiA2NTQmIyIAED4BIB4BFRQHBgcGAAcjNgEGIyImASO9AQy+voaF/oOK7gEY7osNGEYU/qNc13MBCDc6jO4Eiv70vb6Fhr7+MgEY7oqK7owmRoCCJP2qpdQBwQyKAAABAJ7/ewTVBZEAFgAAASEVIRUhFSERIxEhNSE1ITUhATMJATMDZAFQ/mcBmf5nwf5nAZn+ZwFP/o7TAUkBStEDEqzIrP6JAXesyKwCf/3HAjkAAAACAFb/JQeaBh8AAwAlAAABIRUhAxckNzYTNSERFDMhMjc2EycCBwYrASI1ESE1IRUhFQIHBgE1BZb6at9SAVmZnAkBc8MBLW42PxWKDCMYRuVaAjv5GQIWBn+ABh+S+hV9fuL7AY4f/N/AP0UBVSv+5jQvWAMCkZEf/q3SxwAAAAEAnv97BNUFkQAWAAABIRUhFSEVIREjESE1ITUhNSEBMwkBMwNkAVD+ZwGZ/mfB/mcBmf5nAU/+jtMBSQFK0QMSrMis/okBd6zIrAJ//ccCOQAAAAAAGwFKAAEAAAAAAAAAMgBmAAEAAAAAAAEAFQDNAAEAAAAAAAIABwDzAAEAAAAAAAMAIQE/AAEAAAAAAAQABAF3AAEAAAAAAAUAIQHAAAEAAAAAAAYAFgIQAAEAAAAAAAkAAAItAAEAAAAAABAABQJCAAEAAAAAABEABwJYAAMAAQQJAAAAZAAAAAMAAQQJAAEAMgCZAAMAAQQJAAIADgDjAAMAAQQJAAMAQgD7AAMAAQQJAAQAFAFhAAMAAQQJAAUAQgF8AAMAAQQJAAYALAHiAAMAAQQJAAkABAInAAMAAQQJABAAEgIuAAMAAQQJABEADgJIAAMAAQgEAAAAZAJgAAMAAQgEAAEAMgLGAAMAAQgEAAIADgL6AAMAAQgEAAQAFAMKAAMAAQgEAAcATgMgAAMAAQgEABAAEgNwAAMAAQgEABEADgOEAEMAbwBwAHkAcgBpAGcAaAB0ACgAYwApACAAIABCAEUASQBKAEkATgBHACAASgBJAE4ARwBEAE8ATgBHACAAVABFAEMASABOAE8ATABPAEcAWQAgAEMATwAuACwAIABMAFQARAAAQ29weXJpZ2h0KGMpICBCRUlKSU5HIEpJTkdET05HIFRFQ0hOT0xPR1kgQ08uLCBMVEQATqxOHGtjntEAIABWADIALgAxACAASgBEAFoAaABlAG4AZwBIAGUAaQAgAFYAMgAuADEAACBWMi4xIEpEWmhlbmdIZWkgVjIuMQAAUgBlAGcAdQBsAGEAcgAAUmVndWxhcgAAMgAuADAAMAAwADsAVQBLAFcATgA7AEoARABaAGgAZQBuAGcASABlAGkAVgAyAC4AMQAtAFIAZQBnAHUAbABhAHIAADIuMDAwO1VLV047SkRaaGVuZ0hlaVYyLjEtUmVndWxhcgBOrE4ca2Oe0QBWADIALgAxXjiJxAAAVjIuMQAAVgBlAHIAcwBpAG8AbgAgADIALgAwADAAMAA7AEcAbAB5AHAAaABzACAAMwAuADEALgAxACAAKAAzADEAMwA1ACkAAFZlcnNpb24gMi4wMDA7R2x5cGhzIDMuMS4xICgzMTM1KQAASgBEAFoAaABlAG4AZwBIAGUAaQBWADIALgAxAC0AUgBlAGcAdQBsAGEAcgAASkRaaGVuZ0hlaVYyLjEtUmVndWxhcgCWdnQ8AAAATqxOHGtjntEAIABWADIALgAxAAAgVjIuMQAAUgBlAGcAdQBsAGEAcgAAUmVndWxhcgAAQwBvAHAAeQByAGkAZwBoAHQAKABjACkAIAAgAEIARQBJAEoASQBOAEcAIABKAEkATgBHAEQATwBOAEcAIABUAEUAQwBIAE4ATwBMAE8ARwBZACAAQwBPAC4ALAAgAEwAVABEAABOrE4ca2Oe0QAgAFYAMgAuADEAIABKAEQAWgBoAGUAbgBnAEgAZQBpACAAVgAyAC4AMQAAAFIAZQBnAHUAbABhAHIAAE6sThxrY57RAFYAMgAuADFeOInEAAAAQgB5ACAAQgBFAEkASgBJAE4ARwAgAEoASQBOAEcARABPAE4ARwAgAFQARQBDAEgATgBPAEwATwBHAFkAIABDAE8ALgAsACAATABUAEQAAE6sThxrY57RACAAVgAyAC4AMQAAAFIAZQBnAHUAbABhAHIAAAAAAAIAAAAAAAD/NABmAAAAAAAAAAAAAAAAAAAAAAAAAAAAEgAAAAEAAgADABEAEwAUABUAFgAXABgAGQAaABsAHACWAQIBAwd1bmk1MTQzB3VuaUZGRTUAAAAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADABEAAQAEAAAAAgAAAAAAAAABAAAAAOKfK0YAAAAA43M0+gAAAADjj9I6') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } +@font-face { + font-family: 'JD-Bold'; + src: url('data:font/ttf;charset=utf-8;base64,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') + format('truetype'); + font-weight: 700; + font-style: normal; + font-display: swap; +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 58c9661fc1..569e44c4ff 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -779,32 +779,50 @@ $countdown-number-primary-border-color: var( $color-primary ) !default; -//large price（✅） +//price（✅） +$price-primary-color: var(--nutui-price-color, $color-primary) !default; +$price-color: var(--nutui-price-color, var(--nutui-color-text-help)) !default; +$price-line-color: var( + --nutui-price-line-color, + var(--nutui-color-text-help) +) !default; +$price-line-font-size: var(--nutui-price-line-font-size, 12px) !default; $price-symbol-padding-right: var( --nutui-price-symbol-padding-right, - 1px + 0px ) !default; -$price-symbol-big-size: var(--nutui-price-symbol-big-size, 18px) !default; -$price-integer-big-size: var(--nutui-price-integer-big-size, 24px) !default; -$price-decimal-big-size: var(--nutui-price-decimal-big-size, 18px) !default; + +//xlarge price（✅） +$price-symbol-xlarge-size: var(--nutui-price-symbol-xlarge-size, 12px) !default; +$price-integer-xlarge-size: var( + --nutui-price-integer-xlarge-size, + 24px +) !default; +$price-decimal-xlarge-size: var( + --nutui-price-decimal-xlarge-size, + 12px +) !default; + +//large price（✅） +$price-symbol-large-size: var(--nutui-price-symbol-large-size, 12px) !default; +$price-integer-large-size: var(--nutui-price-integer-large-size, 18px) !default; +$price-decimal-large-size: var(--nutui-price-decimal-large-size, 12px) !default; //normal price（✅） -$price-line-color: var(--nutui-price-line-color, $color-border) !default; -$price-line-font-size: var(--nutui-price-line-font-size, 12px) !default; -$price-symbol-medium-size: var(--nutui-price-symbol-medium-size, 14px) !default; -$price-integer-medium-size: var( - --nutui-price-integer-medium-size, +$price-symbol-normal-size: var(--nutui-price-symbol-normal-size, 12px) !default; +$price-integer-normal-size: var( + --nutui-price-integer-normal-size, 16px ) !default; -$price-decimal-medium-size: var( - --nutui-price-decimal-medium-size, - 14px +$price-decimal-normal-size: var( + --nutui-price-decimal-normal-size, + 12px ) !default; // small price（✅） -$price-symbol-small-size: var(--nutui-price-symbol-small-size, 10px) !default; +$price-symbol-small-size: var(--nutui-price-symbol-small-size, 12px) !default; $price-integer-small-size: var(--nutui-price-integer-small-size, 12px) !default; -$price-decimal-small-size: var(--nutui-price-decimal-small-size, 10px) !default; +$price-decimal-small-size: var(--nutui-price-decimal-small-size, 12px) !default; //avatar（✅） $avatar-square: var(--nutui-avatar-square, 5px) !default; From 1e2a29c6d735b0e8d4caaf55d76bbe54ebd556a9 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 24 Dec 2024 19:27:20 +0800 Subject: [PATCH 04/12] =?UTF-8?q?fix:=20demo=E5=92=8C=E6=96=87=E6=A1=A3?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- migrate-from-v2.md | 5 +- src/packages/price/demos/h5/demo8.tsx | 2 +- src/packages/price/demos/h5/demo9.tsx | 15 ++--- src/packages/price/demos/taro/demo8.tsx | 2 +- src/packages/price/demos/taro/demo9.tsx | 32 +++++----- src/packages/price/doc.en-US.md | 42 ++++++++----- src/packages/price/doc.md | 40 ++++++++---- src/packages/price/doc.taro.md | 41 +++++++----- src/packages/price/doc.zh-TW.md | 50 +++++++++------ src/packages/price/price.scss | 16 +++-- src/packages/price/price.taro.tsx | 83 ++++++++++++++++--------- src/packages/price/price.tsx | 37 +++++------ src/packages/price/types.ts | 4 +- src/styles/variables.scss | 5 +- 14 files changed, 229 insertions(+), 145 deletions(-) diff --git a/migrate-from-v2.md b/migrate-from-v2.md index b16fc20d68..99cd4fd965 100644 --- a/migrate-from-v2.md +++ b/migrate-from-v2.md @@ -747,9 +747,8 @@ plugins: [ #### Price -- `decimalDigits` 重命名为 `digits` -- 移除 `needSymbol`，通过 `symbol` 判断是否需要加上 symbol 符号 -- 新增 `line`，是否展示划线价 +- 修改 `size`，增加 'xlarge' 尺寸 +- 新增 `type`, 价格类型 #### Progress diff --git a/src/packages/price/demos/h5/demo8.tsx b/src/packages/price/demos/h5/demo8.tsx index 97a79d55b8..c3e1f9afb2 100644 --- a/src/packages/price/demos/h5/demo8.tsx +++ b/src/packages/price/demos/h5/demo8.tsx @@ -6,7 +6,7 @@ const Demo8 = () => {   - + ) } diff --git a/src/packages/price/demos/h5/demo9.tsx b/src/packages/price/demos/h5/demo9.tsx index b8fd69b3c1..629fccd6eb 100644 --- a/src/packages/price/demos/h5/demo9.tsx +++ b/src/packages/price/demos/h5/demo9.tsx @@ -5,14 +5,11 @@ const Demo9 = () => { const colorStyles = { color: 'var(--nutui-color-primary)', fontSize: '12px', - lineHeight: '16px', + lineHeight: 1, } const exclusivePriceStyles = { margin: '0 8px 0 4px', } - const seckillPriceStyles = { - margin: '0 8px 0 4px', - } const priceStyles = { margin: '0 4px 0 2px', } @@ -22,22 +19,22 @@ const Demo9 = () => { 专享价 - + 粉丝到手价 - + - 秒杀价 - + 秒杀价 + 专享价 - + ) diff --git a/src/packages/price/demos/taro/demo8.tsx b/src/packages/price/demos/taro/demo8.tsx index ec91299a2c..e7e0769711 100644 --- a/src/packages/price/demos/taro/demo8.tsx +++ b/src/packages/price/demos/taro/demo8.tsx @@ -7,7 +7,7 @@ const Demo8 = () => {   - + ) } diff --git a/src/packages/price/demos/taro/demo9.tsx b/src/packages/price/demos/taro/demo9.tsx index e3f5042a90..50ebf2bea4 100644 --- a/src/packages/price/demos/taro/demo9.tsx +++ b/src/packages/price/demos/taro/demo9.tsx @@ -1,44 +1,44 @@ import React from 'react' import { Cell, CellGroup, Price } from '@nutui/nutui-react-taro' +import { Text } from '@tarojs/components' import { harmony } from '@/utils/platform-taro' const Demo9 = () => { const colorStyles = { - color: harmony() ? '' : 'var(--nutui-color-primary)', - fontSize: '12px', - lineHeight: '16px', + color: harmony() ? '#ff0f23' : 'var(--nutui-color-primary)', + fontSize: 12, + lineHeight: 1, } const exclusivePriceStyles = { - margin: '0 8px 0 4px', - } - const seckillPriceStyles = { - margin: '0 8px 0 4px', + marginLeft: 4, + marginRight: 8, } const priceStyles = { - margin: '0 4px 0 2px', + marginLeft: 2, + marginRight: 4, } return ( - 专享价 - + 专享价 + - 粉丝到手价 - + 粉丝到手价 + - 秒杀价 - + 秒杀价 + - 专享价 - + 专享价 + ) diff --git a/src/packages/price/doc.en-US.md b/src/packages/price/doc.en-US.md index ce88f8f5f3..30f90bf484 100644 --- a/src/packages/price/doc.en-US.md +++ b/src/packages/price/doc.en-US.md @@ -10,7 +10,7 @@ import { Price } from '@nutui/nutui-react' ## Demo -### Support three sizes：small、normal、large +### Support sizes：small、normal、large、xlarge :::demo @@ -18,6 +18,14 @@ import { Price } from '@nutui/nutui-react' ::: +### Field classification: atomic, module, list, page + +:::demo + + + +::: + ### No decimals :::demo @@ -80,12 +88,13 @@ import { Price } from '@nutui/nutui-react' | Property | Description | Type | Default | | --- | --- | --- | --- | +| type | 价格类型 | `primary` \| `gray` \| `darkgray` | `primary` | | price | Price | `number` | `0` | | symbol | Symbol type | `string` | `¥` | | digits | Decimal digits | `number` | `2` | | thousands | Thousands separation | `boolean` | `false` | | position | The symbol appear before or after the price，`before`、`after` | `string` | `before` | -| size | Size，`large`、`normal`、`small` | `string` | `large` | +| size | Size，`xlarge` \| `large` \| `normal` \| `small` | `string` | `large` | | line | Line-through price | `boolean` | `false` | ## Theming @@ -96,15 +105,20 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default | | --- | --- | --- | -| \--nutui-price-symbol-big-size | large Size Symbol font size | `18px` | -| \--nutui-price-integer-big-size | large Size Integer partial font size | `24px` | -| \--nutui-price-decimal-big-size | large Size Size of the decimal part of the font | `18px` | -| \--nutui-price-symbol-medium-size | normal Size Symbol font size | `14px` | -| \--nutui-price-integer-medium-size | normal Size Integer partial font size | `16px` | -| \--nutui-price-decimal-medium-size | normal Size Size of the decimal part of the font | `14px` | -| \--nutui-price-symbol-small-size | small Size Symbol font size | `10px` | -| \--nutui-price-integer-small-size | small Size Integer partial font size | `12px` | -| \--nutui-price-decimal-small-size | small Size Size of the decimal part of the font | `10px` | -| \--nutui-price-line-font-size | Line-through price Font size | `10px` | -| \--nutui-price-line-color | Line through price color | `#757575` | -| \--nutui-price-symbol-padding-right | Symbol padding right | `1px` | +| \--nutui-price-primary-color | Text color when type is primary | `#ff0f23` | +| \--nutui-price-color | Text color when type is gray | `#888b94` | +| \--nutui-price-darkgray-color | Text color when type is darkgray | `#1a1a1a` | +| \--nutui-price-line-color | Underline price color | `#888b94` | +| \--nutui-price-symbol-padding-right | Right padding of symbol | `0px` | +| \--nutui-price-symbol-xlarge-size | xlarge size symbol font size | `12px` | +| \--nutui-price-integer-xlarge-size | xlarge size integer part font size | `24px` | +| \--nutui-price-decimal-xlarge-size | xlarge size decimal part font size | `12px` | +| \--nutui-price-symbol-large-size | large size symbol font size | `12px` | +| \--nutui-price-integer-large-size | large size integer part font size | `18px` | +| \--nutui-price-decimal-large-size | large size decimal part font size | `12px` | +| \--nutui-price-symbol-normal-size | normal size symbol font size | `12px` | +| \--nutui-price-integer-normal-size | normal size integer part font size | `16px` | +| \--nutui-price-decimal-normal-size | normal size decimal part font size | `12px` | +| \--nutui-price-symbol-small-size | small size symbol font size | `12px` | +| \--nutui-price-integer-small-size | small Size integer part font size | `12px` | +| \--nutui-price-decimal-small-size | small Size decimal part font size | `12px` | diff --git a/src/packages/price/doc.md b/src/packages/price/doc.md index 5ba4f1f1b9..42bf9dbd43 100644 --- a/src/packages/price/doc.md +++ b/src/packages/price/doc.md @@ -10,7 +10,7 @@ import { Price } from '@nutui/nutui-react' ## 示例代码 -### 基础用法 small normal large +### 支持尺寸：small、normal、large、xlarge :::demo @@ -18,6 +18,14 @@ import { Price } from '@nutui/nutui-react' ::: +### 场域分类：原子级、模块级、列表级、页面级 + +:::demo + + + +::: + ### 不保留小数 :::demo @@ -80,12 +88,13 @@ import { Price } from '@nutui/nutui-react' | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | +| type | 价格类型 | `primary` \| `gray` \| `darkgray` | `primary` | | price | 价格数量 | `number` | `0` | | symbol | 符号类型 | `string` | `¥` | | digits | 小数位位数 | `number` | `2` | | thousands | 是否按照千分号形式显示 | `boolean` | `false` | | position | 符号显示在价格前或者后，`before`、`after` | `string` | `before` | -| size | 价格尺寸，`large`、`normal`、`small` | `string` | `large` | +| size | 价格尺寸，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` | | line | 是否划线价 | `boolean` | `false` | ## 主题定制 @@ -96,15 +105,20 @@ import { Price } from '@nutui/nutui-react' | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-price-symbol-big-size | large 尺寸符号字体大小 | `18px` | -| \--nutui-price-integer-big-size | large 尺寸整数部分字体大小 | `24px` | -| \--nutui-price-decimal-big-size | large 尺寸小数部分字体大小 | `18px` | -| \--nutui-price-symbol-medium-size | normal 尺寸符号字体大小 | `14px` | -| \--nutui-price-integer-medium-size | normal 尺寸整数部分字体大小 | `16px` | -| \--nutui-price-decimal-medium-size | normal 尺寸小数部分字体大小 | `14px` | -| \--nutui-price-symbol-small-size | small 尺寸符号字体大小 | `10px` | +| \--nutui-price-primary-color | type为primary时文字颜色 | `#ff0f23` | +| \--nutui-price-color | type为gray时文字颜色 | `#888b94` | +| \--nutui-price-darkgray-color | type为darkgray时文字颜色 | `#1a1a1a` | +| \--nutui-price-line-color | 划线价颜色 | `#888b94` | +| \--nutui-price-symbol-padding-right | 符号的右内边距 | `0px` | +| \--nutui-price-symbol-xlarge-size | xlarge 尺寸符号字体大小 | `12px` | +| \--nutui-price-integer-xlarge-size | xlarge 尺寸整数部分字体大小 | `24px` | +| \--nutui-price-decimal-xlarge-size | xlarge 尺寸小数部分字体大小 | `12px` | +| \--nutui-price-symbol-large-size | large 尺寸符号字体大小 | `12px` | +| \--nutui-price-integer-large-size | large 尺寸整数部分字体大小 | `18px` | +| \--nutui-price-decimal-large-size | large 尺寸小数部分字体大小 | `12px` | +| \--nutui-price-symbol-normal-size | normal 尺寸符号字体大小 | `12px` | +| \--nutui-price-integer-normal-size | normal 尺寸整数部分字体大小 | `16px` | +| \--nutui-price-decimal-normal-size | normal 尺寸小数部分字体大小 | `12px` | +| \--nutui-price-symbol-small-size | small 尺寸符号字体大小 | `12px` | | \--nutui-price-integer-small-size | small 尺寸整数部分字体大小 | `12px` | -| \--nutui-price-decimal-small-size | small 尺寸小数部分字体大小 | `10px` | -| \--nutui-price-line-font-size | 划线价字体大小 | `10px` | -| \--nutui-price-line-color | 划线价颜色 | `#757575` | -| \--nutui-price-symbol-padding-right | 符号的右内边距 | `1px` | +| \--nutui-price-decimal-small-size | small 尺寸小数部分字体大小 | `12px` | diff --git a/src/packages/price/doc.taro.md b/src/packages/price/doc.taro.md index c80ccdccef..2ca6dc6736 100644 --- a/src/packages/price/doc.taro.md +++ b/src/packages/price/doc.taro.md @@ -10,7 +10,7 @@ import { Price } from '@nutui/nutui-react-taro' ## 示例代码 -### 基础用法 small normal large +### 支持尺寸：small、normal、large、xlarge :::demo @@ -18,6 +18,14 @@ import { Price } from '@nutui/nutui-react-taro' ::: +### 场域分类：原子级、模块级、列表级、页面级 + +:::demo + + + +::: + ### 不保留小数 :::demo @@ -80,12 +88,12 @@ import { Price } from '@nutui/nutui-react-taro' | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| price | 价格数量 | `number` | `0` | +| type | 价格类型 | `primary` \| `gray` \| `darkgray` | `primary` | | symbol | 符号类型 | `string` | `¥` | | digits | 小数位位数 | `number` | `2` | | thousands | 是否按照千分号形式显示 | `boolean` | `false` | | position | 符号显示在价格前或者后，`before`、`after` | `string` | `before` | -| size | 价格尺寸，`large`、`normal`、`small` | `string` | `large` | +| size | 价格尺寸，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` | | line | 是否划线价 | `boolean` | `false` | ## 主题定制 @@ -96,15 +104,20 @@ import { Price } from '@nutui/nutui-react-taro' | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-price-symbol-big-size | large 尺寸符号字体大小 | `18px` | -| \--nutui-price-integer-big-size | large 尺寸整数部分字体大小 | `24px` | -| \--nutui-price-decimal-big-size | large 尺寸小数部分字体大小 | `18px` | -| \--nutui-price-symbol-medium-size | normal 尺寸符号字体大小 | `14px` | -| \--nutui-price-integer-medium-size | normal 尺寸整数部分字体大小 | `16px` | -| \--nutui-price-decimal-medium-size | normal 尺寸小数部分字体大小 | `14px` | -| \--nutui-price-symbol-small-size | small 尺寸符号字体大小 | `10px` | +| \--nutui-price-primary-color | type为primary时文字颜色 | `#ff0f23` | +| \--nutui-price-color | type为gray时文字颜色 | `#888b94` | +| \--nutui-price-darkgray-color | type为darkgray时文字颜色 | `#1a1a1a` | +| \--nutui-price-line-color | 划线价颜色 | `#888b94` | +| \--nutui-price-symbol-padding-right | 符号的右内边距 | `0px` | +| \--nutui-price-symbol-xlarge-size | xlarge 尺寸符号字体大小 | `12px` | +| \--nutui-price-integer-xlarge-size | xlarge 尺寸整数部分字体大小 | `24px` | +| \--nutui-price-decimal-xlarge-size | xlarge 尺寸小数部分字体大小 | `12px` | +| \--nutui-price-symbol-large-size | large 尺寸符号字体大小 | `12px` | +| \--nutui-price-integer-large-size | large 尺寸整数部分字体大小 | `18px` | +| \--nutui-price-decimal-large-size | large 尺寸小数部分字体大小 | `12px` | +| \--nutui-price-symbol-normal-size | normal 尺寸符号字体大小 | `12px` | +| \--nutui-price-integer-normal-size | normal 尺寸整数部分字体大小 | `16px` | +| \--nutui-price-decimal-normal-size | normal 尺寸小数部分字体大小 | `12px` | +| \--nutui-price-symbol-small-size | small 尺寸符号字体大小 | `12px` | | \--nutui-price-integer-small-size | small 尺寸整数部分字体大小 | `12px` | -| \--nutui-price-decimal-small-size | small 尺寸小数部分字体大小 | `10px` | -| \--nutui-price-line-font-size | 划线价字体大小 | `10px` | -| \--nutui-price-line-color | 划线价颜色 | `#757575` | -| \--nutui-price-symbol-padding-right | 符号的右内边距 | `1px` | +| \--nutui-price-decimal-small-size | small 尺寸小数部分字体大小 | `12px` | diff --git a/src/packages/price/doc.zh-TW.md b/src/packages/price/doc.zh-TW.md index a795260050..5bd2cb863a 100644 --- a/src/packages/price/doc.zh-TW.md +++ b/src/packages/price/doc.zh-TW.md @@ -1,6 +1,6 @@ # Price 價格 -用來對商品價格數值的小數點前後部分應用不同樣式，還支持人民幣符號、仟位分隔符、設置小數點位數等功能。 +用來對商品價格數值的小數點前後部分應用不同樣式，還支持人民幣符號、千位分隔符、設置小數點位數等功能。 ## 引入 @@ -10,7 +10,7 @@ import { Price } from '@nutui/nutui-react' ## 示例代碼 -### 基礎用法 small normal large +### 支持尺寸：small、normal、large、xlarge :::demo @@ -18,6 +18,14 @@ import { Price } from '@nutui/nutui-react' ::: +### 場域分類：原子級、模塊級、列表級、頁面級 + +:::demo + + + +::: + ### 不保留小數 :::demo @@ -26,7 +34,7 @@ import { Price } from '@nutui/nutui-react' ::: -### 有人民幣符號，無仟位分隔 +### 有人民幣符號，無千位分隔 :::demo @@ -34,7 +42,7 @@ import { Price } from '@nutui/nutui-react' ::: -### 帶人民幣符號，有仟位分隔，保留小數點後三位 +### 帶人民幣符號，有千位分隔，保留小數點後三位 :::demo @@ -80,15 +88,16 @@ import { Price } from '@nutui/nutui-react' | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | +| type | 價格類型 | `primary` \| `gray` \| `darkgray` | `primary` | | price | 價格數量 | `number` | `0` | | symbol | 符號類型 | `string` | `¥` | | digits | 小數位位數 | `number` | `2` | -| thousands | 是否按照仟分號形式顯示 | `boolean` | `false` | +| thousands | 是否按照千分號形式顯示 | `boolean` | `false` | | position | 符號顯示在價格前或者後，`before`、`after` | `string` | `before` | -| size | 價格尺寸，`large`、`normal`、`small` | `string` | `large` | +| size | 價格尺寸，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` | | line | 是否劃線價 | `boolean` | `false` | -## 主題定制 +## 主題定製 ### 樣式變量 @@ -96,15 +105,20 @@ import { Price } from '@nutui/nutui-react' | 名稱 | 說明 | 默認值 | | --- | --- | --- | -| \--nutui-price-symbol-big-size | large 尺寸符號字體大小 | `18px` | -| \--nutui-price-integer-big-size | large 尺寸整數部分字體大小 | `24px` | -| \--nutui-price-decimal-big-size | large 尺寸小數部分字體大小 | `18px` | -| \--nutui-price-symbol-medium-size | normal 尺寸符號字體大小 | `14px` | -| \--nutui-price-integer-medium-size | normal 尺寸整數部分字體大小 | `16px` | -| \--nutui-price-decimal-medium-size | normal 尺寸小數部分字體大小 | `14px` | -| \--nutui-price-symbol-small-size | small 尺寸符號字體大小 | `10px` | +| \--nutui-price-primary-color | type為primary時文字顏色 | `#ff0f23` | +| \--nutui-price-color | type為gray時文字顏色 | `#888b94` | +| \--nutui-price-darkgray-color | type為darkgray時文字顏色 | `#1a1a1a` | +| \--nutui-price-line-color | 劃線價顏色 | `#888b94` | +| \--nutui-price-symbol-padding-right | 符號的右內邊距 | `0px` | +| \--nutui-price-symbol-xlarge-size | xlarge 尺寸符號字體大小 | `12px` | +| \--nutui-price-integer-xlarge-size | xlarge 尺寸整數部分字體大小 | `24px` | +| \--nutui-price-decimal-xlarge-size | xlarge 尺寸小數部分字體大小 | `12px` | +| \--nutui-price-symbol-large-size | large 尺寸符號字體大小 | `12px` | +| \--nutui-price-integer-large-size | large 尺寸整數部分字體大小 | `18px` | +| \--nutui-price-decimal-large-size | large 尺寸小數部分字體大小 | `12px` | +| \--nutui-price-symbol-normal-size | normal 尺寸符號字體大小 | `12px` | +| \--nutui-price-integer-normal-size | normal 尺寸整數部分字體大小 | `16px` | +| \--nutui-price-decimal-normal-size | normal 尺寸小數部分字體大小 | `12px` | +| \--nutui-price-symbol-small-size | small 尺寸符號字體大小 | `12px` | | \--nutui-price-integer-small-size | small 尺寸整數部分字體大小 | `12px` | -| \--nutui-price-decimal-small-size | small 尺寸小數部分字體大小 | `10px` | -| \--nutui-price-line-font-size | 劃線價字體大小 | `10px` | -| \--nutui-price-line-color | 劃線價顏色 | `#757575` | -| \--nutui-price-symbol-padding-right | 符號的右內邊距 | `1px` | +| \--nutui-price-decimal-small-size | small 尺寸小數部分字體大小 | `12px` | diff --git a/src/packages/price/price.scss b/src/packages/price/price.scss index 5d72da0e05..cdfa63ba19 100644 --- a/src/packages/price/price.scss +++ b/src/packages/price/price.scss @@ -4,8 +4,6 @@ display: flex; flex-direction: row; align-items: baseline; - height: fit-content; - background-color: bisque; &-symbol, &-integer, @@ -15,13 +13,23 @@ line-height: 1; } + &-darkgray { + .nut-price { + &-symbol, + &-integer, + &-decimal { + font-family: 'JD-Bold'; + color: $price-darkgray-color; + } + } + } + &-primary { .nut-price { &-symbol, &-integer, &-decimal { - //font-family: "JD-Bold"; - font-weight: 700; + font-family: 'JD-Bold'; color: $price-primary-color; } } diff --git a/src/packages/price/price.taro.tsx b/src/packages/price/price.taro.tsx index ebf8fd7863..d6dc5e71fa 100644 --- a/src/packages/price/price.taro.tsx +++ b/src/packages/price/price.taro.tsx @@ -1,9 +1,10 @@ import React, { FunctionComponent } from 'react' -import { Text } from '@tarojs/components' +import { Text, View } from '@tarojs/components' import classNames from 'classnames' import { ComponentDefaults } from '@/utils/typings' import { useRtl } from '@/packages/configprovider/index.taro' import { PriceProps } from './types' +import { harmony } from '@/utils/platform-taro' const defaultProps = { ...ComponentDefaults, @@ -55,12 +56,11 @@ export const Price: FunctionComponent> = (props) => { if (Number(num) === 0) { num = 0 } + num = num.toString() + if (checkPoint(num)) { - num = Number(num).toFixed(digits) num = typeof num.split('.') === 'string' ? num.split('.') : num.split('.')[0] - } else { - num = num.toString() } if (thousands) { return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') @@ -103,38 +103,59 @@ export const Price: FunctionComponent> = (props) => { ) } - - return ( - - {symbol && position === 'before' ? renderSymbol() : null} - - {formatThousands(price)} - - {digits !== 0 ? ( + const renderInner = () => { + return ( + <> + {symbol && position === 'before' ? renderSymbol() : null} - . + {formatThousands(price)} - ) : null} - - {formatDecimal(price)} - - {symbol && position === 'after' ? renderSymbol() : null} - + {digits ? ( + <> + + . + + + {formatDecimal(price)} + + + ) : null} + + {symbol && position === 'after' ? renderSymbol() : null} + + ) + } + + return ( + <> + {harmony() ? ( + + {renderInner()} + + ) : ( + + {renderInner()} + + )} + ) } diff --git a/src/packages/price/price.tsx b/src/packages/price/price.tsx index 3fbb53c136..a4c8e19a6c 100644 --- a/src/packages/price/price.tsx +++ b/src/packages/price/price.tsx @@ -46,11 +46,9 @@ export const Price: FunctionComponent> = (props) => { num = 0 } if (checkPoint(num)) { - num = Number(num).toFixed(digits) + num = num.toString() num = typeof num.split('.') === 'string' ? num.split('.') : num.split('.')[0] - } else { - num = num.toString() } if (thousands) { return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') @@ -107,22 +105,25 @@ export const Price: FunctionComponent> = (props) => { > {formatThousands(price)}
- {digits !== 0 ? ( -
- . -
+ {digits ? ( + <> +
+ . +
+
+ {formatDecimal(price)} +
+ ) : null} -
- {formatDecimal(price)} -
+ {symbol && position === 'after' ? renderSymbol() : null}
) diff --git a/src/packages/price/types.ts b/src/packages/price/types.ts index 9ed08e2269..1e86a63919 100644 --- a/src/packages/price/types.ts +++ b/src/packages/price/types.ts @@ -1,7 +1,7 @@ import { BasicComponent } from '@/utils/typings' -export type PriceSize = 'xlarge' | 'large' | 'normal' | 'small' | 'mini' -export type PriceType = 'default' | 'primary' +export type PriceSize = 'xlarge' | 'large' | 'normal' | 'small' +export type PriceType = 'primary' | 'gray' | 'darkgray' export interface PriceProps extends BasicComponent { type: PriceType price: number | string diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 569e44c4ff..3cfb25ad92 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -782,11 +782,14 @@ $countdown-number-primary-border-color: var( //price（✅） $price-primary-color: var(--nutui-price-color, $color-primary) !default; $price-color: var(--nutui-price-color, var(--nutui-color-text-help)) !default; +$price-darkgray-color: var( + --nutui-price-darkgray-color, + var(--nutui-gray-7) +) !default; $price-line-color: var( --nutui-price-line-color, var(--nutui-color-text-help) ) !default; -$price-line-font-size: var(--nutui-price-line-font-size, 12px) !default; $price-symbol-padding-right: var( --nutui-price-symbol-padding-right, 0px From 32129b227478df2df791a9bb9a33566205fee828 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 24 Dec 2024 19:42:49 +0800 Subject: [PATCH 05/12] fix: update test --- .../__snapshots__/price.spec.tsx.snap | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/packages/price/__test__/__snapshots__/price.spec.tsx.snap b/src/packages/price/__test__/__snapshots__/price.spec.tsx.snap index 7b7e51561f..47f216f249 100644 --- a/src/packages/price/__test__/__snapshots__/price.spec.tsx.snap +++ b/src/packages/price/__test__/__snapshots__/price.spec.tsx.snap @@ -3,25 +3,25 @@ exports[`props digits test 1`] = `
¥
15213
.
122
@@ -32,25 +32,25 @@ exports[`props digits test 1`] = ` exports[`props symbol test 1`] = `
$
10010
.
00
@@ -61,20 +61,20 @@ exports[`props symbol test 1`] = ` exports[`props test 1`] = `
1,010
.
00
@@ -85,25 +85,25 @@ exports[`props test 1`] = ` exports[`props thousands test 1`] = `
$
10010
.
01
From beeb6bd7a3e298fa9441e38b8210c0416abf8429 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 24 Dec 2024 20:25:55 +0800 Subject: [PATCH 06/12] fix: update type --- src/packages/cell/cell.taro.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/packages/cell/cell.taro.tsx b/src/packages/cell/cell.taro.tsx index 241ad3894d..2ffb6b50fc 100644 --- a/src/packages/cell/cell.taro.tsx +++ b/src/packages/cell/cell.taro.tsx @@ -8,6 +8,12 @@ import { useRtl } from '@/packages/configprovider/index.taro' import pxTransform from '@/utils/px-transform' import { CellProps } from './types' +interface CellTaroProps extends CellProps { + onClick: ( + event: React.MouseEvent | ITouchEvent + ) => void +} + const defaultProps = { ...ComponentDefaults, title: null, @@ -20,12 +26,12 @@ const defaultProps = { onClick: ( event: React.MouseEvent | ITouchEvent ) => {}, -} as CellProps +} as CellTaroProps const classPrefix = 'nut-cell' export const Cell: FunctionComponent< - Partial & Omit, 'title'> + Partial & Omit, 'title'> > & { Group: typeof CellGroup } = (props) => { const ctx = useContext(CellGroupContext) const { From d4fb5893ecc55ab2b4361a381f715b2afdfe44bc Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 24 Dec 2024 20:40:07 +0800 Subject: [PATCH 07/12] fix: update test --- src/packages/card/__test__/card.spec.tsx | 181 ----------------------- 1 file changed, 181 deletions(-) delete mode 100644 src/packages/card/__test__/card.spec.tsx diff --git a/src/packages/card/__test__/card.spec.tsx b/src/packages/card/__test__/card.spec.tsx deleted file mode 100644 index 5355b12bf7..0000000000 --- a/src/packages/card/__test__/card.spec.tsx +++ /dev/null @@ -1,181 +0,0 @@ -import * as React from 'react' - -import { render } from '@testing-library/react' -import '@testing-library/jest-dom' - -import { Card } from '../card' - -test('props test', () => { - const state = { - src: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg', - title: - '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水', - price: '388', - vipPrice: '378', - shopDescription: '自营', - delivery: '厂商配送', - shopName: '阳澄湖大闸蟹自营店>', - } - const { container } = render( - - ) - const priceDoms = container.querySelectorAll('.nut-price-integer-normal') - const tagDoms = container.querySelectorAll('.nut-tag') - expect( - container.querySelector('.nut-card-left img')?.getAttribute('src') - ).toBe(state.src) - expect(container.querySelector('.nut-card-right-title')).toContainHTML( - state.title - ) - expect(priceDoms[0].innerHTML).toBe(state.price) - expect(priceDoms[1].innerHTML).toBe(state.vipPrice) - expect(tagDoms[0]).toContainHTML( - `
${state.shopDescription}
` - ) - expect(tagDoms[1]).toContainHTML(`厂商配送`) - expect(container.querySelector('.nut-card-right-shop-name')).toContainHTML( - state.shopName - ) - expect(container).toMatchSnapshot() -}) - -test('description slot test', () => { - const state = { - src: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg', - title: - '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水', - price: '388', - vipPrice: '378', - shopDescription: '自营', - delivery: '厂商配送', - shopName: '阳澄湖大闸蟹自营店>', - } - - const { container } = render( - - {['鲜活', '礼盒', '国产'].map((item) => { - return ( - - {item} - - ) - })} -
- } - /> - ) - expect(container.querySelector('.search_prolist_attr')).toBeInTheDocument() - expect(container).toMatchSnapshot() -}) - -test('priceTag slot test', () => { - const state = { - src: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg', - title: - '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水', - price: '388', - vipPrice: '378', - shopDescription: '自营', - delivery: '厂商配送', - shopName: '阳澄湖大闸蟹自营店>', - } - - const plusIconUrl = - 'https://img11.360buyimg.com/jdphoto/s58x28_jfs/t9451/359/415622649/15318/b0943e5d/59a78495N3bd2a9f8.png' - - const { container } = render( - } - /> - ) - expect( - container.querySelector('.nut-card-right-price img')?.getAttribute('src') - ).toBe(plusIconUrl) - expect(container).toMatchSnapshot() -}) - -test('tag slot test', () => { - const state = { - src: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg', - title: - '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水', - price: '388', - vipPrice: '378', - shopDescription: '自营', - delivery: '厂商配送', - shopName: '阳澄湖大闸蟹自营店>', - } - - const { container } = render( - 这里是自定义区域
} - /> - ) - expect(container.querySelector('.nut-card-right-other')?.innerHTML).toBe( - '
这里是自定义区域
' - ) - expect(container).toMatchSnapshot() -}) - -test('extra slot test', () => { - const state = { - src: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg', - title: - '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水', - price: '388', - vipPrice: '378', - shopDescription: '自营', - delivery: '厂商配送', - shopName: '阳澄湖大闸蟹自营店>', - } - - const { container } = render( - 自定义
} - /> - ) - expect( - container - .querySelectorAll('.nut-card-right-shop div')[1] - ?.getAttribute('style') - ).toBe('font-size: 12px;') - expect(container).toMatchSnapshot() -}) From aaa7cdba1a879a1e31ec00577d75a749acfec4a6 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 24 Dec 2024 20:51:53 +0800 Subject: [PATCH 08/12] chore: update sologn --- src/config.json | 1 + 1 file changed, 1 insertion(+) diff --git a/src/config.json b/src/config.json index 57a6efe126..5b2a08f904 100644 --- a/src/config.json +++ b/src/config.json @@ -1080,6 +1080,7 @@ "sort": 4, "show": true, "taro": true, + "v15": true, "author": "songsong" }, { From 6ea5f297bb7aee34c3cbbbc7f64d28c975cc14ea Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Wed, 25 Dec 2024 16:07:38 +0800 Subject: [PATCH 09/12] fix: update doc --- src/packages/price/doc.en-US.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/packages/price/doc.en-US.md b/src/packages/price/doc.en-US.md index 30f90bf484..e8b1afecb6 100644 --- a/src/packages/price/doc.en-US.md +++ b/src/packages/price/doc.en-US.md @@ -88,7 +88,7 @@ import { Price } from '@nutui/nutui-react' | Property | Description | Type | Default | | --- | --- | --- | --- | -| type | 价格类型 | `primary` \| `gray` \| `darkgray` | `primary` | +| type | Price type | `primary` \| `gray` \| `darkgray` | `primary` | | price | Price | `number` | `0` | | symbol | Symbol type | `string` | `¥` | | digits | Decimal digits | `number` | `2` | From 0946c4b05a413bdcd701d0d576702f3bf2e5e1ec Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Fri, 27 Dec 2024 09:37:35 +0800 Subject: [PATCH 10/12] fix: update test --- .../__snapshots__/price.spec.tsx.snap | 72 +++++++++++++++++++ src/packages/price/__test__/price.spec.tsx | 12 ++++ 2 files changed, 84 insertions(+) diff --git a/src/packages/price/__test__/__snapshots__/price.spec.tsx.snap b/src/packages/price/__test__/__snapshots__/price.spec.tsx.snap index 47f216f249..05f4ca4e8f 100644 --- a/src/packages/price/__test__/__snapshots__/price.spec.tsx.snap +++ b/src/packages/price/__test__/__snapshots__/price.spec.tsx.snap @@ -82,6 +82,54 @@ exports[`props test 1`] = `
`; +exports[`props test 2`] = ` +
+
+
+ 1,010 +
+
+ . +
+
+ 00 +
+
+
+`; + +exports[`props test 3`] = ` +
+
+
+ 1,010 +
+
+ . +
+
+ 00 +
+
+
+`; + exports[`props thousands test 1`] = `
`; + +exports[`props type 1`] = ` +
+
+
+ 1,010 +
+
+ . +
+
+ 00 +
+
+
+`; diff --git a/src/packages/price/__test__/price.spec.tsx b/src/packages/price/__test__/price.spec.tsx index 9b16a75cc8..312e45d972 100644 --- a/src/packages/price/__test__/price.spec.tsx +++ b/src/packages/price/__test__/price.spec.tsx @@ -39,3 +39,15 @@ test('props digits test', () => { ) expect(container).toMatchSnapshot() }) + +test('props size', () => { + const { container } = render() + expect(container.querySelector('.nut-price-integer')).toHaveClass( + 'nut-price-integer-large' + ) +}) + +test('props type', () => { + const { container } = render() + expect(container.querySelector('.nut-price')).toHaveClass('nut-price-primary') +}) From eb7ee44fd0da33d591f0524b030cc2d49ca30d9f Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Fri, 27 Dec 2024 09:52:11 +0800 Subject: [PATCH 11/12] fix: update card test --- .../__test__/__snapshots__/card.spec.tsx.snap | 18 +- src/packages/card/__test__/card.spec.tsx | 181 ++++++++++++++++++ 2 files changed, 190 insertions(+), 9 deletions(-) create mode 100644 src/packages/card/__test__/card.spec.tsx diff --git a/src/packages/card/__test__/__snapshots__/card.spec.tsx.snap b/src/packages/card/__test__/__snapshots__/card.spec.tsx.snap index 393ccf15cd..8617abeeef 100644 --- a/src/packages/card/__test__/__snapshots__/card.spec.tsx.snap +++ b/src/packages/card/__test__/__snapshots__/card.spec.tsx.snap @@ -44,7 +44,7 @@ exports[`description slot test 1`] = ` class="nut-card-right-price" >
{ + const state = { + src: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg', + title: + '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水', + price: '388', + vipPrice: '378', + shopDescription: '自营', + delivery: '厂商配送', + shopName: '阳澄湖大闸蟹自营店>', + } + const { container } = render( + + ) + const priceDoms = container.querySelectorAll('.nut-price-integer-normal') + const tagDoms = container.querySelectorAll('.nut-tag') + expect( + container.querySelector('.nut-card-left img')?.getAttribute('src') + ).toBe(state.src) + expect(container.querySelector('.nut-card-right-title')).toContainHTML( + state.title + ) + expect(priceDoms[0].innerHTML).toBe(state.price) + expect(priceDoms[1].innerHTML).toBe(state.vipPrice) + expect(tagDoms[0]).toContainHTML( + `
${state.shopDescription}
` + ) + expect(tagDoms[1]).toContainHTML(`厂商配送`) + expect(container.querySelector('.nut-card-right-shop-name')).toContainHTML( + state.shopName + ) + expect(container).toMatchSnapshot() +}) + +test('description slot test', () => { + const state = { + src: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg', + title: + '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水', + price: '388', + vipPrice: '378', + shopDescription: '自营', + delivery: '厂商配送', + shopName: '阳澄湖大闸蟹自营店>', + } + + const { container } = render( + + {['鲜活', '礼盒', '国产'].map((item) => { + return ( + + {item} + + ) + })} +
+ } + /> + ) + expect(container.querySelector('.search_prolist_attr')).toBeInTheDocument() + expect(container).toMatchSnapshot() +}) + +test('priceTag slot test', () => { + const state = { + src: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg', + title: + '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水', + price: '388', + vipPrice: '378', + shopDescription: '自营', + delivery: '厂商配送', + shopName: '阳澄湖大闸蟹自营店>', + } + + const plusIconUrl = + 'https://img11.360buyimg.com/jdphoto/s58x28_jfs/t9451/359/415622649/15318/b0943e5d/59a78495N3bd2a9f8.png' + + const { container } = render( + } + /> + ) + expect( + container.querySelector('.nut-card-right-price img')?.getAttribute('src') + ).toBe(plusIconUrl) + expect(container).toMatchSnapshot() +}) + +test('tag slot test', () => { + const state = { + src: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg', + title: + '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水', + price: '388', + vipPrice: '378', + shopDescription: '自营', + delivery: '厂商配送', + shopName: '阳澄湖大闸蟹自营店>', + } + + const { container } = render( + 这里是自定义区域
} + /> + ) + expect(container.querySelector('.nut-card-right-other')?.innerHTML).toBe( + '
这里是自定义区域
' + ) + expect(container).toMatchSnapshot() +}) + +test('extra slot test', () => { + const state = { + src: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg', + title: + '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水', + price: '388', + vipPrice: '378', + shopDescription: '自营', + delivery: '厂商配送', + shopName: '阳澄湖大闸蟹自营店>', + } + + const { container } = render( + 自定义
} + /> + ) + expect( + container + .querySelectorAll('.nut-card-right-shop div')[1] + ?.getAttribute('style') + ).toBe('font-size: 12px;') + expect(container).toMatchSnapshot() +}) From bb9bd4b73f8ee670ff7fd352e64ee77ed68d8932 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Fri, 27 Dec 2024 11:55:57 +0800 Subject: [PATCH 12/12] =?UTF-8?q?fix:=20props=20type=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E4=B8=BAcolor?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- migrate-from-v2.md | 2 +- src/packages/price/__test__/price.spec.tsx | 4 ++-- src/packages/price/demos/h5/demo8.tsx | 2 +- src/packages/price/demos/h5/demo9.tsx | 8 ++++---- src/packages/price/demos/taro/demo8.tsx | 2 +- src/packages/price/demos/taro/demo9.tsx | 8 ++++---- src/packages/price/doc.en-US.md | 2 +- src/packages/price/doc.md | 2 +- src/packages/price/doc.zh-TW.md | 2 +- src/packages/price/index.taro.ts | 2 +- src/packages/price/index.ts | 2 +- src/packages/price/price.taro.tsx | 8 ++++---- src/packages/price/price.tsx | 6 +++--- src/packages/price/types.ts | 4 ++-- 14 files changed, 27 insertions(+), 27 deletions(-) diff --git a/migrate-from-v2.md b/migrate-from-v2.md index 12b77156eb..e4909bda2e 100644 --- a/migrate-from-v2.md +++ b/migrate-from-v2.md @@ -734,7 +734,7 @@ plugins: [ #### Price - 修改 `size`，增加 'xlarge' 尺寸 -- 新增 `type`, 价格类型 +- 新增 `color`, 价格类型 #### Progress diff --git a/src/packages/price/__test__/price.spec.tsx b/src/packages/price/__test__/price.spec.tsx index 312e45d972..2eaed3259a 100644 --- a/src/packages/price/__test__/price.spec.tsx +++ b/src/packages/price/__test__/price.spec.tsx @@ -47,7 +47,7 @@ test('props size', () => { ) }) -test('props type', () => { - const { container } = render() +test('props color', () => { + const { container } = render() expect(container.querySelector('.nut-price')).toHaveClass('nut-price-primary') }) diff --git a/src/packages/price/demos/h5/demo8.tsx b/src/packages/price/demos/h5/demo8.tsx index c3e1f9afb2..73b8a33812 100644 --- a/src/packages/price/demos/h5/demo8.tsx +++ b/src/packages/price/demos/h5/demo8.tsx @@ -6,7 +6,7 @@ const Demo8 = () => {   - + ) } diff --git a/src/packages/price/demos/h5/demo9.tsx b/src/packages/price/demos/h5/demo9.tsx index 629fccd6eb..c2e60a009b 100644 --- a/src/packages/price/demos/h5/demo9.tsx +++ b/src/packages/price/demos/h5/demo9.tsx @@ -19,22 +19,22 @@ const Demo9 = () => { 专享价 - + 粉丝到手价 - + 秒杀价 - + 专享价 - + ) diff --git a/src/packages/price/demos/taro/demo8.tsx b/src/packages/price/demos/taro/demo8.tsx index e7e0769711..212a776e4c 100644 --- a/src/packages/price/demos/taro/demo8.tsx +++ b/src/packages/price/demos/taro/demo8.tsx @@ -7,7 +7,7 @@ const Demo8 = () => {   - + ) } diff --git a/src/packages/price/demos/taro/demo9.tsx b/src/packages/price/demos/taro/demo9.tsx index 50ebf2bea4..cd7b102f31 100644 --- a/src/packages/price/demos/taro/demo9.tsx +++ b/src/packages/price/demos/taro/demo9.tsx @@ -23,22 +23,22 @@ const Demo9 = () => { 专享价 - + 粉丝到手价 - + 秒杀价 - + 专享价 - + ) diff --git a/src/packages/price/doc.en-US.md b/src/packages/price/doc.en-US.md index e8b1afecb6..6efc166c41 100644 --- a/src/packages/price/doc.en-US.md +++ b/src/packages/price/doc.en-US.md @@ -88,7 +88,7 @@ import { Price } from '@nutui/nutui-react' | Property | Description | Type | Default | | --- | --- | --- | --- | -| type | Price type | `primary` \| `gray` \| `darkgray` | `primary` | +| color | Price type | `primary` \| `gray` \| `darkgray` | `primary` | | price | Price | `number` | `0` | | symbol | Symbol type | `string` | `¥` | | digits | Decimal digits | `number` | `2` | diff --git a/src/packages/price/doc.md b/src/packages/price/doc.md index 42bf9dbd43..f19ad0b34f 100644 --- a/src/packages/price/doc.md +++ b/src/packages/price/doc.md @@ -88,7 +88,7 @@ import { Price } from '@nutui/nutui-react' | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| type | 价格类型 | `primary` \| `gray` \| `darkgray` | `primary` | +| color | 价格类型 | `primary` \| `gray` \| `darkgray` | `primary` | | price | 价格数量 | `number` | `0` | | symbol | 符号类型 | `string` | `¥` | | digits | 小数位位数 | `number` | `2` | diff --git a/src/packages/price/doc.zh-TW.md b/src/packages/price/doc.zh-TW.md index 5bd2cb863a..6d27fe12a8 100644 --- a/src/packages/price/doc.zh-TW.md +++ b/src/packages/price/doc.zh-TW.md @@ -88,7 +88,7 @@ import { Price } from '@nutui/nutui-react' | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | -| type | 價格類型 | `primary` \| `gray` \| `darkgray` | `primary` | +| color | 價格類型 | `primary` \| `gray` \| `darkgray` | `primary` | | price | 價格數量 | `number` | `0` | | symbol | 符號類型 | `string` | `¥` | | digits | 小數位位數 | `number` | `2` | diff --git a/src/packages/price/index.taro.ts b/src/packages/price/index.taro.ts index 71e37a819a..379abb8c0a 100644 --- a/src/packages/price/index.taro.ts +++ b/src/packages/price/index.taro.ts @@ -1,4 +1,4 @@ import { Price } from './price.taro' -export type { PriceProps, PriceSize, PriceType } from './types' +export type { PriceProps, PriceSize, PriceColor } from './types' export default Price diff --git a/src/packages/price/index.ts b/src/packages/price/index.ts index 7aeeabd1a5..3a4847c6df 100644 --- a/src/packages/price/index.ts +++ b/src/packages/price/index.ts @@ -1,4 +1,4 @@ import { Price } from './price' -export type { PriceProps, PriceSize, PriceType } from './types' +export type { PriceProps, PriceSize, PriceColor } from './types' export default Price diff --git a/src/packages/price/price.taro.tsx b/src/packages/price/price.taro.tsx index d6dc5e71fa..3585c83782 100644 --- a/src/packages/price/price.taro.tsx +++ b/src/packages/price/price.taro.tsx @@ -8,7 +8,7 @@ import { harmony } from '@/utils/platform-taro' const defaultProps = { ...ComponentDefaults, - type: 'primary', + color: 'primary', price: 0, symbol: '¥', digits: 2, @@ -19,7 +19,7 @@ const defaultProps = { } as PriceProps export const Price: FunctionComponent> = (props) => { const { - type, + color, price, symbol, digits, @@ -142,14 +142,14 @@ export const Price: FunctionComponent> = (props) => { <> {harmony() ? ( {renderInner()} ) : ( {renderInner()} diff --git a/src/packages/price/price.tsx b/src/packages/price/price.tsx index a4c8e19a6c..fbc68af7bb 100644 --- a/src/packages/price/price.tsx +++ b/src/packages/price/price.tsx @@ -6,7 +6,7 @@ import { PriceProps } from './types' const defaultProps = { ...ComponentDefaults, - type: 'primary', + color: 'primary', price: 0, symbol: '¥', digits: 2, @@ -17,7 +17,7 @@ const defaultProps = { } as PriceProps export const Price: FunctionComponent> = (props) => { const { - type, + color, price, symbol, digits, @@ -93,7 +93,7 @@ export const Price: FunctionComponent> = (props) => { return (
diff --git a/src/packages/price/types.ts b/src/packages/price/types.ts index 1e86a63919..4d8eea1a7c 100644 --- a/src/packages/price/types.ts +++ b/src/packages/price/types.ts @@ -1,9 +1,9 @@ import { BasicComponent } from '@/utils/typings' export type PriceSize = 'xlarge' | 'large' | 'normal' | 'small' -export type PriceType = 'primary' | 'gray' | 'darkgray' +export type PriceColor = 'primary' | 'gray' | 'darkgray' export interface PriceProps extends BasicComponent { - type: PriceType + color: PriceColor price: number | string symbol: string digits: number