@fonixtree/magic-design 1.0.208 → 1.0.210

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.
Files changed (7) hide show
  1. package/es/composite-comp/common/components/ImageLabel/index.less +11 -1
  2. package/es/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.js +67 -11
  3. package/es/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.less +13 -0
  4. package/lib/composite-comp/common/components/ImageLabel/index.less +11 -1
  5. package/lib/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.js +67 -11
  6. package/lib/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.less +13 -0
  7. package/package.json +1 -1
package/es/composite-comp/common/components/ImageLabel/index.less CHANGED
@@ -7,11 +7,21 @@
7
7
  max-height: 30px;
8
8
 
9
9
  &.small {
10
- // max-width: 30px;
11
10
  max-height: 30px;
12
11
  }
13
12
  }
14
13
 
14
+ @media (min-width: 768px) {
15
+ &.img {
16
+ max-width: 75%;
17
+ max-height: 42px;
18
+
19
+ &.small {
20
+ max-height: 42px;
21
+ }
22
+ }
23
+ }
24
+
15
25
  &.label {
16
26
  max-width: 100%;
17
27
  overflow: hidden;
package/es/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.js CHANGED
@@ -15,6 +15,8 @@ var _currencyUtil = require("../../../../../../utils/currencyUtil");
15
15
 
16
16
  var _common = require("../../../../../../common");
17
17
 
18
+ var _ImageLabel = _interopRequireDefault(require("../../../../../common/components/ImageLabel"));
19
+
18
20
  var _components = require("../../../../../../meta-comp/components");
19
21
 
20
22
  var _businessUtil = require("../../../../../../utils/businessUtil");
@@ -93,14 +95,15 @@ function (_super) {
93
95
  }
94
96
 
95
97
  ProductItem.prototype.render = function () {
96
- var _a, _b;
98
+ var _a, _b, _c, _d, _e;
97
99
 
98
- var _c = this.props,
99
- data = _c.data,
100
- panelProps = _c.panelProps,
101
- onItemClick = _c.onItemClick,
102
- unknownPrice = _c.unknownPrice,
103
- rest = __rest(_c, ["data", "panelProps", "onItemClick", "unknownPrice"]);
100
+ var _f = this.props,
101
+ data = _f.data,
102
+ panelProps = _f.panelProps,
103
+ onItemClick = _f.onItemClick,
104
+ unknownPrice = _f.unknownPrice,
105
+ hideLabels = _f.hideLabels,
106
+ rest = __rest(_f, ["data", "panelProps", "onItemClick", "unknownPrice", "hideLabels"]);
104
107
 
105
108
  var promotions = (0, _businessUtil.getPromotionList)(data);
106
109
  var price = (0, _currencyUtil.formatCurrency)(data.salesPrice);
@@ -131,7 +134,51 @@ function (_super) {
131
134
  var _price = integerPart + " " + (decimalPart ? '.' + decimalPart : '');
132
135
 
133
136
  var oldPrice = data.marketPrice !== null ? (0, _currencyUtil.formatCurrencyWithSymbol)(data.marketPrice) : null;
134
- var salePercent = Number(data.salePercent) / 100 || 0;
137
+ var salePercent = Number(data.salePercent) / 100 || 0; // data.labels = [
138
+ // {
139
+ // labelId: 118,
140
+ // labelClass: '1',
141
+ // labelName: 'label01',
142
+ // position: '1',
143
+ // imgUrl: '/get/resource/store0/conf/20250819/picture/label011957627063377092608_600.png',
144
+ // labelType: 'A',
145
+ // labelCode: null,
146
+ // effDate: '2025-08-18 00:00:00',
147
+ // expDate: '2025-10-31 23:59:59',
148
+ // },
149
+ // {
150
+ // labelId: 118,
151
+ // labelClass: '1',
152
+ // labelName: 'label01',
153
+ // position: '6',
154
+ // imgUrl: '/get/resource/store0/conf/20250819/picture/label011957627063377092608_600.png',
155
+ // labelType: 'A',
156
+ // labelCode: null,
157
+ // effDate: '2025-08-18 00:00:00',
158
+ // expDate: '2025-10-31 23:59:59',
159
+ // },
160
+ // {
161
+ // labelId: 118,
162
+ // labelClass: '1',
163
+ // labelName: 'label01',
164
+ // position: '7',
165
+ // imgUrl: '/get/resource/store0/conf/20250819/picture/label011957627063377092608_600.png',
166
+ // labelType: 'A',
167
+ // labelCode: null,
168
+ // effDate: '2025-08-18 00:00:00',
169
+ // expDate: '2025-10-31 23:59:59',
170
+ // },
171
+ // ];
172
+
173
+ var imgLabels = ((_a = data.labels) === null || _a === void 0 ? void 0 : _a.filter(function (f) {
174
+ return f.position !== '6' && f.position !== '7';
175
+ })) || [];
176
+ var prodLabels = ((_b = data.labels) === null || _b === void 0 ? void 0 : _b.filter(function (f) {
177
+ return f.position === '6';
178
+ })) || [];
179
+ var priceLabels = ((_c = data.labels) === null || _c === void 0 ? void 0 : _c.filter(function (f) {
180
+ return f.position === '7';
181
+ })) || [];
135
182
  return /*#__PURE__*/_react["default"].createElement("div", _extends({
136
183
  className: (0, _classnames["default"])('m-pc-flash-product-item'),
137
184
  onClick: function onClick() {
@@ -143,13 +190,19 @@ function (_super) {
143
190
  className: "product-img",
144
191
  lazy: true,
145
192
  src: (0, _commonUtil.convertImageUrl)(data.productImg || data.imgUrlContent || data.productImageUrlContent)
193
+ }), !hideLabels && /*#__PURE__*/_react["default"].createElement(_ImageLabel["default"], {
194
+ labels: imgLabels,
195
+ small: true
146
196
  })), /*#__PURE__*/_react["default"].createElement("div", {
147
197
  className: "content-wrap"
148
198
  }, /*#__PURE__*/_react["default"].createElement("div", {
149
199
  className: "product-name-wrap"
150
200
  }, /*#__PURE__*/_react["default"].createElement("div", {
151
201
  className: "box"
152
- }, panelProps.productName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
202
+ }, prodLabels.length > 0 && !hideLabels && /*#__PURE__*/_react["default"].createElement(_ImageLabel["default"], {
203
+ labels: prodLabels,
204
+ small: true
205
+ }), panelProps.productName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
153
206
  data: __assign(__assign({}, panelProps.productName), {
154
207
  text: data.offerName
155
208
  }),
@@ -173,7 +226,10 @@ function (_super) {
173
226
  style: {
174
227
  color: panelProps.salesPrice.content.color
175
228
  }
176
- })), ((_a = panelProps.salesProgressVisible) === null || _a === void 0 ? void 0 : _a.open) && /*#__PURE__*/_react["default"].createElement("div", {
229
+ }), /*#__PURE__*/_react["default"].createElement("div", null, priceLabels.length > 0 && !hideLabels && /*#__PURE__*/_react["default"].createElement(_ImageLabel["default"], {
230
+ labels: priceLabels,
231
+ small: true
232
+ }))), ((_d = panelProps.salesProgressVisible) === null || _d === void 0 ? void 0 : _d.open) && /*#__PURE__*/_react["default"].createElement("div", {
177
233
  className: "rate-sold-wrap"
178
234
  }, /*#__PURE__*/_react["default"].createElement("div", {
179
235
  className: "rate-wrap"
@@ -191,7 +247,7 @@ function (_super) {
191
247
  className: "progress",
192
248
  style: {
193
249
  width: salePercent + "%",
194
- backgroundColor: (_b = panelProps.salesProgressVisible) === null || _b === void 0 ? void 0 : _b.color
250
+ backgroundColor: (_e = panelProps.salesProgressVisible) === null || _e === void 0 ? void 0 : _e.color
195
251
  }
196
252
  })))));
197
253
  };
package/es/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.less CHANGED
@@ -33,6 +33,12 @@
33
33
  line-height: 24px;
34
34
  height: 48px;
35
35
  white-space: wrap;
36
+
37
+ @media (min-width: 768px) {
38
+ .image-label-wrap {
39
+ margin-top: 6px;
40
+ }
41
+ }
36
42
  }
