wedux-ui 0.3.0 → 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/README.md +6 -2
- 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/index.scss +2 -0
- package/miniprogram_dist/styles/tokens.scss +4 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -22,10 +22,14 @@ npm install wedux-ui
|
|
|
22
22
|
|
|
23
23
|
在项目全局样式文件 `app.scss` 中引入：
|
|
24
24
|
|
|
25
|
+
```scss
|
|
26
|
+
@import './miniprogram_npm/wedux-ui/styles/index.scss';
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
如需在页面中直接使用图标字体（`iconfont` 类名），额外引入：
|
|
30
|
+
|
|
25
31
|
```scss
|
|
26
32
|
@import './miniprogram_npm/wedux-ui/styles/iconfont.scss';
|
|
27
|
-
@import './miniprogram_npm/wedux-ui/styles/tokens.scss';
|
|
28
|
-
@import './miniprogram_npm/wedux-ui/styles/theme.scss';
|
|
29
33
|
```
|
|
30
34
|
|
|
31
35
|
## 快速上手
|
|
@@ -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
|
}
|