feat(price): 前后加符号，可不保留小数点 (#739) #748

* docs: 优化Price组件前后加符号，可不保留小数点

* docs: 增加价格尺寸灵活配置

* docs: 优化price组件动态改变大小

src/packages/__VUE/price/doc.md

@@ -61,4 +61,6 @@ setup() {
 | need-symbol    | 是否需要加上 symbol 符号 | Boolean | true   |
 | symbol         | 符号类型                 | String  | ¥  |
 | decimal-digits | 小数位位数               | Number  | 2      |
-| thousands      | 是否按照千分号形式显示   | Boolean | false  |
+| thousands      | 是否按照千分号形式显示   | Boolean | false  |
+| position      | 符号显示在(价格)前或者后(before、after)   | String | before  |
+| size      | 价格尺寸(large、normal、small)   | String | normal  |

src/packages/__VUE/price/index.scss

@@ -5,9 +5,9 @@
   &--symbol {
     display: inline-block;
     font-size: $font-size-3;
-    margin-right: 4px;
+    // margin-right: 4px;
   }
-  &--big {
+  &--large {
     display: inline-block;
     font-size: $price-big-size;
   }
@@ -15,8 +15,45 @@
     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;
+  }
+  &--symbol-large {
+    display: inline-block;
+    font-size: $price-symbol-big-size;
+  }
+  &--normal {
+    display: inline-block;
+    font-size: $price-medium-size;
+  }
+  &--decimal-normal {
+    display: inline-block;
+    font-size: $price-decimal-medium-size;
+  }
+  &--symbol-normal {
+    display: inline-block;
+    font-size: $price-symbol-medium-size;
+  }
   &--small {
     display: inline-block;
-    font-size: $font-size-4;
+    font-size: $price-small-size;
+  }
+  &--decimal-small {
+    display: inline-block;
+    font-size: $price-decimal-small-size;
+  }
+  &--symbol-small {
+    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

@@ -1,18 +1,26 @@
 <template>
   <view :class="classes">
     <view
-      v-if="needSymbol"
+      v-if="needSymbol && position == 'before'"
       class="nut-price--symbol"
+      :class="`nut-price--symbol-${size}`"
       decode="true"
       v-html="showSymbol"
     ></view>
-    <view class="nut-price--big">
+    <view :class="`nut-price--${size}`">
       {{ formatThousands(price) }}
     </view>
-    <view class="nut-price--point">.</view>
-    <view class="nut-price--small">
+    <view :class="`nut-price--decimal-${size}`" v-if="decimalDigits != 0">.</view>
+    <view :class="`nut-price--decimal-${size}`">
       {{ formatDecimal(price) }}
     </view>
+    <view
+      v-if="needSymbol && position == 'after'"
+      class="nut-price--symbol"
+      :class="`nut-price--symbol-${size}`"
+      decode="true"
+      v-html="showSymbol"
+    ></view>
   </view>
 </template>
 
@@ -42,6 +50,14 @@ export default create({
     thousands: {
       type: Boolean,
       default: false
+    },
+    position: {
+      type: String,
+      default: 'before'
+    },
+    size: {
+      type: String,
+      default: 'normal'
     }
   },
 
@@ -74,10 +90,7 @@ export default create({
       }
       if (checkPoint(num)) {
         num = Number(num).toFixed(props.decimalDigits);
-        num =
-          typeof num.split('.') === 'string'
-            ? num.split('.')
-            : num.split('.')[0];
+        num = typeof num.split('.') === 'string' ? num.split('.') : num.split('.')[0];
       } else {
         num = num.toString();
       }
@@ -94,9 +107,7 @@ export default create({
       if (checkPoint(decimalNum)) {
         decimalNum = Number(decimalNum).toFixed(props.decimalDigits);
         decimalNum =
-          typeof decimalNum.split('.') === 'string'
-            ? 0
-            : decimalNum.split('.')[1];
+          typeof decimalNum.split('.') === 'string' ? 0 : decimalNum.split('.')[1] ? decimalNum.split('.')[1] : 0;
       } else {
         decimalNum = 0;
       }

src/packages/__VUE/price/index.vue

@@ -1,17 +1,24 @@
 <template>
   <view :class="classes">
     <view
-      v-if="needSymbol"
+      v-if="needSymbol && position == 'before'"
       class="nut-price--symbol"
+      :class="`nut-price--symbol-${size}`"
       v-html="showSymbol"
     ></view>
-    <view class="nut-price--big">
+    <view :class="`nut-price--${size}`">
       {{ formatThousands(price) }}
     </view>
-    <view class="nut-price--point">.</view>
-    <view class="nut-price--small">
+    <view :class="`nut-price--decimal-${size}`" v-if="decimalDigits != 0">.</view>
+    <view :class="`nut-price--decimal-${size}`">
       {{ formatDecimal(price) }}
     </view>
+    <view
+      v-if="needSymbol && position == 'after'"
+      class="nut-price--symbol"
+      :class="`nut-price--symbol-${size}`"
+      v-html="showSymbol"
+    ></view>
   </view>
 </template>
 
@@ -41,6 +48,14 @@ export default create({
     thousands: {
       type: Boolean,
       default: false
+    },
+    position: {
+      type: String,
+      default: 'before'
+    },
+    size: {
+      type: String,
+      default: 'normal'
     }
   },
 
@@ -64,10 +79,7 @@ export default create({
       }
       if (checkPoint(num)) {
         num = Number(num).toFixed(props.decimalDigits);
-        num =
-          typeof num.split('.') === 'string'
-            ? num.split('.')
-            : num.split('.')[0];
+        num = typeof num.split('.') === 'string' ? num.split('.') : num.split('.')[0];
       } else {
         num = num.toString();
       }
@@ -84,9 +96,7 @@ export default create({
       if (checkPoint(decimalNum)) {
         decimalNum = Number(decimalNum).toFixed(props.decimalDigits);
         decimalNum =
-          typeof decimalNum.split('.') === 'string'
-            ? 0
-            : decimalNum.split('.')[1];
+          typeof decimalNum.split('.') === 'string' ? 0 : decimalNum.split('.')[1] ? decimalNum.split('.')[1] : 0;
       } else {
         decimalNum = 0;
       }

src/packages/styles/variables.scss

@@ -149,8 +149,20 @@ $shortpsd-border-color: #ddd !default;
 $shortpsd-error: rgba(242, 39, 12, 1) !default;
 $shortpsd-forget: rgba(128, 128, 128, 1) !default;
 
-//price
-$price-big-size: 24px !default;
+//large price
+$price-symbol-big-size: 16px !default;
+$price-big-size: 30px !default;
+$price-decimal-big-size: 18px !default;
+
+//normal price
+$price-symbol-medium-size: 13px !default;
+$price-medium-size: 16px !default;
+$price-decimal-medium-size: 13px !default;
+
+// small price
+$price-symbol-small-size: 11px !default;
+$price-small-size: 14.2px !default;
+$price-decimal-small-size: 14.2px !default;
 
 //avatar
 $avatar-square: 5px !default;

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

@@ -10,21 +10,11 @@
     </nut-cell>
     <h2>带人民币符号，有千位分隔，保留小数点后三位</h2>
     <nut-cell>
-      <nut-price
-        :price="15213.1221"
-        :decimal-digits="3"
-        :need-symbol="true"
-        :thousands="true"
-      />
+      <nut-price :price="15213.1221" :decimal-digits="2" :need-symbol="true" :thousands="true" />
     </nut-cell>
     <h2>异步随机变更</h2>
     <nut-cell>
-      <nut-price
-        :price="price"
-        :decimal-digits="3"
-        :need-symbol="false"
-        :thousands="true"
-      />
+      <nut-price :price="price" :decimal-digits="3" :need-symbol="false" :thousands="true" />
     </nut-cell>
   </div>
 </template>