37
43
 
38
44
  .price-wrap {
@@ -61,6 +67,13 @@
61
67
  width: fit-content;
62
68
  }
63
69
 
70
+ @media (min-width: 768px) {
71
+ .image-label-wrap {
72
+ margin-left: 6px;
73
+ margin-bottom: -3px;
74
+ }
75
+ }
76
+
64
77
  }
65
78
 
66
79
  .rate-sold-wrap {
package/lib/composite-comp/common/components/ImageLabel/index.less CHANGED
@@ -7,11 +7,21 @@
7
7
  max-height: 30px;
8
8
 
9
9
  &.small {
10
- // max-width: 30px;
11
10
  max-height: 30px;
12
11
  }
13
12
  }
14
13
 
14
+ @media (min-width: 768px) {
15
+ &.img {
16
+ max-width: 75%;
17
+ max-height: 42px;
18
+
19
+ &.small {
20
+ max-height: 42px;
21
+ }
22
+ }
23
+ }
24
+
15
25
  &.label {
16
26
  max-width: 100%;
17
27
  overflow: hidden;
package/lib/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.js CHANGED
@@ -15,6 +15,8 @@ var _currencyUtil = require("../../../../../../utils/currencyUtil");
15
15
 
16
16
  var _common = require("../../../../../../common");
17
17
 
18
+ var _ImageLabel = _interopRequireDefault(require("../../../../../common/components/ImageLabel"));
19
+
18
20
  var _components = require("../../../../../../meta-comp/components");
19
21
 
20
22
  var _businessUtil = require("../../../../../../utils/businessUtil");
@@ -93,14 +95,15 @@ function (_super) {
93
95
  }
94
96
 
95
97
  ProductItem.prototype.render = function () {
96
- var _a, _b;
98
+ var _a, _b, _c, _d, _e;
97
99
 
98
- var _c = this.props,
99
- data = _c.data,
100
- panelProps = _c.panelProps,
101
- onItemClick = _c.onItemClick,
102
- unknownPrice = _c.unknownPrice,
103
- rest = __rest(_c, ["data", "panelProps", "onItemClick", "unknownPrice"]);
100
+ var _f = this.props,
101
+ data = _f.data,
102
+ panelProps = _f.panelProps,
103
+ onItemClick = _f.onItemClick,
104
+ unknownPrice = _f.unknownPrice,
105
+ hideLabels = _f.hideLabels,
106
+ rest = __rest(_f, ["data", "panelProps", "onItemClick", "unknownPrice", "hideLabels"]);
104
107
 
105
108
  var promotions = (0, _businessUtil.getPromotionList)(data);
106
109
  var price = (0, _currencyUtil.formatCurrency)(data.salesPrice);
@@ -131,7 +134,51 @@ function (_super) {
131
134
  var _price = integerPart + " " + (decimalPart ? '.' + decimalPart : '');
132
135
 
133
136
  var oldPrice = data.marketPrice !== null ? (0, _currencyUtil.formatCurrencyWithSymbol)(data.marketPrice) : null;
134
- var salePercent = Number(data.salePercent) / 100 || 0;
137
+ var salePercent = Number(data.salePercent) / 100 || 0; // data.labels = [
138
+ // {
139
+ // labelId: 118,
140
+ // labelClass: '1',
141
+ // labelName: 'label01',
142
+ // position: '1',
143
+ // imgUrl: '/get/resource/store0/conf/20250819/picture/label011957627063377092608_600.png',
144
+ // labelType: 'A',
145
+ // labelCode: null,
146
+ // effDate: '2025-08-18 00:00:00',
147
+ // expDate: '2025-10-31 23:59:59',
148
+ // },
149
+ // {
150
+ // labelId: 118,
151
+ // labelClass: '1',
152
+ // labelName: 'label01',
153
+ // position: '6',
154
+ // imgUrl: '/get/resource/store0/conf/20250819/picture/label011957627063377092608_600.png',
155
+ // labelType: 'A',
156
+ // labelCode: null,
157
+ // effDate: '2025-08-18 00:00:00',
158
+ // expDate: '2025-10-31 23:59:59',
159
+ // },
160
+ // {
161
+ // labelId: 118,
162
+ // labelClass: '1',
163
+ // labelName: 'label01',
164
+ // position: '7',
165
+ // imgUrl: '/get/resource/store0/conf/20250819/picture/label011957627063377092608_600.png',
166
+ // labelType: 'A',
167
+ // labelCode: null,
168
+ // effDate: '2025-08-18 00:00:00',
169
+ // expDate: '2025-10-31 23:59:59',
170
+ // },
171
+ // ];
172
+
173
+ var imgLabels = ((_a = data.labels) === null || _a === void 0 ? void 0 : _a.filter(function (f) {
174
+ return f.position !== '6' && f.position !== '7';
175
+ })) || [];
176
+ var prodLabels = ((_b = data.labels) === null || _b === void 0 ? void 0 : _b.filter(function (f) {
177
+ return f.position === '6';
178
+ })) || [];
179
+ var priceLabels = ((_c = data.labels) === null || _c === void 0 ? void 0 : _c.filter(function (f) {
180
+ return f.position === '7';
181
+ })) || [];
135
182
  return /*#__PURE__*/_react["default"].createElement("div", _extends({
136
183
  className: (0, _classnames["default"])('m-pc-flash-product-item'),
137
184
  onClick: function onClick() {
@@ -143,13 +190,19 @@ function (_super) {
143
190
  className: "product-img",
144
191
  lazy: true,
145
192
  src: (0, _commonUtil.convertImageUrl)(data.productImg || data.imgUrlContent || data.productImageUrlContent)
193
+ }), !hideLabels && /*#__PURE__*/_react["default"].createElement(_ImageLabel["default"], {
194
+ labels: imgLabels,
195
+ small: true
146
196
  })), /*#__PURE__*/_react["default"].createElement("div", {
147
197
  className: "content-wrap"
148
198
  }, /*#__PURE__*/_react["default"].createElement("div", {
149
199
  className: "product-name-wrap"
150
200
  }, /*#__PURE__*/_react["default"].createElement("div", {
151
201
  className: "box"
152
- }, panelProps.productName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
202
+ }, prodLabels.length > 0 && !hideLabels && /*#__PURE__*/_react["default"].createElement(_ImageLabel["default"], {
203
+ labels: prodLabels,
204
+ small: true
205
+ }), panelProps.productName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
153
206
  data: __assign(__assign({}, panelProps.productName), {
154
207
  text: data.offerName
155
208
  }),
@@ -173,7 +226,10 @@ function (_super) {
173
226
  style: {
174
227
  color: panelProps.salesPrice.content.color
175
228
  }
176
- })), ((_a = panelProps.salesProgressVisible) === null || _a === void 0 ? void 0 : _a.open) && /*#__PURE__*/_react["default"].createElement("div", {
229
+ }), /*#__PURE__*/_react["default"].createElement("div", null, priceLabels.length > 0 && !hideLabels && /*#__PURE__*/_react["default"].createElement(_ImageLabel["default"], {
230
+ labels: priceLabels,
231
+ small: true
232
+ }))), ((_d = panelProps.salesProgressVisible) === null || _d === void 0 ? void 0 : _d.open) && /*#__PURE__*/_react["default"].createElement("div", {
177
233
  className: "rate-sold-wrap"
178
234
  }, /*#__PURE__*/_react["default"].createElement("div", {
179
235
  className: "rate-wrap"
@@ -191,7 +247,7 @@ function (_super) {
191
247
  className: "progress",
192
248
  style: {
193
249
  width: salePercent + "%",
194
- backgroundColor: (_b = panelProps.salesProgressVisible) === null || _b === void 0 ? void 0 : _b.color
250
+ backgroundColor: (_e = panelProps.salesProgressVisible) === null || _e === void 0 ? void 0 : _e.color
195
251
  }
196
252
  })))));
197
253
  };
package/lib/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.less CHANGED
@@ -33,6 +33,12 @@
33
33
  line-height: 24px;
34
34
  height: 48px;
35
35
  white-space: wrap;
36
+
37
+ @media (min-width: 768px) {
38
+ .image-label-wrap {
39
+ margin-top: 6px;
40
+ }
41
+ }
36
42
  }
37
43
 
38
44
  .price-wrap {
@@ -61,6 +67,13 @@
61
67
  width: fit-content;
62
68
  }
63
69
 
70
+ @media (min-width: 768px) {
71
+ .image-label-wrap {
72
+ margin-left: 6px;
73
+ margin-bottom: -3px;
74
+ }
75
+ }
76
+
64
77
  }
65
78
 
66
79
  .rate-sold-wrap {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fonixtree/magic-design",
3
3
  "author": "Cylon Team",
4
- "version": "1.0.208",
4
+ "version": "1.0.210",
5
5
  "description": "Magic Design",
6
6
  "license": "MIT",
7
7
  "module": "es/index.js",