fix(price): add new prop strike-through

src/packages/__VUE/price/demo.vue

@@ -15,6 +15,10 @@
     <nut-cell>
       <nut-price :price="8888" :decimal-digits="0" />
     </nut-cell>
+    <h2>{{ translate('titleStrike') }}</h2>
+    <nut-cell>
+      <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" strike-through />
+    </nut-cell>
     <h2>{{ translate('title3') }}</h2>
     <nut-cell>
       <nut-price :price="10010.01" symbol="¥" />
@@ -41,6 +45,7 @@ const initTranslate = () =>
       title2: '不保留小数',
       title3: '货币符号',
       title4: '货币符号位置',
+      titleStrike: '划线价',
       title5: '千位分隔',
       symbol: '元'
     },
@@ -49,6 +54,7 @@ const initTranslate = () =>
       title2: 'No decimals',
       title3: 'Currency symbol',
       title4: 'Currency symbol position',
+      titleStrike: 'Strike Through',
       title5: 'Separated by thousands',
       symbol: 'RMB'
     }

src/packages/__VUE/price/doc.en-US.md

@@ -44,6 +44,17 @@ Three sizes are supported: small, normal, and large, and the default is normal.
 ```
 
 :::
+### Strike Through
+
+:::demo
+
+``` html
+<template>
+    <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" strike-through />
+</template>
+```
+
+:::
 
 ### Currency symbol
 
@@ -97,9 +108,9 @@ Three sizes are supported: small, normal, and large, and the default is normal.
 | thousands      | Thousands separation                                       | boolean          | `false`  |
 | position       | The symbol appear before or after the price，`before`、`after` | string           | `before` |
 | size           | Size，`small`、`normal`、`large`                | string           | `normal` |
+| strike-through`v4.0.3`          | strike-through    | Boolean           | false |
 
 ## Theming
-
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).

src/packages/__VUE/price/doc.md

@@ -45,6 +45,17 @@ app.use(Price);
 
 :::
 
+### 划线价
+
+:::demo
+
+``` html
+<template>
+    <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" :strike-through="true" />
+</template>
+```
+:::
+
 ### 货币符号
 
 `symbol` 可设置货币符号，默认为 `¥`。
@@ -99,6 +110,7 @@ app.use(Price);
 | thousands      | 是否按照千分号形式显示                    | boolean          | `false`  |
 | position       | 符号显示在价格前或者后，`before`、`after`  | string           | `before` |
 | size           | 价格尺寸，`small`、`normal`、`large`     | string           | `normal` |
+| strike-through`v4.0.3`          | 是否展示划线价    | Boolean           | false |
 
 
 ## 主题定制

src/packages/__VUE/price/doc.taro.md

@@ -44,6 +44,17 @@ app.use(Price);
 
 :::
 
+### 划线价
+
+:::demo
+
+``` html
+<template>
+    <nut-price :price="8888" decimal-digits="0" size="normal" need-symbol thousands strike-through />
+</template>
+```
+:::
+
 ### 货币符号
 
 `symbol` 可设置货币符号，默认为 `¥`。
@@ -96,6 +107,7 @@ app.use(Price);
 | thousands      | 是否按照千分号形式显示                    | boolean          | `false`  |
 | position       | 符号显示在价格前或者后，`before`、`after`  | string           | `before` |
 | size           | 价格尺寸，`small`、`normal`、`large`     | string           | `normal` |
+| strike-through`v4.0.3`          | 是否展示划线价    | Boolean           | false |
 
 ## 主题定制
 

src/packages/__VUE/price/index.scss

@@ -2,10 +2,14 @@
   font-size: 0;
   display: inline;
   color: $primary-color;
+  &--strike {
+    [class*='nut-price'] {
+      text-decoration: line-through;
+    }
+  }
   &--symbol {
     display: inline-block;
     font-size: $font-size-3;
-    // margin-right: 4px;
   }
   &--large {
     display: inline-block;
@@ -15,11 +19,6 @@
     display: inline-block;
     font-size: $price-big-size;
   }
-  // &--small {
-  //   display: inline-block;
-  //   font-size: $font-size-4;
-  // }
-
   &--decimal-large {
     display: inline-block;
     font-size: $price-decimal-big-size;
@@ -52,8 +51,4 @@
     display: inline-block;
     font-size: $price-symbol-small-size;
   }
-  // &--decimal--big {
-  //   display: inline-block;
-  //   font-size: $price-medium-size;
-  // }
 }

src/packages/__VUE/price/index.taro.vue

@@ -54,13 +54,18 @@ export default create({
     size: {
       type: String,
       default: 'normal'
+    },
+    strikeThrough: {
+      type: Boolean,
+      default: false
     }
   },
 
   setup(props) {
     const classes = computed(() => {
       return {
-        [componentName]: true
+        [componentName]: true,
+        [`${componentName}--strike`]: props.strikeThrough
       };
     });
     const replaceSpecialChar = (url: string) => {

src/packages/__VUE/price/index.vue

@@ -56,13 +56,18 @@ export default create({
     size: {
       type: String,
       default: 'normal'
+    },
+    strikeThrough: {
+      type: Boolean,
+      default: false
     }
   },
 
   setup(props) {
     const classes = computed(() => {
       return {
-        [componentName]: true
+        [componentName]: true,
+        [`${componentName}--strike`]: props.strikeThrough
       };
     });
     const showSymbol = computed(() => {

src/sites/mobile-taro/vue/src/exhibition/pages/price/index.vue

@@ -16,6 +16,10 @@
     <nut-cell>
       <nut-price :price="8888" :decimal-digits="0" />
     </nut-cell>
+    <h2>划线价</h2>
+    <nut-cell>
+      <nut-price :price="8888" decimal-digits="0" size="normal" need-symbol thousands strike-through />
+    </nut-cell>
     <h2>货币符号</h2>
     <nut-cell>
       <nut-price :price="10010.01" symbol="¥" />