1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
| <template>
| <view :style="labelStyle" class="title">{{ label }}</view>
| <view :style="numberStyle" class="number">{{ formatNumber(number,props.place) }}</view>
| </template>
|
| <script setup>
| import { computed } from 'vue';
|
| const props = defineProps({
| label: {
| type: String,
| default: "订单数量"
| },
| width: {
| type: Number,
| default: 300
| },
| labelColor: {
| type: String,
| default: '#white'
| },
| labelSize: {
| type: Number,
| default: 16
| },
| number: {
| type: Number,
| default: 80
| },
| numberColor: {
| type: String,
| default: 'red'
| },
| numberSize: {
| type: Number,
| default: 20
| },
| place: {
| type: Number,
| default: 2
| }
| })
| const labelStyle = computed(() => {
| return {
| width: `${props.width}rpx`,
| color: props.labelColor,
| fontSize: `${props.labelSize}px`
| }
| })
|
| const numberStyle = computed(() => {
| return {
| width: `${props.width}rpx`,
| color: props.numberColor,
| fontSize: `${props.numberSize}px`
| }
| })
|
| function formatNumber(num,place) {
|
| let fixedNum = Number(num).toFixed(place); // 将数字保留两位小数
| let parts = fixedNum.split('.'); // 拆分整数部分和小数部分
| let integerPart = parts[0]; // 整数部分
| let decimalPart = parts[1]; // 小数部分
|
| // 使用padStart方法补0到小数部分
| decimalPart = decimalPart.padStart(place, '0');
|
| return integerPart + '.' + decimalPart;
| }
|
|
| </script>
|
| <style lang="scss" scoped>
| .title {
| text-align: center;
| }
|
| .number {
| text-align: center;
| }
| </style>
|
|
|
