@fonixtree/magic-design 1.0.56 → 1.0.57

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.
@@ -0,0 +1,126 @@
1
+ "use strict";
2
+
3
+ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports["default"] = void 0;
9
+
10
+ var _react = _interopRequireWildcard(require("react"));
11
+
12
+ var _reactCropper = _interopRequireDefault(require("react-cropper"));
13
+
14
+ require("cropperjs/dist/cropper.css");
15
+
16
+ var _indexModule = _interopRequireDefault(require("./index.module.less"));
17
+
18
+ var _locale = require("../../locale");
19
+
20
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
21
+
22
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
23
+
24
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
25
+
26
+ var __extends = void 0 && (void 0).__extends || function () {
27
+ var _extendStatics = function extendStatics(d, b) {
28
+ _extendStatics = Object.setPrototypeOf || {
29
+ __proto__: []
30
+ } instanceof Array && function (d, b) {
31
+ d.__proto__ = b;
32
+ } || function (d, b) {
33
+ for (var p in b) {
34
+ if (b.hasOwnProperty(p)) d[p] = b[p];
35
+ }
36
+ };
37
+
38
+ return _extendStatics(d, b);
39
+ };
40
+
41
+ return function (d, b) {
42
+ _extendStatics(d, b);
43
+
44
+ function __() {
45
+ this.constructor = d;
46
+ }
47
+
48
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
49
+ };
50
+ }();
51
+
52
+ var AComponent =
53
+ /** @class */
54
+ function (_super) {
55
+ __extends(AComponent, _super);
56
+
57
+ function AComponent() {
58
+ var _this = _super !== null && _super.apply(this, arguments) || this;
59
+
60
+ _this.state = {
61
+ src: ''
62
+ };
63
+
64
+ _this.onSubmit = function () {
65
+ _this.cropper.getCroppedCanvas().toBlob(function (blob) {
66
+ var fileName = _this.props.uploadedImageFile.name; // Vovi手机没有图片后缀
67
+
68
+ if (fileName && fileName.lastIndexOf('.') === -1) {
69
+ fileName = "file_" + new Date().getTime() + ".jpg";
70
+ }
71
+
72
+ var formData = new FormData();
73
+ formData.append('file', blob, fileName);
74
+
75
+ _this.props.onSubmit(formData);
76
+ });
77
+ };
78
+
79
+ return _this;
80
+ }
81
+
82
+ AComponent.prototype.componentDidMount = function () {
83
+ var _this = this;
84
+
85
+ var fileReader = new FileReader();
86
+
87
+ fileReader.onload = function (e) {
88
+ var dataURL = e.target.result;
89
+
90
+ _this.setState({
91
+ src: dataURL
92
+ });
93
+ };
94
+
95
+ fileReader.readAsDataURL(this.props.uploadedImageFile);
96
+ };
97
+
98
+ AComponent.prototype.render = function () {
99
+ var _this = this;
100
+
101
+ return /*#__PURE__*/_react["default"].createElement("div", {
102
+ className: _indexModule["default"].cropperModalWrap
103
+ }, /*#__PURE__*/_react["default"].createElement(_reactCropper["default"], {
104
+ aspectRatio: 1,
105
+ className: "company-logo-cropper",
106
+ guides: false,
107
+ onInitialized: function onInitialized(cop) {
108
+ _this.cropper = cop;
109
+ },
110
+ src: this.state.src,
111
+ viewMode: 1,
112
+ zoomable: false
113
+ }), /*#__PURE__*/_react["default"].createElement("div", {
114
+ className: _indexModule["default"].btnWrap
115
+ }, /*#__PURE__*/_react["default"].createElement("span", {
116
+ onClick: this.props.onClose
117
+ }, (0, _locale.i18n)('CANCEL')), /*#__PURE__*/_react["default"].createElement("span", {
118
+ onClick: this.onSubmit
119
+ }, (0, _locale.i18n)('SUBMIT'))));
120
+ };
121
+
122
+ return AComponent;
123
+ }(_react.Component);
124
+
125
+ var _default = AComponent;
126
+ exports["default"] = _default;
@@ -0,0 +1,27 @@
1
+ .cropperModalWrap {
2
+ background: #000;
3
+ position: fixed;
4
+ z-index: 1000;
5
+ top: 0;
6
+ bottom: 0;
7
+ left: 0;
8
+ right: 0;
9
+ display: flex;
10
+ justify-content: center;
11
+ align-items: center;
12
+
13
+ .btnWrap {
14
+ span {
15
+ color: #fff;
16
+ font-size: 18px;
17
+ position: absolute;
18
+ bottom: 10px;
19
+ &:first-child {
20
+ left: 12px;
21
+ }
22
+ &:last-child {
23
+ right: 12px;
24
+ }
25
+ }
26
+ }
27
+ }
@@ -39,6 +39,12 @@ Object.defineProperty(exports, "ColorPickerInput", {
39
39
  return _ColorPickerInput["default"];
40
40
  }
41
41
  });
