build

.storybook/config.js

 import { withConsole } from '@storybook/addon-console';
 import bilingoTheme from './bilingoTheme';
 
+import 'antd/dist/antd.less';
+ 
 addParameters({
   info: { inline: true },
   viewport: {

.storybook/webpack.config.js

       {
         loader: require.resolve('babel-loader'),
         options: {
-          presets: [['react-app', { flow: false, typescript: true }]]
+          presets: [['react-app', { flow: false, typescript: true }]],
         }
       },
       // Optional

eslib/ConsumeListView/index.js

 import React, { Component } from 'react';
 import { c as classnames } from '../index-7951fb2f.js';
 import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
-import { a as addImageProcess } from '../utils-82346768.js';
+import { a as addImageProcess } from '../utils-f64eef69.js';
 
 const img = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAABvklEQVQ4T62UTygEcRTHv29MIsqfk6OL5CYH5aKd9WfjwqxEnBzExYWTCEWJJGove5H8OTA1uwdCrOWAi83ZwUXJiSj5u+Z5s0msmd2SX81h+r33ee/7fW+G8E+H/srhqEcFCjphve1RzcaVK4j3mmoB5YxqQzdOxTji1wE2QZglb2jAEcT7/g4wr0rQugS1OYJ26nOg5nYDr4ZrR7yrl0FBAKBlqjEX3eRLwSXAmidvOJbSI47oF9LVKaCOkNc4/w7kSPOoFBqDwjpp4XA60LUkF8nzbsuERQt4ejtGdsYwiAYTYIV6STOD6UB3EpqXJC0u7zKxz0Mk3Zrj7lOLerJg5T9K+2lWhALiYx8xS9NbDZnUuPXy0wN/hYw3lnbPiNfE7HaSfTAloRqKWkya8WAnMrdmIBqfBqM/BehJAo+gKHMibdMGzUhqKUiZAHGVXJYLwPdpshPnRDRM4fl5+7uKL/0c1WXdOSie5Dh3wZcyoR7SQttO9z+M5MOWEsStFQmsTAoOwVK7qM64d5P6ayKJj9EqHBa5Q4kx2/ujqR1Exnsq493HH2muFN98oNtJ0g7s3Ul5/vwbSab+G+gDqFybE11pYkYAAAAASUVORK5CYII=';
 

eslib/Payment/index.js

 import 'react';
 import '../index-7951fb2f.js';
 import '../style-inject.es-1f59c1d0.js';
-import '../utils-82346768.js';
+import '../utils-f64eef69.js';
 export { default as ConsumeListView } from '../ConsumeListView/index.js';
 export { default as PayPlatformOptions } from '../PayPlatformOptions/index.js';
 import 'antd';
-import 'antd/lib/button/style';
 export { default as PriceOptions } from '../PriceOptions/index.js';
 export { default as WaitPayInfoView } from '../WaitPayInfoView/index.js';
 //# sourceMappingURL=index.js.map

eslib/Payment/index.js.map

-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

eslib/PriceOptions/index.js

 import React, { useState } from 'react';
 import { c as classnames } from '../index-7951fb2f.js';
 import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
-import { f as formatMoney } from '../utils-82346768.js';
 import { Input } from 'antd';
-import 'antd/lib/button/style';
 
 var css = ".PriceOptions_options__J-ZSS {\n  padding: 20px 50px;\n  border-bottom: 1px dashed #00000017;\n}\n.PriceOptions_options__J-ZSS p {\n  font-size: 14px;\n  font-weight: 400;\n  color: #616a79;\n  margin-bottom: 20px;\n}\n.PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a {\n  padding-right: 0;\n  margin-bottom: -12px;\n}\n.PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_priceItem__rJ9o2 {\n  background: rgba(243, 243, 243, 0.14);\n  border-radius: 4px;\n  border: 1px solid #cfcfcf;\n  font-size: 14px;\n  font-weight: 600;\n  color: #616a79;\n  display: inline-block;\n  text-align: center;\n  vertical-align: top;\n  height: 30px;\n  width: 70px;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 6px;\n}\n.PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_priceItem__rJ9o2.PriceOptions_active__3WyAU {\n  background: rgba(255, 50, 102, 0.1);\n  border-radius: 4px;\n  border: 1px solid #ff3266;\n  color: #616a79;\n}\n.PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_priceInput__1MrVy {\n  display: inline-block;\n  min-width: 70px;\n  width: auto;\n  margin: 6px;\n  text-align: center;\n}\n.PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a button {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  height: 30px;\n  width: 50px;\n  vertical-align: top;\n  padding: 0 5px;\n}\n.PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_rate__QgHQ3 {\n  margin-left: 10px;\n}\n.PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_rate__QgHQ3 i {\n  margin-right: 5px;\n  color: #1790FF;\n}\n.PriceOptions_options__J-ZSS.PriceOptions_small__2-wzl {\n  padding: 0 0 12px 0;\n  border-bottom: none;\n}\n.PriceOptions_options__J-ZSS.PriceOptions_small__2-wzl p {\n  margin-bottom: 8px;\n}\n.PriceOptions_options__J-ZSS.PriceOptions_small__2-wzl .PriceOptions_infoItem__3IL3a {\n  text-align: center;\n}\n.PriceOptions_options__J-ZSS.PriceOptions_small__2-wzl .PriceOptions_infoItem__3IL3a .PriceOptions_priceItem__rJ9o2 {\n  border-radius: 6px;\n  height: 32px;\n  width: 72px;\n  margin: 0 0 12px 19px;\n}\n.PriceOptions_options__J-ZSS.PriceOptions_small__2-wzl .PriceOptions_infoItem__3IL3a .PriceOptions_priceItem__rJ9o2:first-child {\n  margin: 0 0 12px 0px;\n}\n.PriceOptions_options__J-ZSS.PriceOptions_small__2-wzl .PriceOptions_infoItem__3IL3a .PriceOptions_priceInput__1MrVy {\n  display: block;\n  width: 254px;\n  border-radius: 6px;\n  height: 32px;\n}\n@media (max-width: 768px) {\n  .PriceOptions_options__J-ZSS {\n    padding: 20px 20px;\n  }\n  .PriceOptions_options__J-ZSS p {\n    font-size: 14px;\n    font-weight: 400;\n    color: #616a79;\n  }\n  .PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a {\n    padding-right: 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n  .PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_priceBtn__Xz4m_ {\n    display: flex;\n    justify-content: space-between;\n  }\n  .PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_priceItem__rJ9o2 {\n    display: inline-block;\n    background-color: #fff;\n    width: 74px;\n    height: 36px;\n    line-height: 36px;\n    border-radius: 6px;\n    border: 1px solid #cfcfcf;\n  }\n  .PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_priceItem__rJ9o2.PriceOptions_active__3WyAU {\n    background-color: #fff;\n    color: #FF3266FF;\n    border-radius: 4px;\n    border: 1px solid #ff3266;\n  }\n  .PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_priceInput__1MrVy {\n    border-radius: 6px;\n    height: 36px;\n    width: auto;\n  }\n}\n";
 var styles = {"options":"PriceOptions_options__J-ZSS","infoItem":"PriceOptions_infoItem__3IL3a","priceItem":"PriceOptions_priceItem__rJ9o2","active":"PriceOptions_active__3WyAU","priceInput":"PriceOptions_priceInput__1MrVy","rate":"PriceOptions_rate__QgHQ3","small":"PriceOptions_small__2-wzl","priceBtn":"PriceOptions_priceBtn__Xz4m_"};
       withTitle = _ref$withTitle === void 0 ? true : _ref$withTitle,
       _ref$titleText = _ref.titleText,
       titleText = _ref$titleText === void 0 ? "Price" : _ref$titleText,
+      _ref$inputPlaceholder = _ref.inputPlaceholderText,
+      inputPlaceholderText = _ref$inputPlaceholder === void 0 ? "Others" : _ref$inputPlaceholder,
+      _ref$priceOptions = _ref.priceOptions,
+      priceOptions = _ref$priceOptions === void 0 ? [100, 600, 800] : _ref$priceOptions,
+      _ref$priceRender = _ref.priceRender,
+      priceRender = _ref$priceRender === void 0 ? function (i) {
+    return i / 100;
+  } : _ref$priceRender,
+      _ref$inputPriceRender = _ref.inputPriceRender,
+      inputPriceRender = _ref$inputPriceRender === void 0 ? function (i) {
+    return i ? i / 100 : "";
+  } : _ref$inputPriceRender,
       inputRef = _ref.inputRef;
-  var defaultOptions = [100, 600, 800]; // 控制是否为其他金额输入情况
+  var defaultOptions = priceOptions; // 控制是否为其他金额输入情况
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
 
   return React.createElement("div", {
     className: classnames(styles.options)
-  }, withTitle ? React.createElement("p", null, titleText) : null, React.createElement("div", {
+  }, withTitle ? titleText || null : null, React.createElement("div", {
     className: styles.infoItem
   }, React.createElement("span", {
     className: styles.priceBtn
         onPriceChange(item);
         setInputStatus(false);
       }
-    }, formatMoney(item / 100, 0), "\xA5");
+    }, priceRender(item));
   })), React.createElement(Input, {
     ref: inputRef,
     onMouseEnter: function onMouseEnter() {
     },
     suffix: "\xA5",
     className: styles.priceInput,
-    value: inputStatus ? price / 100 || "" : "",
-    placeholder: "Others",
+    value: inputStatus ? inputPriceRender(price) : "",
+    placeholder: inputPlaceholderText,
     onChange: function onChange(e) {
       var n = +e.target.value;
 
       setInputStatus(true);
     },
     onFocus: function onFocus(e) {
+      e.target.placeholder = "";
+      setInputStatus(true);
+
       if (focusScroll) {
         e.target.scrollIntoView();
       }
+    },
+    onBlur: function onBlur(e) {
+      e.target.placeholder = inputPlaceholderText;
+
+      if (price) {
+        setInputStatus(true);
+      } else {
+        setInputStatus(false);
+      }
     }
   })));
 };

