wedux-ui 0.3.1 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/miniprogram_dist/components/price/price.js +57 -0
- package/miniprogram_dist/components/price/price.json +4 -0
- package/miniprogram_dist/components/price/price.scss +51 -0
- package/miniprogram_dist/components/price/price.wxml +7 -0
- package/miniprogram_dist/styles/tokens.scss +4 -0
- package/package.json +1 -1
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
Component({
|
|
2
|
+
properties: {
|
|
3
|
+
price: {
|
|
4
|
+
type: null,
|
|
5
|
+
value: 0,
|
|
6
|
+
},
|
|
7
|
+
originalPrice: {
|
|
8
|
+
type: null,
|
|
9
|
+
value: '',
|
|
10
|
+
},
|
|
11
|
+
currency: {
|
|
12
|
+
type: String,
|
|
13
|
+
value: '¥',
|
|
14
|
+
},
|
|
15
|
+
decimal: {
|
|
16
|
+
type: Number,
|
|
17
|
+
value: 2,
|
|
18
|
+
},
|
|
19
|
+
size: {
|
|
20
|
+
type: String,
|
|
21
|
+
value: 'md',
|
|
22
|
+
},
|
|
23
|
+
color: {
|
|
24
|
+
type: String,
|
|
25
|
+
value: '',
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
|
|
29
|
+
data: {
|
|
30
|
+
_formattedPrice: '0.00',
|
|
31
|
+
_formattedOriginal: '',
|
|
32
|
+
_hasOriginal: false,
|
|
33
|
+
_style: '',
|
|
34
|
+
},
|
|
35
|
+
|
|
36
|
+
observers: {
|
|
37
|
+
color(color) {
|
|
38
|
+
this.setData({ _style: color ? `--w-price-color: ${color}` : '' });
|
|
39
|
+
},
|
|
40
|
+
'price, originalPrice, decimal': function (price, originalPrice, decimal) {
|
|
41
|
+
const decimals = Math.max(0, Math.floor(decimal));
|
|
42
|
+
const numPrice = Number(price);
|
|
43
|
+
const formattedPrice = isNaN(numPrice) ? '0' : numPrice.toFixed(decimals);
|
|
44
|
+
const hasOriginal =
|
|
45
|
+
originalPrice !== '' && originalPrice !== undefined && originalPrice !== null;
|
|
46
|
+
const numOriginal = hasOriginal ? Number(originalPrice) : NaN;
|
|
47
|
+
const formattedOriginal =
|
|
48
|
+
hasOriginal && !isNaN(numOriginal) ? numOriginal.toFixed(decimals) : '';
|
|
49
|
+
|
|
50
|
+
this.setData({
|
|
51
|
+
_formattedPrice: formattedPrice,
|
|
52
|
+
_formattedOriginal: formattedOriginal,
|
|
53
|
+
_hasOriginal: hasOriginal,
|
|
54
|
+
});
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
});
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
.w-price {
|
|
2
|
+
display: inline-flex;
|
|
3
|
+
align-items: baseline;
|
|
4
|
+
line-height: 1;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
/* Size variants — 主价格字号 */
|
|
8
|
+
.w-price--sm .w-price__value {
|
|
9
|
+
font-size: var(--font-size-lg);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.w-price--sm .w-price__currency {
|
|
13
|
+
font-size: var(--font-size-sm);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.w-price--md .w-price__value {
|
|
17
|
+
font-size: var(--font-size-xl);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.w-price--md .w-price__currency {
|
|
21
|
+
font-size: var(--font-size-md);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.w-price--lg .w-price__value {
|
|
25
|
+
font-size: var(--font-size-h3);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.w-price--lg .w-price__currency {
|
|
29
|
+
font-size: var(--font-size-xl);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.w-price__currency {
|
|
33
|
+
font-weight: 700;
|
|
34
|
+
color: var(--w-price-color);
|
|
35
|
+
vertical-align: super;
|
|
36
|
+
line-height: 1;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.w-price__value {
|
|
40
|
+
font-weight: 700;
|
|
41
|
+
color: var(--w-price-color);
|
|
42
|
+
font-variant-numeric: tabular-nums;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.w-price__original {
|
|
46
|
+
font-size: var(--font-size-sm);
|
|
47
|
+
color: var(--w-price-original-color);
|
|
48
|
+
text-decoration: line-through;
|
|
49
|
+
margin-left: 8rpx;
|
|
50
|
+
font-weight: 400;
|
|
51
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<view class="w-price w-price--{{size}}" style="{{_style}}">
|
|
2
|
+
<text class="w-price__currency">{{currency}}</text
|
|
3
|
+
><text class="w-price__value">{{_formattedPrice}}</text
|
|
4
|
+
><text wx:if="{{_hasOriginal}}" class="w-price__original"
|
|
5
|
+
>{{currency}}{{_formattedOriginal}}</text
|
|
6
|
+
>
|
|
7
|
+
</view>
|
|
@@ -300,4 +300,8 @@ page {
|
|
|
300
300
|
--w-empty-image-size-md: 160rpx;
|
|
301
301
|
--w-empty-image-size-lg: 240rpx;
|
|
302
302
|
--w-empty-image-size: var(--w-empty-image-size-md);
|
|
303
|
+
|
|
304
|
+
/* Price */
|
|
305
|
+
--w-price-color: var(--color-brand);
|
|
306
|
+
--w-price-original-color: var(--color-text-secondary);
|
|
303
307
|
}
|