通过微信开发者工具 商城模板 创建新小程序

mini-program/components/price/index.js

@@ -0,0 +1,71 @@
+Component({
+  externalClasses: ['wr-class', 'symbol-class', 'decimal-class'],
+  useStore: [],
+  properties: {
+    priceUnit: {
+      type: String,
+      value: 'fen',
+    }, // 价格单位，分 | 元, fen，yuan
+    price: {
+      type: null,
+      value: '',
+      observer(price) {
+        this.format(price);
+      },
+    }, // 价格, 以分为单位
+    type: {
+      type: String,
+      value: '', //
+    }, //  main 粗体, lighter 细体, mini 黑色, del 中划线, delthrough 中划线，包括货币符号
+    symbol: {
+      type: String,
+      value: '¥', // '￥',
+    }, // 货币符号，默认是人民币符号￥
+    fill: Boolean, // 是否自动补齐两位小数
+    decimalSmaller: Boolean, // 小数字号小一点
+    lineThroughWidth: {
+      type: null,
+      value: '0.12em',
+    }, // 划线价线条高度
+  },
+
+  data: {
+    pArr: [],
+  },
+
+  methods: {
+    format(price) {
+      price = parseFloat(`${price}`);
+      const pArr = [];
+      if (!isNaN(price)) {
+        const isMinus = price < 0;
+        if (isMinus) {
+          price = -price;
+        }
+        if (this.properties.priceUnit === 'yuan') {
+          const priceSplit = price.toString().split('.');
+          pArr[0] = priceSplit[0];
+          pArr[1] = !priceSplit[1]
+            ? '00'
+            : priceSplit[1].length === 1
+            ? `${priceSplit[1]}0`
+            : priceSplit[1];
+        } else {
+          price = Math.round(price * 10 ** 8) / 10 ** 8; // 恢复精度丢失
+          price = Math.ceil(price); // 向上取整
+          pArr[0] = price >= 100 ? `${price}`.slice(0, -2) : '0';
+          pArr[1] = `${price + 100}`.slice(-2);
+        }
+        if (!this.properties.fill) {
+          // 如果 fill 为 false， 不显示小数末尾的0
+          if (pArr[1] === '00') pArr[1] = '';
+          else if (pArr[1][1] === '0') pArr[1] = pArr[1][0];
+        }
+        if (isMinus) {
+          pArr[0] = `-${pArr[0]}`;
+        }
+      }
+      this.setData({ pArr });
+    },
+  },
+});

mini-program/components/price/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

mini-program/components/price/index.wxml

@@ -0,0 +1,21 @@
+<wxs module="utils">
+	var REGEXP = getRegExp('^\d+(\.\d+)?$');
+	function addUnit(value) {
+	if (value == null) {
+	return '';
+	}
+	return REGEXP.test('' + value) ? value + 'rpx' : value;
+	}
+	module.exports = {
+	addUnit: addUnit
+	};
+</wxs>
+<view class="price {{type}} wr-class">
+	<view wx:if="{{type === 'delthrough'}}" class="line" style="height:{{utils.addUnit(lineThroughWidth)}};" />
+	<view class="symbol symbol-class">{{symbol}}</view>
+	<view class="pprice">
+		<view class="integer inline">{{pArr[0]}}</view>
+		<view wx:if="{{pArr[1]}}" class="decimal inline {{decimalSmaller ? 'smaller' : ''}} decimal-class">.{{pArr[1]}}</view>
+	</view>
+</view>
+

mini-program/components/price/index.wxss

@@ -0,0 +1,66 @@
+:host {
+  display: inline-block;
+  display: inline-block;
+  font-weight: inherit;
+}
+.inline {
+  display: inline;
+  white-space: nowrap;
+}
+.price {
+  display: inline;
+  color: inherit;
+  font-size: inherit;
+  text-decoration: inherit;
+}
+
+.lighter {
+  font-weight: 400;
+  font-size: 32rpx;
+}
+.mini {
+  font-size: 24rpx;
+  color: #5d5d5d;
+  font-weight: 400;
+}
+.del .pprice {
+  font-size: 32rpx;
+  color: #9b9b9b;
+  text-decoration: line-through;
+  font-weight: 400;
+}
+.delthrough {
+  position: relative;
+}
+.delthrough .line {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  transform: translateY(-50%);
+  margin: 0;
+  background-color: currentColor;
+}
+
+.symbol {
+  display: inline;
+  color: inherit;
+  font-size: inherit;
+  font-size: 0.8em;
+}
+.pprice {
+  display: inline;
+  margin: 0 0 0 4rpx;
+}
+.integer {
+  color: inherit;
+  font-size: inherit;
+}
+.decimal {
+  color: inherit;
+  font-size: inherit;
+}
+.decimal.smaller {
+  font-size: 0.8em;
+  vertical-align: baseline;
+}