eslib/index.js

 import './index-7951fb2f.js';
 import './style-inject.es-1f59c1d0.js';
 import './test-81795c27.js';
-import './utils-82346768.js';
+import './utils-f64eef69.js';
 export { default as ConsumeListView } from './ConsumeListView/index.js';
 export { default as PayPlatformOptions } from './PayPlatformOptions/index.js';
 import 'antd';
-import 'antd/lib/button/style';
 export { default as PriceOptions } from './PriceOptions/index.js';
 export { default as WaitPayInfoView } from './WaitPayInfoView/index.js';
 

eslib/utils-82346768.js → eslib/utils-f64eef69.js

 
   return url + IMAGE_PROCESS;
 }
-function formatMoney(input) {
-  var fuzz = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
-
-  if (isNaN(+input)) {
-    return input;
-  }
-
-  return (+input).toFixed(fuzz);
-}
 function exportStyleSizeClass(styles, size) {
   return _defineProperty({}, styles[size], true);
 }
 
-export { addImageProcess as a, exportStyleSizeClass as e, formatMoney as f };
-//# sourceMappingURL=utils-82346768.js.map
+export { addImageProcess as a, exportStyleSizeClass as e };
+//# sourceMappingURL=utils-f64eef69.js.map

lib/utils-ed518bfc.js.map → eslib/utils-f64eef69.js.map

