dev: antd样式调整

eslib/BraftEditor/index.js

@@ -28999,10 +28999,11 @@ var emotionOptions = {
 
 };
 BraftEditor.use(Emoticon(emotionOptions));
-var BarftEditorPage = function BarftEditorPage() {
+var BarftEditorPage = function BarftEditorPage(_ref) {
+  var value = _ref.value;
   var controls = ["bold", "italic", "underline", "separator", "link", "emoji", "separator", "media"];
 
-  var _useState = useState(BraftEditor.createEditorState("<p>Hello <b>World!</b></p>")),
+  var _useState = useState(BraftEditor.createEditorState(value || "<p>Hello <b>World!</b></p>")),
       _useState2 = _slicedToArray(_useState, 2),
       editorState = _useState2[0],
       setEditorState = _useState2[1];
@@ -29014,7 +29015,6 @@ var BarftEditorPage = function BarftEditorPage() {
     onChange: setEditorState,
     controls: controls,
     contentStyle: {
-      height: 210,
       boxShadow: "inset 0 1px 3px rgba(0,0,0,.1)"
     }
   }));

eslib/Payment/index.js

@@ -6,6 +6,7 @@ import '../utils-82346768.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

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

eslib/PriceOptions/index.js

@@ -4,6 +4,7 @@ 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_"};

