+
+ 1,010
+
+
+ .
+
+
00
@@ -85,28 +133,52 @@ exports[`props test 1`] = `
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..2eaed3259a 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 color', () => {
+ const { container } = render(
)
+ expect(container.querySelector('.nut-price')).toHaveClass('nut-price-primary')
+})
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..73b8a33812 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..c2e60a009b
--- /dev/null
+++ b/src/packages/price/demos/h5/demo9.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { Cell, CellGroup, Price } from '@nutui/nutui-react'
+
+const Demo9 = () => {
+ const colorStyles = {
+ color: 'var(--nutui-color-primary)',
+ fontSize: '12px',
+ lineHeight: 1,
+ }
+ const exclusivePriceStyles = {
+ 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..212a776e4c 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..cd7b102f31
--- /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 { Text } from '@tarojs/components'
+import { harmony } from '@/utils/platform-taro'
+
+const Demo9 = () => {
+ const colorStyles = {
+ color: harmony() ? '#ff0f23' : 'var(--nutui-color-primary)',
+ fontSize: 12,
+ lineHeight: 1,
+ }
+ const exclusivePriceStyles = {
+ marginLeft: 4,
+ marginRight: 8,
+ }
+ const priceStyles = {
+ marginLeft: 2,
+ marginRight: 4,
+ }
+
+ return (
+
+
+
+ 专享价
+
+ |
+
+
+ 粉丝到手价
+
+ |
+
+
+ 秒杀价
+
+ |
+
+
+ 专享价
+
+ |
+
+ )
+}
+export default Demo9
diff --git a/src/packages/price/doc.en-US.md b/src/packages/price/doc.en-US.md
index ce88f8f5f3..6efc166c41 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 |
| --- | --- | --- | --- |
+| color | Price 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..f19ad0b34f 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'
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
+| color | 价格类型 | `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..6d27fe12a8 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'
| 屬性 | 說明 | 類型 | 默認值 |
| --- | --- | --- | --- |
+| color | 價格類型 | `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/index.taro.ts b/src/packages/price/index.taro.ts
index 647e5ce6ad..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 } from './price.taro'
+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 c9b2829a34..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 } from './price'
+export type { PriceProps, PriceSize, PriceColor } from './types'
export default Price
diff --git a/src/packages/price/price.scss b/src/packages/price/price.scss
index 8d600e0312..cdfa63ba19 100644
--- a/src/packages/price/price.scss
+++ b/src/packages/price/price.scss
@@ -8,15 +8,45 @@
&-symbol,
&-integer,
&-decimal {
- color: $color-primary;
+ color: $price-color;
+ font-family: 'JD';
+ 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';
+ 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 +60,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 +78,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 +97,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..3585c83782 100644
--- a/src/packages/price/price.taro.tsx
+++ b/src/packages/price/price.taro.tsx
@@ -1,30 +1,25 @@
import React, { FunctionComponent } from 'react'
-import { Text } from '@tarojs/components'
+import { Text, View } 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'
+import { harmony } from '@/utils/platform-taro'
-export interface PriceProps extends BasicComponent {
- price: number | string
- symbol: string
- digits: number
- thousands: boolean
- position: string
- size: string
- line: boolean
-}
const defaultProps = {
...ComponentDefaults,
+ color: 'primary',
price: 0,
symbol: '¥',
digits: 2,
thousands: false,
position: 'before',
- size: 'large',
+ size: 'normal',
line: false,
} as PriceProps
export const Price: FunctionComponent> = (props) => {
const {
+ color,
price,
symbol,
digits,
@@ -61,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,')
@@ -109,40 +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 a6bbdabd6b..fbc68af7bb 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,
+ color: 'primary',
price: 0,
symbol: '¥',
digits: 2,
thousands: false,
position: 'before',
- size: 'large',
+ size: 'normal',
line: false,
} as PriceProps
export const Price: FunctionComponent> = (props) => {
const {
+ color,
price,
symbol,
digits,
@@ -52,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,')
@@ -101,9 +93,7 @@ export const Price: FunctionComponent> = (props) => {
return (
@@ -115,22 +105,25 @@ export const Price: FunctionComponent > = (props) => {
>
{formatThousands(price)}
- .
-
+ {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
new file mode 100644
index 0000000000..4d8eea1a7c
--- /dev/null
+++ b/src/packages/price/types.ts
@@ -0,0 +1,14 @@
+import { BasicComponent } from '@/utils/typings'
+
+export type PriceSize = 'xlarge' | 'large' | 'normal' | 'small'
+export type PriceColor = 'primary' | 'gray' | 'darkgray'
+export interface PriceProps extends BasicComponent {
+ color: PriceColor
+ 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,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')
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 cb41db5bed..2050922e65 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -773,32 +773,53 @@ $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-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-symbol-padding-right: var(
--nutui-price-symbol-padding-right,
- 1px
+ 0px
+) !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;
-$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;
+
+//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;