-{"version":3,"file":"utils-82346768.js","sources":["../src/components/Payment/Utils/utils.ts"],"sourcesContent":["\r\nexport const IMAGE_PROCESS = '?x-oss-process=image/resize,h_350';\r\nexport const IMAGE_PROCESS_SMALL = '?x-oss-process=image/resize,h_100';\r\nexport const IMAGE_PROCESS_LARGE = '?x-oss-process=image/resize,h_500';\r\n\r\ntype AddImageProcessOptions = {\r\n  small?: boolean;\r\n  large?: boolean;\r\n  custom?: boolean;\r\n  width?: string;\r\n  height?: string;\r\n}\r\n\r\nexport function addImageProcess(url: string, options: AddImageProcessOptions = { width: '36px', height: '36px' }) {\r\n  // 防止重复添加导致的url不正确\r\n  if (url && url.indexOf('x-oss-process') > -1) {\r\n    return url;\r\n  }\r\n  if (options.small) {\r\n    return url + IMAGE_PROCESS_SMALL;\r\n  }\r\n  if (options.large) {\r\n    return url + IMAGE_PROCESS_LARGE;\r\n  }\r\n  if (options.custom) {\r\n    return `${url}?x-oss-process=image/resize,limit_0,m_fill,w_${options.width},h_${options.height}`;\r\n  }\r\n  return url + IMAGE_PROCESS;\r\n}\r\n\r\nexport function formatMoney(input: any, fuzz = 2) {\r\n  if (isNaN(+input)) {\r\n    return input;\r\n  }\r\n  return (+input).toFixed(fuzz);\r\n}\r\n\r\ntype classSize = 'small'|'normal'|'large';\r\n\r\nexport function exportStyleSizeClass(styles: any, size: classSize) {\r\n  return {\r\n    [styles[size]]: true,\r\n  }\r\n}"],"names":["IMAGE_PROCESS","IMAGE_PROCESS_SMALL","IMAGE_PROCESS_LARGE","addImageProcess","url","options","width","height","indexOf","small","large","custom","formatMoney","input","fuzz","isNaN","toFixed","exportStyleSizeClass","styles","size"],"mappings":";;;;AACO,IAAMA,aAAa,GAAG,mCAAtB;AACP,AAAO,IAAMC,mBAAmB,GAAG,mCAA5B;AACP,AAAO,IAAMC,mBAAmB,GAAG,mCAA5B;AAUP,AAAO,SAASC,eAAT,CAAyBC,GAAzB,EAA2G;MAArEC,OAAqE,uEAAnC;IAAEC,KAAK,EAAE,MAAT;IAAiBC,MAAM,EAAE;GAAU;;;MAE5GH,GAAG,IAAIA,GAAG,CAACI,OAAJ,CAAY,eAAZ,IAA+B,CAAC,CAA3C,EAA8C;WACrCJ,GAAP;;;MAEEC,OAAO,CAACI,KAAZ,EAAmB;WACVL,GAAG,GAAGH,mBAAb;;;MAEEI,OAAO,CAACK,KAAZ,EAAmB;WACVN,GAAG,GAAGF,mBAAb;;;MAEEG,OAAO,CAACM,MAAZ,EAAoB;qBACRP,GAAV,0DAA6DC,OAAO,CAACC,KAArE,gBAAgFD,OAAO,CAACE,MAAxF;;;SAEKH,GAAG,GAAGJ,aAAb;;AAGF,AAAO,SAASY,WAAT,CAAqBC,KAArB,EAA2C;MAAVC,IAAU,uEAAH,CAAG;;MAC5CC,KAAK,CAAC,CAACF,KAAF,CAAT,EAAmB;WACVA,KAAP;;;SAEK,CAAC,CAACA,KAAF,EAASG,OAAT,CAAiBF,IAAjB,CAAP;;AAKF,AAAO,SAASG,oBAAT,CAA8BC,MAA9B,EAA2CC,IAA3C,EAA4D;8CAE9DD,MAAM,CAACC,IAAD,CADT,EACkB,IADlB;;;;;;;"}
+{"version":3,"file":"utils-f64eef69.js","sources":["../src/components/Payment/Utils/utils.ts"],"sourcesContent":["\r\nexport const IMAGE_PROCESS = '?x-oss-process=image/resize,h_350';\r\nexport const IMAGE_PROCESS_SMALL = '?x-oss-process=image/resize,h_100';\r\nexport const IMAGE_PROCESS_LARGE = '?x-oss-process=image/resize,h_500';\r\n\r\ntype AddImageProcessOptions = {\r\n  small?: boolean;\r\n  large?: boolean;\r\n  custom?: boolean;\r\n  width?: string;\r\n  height?: string;\r\n}\r\n\r\nexport function addImageProcess(url: string, options: AddImageProcessOptions = { width: '36px', height: '36px' }) {\r\n  // 防止重复添加导致的url不正确\r\n  if (url && url.indexOf('x-oss-process') > -1) {\r\n    return url;\r\n  }\r\n  if (options.small) {\r\n    return url + IMAGE_PROCESS_SMALL;\r\n  }\r\n  if (options.large) {\r\n    return url + IMAGE_PROCESS_LARGE;\r\n  }\r\n  if (options.custom) {\r\n    return `${url}?x-oss-process=image/resize,limit_0,m_fill,w_${options.width},h_${options.height}`;\r\n  }\r\n  return url + IMAGE_PROCESS;\r\n}\r\n\r\nexport function formatMoney(input: any, fuzz = 2) {\r\n  if (isNaN(+input)) {\r\n    return input;\r\n  }\r\n  return (+input).toFixed(fuzz);\r\n}\r\n\r\ntype classSize = 'small'|'normal'|'large';\r\n\r\nexport function exportStyleSizeClass(styles: any, size: classSize) {\r\n  return {\r\n    [styles[size]]: true,\r\n  }\r\n}"],"names":["IMAGE_PROCESS","IMAGE_PROCESS_SMALL","IMAGE_PROCESS_LARGE","addImageProcess","url","options","width","height","indexOf","small","large","custom","exportStyleSizeClass","styles","size"],"mappings":";;AACO,IAAMA,aAAa,GAAG,mCAAtB;AACP,AAAO,IAAMC,mBAAmB,GAAG,mCAA5B;AACP,AAAO,IAAMC,mBAAmB,GAAG,mCAA5B;AAUP,AAAO,SAASC,eAAT,CAAyBC,GAAzB,EAA2G;MAArEC,OAAqE,uEAAnC;IAAEC,KAAK,EAAE,MAAT;IAAiBC,MAAM,EAAE;GAAU;;;MAE5GH,GAAG,IAAIA,GAAG,CAACI,OAAJ,CAAY,eAAZ,IAA+B,CAAC,CAA3C,EAA8C;WACrCJ,GAAP;;;MAEEC,OAAO,CAACI,KAAZ,EAAmB;WACVL,GAAG,GAAGH,mBAAb;;;MAEEI,OAAO,CAACK,KAAZ,EAAmB;WACVN,GAAG,GAAGF,mBAAb;;;MAEEG,OAAO,CAACM,MAAZ,EAAoB;qBACRP,GAAV,0DAA6DC,OAAO,CAACC,KAArE,gBAAgFD,OAAO,CAACE,MAAxF;;;SAEKH,GAAG,GAAGJ,aAAb;;AAGF,AASO,SAASY,oBAAT,CAA8BC,MAA9B,EAA2CC,IAA3C,EAA4D;6BAE9DD,MAAM,CAACC,IAAD,CADT,EACkB,IADlB;;;;;"}