42
+ Object.defineProperty(exports, "CropperModal", {
43
+ enumerable: true,
44
+ get: function get() {
45
+ return _CropperModal["default"];
46
+ }
47
+ });
42
48
  Object.defineProperty(exports, "Field", {
43
49
  enumerable: true,
44
50
  get: function get() {
@@ -188,4 +194,6 @@ var _CardCarousel = _interopRequireDefault(require("./CardCarousel"));
188
194
 
189
195
  var _MyModal = _interopRequireDefault(require("./MyModal"));
190
196
 
197
+ var _CropperModal = _interopRequireDefault(require("./CropperModal"));
198
+
191
199
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -56,7 +56,7 @@ function (_super) {
56
56
  _this.state = {};
57
57
 
58
58
  _this.onItemClick = function (item) {
59
- if ((0, _commonUtil.checkLogin)(true, '/main/account')) {
59
+ if ((0, _commonUtil.checkLogin)(true, '/main/account', true)) {
60
60
  var url = (0, _commonUtil.ensure)(function () {
61
61
  return item.title.content.clickUrl.value || item.image.content.clickUrl.value;
62
62
  }, '');
@@ -11,6 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
11
11
 
12
12
  var _lodash = require("lodash");
13
13
 
14
+ var _antd = require("antd");
15
+
14
16
  var _avatar = _interopRequireDefault(require("./images/avatar.png"));
15
17
 
16
18
  var _components = require("../../../../../meta-comp/components");
@@ -27,6 +29,8 @@ var _index = require("../../../../../constants/index");
27
29
 
28
30
  var _storeUtil = require("../../../../../utils/storeUtil");
29
31
 
32
+ var _common = require("../../../../../common");
33
+
30
34
  require("./index.less");
31
35
 
32
36
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -266,19 +270,26 @@ function (_super) {
266
270
  } else if (v === _index.personalInfoType.VIEWED) {
267
271
  return userInfo.recentViewNum || 0;
268
272
  }
269
- }; // handleFileChange = e => {
270
- // const file = e.target.files[0];
271
- // if (file) {
272
- // if (file.name.length > 120) {
273
- // message.error(i18n('IMAGE_NAME_IS_TOO_LONG'));
274
- // return;
275
- // }
276
- // setSelectedImgFile(file);
277
- // setEditImgModalVisible(true);
278
- // }
279
- // e.target.value = '';
280
- // };
273
+ };
274
+
275
+ _this.handleFileChange = function (e) {
276
+ var file = e.target.files[0];
277
+
278
+ if (file) {
279
+ if (file.name.length > 120) {
280
+ _antd.message.error((0, _locale.i18n)('IMAGE_NAME_IS_TOO_LONG'));
281
+
282
+ return;
283
+ }
284
+
285
+ _this.setState({
286
+ editImgModalVisible: true,
287
+ selectedImgFile: file
288
+ });
289
+ }
281
290
 
291
+ e.target.value = '';
292
+ };
282
293
 
283
294
  _this.goSettings = function () {
284
295
  if ((0, _commonUtil.checkLogin)()) {
@@ -358,6 +369,68 @@ function (_super) {
358
369
  });
359
370
  };
360
371
 
372
+ _this.modifyPhoto = function (params) {
373
+ return __awaiter(_this, void 0, void 0, function () {
374
+ return __generator(this, function (_a) {
375
+ switch (_a.label) {
376
+ case 0:
377
+ return [4
378
+ /*yield*/
379
+ , (0, _commonUtil.commonFetch)('/designer/v1/h5/users/modify', params, 'POST')];
380
+
381
+ case 1:
382
+ _a.sent();
383
+
384
+ this.setState(function (preState, props) {
385
+ return {
386
+ userInfo: __assign(__assign({}, preState.userInfo), {
387
+ photo: params.photo
388
+ })
389
+ };
390
+ });
391
+ return [2
392
+ /*return*/
393
+ ];
394
+ }
395
+ });
396
+ });
397
+ };
398
+
399
+ _this.onUploadImg = function (formData) {
400
+ fetch('/designer/v1/h5/image', {
401
+ method: 'POST',
402
+ body: formData
403
+ }).then(function (response) {
404
+ return response.json();
405
+ }).then(function (responseData) {
406
+ var _a;
407
+
408
+ if (((_a = responseData === null || responseData === void 0 ? void 0 : responseData.fileUrl) === null || _a === void 0 ? void 0 : _a.length) > 120) {
409
+ _antd.message.toast({
410
+ type: 'error',
411
+ message: (0, _locale.i18n)('IMAGE_NAME_IS_TOO_LONG'),
412
+ duration: 3000
413
+ });
414
+
415
+ return;
416
+ }
417
+
418
+ _this.setState({
419
+ editImgModalVisible: false
420
+ });
421
+
422
+ _this.modifyPhoto({
423
+ photo: responseData.fileUrl
424
+ });
425
+ })["catch"](function (err) {
426
+ _antd.message.toast({
427
+ type: 'error',
428
+ message: err === null || err === void 0 ? void 0 : err.data,
429
+ duration: 5000
430
+ });
431
+ });
432
+ };
433
+
361
434
  _this.onItemClick = function (v) {
362
435
  var _a;
363
436
 
@@ -385,7 +458,9 @@ function (_super) {
385
458
  var data = this.props.data;
386
459
  var _a = this.state,
387
460
  messageNum = _a.messageNum,
388
- userInfo = _a.userInfo;
461
+ userInfo = _a.userInfo,
462
+ editImgModalVisible = _a.editImgModalVisible,
463
+ selectedImgFile = _a.selectedImgFile;
389
464
  return /*#__PURE__*/_react["default"].createElement("div", {
390
465
  className: (0, _classnames["default"])('personal-information-mobile')
391
466
  }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -403,12 +478,19 @@ function (_super) {
403
478
  width: 44,
404
479
  background: userInfo.photo ? '#fff' : 'unset'
405
480
  }
481
+ }), /*#__PURE__*/_react["default"].createElement("input", {
482
+ accept: "image/*",
483
+ id: "userPhoto",
484
+ onChange: this.handleFileChange,
485
+ type: "file"
406
486
  })), /*#__PURE__*/_react["default"].createElement("div", {
407
487
  className: "userInfo"
408
488
  }, /*#__PURE__*/_react["default"].createElement("p", {
409
489
  className: "name",
410
490
  onClick: this.clickName
411
- }, userInfo.firstName || userInfo.nickName))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
491
+ }, userInfo.firstName || userInfo.nickName), /*#__PURE__*/_react["default"].createElement("p", {
492
+ className: "phone"
493
+ }, userInfo.mobilePhone))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
412
494
  className: "photo"
413
495
  }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
414
496
  color: "#fff",
@@ -454,11 +536,22 @@ function (_super) {
454
536
  item.title.text = text;
455
537
  }
456
538
  }));