eslib/PriceOptions/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/components/Payment/PriceOptions/index.tsx"],"sourcesContent":["import React, { useState } from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { Input } from 'antd';\r\nimport { formatMoney } from \"../Utils/utils\";\r\n\r\nimport styles from \"./PriceOptions.less\";\r\n\r\ninterface Props {\r\n  price: number;\r\n  onPriceChange: (v: number) => void;\r\n  size: \"small\" | \"normal\" | \"large\";\r\n  focusScroll: boolean;\r\n  withTitle: boolean;\r\n  titleText: string;\r\n  inputRef: React.RefObject<any>;\r\n}\r\n\r\nconst PriceOptions = ({\r\n  price,\r\n  onPriceChange,\r\n  size = \"normal\",\r\n  focusScroll = true,\r\n  withTitle = true,\r\n  titleText = \"Price\",\r\n  inputRef\r\n}: Props) => {\r\n  const defaultOptions = [100, 600, 800];\r\n  // 控制是否为其他金额输入情况\r\n  const [inputStatus, setInputStatus] = useState(false);\r\n\r\n  return (\r\n    <div\r\n      className={classnames(styles.options)}\r\n    >\r\n      {withTitle ? (\r\n        <p>\r\n          {titleText}\r\n        </p>\r\n      ) : null}\r\n      <div className={styles.infoItem}>\r\n        <span className={styles.priceBtn}>\r\n          {defaultOptions.map(item => (\r\n            <span\r\n              className={classnames({\r\n                [styles.priceItem]: true,\r\n                [styles.active]: price === item && !inputStatus\r\n              })}\r\n              key={item}\r\n              onClick={() => {\r\n                onPriceChange(item);\r\n                setInputStatus(false);\r\n              }}\r\n            >\r\n              {formatMoney(item/100, 0)}¥\r\n            </span>\r\n          ))}\r\n        </span>\r\n        <Input\r\n          ref={inputRef}\r\n          onMouseEnter={() => {\r\n            if (inputStatus && inputRef && inputRef.current) {\r\n              inputRef.current.focus();\r\n              inputRef.current.select();\r\n            }\r\n          }}\r\n          suffix=\"¥\"\r\n          className={styles.priceInput}\r\n          value={inputStatus ? price / 100 || \"\" : \"\"}\r\n          placeholder=\"Others\"\r\n          onChange={e => {\r\n            const n = +e.target.value;\r\n            if (Number.isNaN(n)) {\r\n              return;\r\n            }\r\n            // 测试暂时改成1分\r\n            onPriceChange(n * 100);\r\n          }}\r\n          onClick={e => {\r\n            onPriceChange(0);\r\n            setInputStatus(true);\r\n          }}\r\n          onFocus={e => {\r\n            if (focusScroll) {\r\n              e.target.scrollIntoView();\r\n            }\r\n          }}\r\n        />\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default PriceOptions;\r\n"],"names":["PriceOptions","price","onPriceChange","size","focusScroll","withTitle","titleText","inputRef","defaultOptions","useState","inputStatus","setInputStatus","classnames","styles","options","infoItem","priceBtn","map","item","priceItem","active","formatMoney","current","focus","select","priceInput","e","n","target","value","Number","isNaN","scrollIntoView"],"mappings":";;;;;;;;;;;AAiBA,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAQR;MAPXC,KAOW,QAPXA,KAOW;MANXC,aAMW,QANXA,aAMW;uBALXC,IAKW;MALXA,wBACAC,WAIW;MAJXA,WAIW,iCAJG,IAIH;4BAHXC,SAGW;MAHXA,SAGW,+BAHC,IAGD;4BAFXC,SAEW;MAFXA,SAEW,+BAFC,OAED;MADXC,QACW,QADXA,QACW;MACLC,cAAc,GAAG,CAAC,GAAD,EAAM,GAAN,EAAW,GAAX,CAAvB,CADW;;kBAG2BC,QAAQ,CAAC,KAAD,CAHnC;;MAGJC,WAHI;MAGSC,cAHT;;SAMT;IACE,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACC,OAAR;KAEpBT,SAAS,GACR,+BACGC,SADH,CADQ,GAIN,IAPN,EAQE;IAAK,SAAS,EAAEO,MAAM,CAACE;KACrB;IAAM,SAAS,EAAEF,MAAM,CAACG;KACrBR,cAAc,CAACS,GAAf,CAAmB,UAAAC,IAAI;;;WACtB;MACE,SAAS,EAAEN,UAAU,iDAClBC,MAAM,CAACM,SADW,EACC,IADD,gCAElBN,MAAM,CAACO,MAFW,EAEFnB,KAAK,KAAKiB,IAAV,IAAkB,CAACR,WAFjB,gBADvB;MAKE,GAAG,EAAEQ,IALP;MAME,OAAO,EAAE,mBAAM;QACbhB,aAAa,CAACgB,IAAD,CAAb;QACAP,cAAc,CAAC,KAAD,CAAd;;OAGDU,WAAW,CAACH,IAAI,GAAC,GAAN,EAAW,CAAX,CAXd,SADsB;GAAvB,CADH,CADF,EAkBE,oBAAC,KAAD;IACE,GAAG,EAAEX,QADP;IAEE,YAAY,EAAE,wBAAM;UACdG,WAAW,IAAIH,QAAf,IAA2BA,QAAQ,CAACe,OAAxC,EAAiD;QAC/Cf,QAAQ,CAACe,OAAT,CAAiBC,KAAjB;QACAhB,QAAQ,CAACe,OAAT,CAAiBE,MAAjB;;KALN;IAQE,MAAM,EAAC,MART;IASE,SAAS,EAAEX,MAAM,CAACY,UATpB;IAUE,KAAK,EAAEf,WAAW,GAAGT,KAAK,GAAG,GAAR,IAAe,EAAlB,GAAuB,EAV3C;IAWE,WAAW,EAAC,QAXd;IAYE,QAAQ,EAAE,kBAAAyB,CAAC,EAAI;UACPC,CAAC,GAAG,CAACD,CAAC,CAACE,MAAF,CAASC,KAApB;;UACIC,MAAM,CAACC,KAAP,CAAaJ,CAAb,CAAJ,EAAqB;;OAFR;;;MAMbzB,aAAa,CAACyB,CAAC,GAAG,GAAL,CAAb;KAlBJ;IAoBE,OAAO,EAAE,iBAAAD,CAAC,EAAI;MACZxB,aAAa,CAAC,CAAD,CAAb;MACAS,cAAc,CAAC,IAAD,CAAd;KAtBJ;IAwBE,OAAO,EAAE,iBAAAe,CAAC,EAAI;UACRtB,WAAJ,EAAiB;QACfsB,CAAC,CAACE,MAAF,CAASI,cAAT;;;IA5CR,CARF,CADF;CAbF;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/components/Payment/PriceOptions/index.tsx"],"sourcesContent":["import React, { useState } from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { Input } from 'antd';\r\nimport { formatMoney } from \"../Utils/utils\";\r\nimport 'antd/lib/button/style';\r\nimport styles from \"./PriceOptions.less\";\r\n\r\ninterface Props {\r\n  price: number;\r\n  onPriceChange: (v: number) => void;\r\n  size: \"small\" | \"normal\" | \"large\";\r\n  focusScroll: boolean;\r\n  withTitle: boolean;\r\n  titleText?: string;\r\n  inputRef: React.RefObject<any>;\r\n}\r\n\r\nconst PriceOptions = ({\r\n  price,\r\n  onPriceChange,\r\n  size = \"normal\",\r\n  focusScroll = true,\r\n  withTitle = true,\r\n  titleText = \"Price\",\r\n  inputRef\r\n}: Props) => {\r\n  const defaultOptions = [100, 600, 800];\r\n  // 控制是否为其他金额输入情况\r\n  const [inputStatus, setInputStatus] = useState(false);\r\n\r\n  return (\r\n    <div\r\n      className={classnames(styles.options)}\r\n    >\r\n      {withTitle ? (\r\n        <p>\r\n          {titleText}\r\n        </p>\r\n      ) : null}\r\n      <div className={styles.infoItem}>\r\n        <span className={styles.priceBtn}>\r\n          {defaultOptions.map(item => (\r\n            <span\r\n              className={classnames({\r\n                [styles.priceItem]: true,\r\n                [styles.active]: price === item && !inputStatus\r\n              })}\r\n              key={item}\r\n              onClick={() => {\r\n                onPriceChange(item);\r\n                setInputStatus(false);\r\n              }}\r\n            >\r\n              {formatMoney(item/100, 0)}¥\r\n            </span>\r\n          ))}\r\n        </span>\r\n        <Input\r\n          ref={inputRef}\r\n          onMouseEnter={() => {\r\n            if (inputStatus && inputRef && inputRef.current) {\r\n              inputRef.current.focus();\r\n              inputRef.current.select();\r\n            }\r\n          }}\r\n          suffix=\"¥\"\r\n          className={styles.priceInput}\r\n          value={inputStatus ? price / 100 || \"\" : \"\"}\r\n          placeholder=\"Others\"\r\n          onChange={e => {\r\n            const n = +e.target.value;\r\n            if (Number.isNaN(n)) {\r\n              return;\r\n            }\r\n            // 测试暂时改成1分\r\n            onPriceChange(n * 100);\r\n          }}\r\n          onClick={e => {\r\n            onPriceChange(0);\r\n            setInputStatus(true);\r\n          }}\r\n          onFocus={e => {\r\n            if (focusScroll) {\r\n              e.target.scrollIntoView();\r\n            }\r\n          }}\r\n        />\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default PriceOptions;\r\n"],"names":["PriceOptions","price","onPriceChange","size","focusScroll","withTitle","titleText","inputRef","defaultOptions","useState","inputStatus","setInputStatus","classnames","styles","options","infoItem","priceBtn","map","item","priceItem","active","formatMoney","current","focus","select","priceInput","e","n","target","value","Number","isNaN","scrollIntoView"],"mappings":";;;;;;;;;;;;AAiBA,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAQR;MAPXC,KAOW,QAPXA,KAOW;MANXC,aAMW,QANXA,aAMW;uBALXC,IAKW;MALXA,wBACAC,WAIW;MAJXA,WAIW,iCAJG,IAIH;4BAHXC,SAGW;MAHXA,SAGW,+BAHC,IAGD;4BAFXC,SAEW;MAFXA,SAEW,+BAFC,OAED;MADXC,QACW,QADXA,QACW;MACLC,cAAc,GAAG,CAAC,GAAD,EAAM,GAAN,EAAW,GAAX,CAAvB,CADW;;kBAG2BC,QAAQ,CAAC,KAAD,CAHnC;;MAGJC,WAHI;MAGSC,cAHT;;SAMT;IACE,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACC,OAAR;KAEpBT,SAAS,GACR,+BACGC,SADH,CADQ,GAIN,IAPN,EAQE;IAAK,SAAS,EAAEO,MAAM,CAACE;KACrB;IAAM,SAAS,EAAEF,MAAM,CAACG;KACrBR,cAAc,CAACS,GAAf,CAAmB,UAAAC,IAAI;;;WACtB;MACE,SAAS,EAAEN,UAAU,iDAClBC,MAAM,CAACM,SADW,EACC,IADD,gCAElBN,MAAM,CAACO,MAFW,EAEFnB,KAAK,KAAKiB,IAAV,IAAkB,CAACR,WAFjB,gBADvB;MAKE,GAAG,EAAEQ,IALP;MAME,OAAO,EAAE,mBAAM;QACbhB,aAAa,CAACgB,IAAD,CAAb;QACAP,cAAc,CAAC,KAAD,CAAd;;OAGDU,WAAW,CAACH,IAAI,GAAC,GAAN,EAAW,CAAX,CAXd,SADsB;GAAvB,CADH,CADF,EAkBE,oBAAC,KAAD;IACE,GAAG,EAAEX,QADP;IAEE,YAAY,EAAE,wBAAM;UACdG,WAAW,IAAIH,QAAf,IAA2BA,QAAQ,CAACe,OAAxC,EAAiD;QAC/Cf,QAAQ,CAACe,OAAT,CAAiBC,KAAjB;QACAhB,QAAQ,CAACe,OAAT,CAAiBE,MAAjB;;KALN;IAQE,MAAM,EAAC,MART;IASE,SAAS,EAAEX,MAAM,CAACY,UATpB;IAUE,KAAK,EAAEf,WAAW,GAAGT,KAAK,GAAG,GAAR,IAAe,EAAlB,GAAuB,EAV3C;IAWE,WAAW,EAAC,QAXd;IAYE,QAAQ,EAAE,kBAAAyB,CAAC,EAAI;UACPC,CAAC,GAAG,CAACD,CAAC,CAACE,MAAF,CAASC,KAApB;;UACIC,MAAM,CAACC,KAAP,CAAaJ,CAAb,CAAJ,EAAqB;;OAFR;;;MAMbzB,aAAa,CAACyB,CAAC,GAAG,GAAL,CAAb;KAlBJ;IAoBE,OAAO,EAAE,iBAAAD,CAAC,EAAI;MACZxB,aAAa,CAAC,CAAD,CAAb;MACAS,cAAc,CAAC,IAAD,CAAd;KAtBJ;IAwBE,OAAO,EAAE,iBAAAe,CAAC,EAAI;UACRtB,WAAJ,EAAiB;QACfsB,CAAC,CAACE,MAAF,CAASI,cAAT;;;IA5CR,CARF,CADF;CAbF;;;;"}