lib/ConsumeListView/index.js

 var React__default = _interopDefault(React);
 var index = require('../index-c2424ad4.js');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var utils = require('../utils-ed518bfc.js');
+var utils = require('../utils-4bc17ae2.js');
 
 const img = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAABvklEQVQ4T62UTygEcRTHv29MIsqfk6OL5CYH5aKd9WfjwqxEnBzExYWTCEWJJGove5H8OTA1uwdCrOWAi83ZwUXJiSj5u+Z5s0msmd2SX81h+r33ee/7fW+G8E+H/srhqEcFCjphve1RzcaVK4j3mmoB5YxqQzdOxTji1wE2QZglb2jAEcT7/g4wr0rQugS1OYJ26nOg5nYDr4ZrR7yrl0FBAKBlqjEX3eRLwSXAmidvOJbSI47oF9LVKaCOkNc4/w7kSPOoFBqDwjpp4XA60LUkF8nzbsuERQt4ejtGdsYwiAYTYIV6STOD6UB3EpqXJC0u7zKxz0Mk3Zrj7lOLerJg5T9K+2lWhALiYx8xS9NbDZnUuPXy0wN/hYw3lnbPiNfE7HaSfTAloRqKWkya8WAnMrdmIBqfBqM/BehJAo+gKHMibdMGzUhqKUiZAHGVXJYLwPdpshPnRDRM4fl5+7uKL/0c1WXdOSie5Dh3wZcyoR7SQttO9z+M5MOWEsStFQmsTAoOwVK7qM64d5P6ayKJj9EqHBa5Q4kx2/ujqR1Exnsq493HH2muFN98oNtJ0g7s3Ul5/vwbSab+G+gDqFybE11pYkYAAAAASUVORK5CYII=';
 

lib/Payment/index.js

 require('react');
 require('../index-c2424ad4.js');
 require('../style-inject.es-dcee06b6.js');