457
- })));
539
+ })), editImgModalVisible && /*#__PURE__*/_react["default"].createElement(_common.CropperModal, {
540
+ onClose: function onClose() {
541
+ return _this.setState({
542
+ editImgModalVisible: false
543
+ });
544
+ },
545
+ onSubmit: this.onUploadImg,
546
+ uploadedImageFile: selectedImgFile
547
+ }));
458
548
  };
459
549
 
460
550
  PersonalInfoMobile.defaultProps = {
461
- data: {}
551
+ data: {
552
+ selectedImgFile: {},
553
+ editImgModalVisible: false
554
+ }
462
555
  };
463
556
  return PersonalInfoMobile;
464
557
  }(_react["default"].Component);
@@ -16,6 +16,7 @@
16
16
  position: relative;
17
17
  display: inline-block;
18
18
  vertical-align: middle;
19
+ margin-right: 0.3rem;
19
20
  height: 0.88rem;
20
21
  width: 0.88rem;
21
22
  }
@@ -87,7 +87,11 @@ function compositeDecorator(WrappedComponent) {
87
87
  }; // 复合组件点击事件
88
88
 
89
89
  _this.onCompositeCompClick = function (event) {
90
- // 触发左侧楼层的滚动
90
+ if (window.magicDesign.mode === 'renderer') {
91
+ return;
92
+ } // 触发左侧楼层的滚动
93
+
94
+
91
95
  if (document.getElementById("card" + _this.props.nodeData.id)) {
92
96
  document.getElementById("card" + _this.props.nodeData.id).scrollIntoView({
93
97
  behavior: 'smooth'
@@ -113,8 +117,10 @@ function compositeDecorator(WrappedComponent) {
113
117
  background = nodeData.background;
114
118
  var _b = window.magicDesign,
115
119
  device = _b.device,
116
- compWidth = _b.compWidth;
120
+ compWidth = _b.compWidth,
121
+ mode = _b.mode;
117
122
  var zIndex = '0';
123
+ var position = 'relative';
118
124
 
119
125
  if (nodeData.type === 'CAROUSEL' || nodeData.type === 'IMAGE_GALLERY' || nodeData.type === 'ORDERS') {
120
126
  zIndex = '1';
@@ -123,11 +129,16 @@ function compositeDecorator(WrappedComponent) {
123
129
 
124
130
  if (nodeData.type === 'PC_NAVIGATION') {
125
131
  zIndex = '2';
132
+ } // 为了解决PERSONAL_INFOMATION组件里图片裁切弹窗的zIndex层级问题
133
+
134
+
135
+ if (mode === 'renderer' && nodeData.type === 'PERSONAL_INFOMATION') {
136
+ position = 'unset';
126
137
  }
127
138
 
128
139
  var wrapStyle = {
129
140
  border: 'none',
130
- position: 'relative',
141
+ position: position,
131
142
  zIndex: zIndex,
132
143
  margin: '0 auto'
133
144
  }; // 复合组件内边距
@@ -205,10 +216,16 @@ function compositeDecorator(WrappedComponent) {
205
216
  };
206
217
 
207
218
  _this.getWrapStyle = function () {
208
- var mode = window.magicDesign.mode; // const { nodeData } = this.props;
219
+ var mode = window.magicDesign.mode;
220
+ var nodeData = _this.props.nodeData;
221
+ var position = 'relative'; // 为了解决PERSONAL_INFOMATION组件里图片裁切弹窗的zIndex层级问题
222
+
223
+ if (mode === 'renderer' && nodeData.type === 'PERSONAL_INFOMATION') {
224
+ position = 'unset';
225
+ }
209
226
 
210
227
  var style = {
211
- position: 'relative',
228
+ position: position,
212
229
  zIndex: '1'
213
230
  }; // const { clickedFloor } = this.state;
214
231
  // banner 和 recommend 在选中状态需要加padding,让选中的外边框展示出来
@@ -1,4 +1,5 @@
1
1
  {
2
+ "SUBMIT": "Submit",
2
3
  "CANCELLED": "Cancelled",
3
4
  "DONE": "Done",
4
5
  "TO_RECEIVE": "To Receive",
@@ -128,7 +129,6 @@
128
129
  "MOVE_DOWN": "Move Down",
129
130
  "COPY": "Copy",
130
131
  "DELETE": "Delete",
131
- "DONE": "Done",
132
132
  "ADD_COMPONENT": "Add Component",
133
133
  "ALL": "ALL",
134
134
  "HOT": "Hot",
@@ -1,6 +1,7 @@
1
1
  {
2
+ "SUBMIT": "Submit",
2
3
  "CANCELLED": "Cancelled",
3
- "DONE": "Done",
4
+ "DONE": "Hecho",
4
5
  "TO_RECEIVE": "To Receive",
5
6
  "TO_SHIP": "To ship",
6
7
  "TO_PAY": "To Pay",
@@ -128,7 +129,6 @@
128
129
  "MOVE_DOWN": "Mover hacia abajo",
129
130
  "COPY": "Copiar",
130
131
  "DELETE": "Eliminar",
131
- "DONE": "Hecho",
132
132
  "ADD_COMPONENT": "Agregar Componente",
133
133
  "ALL": "TODO",
134
134
  "HOT": "Caliente",
@@ -1,4 +1,5 @@
1
1
  {
2
+ "SUBMIT": "Submit",
2
3
  "CANCELLED": "Cancelled",
3
4
  "DONE": "Done",
4
5
  "TO_RECEIVE": "To Receive",
@@ -128,7 +129,6 @@
128
129
  "MOVE_DOWN": "Move Down",
129
130
  "COPY": "Copy",
130
131
  "DELETE": "Delete",
131
- "DONE": "Done",
132
132
  "ADD_COMPONENT": "Add Component",
133
133
  "ALL": "ALL",
134
134
  "HOT": "Hot",
@@ -0,0 +1,126 @@
1
+ "use strict";
2
+
3
+ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports["default"] = void 0;
9
+
10
+ var _react = _interopRequireWildcard(require("react"));
11
+
12
+ var _reactCropper = _interopRequireDefault(require("react-cropper"));
13
+
14
+ require("cropperjs/dist/cropper.css");
15
+
16
+ var _indexModule = _interopRequireDefault(require("./index.module.less"));
17
+
18
+ var _locale = require("../../locale");
19
+
20
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
21
+
22
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
23
+
24
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
25
+
26
+ var __extends = void 0 && (void 0).__extends || function () {
27
+ var _extendStatics = function extendStatics(d, b) {
28
+ _extendStatics = Object.setPrototypeOf || {
29
+ __proto__: []
30
+ } instanceof Array && function (d, b) {
31
+ d.__proto__ = b;
32
+ } || function (d, b) {
33
+ for (var p in b) {
34
+ if (b.hasOwnProperty(p)) d[p] = b[p];
35
+ }
36
+ };
37
+
38
+ return _extendStatics(d, b);
39
+ };
40
+
41
+ return function (d, b) {
42
+ _extendStatics(d, b);
43
+
44
+ function __() {
45
+ this.constructor = d;
46
+ }
47
+
48
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
49
+ };
50
+ }();
51
+
52
+ var AComponent =
53
+ /** @class */
54
+ function (_super) {
55
+ __extends(AComponent, _super);
56
+
57
+ function AComponent() {
58
+ var _this = _super !== null && _super.apply(this, arguments) || this;
59
+
60
+ _this.state = {
61
+ src: ''
62
+ };
63
+
64
+ _this.onSubmit = function () {
65
+ _this.cropper.getCroppedCanvas().toBlob(function (blob) {
66
+ var fileName = _this.props.uploadedImageFile.name; // Vovi手机没有图片后缀
67
+
68
+ if (fileName && fileName.lastIndexOf('.') === -1) {
69
+ fileName = "file_" + new Date().getTime() + ".jpg";
70
+ }
71
+
72
+ var formData = new FormData();
73
+ formData.append('file', blob, fileName);
74
+
75
+ _this.props.onSubmit(formData);
76
+ });
77
+ };
78
+
79
+ return _this;
80
+ }
81
+
82
+ AComponent.prototype.componentDidMount = function () {
83
+ var _this = this;
84
+
85
+ var fileReader = new FileReader();
86
+
87
+ fileReader.onload = function (e) {
88
+ var dataURL = e.target.result;
89
+
90
+ _this.setState({
91
+ src: dataURL
92
+ });
93
+ };
94
+
95
+ fileReader.readAsDataURL(this.props.uploadedImageFile);
96
+ };
97
+
98
+ AComponent.prototype.render = function () {
99
+ var _this = this;
100
+
101
+ return /*#__PURE__*/_react["default"].createElement("div", {
102
+ className: _indexModule["default"].cropperModalWrap
103
+ }, /*#__PURE__*/_react["default"].createElement(_reactCropper["default"], {
104
+ aspectRatio: 1,
105
+ className: "company-logo-cropper",
106
+ guides: false,
107
+ onInitialized: function onInitialized(cop) {
108
+ _this.cropper = cop;
109
+ },
110
+ src: this.state.src,
111
+ viewMode: 1,
112
+ zoomable: false
113
+ }), /*#__PURE__*/_react["default"].createElement("div", {
114
+ className: _indexModule["default"].btnWrap
115
+ }, /*#__PURE__*/_react["default"].createElement("span", {
116
+ onClick: this.props.onClose
117
+ }, (0, _locale.i18n)('CANCEL')), /*#__PURE__*/_react["default"].createElement("span", {
118
+ onClick: this.onSubmit
119
+ }, (0, _locale.i18n)('SUBMIT'))));
120
+ };
121
+
122
+ return AComponent;
123
+ }(_react.Component);
124
+
125
+ var _default = AComponent;
126
+ exports["default"] = _default;
@@ -0,0 +1,27 @@
1
+ .cropperModalWrap {
2
+ background: #000;
3
+ position: fixed;
4
+ z-index: 1000;
5
+ top: 0;
6
+ bottom: 0;
7
+ left: 0;
8
+ right: 0;
9
+ display: flex;
10
+ justify-content: center;
11
+ align-items: center;
12
+
13
+ .btnWrap {
14
+ span {
15
+ color: #fff;
16
+ font-size: 18px;
17
+ position: absolute;
18
+ bottom: 10px;
19
+ &:first-child {
20
+ left: 12px;
21
+ }
22
+ &:last-child {
23
+ right: 12px;
24
+ }
25
+ }
26
+ }
27
+ }
@@ -39,6 +39,12 @@ Object.defineProperty(exports, "ColorPickerInput", {
39
39
  return _ColorPickerInput["default"];
40
40
  }
41
41
  });
42
+ Object.defineProperty(exports, "CropperModal", {
43
+ enumerable: true,
44
+ get: function get() {
45
+ return _CropperModal["default"];
46
+ }
47
+ });
42
48
  Object.defineProperty(exports, "Field", {
43
49
  enumerable: true,
44
50
  get: function get() {
@@ -188,4 +194,6 @@ var _CardCarousel = _interopRequireDefault(require("./CardCarousel"));
188
194
 
189
195
  var _MyModal = _interopRequireDefault(require("./MyModal"));
190
196
 
197
+ var _CropperModal = _interopRequireDefault(require("./CropperModal"));
198
+
191
199
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -56,7 +56,7 @@ function (_super) {
56
56
  _this.state = {};
57
57
 
58
58
  _this.onItemClick = function (item) {
59
- if ((0, _commonUtil.checkLogin)(true, '/main/account')) {
59
+ if ((0, _commonUtil.checkLogin)(true, '/main/account', true)) {
60
60
  var url = (0, _commonUtil.ensure)(function () {
61
61
  return item.title.content.clickUrl.value || item.image.content.clickUrl.value;
62
62
  }, '');
@@ -11,6 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
11
11
 
12
12
  var _lodash = require("lodash");
13
13
 
14
+ var _antd = require("antd");
15
+
14
16
  var _avatar = _interopRequireDefault(require("./images/avatar.png"));
15
17
 
16
18
  var _components = require("../../../../../meta-comp/components");
@@ -27,6 +29,8 @@ var _index = require("../../../../../constants/index");
27
29
 
28
30
  var _storeUtil = require("../../../../../utils/storeUtil");
29
31
 
32
+ var _common = require("../../../../../common");
33
+
30
34
  require("./index.less");
31
35
 
32
36
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -266,19 +270,26 @@ function (_super) {
266
270
  } else if (v === _index.personalInfoType.VIEWED) {
267
271
  return userInfo.recentViewNum || 0;
268
272
  }
269
- }; // handleFileChange = e => {
270
- // const file = e.target.files[0];
271
- // if (file) {
272
- // if (file.name.length > 120) {
273
- // message.error(i18n('IMAGE_NAME_IS_TOO_LONG'));
274
- // return;
275
- // }
276
- // setSelectedImgFile(file);
277
- // setEditImgModalVisible(true);
278
- // }
279
- // e.target.value = '';
280
- // };
273
+ };
274
+
275
+ _this.handleFileChange = function (e) {
276
+ var file = e.target.files[0];
277
+
278
+ if (file) {
279
+ if (file.name.length > 120) {
280
+ _antd.message.error((0, _locale.i18n)('IMAGE_NAME_IS_TOO_LONG'));
281
+
282
+ return;
283
+ }
284
+
285
+ _this.setState({
286
+ editImgModalVisible: true,
287
+ selectedImgFile: file
288
+ });
289
+ }
281
290
 
291
+ e.target.value = '';
292
+ };
282
293
 
283
294
  _this.goSettings = function () {
284
295
  if ((0, _commonUtil.checkLogin)()) {
@@ -358,6 +369,68 @@ function (_super) {
358
369
  });
359
370
  };
360
371
 
372
+ _this.modifyPhoto = function (params) {
373
+ return __awaiter(_this, void 0, void 0, function () {
374
+ return __generator(this, function (_a) {
375
+ switch (_a.label) {
376
+ case 0:
377
+ return [4
378
+ /*yield*/
379
+ , (0, _commonUtil.commonFetch)('/designer/v1/h5/users/modify', params, 'POST')];
380
+
381
+ case 1:
382
+ _a.sent();
383
+
384
+ this.setState(function (preState, props) {
385
+ return {
386
+ userInfo: __assign(__assign({}, preState.userInfo), {
387
+ photo: params.photo
388
+ })
389
+ };
390
+ });
391
+ return [2
392
+ /*return*/
393
+ ];
394
+ }
395
+ });
396
+ });
397
+ };
398
+
399
+ _this.onUploadImg = function (formData) {
400
+ fetch('/designer/v1/h5/image', {
401
+ method: 'POST',
402
+ body: formData
403
+ }).then(function (response) {
404
+ return response.json();
405
+ }).then(function (responseData) {
406
+ var _a;
407
+
408
+ if (((_a = responseData === null || responseData === void 0 ? void 0 : responseData.fileUrl) === null || _a === void 0 ? void 0 : _a.length) > 120) {
409
+ _antd.message.toast({
410
+ type: 'error',
411
+ message: (0, _locale.i18n)('IMAGE_NAME_IS_TOO_LONG'),
412
+ duration: 3000
413
+ });
414
+
415
+ return;
416
+ }
417
+
418
+ _this.setState({
419
+ editImgModalVisible: false
420
+ });
421
+
422
+ _this.modifyPhoto({
423
+ photo: responseData.fileUrl
424
+ });
425
+ })["catch"](function (err) {
426
+ _antd.message.toast({
427
+ type: 'error',
428
+ message: err === null || err === void 0 ? void 0 : err.data,
429
+ duration: 5000
430
+ });
431
+ });
432
+ };
433
+
361
434
  _this.onItemClick = function (v) {
362
435
  var _a;
363
436
 
@@ -385,7 +458,9 @@ function (_super) {
385
458
  var data = this.props.data;
386
459
  var _a = this.state,
387
460
  messageNum = _a.messageNum,
388
- userInfo = _a.userInfo;
461
+ userInfo = _a.userInfo,
462
+ editImgModalVisible = _a.editImgModalVisible,
463
+ selectedImgFile = _a.selectedImgFile;
389
464
  return /*#__PURE__*/_react["default"].createElement("div", {
390
465
  className: (0, _classnames["default"])('personal-information-mobile')
391
466
  }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -403,12 +478,19 @@ function (_super) {
403
478
  width: 44,
404
479
  background: userInfo.photo ? '#fff' : 'unset'
405
480
  }
481
+ }), /*#__PURE__*/_react["default"].createElement("input", {
482
+ accept: "image/*",
483
+ id: "userPhoto",
484
+ onChange: this.handleFileChange,
485
+ type: "file"
406
486
  })), /*#__PURE__*/_react["default"].createElement("div", {
407
487
  className: "userInfo"
408
488
  }, /*#__PURE__*/_react["default"].createElement("p", {
409
489
  className: "name",
410
490
  onClick: this.clickName
411
- }, userInfo.firstName || userInfo.nickName))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
491
+ }, userInfo.firstName || userInfo.nickName), /*#__PURE__*/_react["default"].createElement("p", {
492
+ className: "phone"
493
+ }, userInfo.mobilePhone))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
412
494
  className: "photo"
413
495
  }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
414
496
  color: "#fff",
@@ -454,11 +536,22 @@ function (_super) {
454
536
  item.title.text = text;
455
537
  }
456
538
  }));
457
- })));
539
+ })), editImgModalVisible && /*#__PURE__*/_react["default"].createElement(_common.CropperModal, {
540
+ onClose: function onClose() {
541
+ return _this.setState({
542
+ editImgModalVisible: false
543
+ });
544
+ },
545
+ onSubmit: this.onUploadImg,
546
+ uploadedImageFile: selectedImgFile
547
+ }));
458
548
  };
