feat: price

src/config.ts

@@ -33,6 +33,15 @@ export const nav = [
         show: true,
         desc: '',
         author: 'richard1015'
+      },
+      {
+        name: 'price',
+        sort: 1,
+        cName: '价格组件',
+        type: 'component',
+        show: true,
+        desc: ''
+        // author: 'hahaha'
       }
     ]
   },

src/packages/price/demo.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="demo">
+    <div class="title">基本用法</div>
+    <div class="demo-price-box">
+      <nut-price :price="1010" :needSymbol="false" :thousands="true" />
+    </div>
+    <div class="title">无人民币符号，有千位分隔</div>
+    <div class="demo-price-box">
+      <nut-price :price="10010.01" :needSymbol="true" :thousands="false" />
+    </div>
+    <div class="title">带人民币符号，有千位分隔，保留小数点后三位</div>
+    <div class="demo-price-box">
+      <nut-price :price="15213.1221" :decimalDigits="3" :needSymbol="true" :thousands="true" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Price from '@/packages/price/index.vue';
+import { createComponent } from '@/utils/create';
+const { createDemo } = createComponent('price');
+export default createDemo({
+  props: {
+    text: String
+  },
+  components: { [Price.name]: Price }
+});
+</script>
+
+<style lang="scss" scoped>
+.demo-price-box {
+  padding: 5px 20px;
+  min-height: 43px;
+  background: rgba(255, 255, 255, 1);
+  border-radius: 7px;
+  box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
+}
+</style>

src/packages/price/doc.md

@@ -0,0 +1,32 @@
+# Price
+
+### 介绍
+
+我是商品价格按钮组件
+
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { Price } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Price);
+
+```
+https://www.baidu.com
+
+
+
+### 基本用法
+
+### 无人民币符号，有千位分隔
+
+### 带人民币符号，有千位分隔，保留小数点后三位
+
+按钮支持 `default`、`primary`、`success`、`warning`、`danger` 五种类型，默认为 default。
+
+|序号|名称|备注|
+|--|--|--|
+|1|小花|等哈阿贾克斯|
+|2|小浪|阿师大丹江口市|

src/packages/price/index.scss

@@ -0,0 +1,14 @@
+.nut-price {
+  font-size: 16px;
+  display: inline;
+  color: #fa2c19;
+  .price-symbol {
+    font-size: 18px;
+  }
+  .price-big {
+    font-size: 24px;
+  }
+  .price-small {
+    font-size: 18px;
+  }
+}

src/packages/price/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <view :class="classes" v-html="priceShow"> </view>
+</template>
+
+<script lang="ts">
+import { toRefs, computed } from 'vue';
+import { createComponent } from '@/utils/create';
+const { componentName, create } = createComponent('price');
+
+export default create({
+  props: {
+    // 价格
+    price: {
+      type: [Number, String],
+      default: 0
+    },
+    // 符号
+    needSymbol: {
+      type: Boolean,
+      default: true
+    },
+    // 小数点位数
+    decimalDigits: {
+      type: Number,
+      default: 2
+    },
+    // 是否按照千分号形式显示
+    thousands: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {},
+  setup(props, { slots }) {
+    // setup内部只能访问这4个属性，值得注意的是props必须在上面声明才能在这里取到
+    // console.log('props', props, 'slots', slots);
+    const { price, needSymbol, decimalDigits, thousands } = toRefs(props);
+    console.log('decimalDigits', decimalDigits.value);
+    //判断是否为小数点
+    const checkPoint = (price: string | number) => {
+      return String(price).indexOf('.') > 0;
+    };
+    //千分位显示
+    const formatThousands = (num: string | number) => {
+      if (thousands.value) {
+        return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
+      } else {
+        return num;
+      }
+    };
+    //根据小数位数格式化小数部分
+    const formatDecimal = (decimalNum: string | number) => {
+      // const decimalDigitsNum = decimalDigits.value;
+      const result = '0.' + String(decimalNum);
+      const resultFixed = Number(result).toFixed(decimalDigits.value);
+      console.log('44', String(resultFixed));
+      return String(resultFixed).substring(2, resultFixed.length);
+    };
+    //将数字转换成驼峰形式
+    const formatToHump = (price: string | number) => {
+      // price = String(price).replace('￥', '');
+      if (checkPoint(price)) {
+        // console.log('price', price)
+        price = Number(price).toFixed(decimalDigits.value);
+        if (Number(price) == 0) {
+          price = 0;
+          return [0];
+        }
+        const priceArray = price.split('.');
+        console.log('num1', priceArray);
+        return (
+          '<span class="price-big">' +
+          formatThousands(priceArray[0]) +
+          '</span><span class="price-point">.</span><span class="price-small">' +
+          formatDecimal(priceArray[1]) +
+          '</span>'
+        );
+      } else {
+        return (
+          '<span class="price-big">' +
+          formatThousands(price) +
+          '</span><span class="price-point">.</span><span class="price-small">' +
+          formatDecimal(0) +
+          '</span>'
+        );
+      }
+    };
+    const priceShow = computed(() => {
+      const symbol = needSymbol ? '<span class="price-symbol">￥</span>' : '';
+      return symbol + formatToHump(price.value);
+    });
+    const classes = computed(() => {
+      return {
+        [componentName]: true
+      };
+    });
+    return {
+      priceShow,
+      checkPoint,
+      formatThousands,
+      formatDecimal,
+      formatToHump,
+      classes
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+@import 'index.scss';
+</style>