-require('../utils-ed518bfc.js');
+require('../utils-4bc17ae2.js');
 var ConsumeListView = require('../ConsumeListView/index.js');
 var PayPlatformOptions = require('../PayPlatformOptions/index.js');
 require('antd');
-require('antd/lib/button/style');
 var PriceOptions = require('../PriceOptions/index.js');
 var WaitPayInfoView = require('../WaitPayInfoView/index.js');
 

lib/Payment/index.js.map

-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

lib/PriceOptions/index.js

 var React__default = _interopDefault(React);
 var index = require('../index-c2424ad4.js');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var utils = require('../utils-ed518bfc.js');
 var antd = require('antd');
-require('antd/lib/button/style');
 
 var css = ".PriceOptions_options__J-ZSS {\n  padding: 20px 50px;\n  border-bottom: 1px dashed #00000017;\n}\n.PriceOptions_options__J-ZSS p {\n  font-size: 14px;\n  font-weight: 400;\n  color: #616a79;\n  margin-bottom: 20px;\n}\n.PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a {\n  padding-right: 0;\n  margin-bottom: -12px;\n}\n.PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_priceItem__rJ9o2 {\n  background: rgba(243, 243, 243, 0.14);\n  border-radius: 4px;\n  border: 1px solid #cfcfcf;\n  font-size: 14px;\n  font-weight: 600;\n  color: #616a79;\n  display: inline-block;\n  text-align: center;\n  vertical-align: top;\n  height: 30px;\n  width: 70px;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 6px;\n}\n.PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_priceItem__rJ9o2.PriceOptions_active__3WyAU {\n  background: rgba(255, 50, 102, 0.1);\n  border-radius: 4px;\n  border: 1px solid #ff3266;\n  color: #616a79;\n}\n.PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_priceInput__1MrVy {\n  display: inline-block;\n  min-width: 70px;\n  width: auto;\n  margin: 6px;\n  text-align: center;\n}\n.PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a button {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  height: 30px;\n  width: 50px;\n  vertical-align: top;\n  padding: 0 5px;\n}\n.PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_rate__QgHQ3 {\n  margin-left: 10px;\n}\n.PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_rate__QgHQ3 i {\n  margin-right: 5px;\n  color: #1790FF;\n}\n.PriceOptions_options__J-ZSS.PriceOptions_small__2-wzl {\n  padding: 0 0 12px 0;\n  border-bottom: none;\n}\n.PriceOptions_options__J-ZSS.PriceOptions_small__2-wzl p {\n  margin-bottom: 8px;\n}\n.PriceOptions_options__J-ZSS.PriceOptions_small__2-wzl .PriceOptions_infoItem__3IL3a {\n  text-align: center;\n}\n.PriceOptions_options__J-ZSS.PriceOptions_small__2-wzl .PriceOptions_infoItem__3IL3a .PriceOptions_priceItem__rJ9o2 {\n  border-radius: 6px;\n  height: 32px;\n  width: 72px;\n  margin: 0 0 12px 19px;\n}\n.PriceOptions_options__J-ZSS.PriceOptions_small__2-wzl .PriceOptions_infoItem__3IL3a .PriceOptions_priceItem__rJ9o2:first-child {\n  margin: 0 0 12px 0px;\n}\n.PriceOptions_options__J-ZSS.PriceOptions_small__2-wzl .PriceOptions_infoItem__3IL3a .PriceOptions_priceInput__1MrVy {\n  display: block;\n  width: 254px;\n  border-radius: 6px;\n  height: 32px;\n}\n@media (max-width: 768px) {\n  .PriceOptions_options__J-ZSS {\n    padding: 20px 20px;\n  }\n  .PriceOptions_options__J-ZSS p {\n    font-size: 14px;\n    font-weight: 400;\n    color: #616a79;\n  }\n  .PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a {\n    padding-right: 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n  .PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_priceBtn__Xz4m_ {\n    display: flex;\n    justify-content: space-between;\n  }\n  .PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_priceItem__rJ9o2 {\n    display: inline-block;\n    background-color: #fff;\n    width: 74px;\n    height: 36px;\n    line-height: 36px;\n    border-radius: 6px;\n    border: 1px solid #cfcfcf;\n  }\n  .PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_priceItem__rJ9o2.PriceOptions_active__3WyAU {\n    background-color: #fff;\n    color: #FF3266FF;\n    border-radius: 4px;\n    border: 1px solid #ff3266;\n  }\n  .PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_priceInput__1MrVy {\n    border-radius: 6px;\n    height: 36px;\n    width: auto;\n  }\n}\n";
 var styles = {"options":"PriceOptions_options__J-ZSS","infoItem":"PriceOptions_infoItem__3IL3a","priceItem":"PriceOptions_priceItem__rJ9o2","active":"PriceOptions_active__3WyAU","priceInput":"PriceOptions_priceInput__1MrVy","rate":"PriceOptions_rate__QgHQ3","small":"PriceOptions_small__2-wzl","priceBtn":"PriceOptions_priceBtn__Xz4m_"};
       withTitle = _ref$withTitle === void 0 ? true : _ref$withTitle,
       _ref$titleText = _ref.titleText,
       titleText = _ref$titleText === void 0 ? "Price" : _ref$titleText,