eslib/index.js

@@ -7,6 +7,7 @@ import './utils-82346768.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';
 

lib/BraftEditor/index.js

@@ -29006,10 +29006,11 @@ var emotionOptions = {
 
 };
 BraftEditor.use(Emoticon(emotionOptions));
-var BarftEditorPage = function BarftEditorPage() {
+var BarftEditorPage = function BarftEditorPage(_ref) {
+  var value = _ref.value;
   var controls = ["bold", "italic", "underline", "separator", "link", "emoji", "separator", "media"];
 
-  var _useState = React.useState(BraftEditor.createEditorState("<p>Hello <b>World!</b></p>")),
+  var _useState = React.useState(BraftEditor.createEditorState(value || "<p>Hello <b>World!</b></p>")),
       _useState2 = _commonjsHelpers._slicedToArray(_useState, 2),
       editorState = _useState2[0],
       setEditorState = _useState2[1];
@@ -29021,7 +29022,6 @@ var BarftEditorPage = function BarftEditorPage() {
     onChange: setEditorState,
     controls: controls,
     contentStyle: {
-      height: 210,
       boxShadow: "inset 0 1px 3px rgba(0,0,0,.1)"
     }
   }));

lib/Payment/index.js

@@ -10,6 +10,7 @@ require('../utils-ed518bfc.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

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

lib/PriceOptions/index.js

@@ -11,6 +11,7 @@ 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_"};

lib/PriceOptions/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/components/Payment/PriceOptions/index.tsx"],"sourcesContent":["import React, { useState } from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { Input } from 'antd';\r\nimport { formatMoney } from \"../Utils/utils\";\r\n\r\nimport styles from \"./PriceOptions.less\";\r\n\r\ninterface Props {\r\n  price: number;\r\n  onPriceChange: (v: number) => void;\r\n  size: \"small\" | \"normal\" | \"large\";\r\n  focusScroll: boolean;\r\n  withTitle: boolean;\r\n  titleText: string;\r\n  inputRef: React.RefObject<any>;\r\n}\r\n\r\nconst PriceOptions = ({\r\n  price,\r\n  onPriceChange,\r\n  size = \"normal\",\r\n  focusScroll = true,\r\n  withTitle = true,\r\n  titleText = \"Price\",\r\n  inputRef\r\n}: Props) => {\r\n  const defaultOptions = [100, 600, 800];\r\n  // 控制是否为其他金额输入情况\r\n  const [inputStatus, setInputStatus] = useState(false);\r\n\r\n  return (\r\n    <div\r\n      className={classnames(styles.options)}\r\n    >\r\n      {withTitle ? (\r\n        <p>\r\n          {titleText}\r\n        </p>\r\n      ) : null}\r\n      <div className={styles.infoItem}>\r\n        <span className={styles.priceBtn}>\r\n          {defaultOptions.map(item => (\r\n            <span\r\n              className={classnames({\r\n                [styles.priceItem]: true,\r\n                [styles.active]: price === item && !inputStatus\r\n              })}\r\n              key={item}\r\n              onClick={() => {\r\n                onPriceChange(item);\r\n                setInputStatus(false);\r\n              }}\r\n            >\r\n              {formatMoney(item/100, 0)}¥\r\n            </span>\r\n          ))}\r\n        </span>\r\n        <Input\r\n          ref={inputRef}\r\n          onMouseEnter={() => {\r\n            if (inputStatus && inputRef && inputRef.current) {\r\n              inputRef.current.focus();\r\n              inputRef.current.select();\r\n            }\r\n          }}\r\n          suffix=\"¥\"\r\n          className={styles.priceInput}\r\n          value={inputStatus ? price / 100 || \"\" : \"\"}\r\n          placeholder=\"Others\"\r\n          onChange={e => {\r\n            const n = +e.target.value;\r\n            if (Number.isNaN(n)) {\r\n              return;\r\n            }\r\n            // 测试暂时改成1分\r\n            onPriceChange(n * 100);\r\n          }}\r\n          onClick={e => {\r\n            onPriceChange(0);\r\n            setInputStatus(true);\r\n          }}\r\n          onFocus={e => {\r\n            if (focusScroll) {\r\n              e.target.scrollIntoView();\r\n            }\r\n          }}\r\n        />\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default PriceOptions;\r\n"],"names":["PriceOptions","price","onPriceChange","size","focusScroll","withTitle","titleText","inputRef","defaultOptions","useState","inputStatus","setInputStatus","React","classnames","styles","options","infoItem","priceBtn","map","item","priceItem","active","formatMoney","Input","current","focus","select","priceInput","e","n","target","value","Number","isNaN","scrollIntoView"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAQR;MAPXC,KAOW,QAPXA,KAOW;MANXC,aAMW,QANXA,aAMW;uBALXC,IAKW;MALXA,wBACAC,WAIW;MAJXA,WAIW,iCAJG,IAIH;4BAHXC,SAGW;MAHXA,SAGW,+BAHC,IAGD;4BAFXC,SAEW;MAFXA,SAEW,+BAFC,OAED;MADXC,QACW,QADXA,QACW;MACLC,cAAc,GAAG,CAAC,GAAD,EAAM,GAAN,EAAW,GAAX,CAAvB,CADW;;kBAG2BC,cAAQ,CAAC,KAAD,CAHnC;;MAGJC,WAHI;MAGSC,cAHT;;SAMTC;IACE,SAAS,EAAEC,gBAAU,CAACC,MAAM,CAACC,OAAR;KAEpBV,SAAS,GACRO,wCACGN,SADH,CADQ,GAIN,IAPN,EAQEM;IAAK,SAAS,EAAEE,MAAM,CAACE;KACrBJ;IAAM,SAAS,EAAEE,MAAM,CAACG;KACrBT,cAAc,CAACU,GAAf,CAAmB,UAAAC,IAAI;;;WACtBP;MACE,SAAS,EAAEC,gBAAU,kEAClBC,MAAM,CAACM,SADW,EACC,IADD,iDAElBN,MAAM,CAACO,MAFW,EAEFpB,KAAK,KAAKkB,IAAV,IAAkB,CAACT,WAFjB,gBADvB;MAKE,GAAG,EAAES,IALP;MAME,OAAO,EAAE,mBAAM;QACbjB,aAAa,CAACiB,IAAD,CAAb;QACAR,cAAc,CAAC,KAAD,CAAd;;OAGDW,iBAAW,CAACH,IAAI,GAAC,GAAN,EAAW,CAAX,CAXd,SADsB;GAAvB,CADH,CADF,EAkBEP,6BAACW,UAAD;IACE,GAAG,EAAEhB,QADP;IAEE,YAAY,EAAE,wBAAM;UACdG,WAAW,IAAIH,QAAf,IAA2BA,QAAQ,CAACiB,OAAxC,EAAiD;QAC/CjB,QAAQ,CAACiB,OAAT,CAAiBC,KAAjB;QACAlB,QAAQ,CAACiB,OAAT,CAAiBE,MAAjB;;KALN;IAQE,MAAM,EAAC,MART;IASE,SAAS,EAAEZ,MAAM,CAACa,UATpB;IAUE,KAAK,EAAEjB,WAAW,GAAGT,KAAK,GAAG,GAAR,IAAe,EAAlB,GAAuB,EAV3C;IAWE,WAAW,EAAC,QAXd;IAYE,QAAQ,EAAE,kBAAA2B,CAAC,EAAI;UACPC,CAAC,GAAG,CAACD,CAAC,CAACE,MAAF,CAASC,KAApB;;UACIC,MAAM,CAACC,KAAP,CAAaJ,CAAb,CAAJ,EAAqB;;OAFR;;;MAMb3B,aAAa,CAAC2B,CAAC,GAAG,GAAL,CAAb;KAlBJ;IAoBE,OAAO,EAAE,iBAAAD,CAAC,EAAI;MACZ1B,aAAa,CAAC,CAAD,CAAb;MACAS,cAAc,CAAC,IAAD,CAAd;KAtBJ;IAwBE,OAAO,EAAE,iBAAAiB,CAAC,EAAI;UACRxB,WAAJ,EAAiB;QACfwB,CAAC,CAACE,MAAF,CAASI,cAAT;;;IA5CR,CARF,CADF;CAbF;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/components/Payment/PriceOptions/index.tsx"],"sourcesContent":["import React, { useState } from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { Input } from 'antd';\r\nimport { formatMoney } from \"../Utils/utils\";\r\nimport 'antd/lib/button/style';\r\nimport styles from \"./PriceOptions.less\";\r\n\r\ninterface Props {\r\n  price: number;\r\n  onPriceChange: (v: number) => void;\r\n  size: \"small\" | \"normal\" | \"large\";\r\n  focusScroll: boolean;\r\n  withTitle: boolean;\r\n  titleText?: string;\r\n  inputRef: React.RefObject<any>;\r\n}\r\n\r\nconst PriceOptions = ({\r\n  price,\r\n  onPriceChange,\r\n  size = \"normal\",\r\n  focusScroll = true,\r\n  withTitle = true,\r\n  titleText = \"Price\",\r\n  inputRef\r\n}: Props) => {\r\n  const defaultOptions = [100, 600, 800];\r\n  // 控制是否为其他金额输入情况\r\n  const [inputStatus, setInputStatus] = useState(false);\r\n\r\n  return (\r\n    <div\r\n      className={classnames(styles.options)}\r\n    >\r\n      {withTitle ? (\r\n        <p>\r\n          {titleText}\r\n        </p>\r\n      ) : null}\r\n      <div className={styles.infoItem}>\r\n        <span className={styles.priceBtn}>\r\n          {defaultOptions.map(item => (\r\n            <span\r\n              className={classnames({\r\n                [styles.priceItem]: true,\r\n                [styles.active]: price === item && !inputStatus\r\n              })}\r\n              key={item}\r\n              onClick={() => {\r\n                onPriceChange(item);\r\n                setInputStatus(false);\r\n              }}\r\n            >\r\n              {formatMoney(item/100, 0)}¥\r\n            </span>\r\n          ))}\r\n        </span>\r\n        <Input\r\n          ref={inputRef}\r\n          onMouseEnter={() => {\r\n            if (inputStatus && inputRef && inputRef.current) {\r\n              inputRef.current.focus();\r\n              inputRef.current.select();\r\n            }\r\n          }}\r\n          suffix=\"¥\"\r\n          className={styles.priceInput}\r\n          value={inputStatus ? price / 100 || \"\" : \"\"}\r\n          placeholder=\"Others\"\r\n          onChange={e => {\r\n            const n = +e.target.value;\r\n            if (Number.isNaN(n)) {\r\n              return;\r\n            }\r\n            // 测试暂时改成1分\r\n            onPriceChange(n * 100);\r\n          }}\r\n          onClick={e => {\r\n            onPriceChange(0);\r\n            setInputStatus(true);\r\n          }}\r\n          onFocus={e => {\r\n            if (focusScroll) {\r\n              e.target.scrollIntoView();\r\n            }\r\n          }}\r\n        />\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default PriceOptions;\r\n"],"names":["PriceOptions","price","onPriceChange","size","focusScroll","withTitle","titleText","inputRef","defaultOptions","useState","inputStatus","setInputStatus","React","classnames","styles","options","infoItem","priceBtn","map","item","priceItem","active","formatMoney","Input","current","focus","select","priceInput","e","n","target","value","Number","isNaN","scrollIntoView"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBA,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAQR;MAPXC,KAOW,QAPXA,KAOW;MANXC,aAMW,QANXA,aAMW;uBALXC,IAKW;MALXA,wBACAC,WAIW;MAJXA,WAIW,iCAJG,IAIH;4BAHXC,SAGW;MAHXA,SAGW,+BAHC,IAGD;4BAFXC,SAEW;MAFXA,SAEW,+BAFC,OAED;MADXC,QACW,QADXA,QACW;MACLC,cAAc,GAAG,CAAC,GAAD,EAAM,GAAN,EAAW,GAAX,CAAvB,CADW;;kBAG2BC,cAAQ,CAAC,KAAD,CAHnC;;MAGJC,WAHI;MAGSC,cAHT;;SAMTC;IACE,SAAS,EAAEC,gBAAU,CAACC,MAAM,CAACC,OAAR;KAEpBV,SAAS,GACRO,wCACGN,SADH,CADQ,GAIN,IAPN,EAQEM;IAAK,SAAS,EAAEE,MAAM,CAACE;KACrBJ;IAAM,SAAS,EAAEE,MAAM,CAACG;KACrBT,cAAc,CAACU,GAAf,CAAmB,UAAAC,IAAI;;;WACtBP;MACE,SAAS,EAAEC,gBAAU,kEAClBC,MAAM,CAACM,SADW,EACC,IADD,iDAElBN,MAAM,CAACO,MAFW,EAEFpB,KAAK,KAAKkB,IAAV,IAAkB,CAACT,WAFjB,gBADvB;MAKE,GAAG,EAAES,IALP;MAME,OAAO,EAAE,mBAAM;QACbjB,aAAa,CAACiB,IAAD,CAAb;QACAR,cAAc,CAAC,KAAD,CAAd;;OAGDW,iBAAW,CAACH,IAAI,GAAC,GAAN,EAAW,CAAX,CAXd,SADsB;GAAvB,CADH,CADF,EAkBEP,6BAACW,UAAD;IACE,GAAG,EAAEhB,QADP;IAEE,YAAY,EAAE,wBAAM;UACdG,WAAW,IAAIH,QAAf,IAA2BA,QAAQ,CAACiB,OAAxC,EAAiD;QAC/CjB,QAAQ,CAACiB,OAAT,CAAiBC,KAAjB;QACAlB,QAAQ,CAACiB,OAAT,CAAiBE,MAAjB;;KALN;IAQE,MAAM,EAAC,MART;IASE,SAAS,EAAEZ,MAAM,CAACa,UATpB;IAUE,KAAK,EAAEjB,WAAW,GAAGT,KAAK,GAAG,GAAR,IAAe,EAAlB,GAAuB,EAV3C;IAWE,WAAW,EAAC,QAXd;IAYE,QAAQ,EAAE,kBAAA2B,CAAC,EAAI;UACPC,CAAC,GAAG,CAACD,CAAC,CAACE,MAAF,CAASC,KAApB;;UACIC,MAAM,CAACC,KAAP,CAAaJ,CAAb,CAAJ,EAAqB;;OAFR;;;MAMb3B,aAAa,CAAC2B,CAAC,GAAG,GAAL,CAAb;KAlBJ;IAoBE,OAAO,EAAE,iBAAAD,CAAC,EAAI;MACZ1B,aAAa,CAAC,CAAD,CAAb;MACAS,cAAc,CAAC,IAAD,CAAd;KAtBJ;IAwBE,OAAO,EAAE,iBAAAiB,CAAC,EAAI;UACRxB,WAAJ,EAAiB;QACfwB,CAAC,CAACE,MAAF,CAASI,cAAT;;;IA5CR,CARF,CADF;CAbF;;;;"}

lib/index.js

@@ -11,6 +11,7 @@ require('./utils-ed518bfc.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');
 

package.json

@@ -17,6 +17,7 @@
     "@types/react-intl": "^3.0.0",
     "@types/slate": "^0.47.5",
     "@types/slate-react": "^0.22.9",
+    "antd": "^3.26.7",
     "braft-editor": "^2.3.8",
     "braft-extensions": "^0.0.20",
     "classnames": "^2.2.6",
@@ -116,8 +117,8 @@
     "ts-loader": "^6.2.1"
   },
   "peerDependencies": {
+    "antd": "3.19.3",
     "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "antd": "3.19.3"
+    "react-dom": "^16.12.0"
   }
 }