459
549
 
460
550
  PersonalInfoMobile.defaultProps = {
461
- data: {}
551
+ data: {
552
+ selectedImgFile: {},
553
+ editImgModalVisible: false
554
+ }
462
555
  };
463
556
  return PersonalInfoMobile;
464
557
  }(_react["default"].Component);
@@ -16,6 +16,7 @@
16
16
  position: relative;
17
17
  display: inline-block;
18
18
  vertical-align: middle;
19
+ margin-right: 0.3rem;
19
20
  height: 0.88rem;
20
21
  width: 0.88rem;
21
22
  }
@@ -87,7 +87,11 @@ function compositeDecorator(WrappedComponent) {
87
87
  }; // 复合组件点击事件
88
88
 
89
89
  _this.onCompositeCompClick = function (event) {
90
- // 触发左侧楼层的滚动
90
+ if (window.magicDesign.mode === 'renderer') {
91
+ return;
92
+ } // 触发左侧楼层的滚动
93
+
94
+
91
95
  if (document.getElementById("card" + _this.props.nodeData.id)) {
92
96
  document.getElementById("card" + _this.props.nodeData.id).scrollIntoView({
93
97
  behavior: 'smooth'
@@ -113,8 +117,10 @@ function compositeDecorator(WrappedComponent) {
113
117
  background = nodeData.background;
114
118
  var _b = window.magicDesign,
115
119
  device = _b.device,
116
- compWidth = _b.compWidth;
120
+ compWidth = _b.compWidth,
121
+ mode = _b.mode;
117
122
  var zIndex = '0';
123
+ var position = 'relative';
118
124
 
119
125
  if (nodeData.type === 'CAROUSEL' || nodeData.type === 'IMAGE_GALLERY' || nodeData.type === 'ORDERS') {
120
126
  zIndex = '1';
@@ -123,11 +129,16 @@ function compositeDecorator(WrappedComponent) {
123
129
 
124
130
  if (nodeData.type === 'PC_NAVIGATION') {
125
131
  zIndex = '2';
132
+ } // 为了解决PERSONAL_INFOMATION组件里图片裁切弹窗的zIndex层级问题
133
+
134
+
135
+ if (mode === 'renderer' && nodeData.type === 'PERSONAL_INFOMATION') {
136
+ position = 'unset';
126
137
  }
127
138
 
128
139
  var wrapStyle = {
129
140
  border: 'none',
130
- position: 'relative',
141
+ position: position,
131
142
  zIndex: zIndex,
132
143
  margin: '0 auto'
133
144
  }; // 复合组件内边距
@@ -205,10 +216,16 @@ function compositeDecorator(WrappedComponent) {
205
216
  };
206
217
 
207
218
  _this.getWrapStyle = function () {
208
- var mode = window.magicDesign.mode; // const { nodeData } = this.props;
219
+ var mode = window.magicDesign.mode;
220
+ var nodeData = _this.props.nodeData;
221
+ var position = 'relative'; // 为了解决PERSONAL_INFOMATION组件里图片裁切弹窗的zIndex层级问题
222
+
223
+ if (mode === 'renderer' && nodeData.type === 'PERSONAL_INFOMATION') {
224
+ position = 'unset';
225
+ }
209
226
 
210
227
  var style = {
211
- position: 'relative',
228
+ position: position,
212
229
  zIndex: '1'
213
230
  }; // const { clickedFloor } = this.state;
214
231
  // banner 和 recommend 在选中状态需要加padding,让选中的外边框展示出来
@@ -1,4 +1,5 @@
1
1
  {
2
+ "SUBMIT": "Submit",
2
3
  "CANCELLED": "Cancelled",
3
4
  "DONE": "Done",
4
5
  "TO_RECEIVE": "To Receive",
@@ -128,7 +129,6 @@
128
129
  "MOVE_DOWN": "Move Down",
129
130
  "COPY": "Copy",
130
131
  "DELETE": "Delete",
131
- "DONE": "Done",
132
132
  "ADD_COMPONENT": "Add Component",
133
133
  "ALL": "ALL",
134
134
  "HOT": "Hot",
@@ -1,6 +1,7 @@
1
1
  {
2
+ "SUBMIT": "Submit",
2
3
  "CANCELLED": "Cancelled",
3
- "DONE": "Done",
4
+ "DONE": "Hecho",
4
5
  "TO_RECEIVE": "To Receive",
5
6
  "TO_SHIP": "To ship",
6
7
  "TO_PAY": "To Pay",
@@ -128,7 +129,6 @@
128
129
  "MOVE_DOWN": "Mover hacia abajo",
129
130
  "COPY": "Copiar",
130
131
  "DELETE": "Eliminar",
131
- "DONE": "Hecho",
132
132
  "ADD_COMPONENT": "Agregar Componente",
133
133
  "ALL": "TODO",
134
134
  "HOT": "Caliente",
@@ -1,4 +1,5 @@
1
1
  {
2
+ "SUBMIT": "Submit",
2
3
  "CANCELLED": "Cancelled",
3
4
  "DONE": "Done",
4
5
  "TO_RECEIVE": "To Receive",
@@ -128,7 +129,6 @@
128
129
  "MOVE_DOWN": "Move Down",
129
130
  "COPY": "Copy",
130
131
  "DELETE": "Delete",
131
- "DONE": "Done",
132
132
  "ADD_COMPONENT": "Add Component",
133
133
  "ALL": "ALL",
134
134
  "HOT": "Hot",
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.56",
4
+ "version": "1.0.57",
5
5
  "description": "Magic Design",
6
6
  "license": "MIT",
7
7
  "module": "es/index.js",
@@ -36,6 +36,7 @@
36
36
  "ramda": "^0.28.0",
37
37
  "react-ace": "^10.1.0",
38
38
  "react-color": "2.17.0",
39
+ "react-cropper": "^2.3.3",
39
40
  "react-router-dom": "5.3.0",
40
41
  "react-slick": "^0.29.0",
41
42
  "replace": "^1.2.1",