+      _ref$inputPlaceholder = _ref.inputPlaceholderText,
+      inputPlaceholderText = _ref$inputPlaceholder === void 0 ? "Others" : _ref$inputPlaceholder,
+      _ref$priceOptions = _ref.priceOptions,
+      priceOptions = _ref$priceOptions === void 0 ? [100, 600, 800] : _ref$priceOptions,
+      _ref$priceRender = _ref.priceRender,
+      priceRender = _ref$priceRender === void 0 ? function (i) {
+    return i / 100;
+  } : _ref$priceRender,
+      _ref$inputPriceRender = _ref.inputPriceRender,
+      inputPriceRender = _ref$inputPriceRender === void 0 ? function (i) {
+    return i ? i / 100 : "";
+  } : _ref$inputPriceRender,
       inputRef = _ref.inputRef;
-  var defaultOptions = [100, 600, 800]; // 控制是否为其他金额输入情况
+  var defaultOptions = priceOptions; // 控制是否为其他金额输入情况
 
   var _useState = React.useState(false),
       _useState2 = _commonjsHelpers._slicedToArray(_useState, 2),
 
   return React__default.createElement("div", {
     className: index.classnames(styles.options)
-  }, withTitle ? React__default.createElement("p", null, titleText) : null, React__default.createElement("div", {
+  }, withTitle ? titleText || null : null, React__default.createElement("div", {
     className: styles.infoItem
   }, React__default.createElement("span", {
     className: styles.priceBtn
         onPriceChange(item);
         setInputStatus(false);
       }
-    }, utils.formatMoney(item / 100, 0), "\xA5");
+    }, priceRender(item));
   })), React__default.createElement(antd.Input, {
     ref: inputRef,
     onMouseEnter: function onMouseEnter() {
     },
     suffix: "\xA5",
     className: styles.priceInput,
-    value: inputStatus ? price / 100 || "" : "",
-    placeholder: "Others",
+    value: inputStatus ? inputPriceRender(price) : "",
+    placeholder: inputPlaceholderText,
     onChange: function onChange(e) {
       var n = +e.target.value;
 
       setInputStatus(true);
     },
     onFocus: function onFocus(e) {
+      e.target.placeholder = "";
+      setInputStatus(true);
+
       if (focusScroll) {
         e.target.scrollIntoView();
       }
+    },
+    onBlur: function onBlur(e) {
+      e.target.placeholder = inputPlaceholderText;
+
+      if (price) {
+        setInputStatus(true);
+      } else {
+        setInputStatus(false);
+      }
     }
   })));
 };

lib/index.js

 require('./index-c2424ad4.js');
 require('./style-inject.es-dcee06b6.js');
 require('./test-029f205d.js');
-require('./utils-ed518bfc.js');
+require('./utils-4bc17ae2.js');
 var ConsumeListView = require('./ConsumeListView/index.js');
 var PayPlatformOptions = require('./PayPlatformOptions/index.js');
 require('antd');
-require('antd/lib/button/style');
 var PriceOptions = require('./PriceOptions/index.js');
 var WaitPayInfoView = require('./WaitPayInfoView/index.js');
 

lib/utils-ed518bfc.js → lib/utils-4bc17ae2.js

 
   return url + IMAGE_PROCESS;
 }
-function formatMoney(input) {
-  var fuzz = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
-
-  if (isNaN(+input)) {
-    return input;
-  }
-
-  return (+input).toFixed(fuzz);
-}
 function exportStyleSizeClass(styles, size) {
   return _commonjsHelpers._defineProperty({}, styles[size], true);
 }
 
 exports.addImageProcess = addImageProcess;
 exports.exportStyleSizeClass = exportStyleSizeClass;
-exports.formatMoney = formatMoney;
-//# sourceMappingURL=utils-ed518bfc.js.map
+//# sourceMappingURL=utils-4bc17ae2.js.map

eslib/utils-82346768.js.map → lib/utils-4bc17ae2.js.map