src/components/Editor/BraftEditor/index.tsx

@@ -32,7 +32,11 @@ const emotionOptions = {
 
 BraftEditor.use(Emoticon(emotionOptions))
 
-export const BarftEditorPage = () => {
+export const BarftEditorPage = ({
+  value,
+}: {
+  value: string;
+}) => {
   const controls: ControlType[] = [
     "bold",
     "italic",
@@ -45,7 +49,7 @@ export const BarftEditorPage = () => {
   ];
 
   const [editorState, setEditorState] = useState(
-    BraftEditor.createEditorState("<p>Hello <b>World!</b></p>")
+    BraftEditor.createEditorState(value || "<p>Hello <b>World!</b></p>")
   );
 
   return (
@@ -55,7 +59,6 @@ export const BarftEditorPage = () => {
         onChange={setEditorState}
         controls={controls}
         contentStyle={{
-          height: 210,
           boxShadow: "inset 0 1px 3px rgba(0,0,0,.1)"
         }}
       />

src/components/Payment/PriceOptions/index.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import classnames from "classnames";
 import { Input } from 'antd';
 import { formatMoney } from "../Utils/utils";
-
+import 'antd/lib/button/style';
 import styles from "./PriceOptions.less";
 
 interface Props {
@@ -11,7 +11,7 @@ interface Props {
   size: "small" | "normal" | "large";
   focusScroll: boolean;
   withTitle: boolean;
-  titleText: string;
+  titleText?: string;
   inputRef: React.RefObject<any>;
 }
 

src/components/Payment/temp/NewPayment.less

@@ -0,0 +1,84 @@
+.pay_wrapper {
+  overflow: hidden;
+
+  .pay_value_title {
+    margin: 29px 0;
+    font-size: 24px;
+    color: #fb4b56;
+  }
+
+  .pay_button_wrapper {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 29px;
+
+    .pay_button_confirm {
+      color: white;
+      background-color: #71c135;
+      width: 110px;
+      height: 40px;
+      font-size: 16px;
+
+      &:hover,
+      &:focus {
+        border-color: #71c135;
+      }
+    }
+  }
+}
+
+.paying_wrapper {
+  padding: 24px 0;
+  .pay_info_footer {
+    margin-top: 16px;
+    text-align: center;
+    .tips {
+      color: #9b9b9b;
+      font-size: 14px;
+      margin-top: 10px;
+      .link {
+        color: #1790ff;
+        text-decoration: underline;
+        margin: 0 2px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .pay_info {
+    text-align: center;
+    font-size: 16px;
+    color: #585853;
+    i {
+      width: 48px;
+      height: 48px;
+      background-size: contain;
+      display: block;
+      margin: auto;
+    }
+  }
+}
+
+.after_pay_wrapper {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  text-align: center;
+  padding: 60px 0px;
+  overflow: hidden;
+
+  .after_pay_image {
+    width: 72px;
+    height: 72px;
+    margin: 0 auto;
+
+    & > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .after_pay_text {
+    font-size: 20px;
+  }
+}

src/components/Payment/temp/NewPayment.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Button, Modal, Divider, Spin } from 'antd';
+import { IconImage } from 'components/Common/Icon';
+import { isMobile } from '@/utils/bilingually/utils';
+import { PAY_CHANNEL, LINKS } from '@/constants';
+import PayPlatformOptions from './Common/PayPlatformOptions';
+
+import face from '@/assets/bilingually/gift/icon_face.png';
+import styles from './NewPayment.less';
+
+const current_is_mobile = isMobile();
+
+interface NewPaymentProps {
+  value: number | string;
+  payStage: 'pre_pay' | 'paying' | 'after';
+  confirmPay: Function;
+  cancelWithError: Function;
+  confirmPayed: Function;
+  afterPayText: string;
+}
+
+interface NewPaymentState {
+  payitem: string;
+  isCheckingOrder: boolean;
+}
+
+class NewPayment extends React.Component<NewPaymentProps, NewPaymentState> {
+  constructor(props: NewPaymentProps) {
+    super(props);
+    this.state = {
+      payitem: PAY_CHANNEL.ALI_WEB,
+      isCheckingOrder: false,
+    };
+  }
+
+  renderPayAfter() {
+    return (
+      <div className={styles.after_pay_wrapper}>
+        <div>
+          <div className={styles.after_pay_image}>
+            <img src={face} alt="reward success" />
+          </div>
+          <div className={styles.after_pay_text}>{this.props.afterPayText}</div>
+        </div>
+      </div>
+    );
+  }
+
+  renderPaying() {
+    const { isCheckingOrder } = this.state;
+
+    if (isCheckingOrder) {
+      return <div>
+        <Spin />
+      </div>
+    }
+
+    return (
+      <div className={styles.paying_wrapper}>
+        <div className={styles.pay_info}>
+          <IconImage type="info-blue" />
+          {intl.get('live.course_info.pay.notification')}
+        </div>
+        <div className={styles.pay_info_footer}>
+          <Button
+            type="primary"
+            style={{ marginRight: '8px' }}
+            onClick={() => {
+              this.props.confirmPayed();
+            }}
+          >
+            {intl.get('live.course_info.pay.payed')}
+          </Button>
+          <Button
+            onClick={() => {
+              this.props.cancelWithError();
+            }}
+          >
+            {intl.get('live.course_info.pay.help')}
+          </Button>
+          <div className={styles.tips}>
+            {intl.getHTML('live.course.payment.tips', {
+              contact: LINKS.CONTACT,
+              className: styles.link,
+            })}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const { value: pay_value, payStage: pay_stage = 'pre_pay' } = this.props;
+
+    if (pay_stage === 'paying') {
+      return this.renderPaying();
+    } else if (pay_stage === 'after') {
+      return this.renderPayAfter();
+    }
+
+    return (
+      <div className={styles.pay_wrapper}>
+        {pay_value && (
+          <h3 className={styles.pay_value_title}>
+            {`${intl.get('bilingually.gift.send')}: ¥${pay_value}`}
+          </h3>
+        )}
+        <PayPlatformOptions
+          payitem={this.state.payitem}
+          onPayItemChange={(value: string) => {
+            this.setState({ payitem: value });
+          }}
+          isMobile={current_is_mobile}
+        />
+        <Divider />
+        <div className={styles.pay_button_wrapper}>
+          <Button
+            className={styles.pay_button_confirm}
+            onClick={() => {
+              this.props.confirmPay(this.state.payitem);
+            }}
+          >
+            立即支付
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default NewPayment;

src/components/Payment/temp/SendWantedValueModal.less

@@ -0,0 +1,107 @@
+.sendWantedModalContent {
+  background-color: white;
+  width: 360px;
+  height: 314px;
+  padding: 22px 28px;
+  border-radius: 7px;
+
+  .title {
+    font-size:18px;
+    font-weight:400;
+    text-align: center;
+  }
+
+  .wantedValueText {
+    color: #565656;
+    margin-top: 48px;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: center;
+  }
+
+  .wantedInputNumber {
+    margin: 11px auto;
+    text-align: center;
+    :global {
+      .ant-input {
+        color: #FB4B56;
+      }
+    }
+  }
+
+  .wantedValueTipBottom {
+    margin: 0 auto;
+    font-size: 12px;
+    text-align: center;
+    width: 208px;
+    color: #9B9B9B;
+  }
+
+  .buttonRow {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 23px;
+
+    .confirmButton {
+      color: white;
+      background-color: #71C135;
+      width: 170px;
+      height: 36px;
+
+      &:hover, &:focus {
+        outline: none;
+        border-color: lighten(#71C135, 10%);
+      }
+    }
+
+    .tipsButton {
+      margin-left: 22px;
+      width: 20px;
+
+      :global {
+        .schedule {
+          font-size: 18px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+}
+
+.closeButton {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  display: block;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  cursor: pointer;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.tipsView {
+  h6 {
+    margin: 0;
+    font-size: 12px;
+    line-height: 22px;
+    color: #3D3D3D;
+  }
+  div {
+    font-size: 12px;
+  }
+}
+
+.outRangeTextTip {
+  :global {
+    .ant-tooltip-inner {
+      color: red;
+    }
+  }
+}

src/components/Payment/temp/SendWantedValueModal.tsx

@@ -0,0 +1,220 @@
+import React, { RefObject } from 'react';
+import PropTypes from 'prop-types';
+import { Input, Button, Popover, Tooltip } from 'antd';
+import { Modal } from '@/components/Common/Modal';
+
+import CloseButtonIcon from '@/assets/bilingually/close.png';
+
+import styles from './SendWantedValueModal.less';
+import { sendgift } from '@/services/bilingually/qa';
+
+interface SendWantedValueModalProps {
+  wantedValue: string|number|null;
+  sendValueRange: Array<string|number>;
+  sendGiftData: {
+    answerId: string|number;
+    questionId: string|number;
+    toUserId: string|number;
+  };
+  handleVisiableChange: Function;
+}
+interface SendWantedValueModalState {
+  visiable: boolean;
+  outRangeTip: boolean;
+  sendValue: string|number;
+}
+
+class SendWantedValueModal extends React.Component<SendWantedValueModalProps, SendWantedValueModalState> {
+  ModalInputRef: RefObject<Input>;
+
+  constructor(props: SendWantedValueModalProps) {
+    super(props);
+    this.state = {
+      visiable: false,
+      sendValue: 0,
+      outRangeTip: false,
+    };
+    this.ModalInputRef = React.createRef();
+  }
+
+  handleSendValueChange = (v: string|number) => {
+    if (this.state.outRangeTip) {
+      this.setState({
+        outRangeTip: !this.checkSendValue(),
+      });
+    }
+    this.setState({
+      sendValue: v,
+    });
+  }
+
+  checkSendValue = () => {
+    const { sendValueRange } = this.props;
+    const { sendValue } = this.state;
+    let min = 0;
+    let max = Number(this.props.wantedValue);
+    if (sendValueRange) {
+      min = Number(sendValueRange[0]);
+      max = Number(sendValueRange[1]);
+    }
+    if (sendValue > max) {
+      this.setState({
+        // sendValue: max,
+        outRangeTip: true,
+      });
+      return false;
+    } else if (sendValue < min) {
+      this.setState({
+        // sendValue: max,
+        outRangeTip: true,
+      });
+      return false;
+    }
+    return true;
+  }
+
+  handleCloseAction = () => {
+    this.setState({
+      visiable: false,
+      sendValue: 0,
+      outRangeTip: false,
+    }, () => {
+      this.props.handleVisiableChange(false);
+    });
+  }
+
+  handleShowAction = () => {
+    this.setState({
+      visiable: true,
+    }, () => {
+      this.props.handleVisiableChange(true);
+    });
+  }
+
+  handleConfirm = () => {
+    const { sendGiftData } = this.props;
+    const checkResult = this.checkSendValue();
+    if (!checkResult) {
+      // 未通过验证
+      return null;
+    }
+    // 进行分配请求
+    sendgift({
+      business_type: 14, // 表示悬赏答案
+      ref_id: sendGiftData.answerId.toString(), // 对应回答的id
+      origin_id: sendGiftData.questionId, // 对应问题的id
+      to_user: sendGiftData.toUserId, // 悬赏给谁
+      goods_id: 2, // 礼物id 帮币的话为2
+      num: Number(this.state.sendValue), // 礼物数量
+    }).then((res: any) => {
+      console.log('res: ', res);
+      console.log("after send gift");
+      if (res) {
+        this.handleCloseAction();
+      } else {
+        this.handleCloseAction();
+      }
+    })
+  }
+
+  renderCloseButton = () => {
+    return (
+      <div
+        role="button"
+        tabIndex={-1}
+        className={styles.closeButton}
+        onClick={() => {
+          this.handleCloseAction();
+        }}
+      >
+        <img src={CloseButtonIcon} alt="close button for send wanted" />
+      </div>
+    )
+  }
+
+  renderModalContent = () => {
+    return (
+      <div className={styles.sendWantedModalContent}>
+        {this.renderCloseButton()}
+        <h4 className={styles.title}>分配悬赏奖金</h4>
+        <div className={styles.wantedValueText}>{`剩余可分配 ${this.props.wantedValue}元`}</div>
+        <Tooltip
+          visible={this.state.outRangeTip}
+          title="超过可范围值"
+          placement="bottom"
+          overlayClassName={styles.outRangeTextTip}
+        >
+          <Input
+            ref={this.ModalInputRef}
+            className={styles.wantedInputNumber}
+            suffix="元"
+            value={this.state.sendValue}
+            onChange={e => this.handleSendValueChange(e.target.value)}
+            onFocus={e => e.target.setSelectionRange(0, String(this.state.sendValue).length)}
+          />
+        </Tooltip>
+        <div className={styles.wantedValueTipBottom}>需要在悬赏时间结束前将奖金分配完成, 否则将按照规则自动分配</div>
+        <div className={styles.buttonRow}>
+          <div className={styles.tipsButton}/>
+          <Button
+            className={styles.confirmButton}
+            onClick={this.handleConfirm}
+          >
+            确认
+          </Button>
+          <div className={styles.tipsButton}>
+            <Popover
+              placement="bottom"
+              trigger="click"
+              overlayStyle={{
+                width: '320px'
+              }}
+              content={(
+                <div className={styles.tipsView}>
+                  <h6>1、如何参与悬赏？</h6>
+                  <div>
+                    悬赏问题皆有有效期，默认为120小时（5天），在有效期内回复的答案，才有资格被选为最佳答案，以及分得赏金。
+                  </div>
+                  <h6>2、赏金如何分？</h6>
+                  <div>
+                    悬赏时间结束前，提问者可随时选出最优答案，并对赏金进行分配，直至赏金被分完或时间到期为止。若悬赏时间到期，悬赏者仍未分配赏金，且回答数大于等于2，系统则默认将赏金平分给点赞数前3名的回答。
+                  </div>
+                  <h6>3、赏金能退款吗？</h6>
+                  <div>
+                    赏金只会在以下2种情况进行退款：一、悬赏时间到期，回答数小于2，赏金将自动退还至提问者的钱包；二、悬赏时间到期，悬赏者未分配完赏金，系统自动将剩余的赏金退还至提问者的钱包。
+                  </div>
+                </div>
+              )}
+            >
+              <i
+                className="schedule schedule-icon_rewardtips"
+              />
+            </Popover>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  render() {
+    const { children } = this.props;
+    return (
+      <>
+        <div
+          className={styles.wrapper} 
+          onClick={() => this.handleShowAction()}
+        >
+          {children}
+        </div>
+        <Modal
+          visible={this.state.visiable}
+          onCancel={() => this.handleCloseAction()}
+        >
+          {this.renderModalContent()}
+        </Modal>
+      </>
+    )
+  }
+}
+
+export default SendWantedValueModal;

src/components/Payment/temp/WantedPaymentPopover.less

@@ -0,0 +1,26 @@
+.wanted_wrapper {
+  width: 366px;
+  height: 424px;
+  font-size: 18px;
+  text-align: center;
+
+  .close_btn {
+    position: absolute;
+    top: 10px;
+    right: 16px;
+    width: 20px;
+    height: 20px;
+
+    & > button {
+      border: none;
+      padding: 0px;
+      margin: 0px;
+      cursor: pointer;
+
+      & > img {
+        width: 100%;
+      }
+    }
+  }
+
+}

src/components/Payment/temp/WantedPaymentPopover.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Popover, Divider, Input, Button } from 'antd';
+import WantedpaymentView from './WantedPaymentView';
+
+import popClose from '@/assets/bilingually/close@2x.png';
+import styles from './WantedPaymentPopover.less';
+
+export interface WantedPaymentPopoverProp {
+  popoverConfig?: {
+    placement?: "left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | undefined;
+    trigger?: "hover" | "focus" | "click" | "contextMenu" | undefined;
+  };
+  handleConfirm?: Function;
+}
+
+export interface WantedPaymentPopoverState {
+  visiable: boolean;
+  current_wanted: number|string|null;
+}
+
+export class WantedPaymentPopover extends React.Component<WantedPaymentPopoverProp, WantedPaymentPopoverState> {
+  constructor(props: WantedPaymentPopoverProp) {
+    super(props);
+    this.state = {
+      visiable: false,
+
+      current_wanted: null,
+    }
+  }
+
+  handleClose = () => {
+    const { handleConfirm } = this.props;
+    if (handleConfirm) {
+      this.handleUpdateCurrentWanted(this.state.current_wanted, (value: string) => {
+        handleConfirm(Number(value).toFixed(2));
+      });
+    }
+    this.setState({ visiable: false });
+  }
+
+  clearCurrentWanted = (cb: Function) => {
+    this.setState({
+      current_wanted: null,
+    }, () => cb())
+  }
+
+  handleUpdateCurrentWanted = (value: string|number|null, afterUpdate?: Function) => {
+    if (!value) return;
+    let result: string|number;
+    result = value;
+    if (parseInt(`${value}`, 10) === value) {
+      // 无小数判断
+      result = Number(value)
+    }
+    if (!result) return;
+    if (result > 10000) result = 10000;
+    if (result < 5) result = 5;
+    this.setState({ current_wanted: result }, () => afterUpdate && afterUpdate(result));
+  }
+
+  renderInitView() {
+    const { current_wanted } = this.state; 
+    return (
+      <WantedpaymentView
+        type="pop"
+        current_wanted={current_wanted}
+        InputWantedValueChange={(v: string) => this.setState({ current_wanted: v })}
+        InputWantedPressEnter={(v: string) => this.handleUpdateCurrentWanted(v, this.handleClose)}
+        InputWantedOnBlur={(v: string) => this.handleUpdateCurrentWanted(v)}
+        InputWantedClear={() => this.clearCurrentWanted(this.handleClose)}
+        CloseFunction={this.handleClose}
+      />
+    )
+  }
+
+  render() {
+    const { children, popoverConfig = {} } = this.props;
+
+    return (
+      <Popover
+        placement="left"
+        trigger="click"
+        visible={this.state.visiable}
+        onVisibleChange={(value: boolean) => {
+          if (!value) {
+            this.handleClose();
+          }
+          this.setState({ visiable: value });
+        }}
+        {...popoverConfig}
+        content={
+          <div className={styles.wanted_wrapper}>
+            <div className={styles.close_btn}>
+              <button onClick={this.handleClose}>
+                <img src={popClose} alt="close wanted button"/>
+              </button>
+            </div>
+            {this.renderInitView()}
+          </div>
+        }
+      >
+        {children}
+      </Popover>
+    );
+  }
+}
+
+export default WantedPaymentPopover;

src/components/Payment/temp/WantedPaymentView.less

@@ -0,0 +1,73 @@
+.wrapper {
+  .wanted_middle {
+    color: #E1AD28;
+    font-size: 17px; 
+    margin-top: 21px;
+
+    .wanted_cover {
+        width: 95px;
+    }
+  }
+
+  .wanted_bottom {
+    .wanted_bottom_title {
+      color: #565656;
+      font-size: 14px;
+    }
+
+    .wanted_input_number {
+      margin: 11px auto;
+      width: 266px;
+      height: 36px;
+
+      :global {
+        .ant-input {
+          color: #FB4B56;
+          font-size: 16px;
+          text-align: center;
+          
+          &:focus, &:hover {
+            outline: none;
+            box-shadow: none;
+            border-color: #FB4B56;
+          }
+        }
+      }
+    }
+
+    .wanted_bottom_tips {
+      color: #9B9B9B;
+      font-size: 12px;
+    }
+  }
+
+  footer {
+    margin-top: 40px;
+
+    .wanted_confirm_button {
+      font-size: 16px;
+      color: white;
+      background-color: #71C135;
+
+      &:hover, &:focus {
+        color: white;
+        outline: none;
+        box-shadow: none;
+        background-color: lighten(#71C135, 10%);
+        border-color: lighten(#71C135, 50%);
+      }
+    }
+
+    .wanted_cancel_button {
+      margin-top: 12px;
+      color: #787F8C;
+      font-size: 12px;
+      cursor: pointer;
+
+      &:hover, &:focus {
+        color: #787F8C;
+        text-shadow: #565656;
+      }
+    }
+  }
+}

src/components/Payment/temp/WantedPaymentView.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Divider, Input, Button } from 'antd';
+
+import wantedCover from '@/assets/payment/cover_wanted@2x.png';
+import styles from './WantedPaymentView.less';
+
+interface WantedpaymentViewProps {
+  type?: 'pop'|'modal';
+  current_wanted: number|string|null;
+  InputWantedValueChange: Function;
+  InputWantedPressEnter: Function;
+  InputWantedOnBlur: Function;
+  InputWantedClear: Function;
+  CloseFunction: Function;
+}
+interface WantedpaymentViewState {
+  payment?: number
+}
+
+class WantedpaymentView extends React.Component<WantedpaymentViewProps, WantedpaymentViewState> {
+  constructor(props: WantedpaymentViewProps) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    const { current_wanted } = this.props; 
+    return (
+      <div className={styles.wrapper}>
+        <header>设置悬赏金额</header>
+        <section className={styles.wanted_middle}>
+          <img className={styles.wanted_cover} src={wantedCover} alt="wanted_image"/>
+          <div>悬赏提问</div>
+        </section>
+        <Divider style={{ minWidth: 'auto', marginLeft: 'auto', marginRight: 'auto', width: '266px'}} />
+        <section className={styles.wanted_bottom}>
+          <div className={styles.wanted_bottom_title}>设置悬赏金额范围¥5.00～¥10000</div>
+          <Input
+            className={styles.wanted_input_number}
+            suffix="元"
+            value={current_wanted || ''}
+            onChange={v => {
+              if (!/^[.0-9]*$/g.test(v.target.value)) return;
+              this.props.InputWantedValueChange(v.target.value);
+            }}
+            onPressEnter={() => {
+              this.props.InputWantedPressEnter(current_wanted);
+            }}
+            onBlur={() => {
+              this.props.InputWantedOnBlur(current_wanted);
+            }}
+            autoFocus
+          />
+          <div className={styles.wanted_bottom_tips}>
+            若5天内没人回答该问题, 所支付的金额将退还至您的钱包
+          </div>
+        </section>
+        <footer>
+          <Button
+            className={styles.wanted_confirm_button}
+            onClick={() => this.props.CloseFunction()}
+          >
+            确定
+          </Button>
+          <div
+            role="button"
+            tabIndex={-1}
+            onClick={() => this.props.InputWantedClear()}
+            className={styles.wanted_cancel_button}
+          >
+            取消悬赏
+          </div>
+        </footer>
+      </div>
+    )
+  }
+}
+
+export default WantedpaymentView;

stories/Editor.stories.tsx

@@ -9,6 +9,8 @@ import RichTextEditor from '@components/Editor/RichTextEditor';
 import RichTextEditorForSlate from '@components/Editor/RichTextEditorForSlate';
 import { BarftEditorPage } from '@components/Editor/BraftEditor';
 
+import EditorData from './data/articleData.json';
+
 const stories = storiesOf('Editor', module);
 stories.addDecorator((storyFn) => <div style={{padding: "0px 40px"}}>{storyFn()}</div>)
 stories.addDecorator(withKnobs);
@@ -44,7 +46,7 @@ stories.add(
 stories.add(
   'BraftEditor',
   () => (
-      <BarftEditorPage />
+      <BarftEditorPage value={EditorData.text} />
   ),
   {
     info: {

stories/Payment.stories.tsx

@@ -14,7 +14,9 @@ import PriceOptionsDoc from '@components/Payment/PriceOptions/README.md';
 import WaitPayInfoView from '@/components/Payment/WaitPayInfoView';
 import WaitPayInfoViewDoc from '@components/Payment/WaitPayInfoView/README.md';
 
-import { consumeList as consumeData} from './data/consumeList.json';
+import { consumeList} from './data/consumeList.json';
+
+const consumeData: any = consumeList;
 
 const stories = storiesOf('Payment', module);
 stories.addDecorator((storyFn) => <div style={{padding: "0px 40px"}}>{storyFn()}</div>)
@@ -112,6 +114,7 @@ stories.add(
         onPriceChange={(v) => setPrice(v)}
         size={select("size", { Small: "small", Normal: "normal", Large: "large"}, "normal")}
         withTitle={boolean("withTitle", false)}
+        titleText="Price Title"
         focusScroll={boolean("focusScroll", false)}
         inputRef={refInput}
       />