From 349b10876d7d94af74c6c69bdcbcc8036e97da53 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Wed, 19 Jul 2023 01:00:14 +0800
Subject: [PATCH] chore(price): optimize (#2437)

* chore(price): optimize

* test: update
---
 .../src/exhibition/pages/price/index.vue      | 34 ++++++------------
 .../__VUE/price/__tests__/price.spec.ts       | 18 ++++------
 src/packages/__VUE/price/demo.vue             | 18 +++-------
 src/packages/__VUE/price/doc.en-US.md         | 16 ++++-----
 src/packages/__VUE/price/doc.md               | 27 +++++---------
 src/packages/__VUE/price/doc.taro.md          | 20 +++++------
 src/packages/__VUE/price/index.taro.vue       | 35 ++++++++-----------
 src/packages/__VUE/price/index.vue            | 11 +++---
 src/packages/__VUE/price/types.ts             |  2 ++
 9 files changed, 70 insertions(+), 111 deletions(-)
 create mode 100644 src/packages/__VUE/price/types.ts

diff --git a/packages/nutui-taro-demo/src/exhibition/pages/price/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/price/index.vue
index cf6d4ca1f5..4f7c19d18a 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/price/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/price/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="demo" :class="{ web: env === 'WEB' }">
-    <Header v-if="env === 'WEB'" />
+    <DocHeader />
     <nut-cell-group title="支持三种尺寸：small、normal、large">
       <nut-cell>
         <nut-price :price="0" size="small" :need-symbol="false" />
@@ -18,7 +18,7 @@
     </nut-cell>
     <h2>划线价</h2>
     <nut-cell>
-      <nut-price :price="8888" decimal-digits="0" size="normal" need-symbol thousands strike-through />
+      <nut-price :price="8888" :decimal-digits="0" size="normal" need-symbol thousands strike-through />
     </nut-cell>
     <h2>货币符号</h2>
     <nut-cell>
@@ -30,32 +30,18 @@
     </nut-cell>
     <h2>千位分隔</h2>
     <nut-cell>
-      <nut-price :price="15213.1221" :decimal-digits="3" :thousands="true" />
+      <nut-price :price="15213.1221" :decimal-digits="3" thousands />
     </nut-cell>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import Taro from '@tarojs/taro';
-import Header from '../../../components/header.vue';
-export default {
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
-    const price = ref(0);
-    setInterval(() => {
-      price.value = Math.random() * 10000000;
-      // console.log('price.value1', price.value)
-    }, 1000);
-    return {
-      price,
-      env
-    };
-  }
-};
+import DocHeader from '../../../components/header.vue';
+const env = Taro.getEnv();
+const price = ref(0);
+setInterval(() => {
+  price.value = Math.random() * 10000000;
+}, 1000);
 </script>