-{"version":3,"file":"utils-82346768.js","sources":["../src/components/Payment/Utils/utils.ts"],"sourcesContent":["\r\nexport const IMAGE_PROCESS = '?x-oss-process=image/resize,h_350';\r\nexport const IMAGE_PROCESS_SMALL = '?x-oss-process=image/resize,h_100';\r\nexport const IMAGE_PROCESS_LARGE = '?x-oss-process=image/resize,h_500';\r\n\r\ntype AddImageProcessOptions = {\r\n  small?: boolean;\r\n  large?: boolean;\r\n  custom?: boolean;\r\n  width?: string;\r\n  height?: string;\r\n}\r\n\r\nexport function addImageProcess(url: string, options: AddImageProcessOptions = { width: '36px', height: '36px' }) {\r\n  // 防止重复添加导致的url不正确\r\n  if (url && url.indexOf('x-oss-process') > -1) {\r\n    return url;\r\n  }\r\n  if (options.small) {\r\n    return url + IMAGE_PROCESS_SMALL;\r\n  }\r\n  if (options.large) {\r\n    return url + IMAGE_PROCESS_LARGE;\r\n  }\r\n  if (options.custom) {\r\n    return `${url}?x-oss-process=image/resize,limit_0,m_fill,w_${options.width},h_${options.height}`;\r\n  }\r\n  return url + IMAGE_PROCESS;\r\n}\r\n\r\nexport function formatMoney(input: any, fuzz = 2) {\r\n  if (isNaN(+input)) {\r\n    return input;\r\n  }\r\n  return (+input).toFixed(fuzz);\r\n}\r\n\r\ntype classSize = 'small'|'normal'|'large';\r\n\r\nexport function exportStyleSizeClass(styles: any, size: classSize) {\r\n  return {\r\n    [styles[size]]: true,\r\n  }\r\n}"],"names":["IMAGE_PROCESS","IMAGE_PROCESS_SMALL","IMAGE_PROCESS_LARGE","addImageProcess","url","options","width","height","indexOf","small","large","custom","formatMoney","input","fuzz","isNaN","toFixed","exportStyleSizeClass","styles","size"],"mappings":";;AACO,IAAMA,aAAa,GAAG,mCAAtB;AACP,AAAO,IAAMC,mBAAmB,GAAG,mCAA5B;AACP,AAAO,IAAMC,mBAAmB,GAAG,mCAA5B;AAUP,AAAO,SAASC,eAAT,CAAyBC,GAAzB,EAA2G;MAArEC,OAAqE,uEAAnC;IAAEC,KAAK,EAAE,MAAT;IAAiBC,MAAM,EAAE;GAAU;;;MAE5GH,GAAG,IAAIA,GAAG,CAACI,OAAJ,CAAY,eAAZ,IAA+B,CAAC,CAA3C,EAA8C;WACrCJ,GAAP;;;MAEEC,OAAO,CAACI,KAAZ,EAAmB;WACVL,GAAG,GAAGH,mBAAb;;;MAEEI,OAAO,CAACK,KAAZ,EAAmB;WACVN,GAAG,GAAGF,mBAAb;;;MAEEG,OAAO,CAACM,MAAZ,EAAoB;qBACRP,GAAV,0DAA6DC,OAAO,CAACC,KAArE,gBAAgFD,OAAO,CAACE,MAAxF;;;SAEKH,GAAG,GAAGJ,aAAb;;AAGF,AAAO,SAASY,WAAT,CAAqBC,KAArB,EAA2C;MAAVC,IAAU,uEAAH,CAAG;;MAC5CC,KAAK,CAAC,CAACF,KAAF,CAAT,EAAmB;WACVA,KAAP;;;SAEK,CAAC,CAACA,KAAF,EAASG,OAAT,CAAiBF,IAAjB,CAAP;;AAKF,AAAO,SAASG,oBAAT,CAA8BC,MAA9B,EAA2CC,IAA3C,EAA4D;6BAE9DD,MAAM,CAACC,IAAD,CADT,EACkB,IADlB;;;;;"}
+{"version":3,"file":"utils-f64eef69.js","sources":["../src/components/Payment/Utils/utils.ts"],"sourcesContent":["\r\nexport const IMAGE_PROCESS = '?x-oss-process=image/resize,h_350';\r\nexport const IMAGE_PROCESS_SMALL = '?x-oss-process=image/resize,h_100';\r\nexport const IMAGE_PROCESS_LARGE = '?x-oss-process=image/resize,h_500';\r\n\r\ntype AddImageProcessOptions = {\r\n  small?: boolean;\r\n  large?: boolean;\r\n  custom?: boolean;\r\n  width?: string;\r\n  height?: string;\r\n}\r\n\r\nexport function addImageProcess(url: string, options: AddImageProcessOptions = { width: '36px', height: '36px' }) {\r\n  // 防止重复添加导致的url不正确\r\n  if (url && url.indexOf('x-oss-process') > -1) {\r\n    return url;\r\n  }\r\n  if (options.small) {\r\n    return url + IMAGE_PROCESS_SMALL;\r\n  }\r\n  if (options.large) {\r\n    return url + IMAGE_PROCESS_LARGE;\r\n  }\r\n  if (options.custom) {\r\n    return `${url}?x-oss-process=image/resize,limit_0,m_fill,w_${options.width},h_${options.height}`;\r\n  }\r\n  return url + IMAGE_PROCESS;\r\n}\r\n\r\nexport function formatMoney(input: any, fuzz = 2) {\r\n  if (isNaN(+input)) {\r\n    return input;\r\n  }\r\n  return (+input).toFixed(fuzz);\r\n}\r\n\r\ntype classSize = 'small'|'normal'|'large';\r\n\r\nexport function exportStyleSizeClass(styles: any, size: classSize) {\r\n  return {\r\n    [styles[size]]: true,\r\n  }\r\n}"],"names":["IMAGE_PROCESS","IMAGE_PROCESS_SMALL","IMAGE_PROCESS_LARGE","addImageProcess","url","options","width","height","indexOf","small","large","custom","exportStyleSizeClass","styles","size"],"mappings":";;;;AACO,IAAMA,aAAa,GAAG,mCAAtB;AACP,AAAO,IAAMC,mBAAmB,GAAG,mCAA5B;AACP,AAAO,IAAMC,mBAAmB,GAAG,mCAA5B;AAUP,AAAO,SAASC,eAAT,CAAyBC,GAAzB,EAA2G;MAArEC,OAAqE,uEAAnC;IAAEC,KAAK,EAAE,MAAT;IAAiBC,MAAM,EAAE;GAAU;;;MAE5GH,GAAG,IAAIA,GAAG,CAACI,OAAJ,CAAY,eAAZ,IAA+B,CAAC,CAA3C,EAA8C;WACrCJ,GAAP;;;MAEEC,OAAO,CAACI,KAAZ,EAAmB;WACVL,GAAG,GAAGH,mBAAb;;;MAEEI,OAAO,CAACK,KAAZ,EAAmB;WACVN,GAAG,GAAGF,mBAAb;;;MAEEG,OAAO,CAACM,MAAZ,EAAoB;qBACRP,GAAV,0DAA6DC,OAAO,CAACC,KAArE,gBAAgFD,OAAO,CAACE,MAAxF;;;SAEKH,GAAG,GAAGJ,aAAb;;AAGF,AASO,SAASY,oBAAT,CAA8BC,MAA9B,EAA2CC,IAA3C,EAA4D;8CAE9DD,MAAM,CAACC,IAAD,CADT,EACkB,IADlB;;;;;;"}

