fix(price): add new props strike-through (#1934)(#1907)

Author: Drjingfubo

src/packages/__VUE/price/demo.vue

@@ -15,6 +15,10 @@
     <nut-cell>
       <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" />
     </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" size="normal" :need-symbol="true" :thousands="false" />
@@ -44,6 +48,7 @@ const initTranslate = () =>
     'zh-CN': {
       title1: '支持三种尺寸：small、normal、large',
       title2: '不保留小数',
+      titleStrike: '划线价',
       title3: '有人民币符号，无千位分隔',
       title4: '有人民币符号，有千位分隔，保留小数点后三位',
       title5: '调整 symbol 符号位置',
@@ -52,6 +57,7 @@ const initTranslate = () =>
     'en-US': {
       title1: 'Support three sizes：small、normal、large',
       title2: 'No decimals',
+      titleStrike: 'Strike Through',
       title3: 'With RMB symbol, no thousands separator',
       title4: 'With RMB symbol, separated by thousands, keep three decimal places',
       title5: 'Adjust the symbol position',

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

@@ -43,6 +43,17 @@ app.use(Price);
 </template>
 ```
 
+:::
+### Strike Through
+
+:::demo
+
+``` html
+<template>
+    <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" strike-through />
+</template>
+```
+
 :::
 
 ### With RMB symbol, no thousands separator
@@ -116,4 +127,5 @@ app.use(Price);
 | decimal-digits | Decimal digits                                             | Number ｜ String | 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，`large`、`normal`、`small`                            | String           | large |
+| strike-through`v3.3.1`          | strike-through    | Boolean           | false |

src/packages/__VUE/price/doc.md

@@ -45,6 +45,19 @@ app.use(Price);
 
 :::
 
+
+### 划线价
+
+:::demo
+
+``` html
+<template>
+    <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" strike-through />
+</template>
+```
+
+:::
+
 ### 有人民币符号，无千位分隔
 
 :::demo
@@ -116,4 +129,5 @@ app.use(Price);
 | decimal-digits | 小数位位数                              | Number ｜ String  | 2     |
 | thousands      | 是否按照千分号形式显示                    | Boolean          | false  |
 | position       | 符号显示在价格前或者后，`before`、`after`  | String           | before |
-| size           | 价格尺寸，`large`、`normal`、`small`     | String           | large |
+| size           | 价格尺寸，`large`、`normal`、`small`     | String           | large |
+| strike-through`v3.3.1`          | 是否展示划线价    | Boolean           | false |

src/packages/__VUE/price/index.scss

@@ -2,6 +2,11 @@
   font-size: 0;
   display: inline;
   color: $primary-color;
+  &--strike {
+    > view {
+      text-decoration: line-through;
+    }
+  }
   &--symbol {
     display: inline-block;
     font-size: $font-size-3;

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

@@ -54,13 +54,18 @@ export default create({
     size: {
       type: String,
       default: 'large'
+    },
+    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: 'large'
+    },
+    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

@@ -15,6 +15,10 @@
     <nut-cell>
       <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" />
     </nut-cell>
+    <h2>划线价</h2>
+    <nut-cell>
+      <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" strike-through />
+    </nut-cell>
     <h2>调整 symbol 符号位置</h2>
     <nut-cell>
       <nut-price :price="8888.01" position="after" symbol="元" size="normal" :need-symbol="true" :thousands="true" />