-
-<style lang="scss"></style>
diff --git a/src/packages/__VUE/price/__tests__/price.spec.ts b/src/packages/__VUE/price/__tests__/price.spec.ts
index 854c9a6ed9..b0ec5d4e07 100644
--- a/src/packages/__VUE/price/__tests__/price.spec.ts
+++ b/src/packages/__VUE/price/__tests__/price.spec.ts
@@ -1,11 +1,7 @@
-import { config, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import Price from '../index.vue';
 
-afterAll(() => {
-  config.global.components = {};
-});
-
-test('base price', () => {
+test('Price: base price', () => {
   const wrapper = mount(Price, {
     props: {
       price: '199.99'
@@ -15,7 +11,7 @@ test('base price', () => {
   expect(price.text()).toBe('¥199.99');
 });
 
-test('decimalDigits price', () => {
+test('Price: decimalDigits price', () => {
   const wrapper = mount(Price, {
     props: {
       price: '299.95',
@@ -26,12 +22,12 @@ test('decimalDigits price', () => {
   expect(price.text()).toBe('¥299.9');
 });
 
-test('default needSymbol props', () => {
+test('Price: default needSymbol props', () => {
   const wrapper = mount(Price);
   const price: any = wrapper.find('.nut-price');
   expect(price.find('.nut-price--symbol').text()).toBe('¥');
 });
-test('needSymbol props', () => {
+test('Price: needSymbol props', () => {
   const wrapper = mount(Price, {
     props: {
       needSymbol: false
@@ -40,7 +36,7 @@ test('needSymbol props', () => {
   const price: any = wrapper.find('.nut-price');
   expect(price.find('.nut-price--symbol').exists()).toBe(false);
 });
-test('symbol props', () => {
+test('Price: symbol props', () => {
   const wrapper = mount(Price, {
     props: {
       symbol: '$'
@@ -50,7 +46,7 @@ test('symbol props', () => {
   expect(price.find('.nut-price--symbol').text()).toBe('$');
 });
 
-test('size props', () => {
+test('Price: size props', () => {
   const wrapper = mount(Price, {
     props: {
       size: 'small'
diff --git a/src/packages/__VUE/price/demo.vue b/src/packages/__VUE/price/demo.vue
index 6bdd2b4bef..a921e11dd9 100644
--- a/src/packages/__VUE/price/demo.vue
+++ b/src/packages/__VUE/price/demo.vue
@@ -17,7 +17,7 @@
     </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-price :price="8888" :decimal-digits="0" size="normal" need-symbol thousands strike-through />
     </nut-cell>
     <h2>{{ translate('title3') }}</h2>
     <nut-cell>
@@ -29,13 +29,12 @@
     </nut-cell>
     <h2>{{ translate('title5') }}</h2>
     <nut-cell>
-      <nut-price :price="15213.1221" :decimal-digits="3" :thousands="true" />
+      <nut-price :price="15213.1221" :decimal-digits="3" thousands />
     </nut-cell>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('price');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -60,14 +59,5 @@ const initTranslate = () =>
       symbol: 'RMB'
     }
   });
-export default defineComponent({
-  setup() {
-    initTranslate();
-    return {
-      translate
-    };
-  }
-});
+initTranslate();
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/src/packages/__VUE/price/doc.en-US.md b/src/packages/__VUE/price/doc.en-US.md
index be8addf5d2..b7eb10a3dd 100644
--- a/src/packages/__VUE/price/doc.en-US.md
+++ b/src/packages/__VUE/price/doc.en-US.md
@@ -6,7 +6,7 @@ It is used to apply different styles to the parts before and after the decimal p
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Price } from '@nutui/nutui';
 
@@ -20,7 +20,7 @@ Three sizes are supported: small, normal, and large, and the default is normal.
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="0" size="small" :need-symbol="false" />
   <nut-price :price="0" size="normal" :need-symbol="false" />
@@ -36,7 +36,7 @@ Three sizes are supported: small, normal, and large, and the default is normal.
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="8888" :decimal-digits="0" />
 </template>
@@ -48,7 +48,7 @@ Three sizes are supported: small, normal, and large, and the default is normal.
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" strike-through />
 </template>
@@ -62,7 +62,7 @@ Three sizes are supported: small, normal, and large, and the default is normal.
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="10010.01" symbol="¥" />
 </template>
@@ -76,7 +76,7 @@ Three sizes are supported: small, normal, and large, and the default is normal.
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="8888.01" position="after" symbol="RMB" />
 </template>
@@ -90,9 +90,9 @@ Three sizes are supported: small, normal, and large, and the default is normal.
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-price :price="15213.1221" :decimal-digits="3" :thousands="true" />
+  <nut-price :price="15213.1221" :decimal-digits="3" thousands />
 </template>
 ```
 
diff --git a/src/packages/__VUE/price/doc.md b/src/packages/__VUE/price/doc.md
index 2655d3988a..f2b0ad9acf 100644
--- a/src/packages/__VUE/price/doc.md
+++ b/src/packages/__VUE/price/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Price } from '@nutui/nutui';
 
@@ -20,7 +20,7 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="0" size="small" :need-symbol="false" />
   <nut-price :price="0" size="normal" :need-symbol="false" />
@@ -36,7 +36,7 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="8888" :decimal-digits="0" />
 </template>
@@ -48,16 +48,9 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-price
-    :price="8888"
-    decimal-digits="0"
-    size="normal"
-    :need-symbol="true"
-    :thousands="true"
-    :strike-through="true"
-  />
+  <nut-price :price="8888" :decimal-digits="0" size="normal" need-symbol thousands strike-through />
 </template>
 ```
 
@@ -69,7 +62,7 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="10010.01" symbol="¥" />
 </template>
@@ -83,7 +76,7 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="8888.01" position="after" symbol="元" />
 </template>
@@ -97,16 +90,14 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-price :price="15213.1221" :decimal-digits="3" :thousands="true" />
+  <nut-price :price="15213.1221" :decimal-digits="3" thousands />
 </template>
 ```
 
 :::
 
-:::
-
 ## API
 
 ### Props
diff --git a/src/packages/__VUE/price/doc.taro.md b/src/packages/__VUE/price/doc.taro.md
index 07650a4f89..e7be809716 100644
--- a/src/packages/__VUE/price/doc.taro.md
+++ b/src/packages/__VUE/price/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Price } from '@nutui/nutui-taro';
 
@@ -20,7 +20,7 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="0" size="small" :need-symbol="false" />
   <nut-price :price="0" size="normal" :need-symbol="false" />
@@ -36,7 +36,7 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="8888" :decimal-digits="0" />
 </template>
@@ -48,9 +48,9 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-price :price="8888" decimal-digits="0" size="normal" need-symbol thousands strike-through />
+  <nut-price :price="8888" :decimal-digits="0" size="normal" need-symbol thousands strike-through />
 </template>
 ```
 
@@ -62,7 +62,7 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="10010.01" symbol="¥" />
 </template>
@@ -76,7 +76,7 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-price :price="8888.01" position="after" symbol="元" />
 </template>
@@ -90,9 +90,9 @@ app.use(Price);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-price :price="15213.1221" :decimal-digits="3" :thousands="true" />
+  <nut-price :price="15213.1221" :decimal-digits="3" thousands />
 </template>
 ```
 
@@ -105,7 +105,7 @@ app.use(Price);
 | 参数                   | 说明                                      | 类型             | 默认值   |
 | ---------------------- | ----------------------------------------- | ---------------- | -------- |
 | price                  | 价格数量                                  | number \| string | `0`      |
-| need-symbol            | 是否需要加上 symbol 符号                  | boolean          | `true`   |
+| need-symbol            | 是否需要加上 `symbol` 符号                | boolean          | `true`   |
 | symbol                 | 符号类型                                  | string           | `&yen;`  |
 | decimal-digits         | 小数位位数                                | number           | `2`      |
 | thousands              | 是否按照千分号形式显示                    | boolean          | `false`  |
diff --git a/src/packages/__VUE/price/index.taro.vue b/src/packages/__VUE/price/index.taro.vue
index 9ef9da8d11..0ba47236ee 100644
--- a/src/packages/__VUE/price/index.taro.vue
+++ b/src/packages/__VUE/price/index.taro.vue
@@ -1,28 +1,31 @@
 <template>
   <view :class="classes">
     <view
-      v-if="needSymbol && position == 'before'"
+      v-if="needSymbol && position === 'before'"
       class="nut-price--symbol"
       :class="`nut-price--symbol-${size}`"
-      decode="true"
       v-html="showSymbol"
     ></view>
-    <view :class="`nut-price--${size}`">{{ formatThousands(price) }}</view>
+    <view :class="`nut-price--${size}`">
+      {{ formatThousands(price) }}
+    </view>
     <view :class="`nut-price--decimal-${size}`" v-if="decimalDigits != 0">.</view>
-    <view :class="`nut-price--decimal-${size}`">{{ formatDecimal(price) }}</view>
+    <view :class="`nut-price--decimal-${size}`">
+      {{ formatDecimal(price) }}
+    </view>
     <view
-      v-if="needSymbol && position == 'after'"
+      v-if="needSymbol && position === 'after'"
       class="nut-price--symbol"
       :class="`nut-price--symbol-${size}`"
-      decode="true"
       v-html="showSymbol"
     ></view>
   </view>
 </template>
 
 <script lang="ts">
-import { computed } from 'vue';
+import { PropType, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { PricePosition, PriceSize } from './types';
 const { componentName, create } = createComponent('price');
 
 export default create({
@@ -48,11 +51,11 @@ export default create({
       default: false
     },
     position: {
-      type: String,
+      type: String as PropType<PricePosition>,
       default: 'before'
     },
     size: {
-      type: String,
+      type: String as PropType<PriceSize>,
       default: 'normal'
     },
     strikeThrough: {
@@ -68,17 +71,8 @@ export default create({
         [`${componentName}--strike`]: props.strikeThrough
       };
     });
-    const replaceSpecialChar = (url: string) => {
-      url = url.replace(/&quot;/g, '"');
-      url = url.replace(/&amp;/g, '&');
-      url = url.replace(/&lt;/g, '<');
-      url = url.replace(/&gt;/g, '>');
-      url = url.replace(/&nbsp;/g, ' ');
-      url = url.replace(/&yen;/g, '￥');
-      return url;
-    };
     const showSymbol = computed(() => {
-      const symbol = props.needSymbol ? replaceSpecialChar(props.symbol) : '';
+      const symbol = props.needSymbol ? props.symbol : '';
       return symbol;
     });
     const checkPoint = (price: string | number) => {
@@ -121,8 +115,7 @@ export default create({
       showSymbol,
       checkPoint,
       formatThousands,
-      formatDecimal,
-      replaceSpecialChar
+      formatDecimal
     };
   }
 });
diff --git a/src/packages/__VUE/price/index.vue b/src/packages/__VUE/price/index.vue
index eb90548ded..0ba47236ee 100644
--- a/src/packages/__VUE/price/index.vue
+++ b/src/packages/__VUE/price/index.vue
@@ -1,7 +1,7 @@
 <template>
   <view :class="classes">
     <view
-      v-if="needSymbol && position == 'before'"
+      v-if="needSymbol && position === 'before'"
       class="nut-price--symbol"
       :class="`nut-price--symbol-${size}`"
       v-html="showSymbol"
@@ -14,7 +14,7 @@
       {{ formatDecimal(price) }}
     </view>
     <view
-      v-if="needSymbol && position == 'after'"
+      v-if="needSymbol && position === 'after'"
       class="nut-price--symbol"
       :class="`nut-price--symbol-${size}`"
       v-html="showSymbol"
@@ -23,8 +23,9 @@
 </template>
 
 <script lang="ts">
-import { computed } from 'vue';
+import { PropType, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { PricePosition, PriceSize } from './types';
 const { componentName, create } = createComponent('price');
 
 export default create({
@@ -50,11 +51,11 @@ export default create({
       default: false
     },
     position: {
-      type: String,
+      type: String as PropType<PricePosition>,
       default: 'before'
     },
     size: {
-      type: String,
+      type: String as PropType<PriceSize>,
       default: 'normal'
     },
     strikeThrough: {
diff --git a/src/packages/__VUE/price/types.ts b/src/packages/__VUE/price/types.ts
new file mode 100644
index 0000000000..7953a320a1
--- /dev/null
+++ b/src/packages/__VUE/price/types.ts
@@ -0,0 +1,2 @@
+export type PriceSize = 'small' | 'normal' | 'large';
+export type PricePosition = 'before' | 'after';