src/components/Payment/PriceOptions/index.tsx

 import React, { useState } from "react";
 import classnames from "classnames";
-import { Input } from 'antd';
-import { formatMoney } from "../Utils/utils";
-import 'antd/lib/button/style';
+import { Input } from "antd";
 import styles from "./PriceOptions.less";
 
 interface Props {
   withTitle: boolean;
   titleText?: string | JSX.Element[] | JSX.Element;
   inputPlaceholderText?: string;
+  priceOptions?: Array<any>;
+  priceRender?: Function;
+  inputPriceRender?: Function;
   inputRef: React.RefObject<any>;
 }
 
   withTitle = true,
   titleText = "Price",
   inputPlaceholderText = "Others",
+  priceOptions = [100, 600, 800],
+  priceRender = (i: any) => i / 100,
+  inputPriceRender = (i: any) => (i ? i / 100 : ""),
   inputRef
 }: Props) => {
-  const defaultOptions = [100, 600, 800];
+  const defaultOptions = priceOptions;
   // 控制是否为其他金额输入情况
   const [inputStatus, setInputStatus] = useState(false);
 
   return (
-    <div
-      className={classnames(styles.options)}
-    >
-      {withTitle ? (
-        <p>
-          {titleText}
-        </p>
-      ) : null}
+    <div className={classnames(styles.options)}>
+      {withTitle ? (titleText || null) : null}
       <div className={styles.infoItem}>
         <span className={styles.priceBtn}>
           {defaultOptions.map(item => (
                 setInputStatus(false);
               }}
             >
-              {formatMoney(item/100, 0)}¥
+              {priceRender(item)}
             </span>
           ))}
         </span>
           }}
           suffix="¥"
           className={styles.priceInput}
-          value={inputStatus ? price / 100 || "" : ""}
+          value={inputStatus ? inputPriceRender(price) : ""}
           placeholder={inputPlaceholderText}
           onChange={e => {
             const n = +e.target.value;
             setInputStatus(true);
           }}
           onFocus={e => {
-            e.target.placeholder = '';
+            e.target.placeholder = "";
             setInputStatus(true);
             if (focusScroll) {
               e.target.scrollIntoView();
           }}
           onBlur={e => {
             e.target.placeholder = inputPlaceholderText;
+            if (price) {
+              setInputStatus(true);
+            } else {
+              setInputStatus(false);
+            }
           }}
         />
       </div>

stories/Payment.stories.tsx

 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withInfo } from "@storybook/addon-info";
-import { withKnobs, number, boolean, select, text } from "@storybook/addon-knobs";
+import { withKnobs, number, boolean, select, text, array } from "@storybook/addon-knobs";
 import { addReadme } from 'storybook-readme';
+import { Divider } from 'antd';
 
 import ConsumeListView from '@/components/Payment/ConsumeListView';
 import ConsumeListViewDoc from '@components/Payment/ConsumeListView/README.md';
 import PriceOptionsDoc from '@components/Payment/PriceOptions/README.md';
 import WaitPayInfoView from '@/components/Payment/WaitPayInfoView';
 import WaitPayInfoViewDoc from '@components/Payment/WaitPayInfoView/README.md';
+import { formatMoney } from '@components/Payment/Utils/utils';
 
 import { consumeList} from './data/consumeList.json';
 
     const [price, setPrice] = React.useState(0);
     const refInput = React.useRef(null);
     return (
+      <>
       <PriceOptions
         price={price}
         onPriceChange={(v) => setPrice(v)}
         size={select("size", { Small: "small", Normal: "normal", Large: "large"}, "normal")}
         withTitle={boolean("withTitle", false)}
         titleText={text("titleText", "")}
-        inputPlaceholderText={text("inputPlaceholderText", "")}
+        inputPlaceholderText={text("inputPlaceholderText", "其他金额")}
         focusScroll={boolean("focusScroll", false)}
+        priceOptions={array("priceOptions", ["100", "600", "800"])}
+        priceRender={(i: number) => `${formatMoney(i/100, 0)}￥`}
         inputRef={refInput}
       />
+      <Divider />
+      <div>
+        price: {price}
+      </div>
+      </>
     )
   },
   {