OrderCreate.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786
  1. /* eslint-disable no-trailing-spaces */
  2. import React, { Component } from 'react';
  3. import { connect } from 'dva';
  4. import { Tooltip, Card, Modal, Form, Table, List, Steps, Select, Button, Input, Icon } from 'antd';
  5. import Ellipsis from '../../../components/Ellipsis';
  6. import Selector from '../../../components/AXTableSelector/Selector';
  7. import FooterToolbar from '../../../components/FooterToolbar';
  8. import { checkProductType, toDecimal2 } from '../../../utils/utils';
  9. import { Hotax } from '../../../utils/config';
  10. import styles from './OrderCreate.less';
  11. const formItemLayout = {
  12. labelCol: {
  13. xs: { span: 24 },
  14. sm: { span: 7 },
  15. },
  16. wrapperCol: {
  17. xs: { span: 24 },
  18. sm: { span: 14 },
  19. md: { span: 10 },
  20. },
  21. };
  22. @connect(({ terminal, shelves, trade, loading }) => ({
  23. trade,
  24. shelves,
  25. terminal,
  26. sLoading: loading.models.shelves,
  27. tLoading: loading.models.terminal,
  28. submitting: loading.models.trade,
  29. }))
  30. @Form.create()
  31. export default class OrderCreatePage extends Component {
  32. state = {
  33. currentStep: 0,
  34. selectedGoods: [],
  35. adjustPrice: 0,
  36. deliveryInfo: {},
  37. terminalSelectorDestroy: true,
  38. goodsSelectorDestroy: true,
  39. packageFixModalDestroy: true,
  40. packageContent: {},
  41. width: '100%',
  42. };
  43. componentDidMount() {
  44. // 监听视图窗口变化
  45. window.addEventListener('resize', this.resizeFooterToolbar);
  46. this.resizeFooterToolbar();
  47. }
  48. componentWillUnmount() {
  49. window.removeEventListener('resize', this.resizeFooterToolbar);
  50. }
  51. resizeFooterToolbar = () => {
  52. const sider = document.querySelectorAll('.ant-layout-sider')[0];
  53. const width = `calc(100% - ${sider.style.width})`;
  54. if (this.state.width !== width) {
  55. this.setState({ width });
  56. }
  57. };
  58. // 终端模态选择器显示
  59. handleTerminalSelectorModalShow = () => {
  60. this.setState({
  61. terminalSelectorDestroy: false,
  62. });
  63. this.props.dispatch({
  64. type: 'terminal/fetchTerminalList',
  65. payload: {},
  66. });
  67. };
  68. // 终端模态选择器完成
  69. handleTerminalSelectorFinish = (rows) => {
  70. this.setState({
  71. terminalSelectorDestroy: true,
  72. });
  73. if (!rows || !rows.length) {
  74. return;
  75. }
  76. const {
  77. id, code, name, campusName, merchantId, contactName, mobile, address,
  78. } = rows[0];
  79. this.setState({
  80. deliveryInfo: {
  81. id, code, name, campusName, merchantId, contactName, mobile, address,
  82. },
  83. });
  84. };
  85. // 终端模态选择器取消
  86. handleTerminalSelectorCancel = () => {
  87. this.setState({
  88. terminalSelectorDestroy: true,
  89. });
  90. };
  91. // 终端模态选择器变化
  92. handleTerminalSelectorChange = (params) => {
  93. this.props.dispatch({
  94. type: 'terminal/fetchTerminalList',
  95. payload: params,
  96. });
  97. };
  98. // 商品模态选择器展现
  99. handleGoodsSelectorModalShow = () => {
  100. const { deliveryInfo } = this.state;
  101. const { merchantId } = deliveryInfo;
  102. this.setState({
  103. goodsSelectorDestroy: false,
  104. });
  105. this.props.dispatch({
  106. type: 'shelves/fetchItemList',
  107. payload: { merchantId },
  108. });
  109. };
  110. // 商品模态选择器变化
  111. handleGoodsSelectorChange = (params) => {
  112. const { deliveryInfo } = this.state;
  113. const { merchantId } = deliveryInfo;
  114. this.props.dispatch({
  115. type: 'shelves/fetchItemList',
  116. payload: { merchantId, ...params },
  117. });
  118. };
  119. // 商品模态选择器完成
  120. handleGoodsSelectorFinish = (rows) => {
  121. // 去掉没有定价的商品
  122. const newRows = rows.filter((row) => {
  123. return !(!row.goods || !row.goods.length);
  124. });
  125. this.setState({
  126. goodsSelectorDestroy: true,
  127. selectedGoods: newRows,
  128. });
  129. };
  130. // 商品模态选择器取消
  131. handleGoodsSelectorCancel = () => {
  132. this.setState({
  133. goodsSelectorDestroy: true,
  134. });
  135. };
  136. // 套餐包详情模态框展现
  137. handlePackageFixModalShow = (contents) => {
  138. this.setState({
  139. packageFixModalDestroy: false,
  140. packageContent: contents,
  141. });
  142. };
  143. // 套餐包详情模态框取消
  144. handlePackageFixCancel = () => {
  145. this.setState({
  146. packageFixModalDestroy: true,
  147. });
  148. };
  149. // 响应价格变化
  150. handleGoodsSelectChange = (rowIndex, goodsId) => {
  151. const { selectedGoods } = this.state;
  152. const targetRow = selectedGoods[rowIndex];
  153. const { goods } = targetRow;
  154. const targetGoods = goods.find(goodsItem => goodsItem.id === goodsId);
  155. if (targetGoods) {
  156. targetRow.selectedGoodsId = targetGoods.id;
  157. targetRow.selectedChargeUnit = targetGoods.chargeUnit;
  158. targetRow.selectedPrice = targetGoods.merchantPrice;
  159. selectedGoods[rowIndex] = targetRow;
  160. this.setState({ selectedGoods });
  161. }
  162. };
  163. // 响应数量变化 - 填写
  164. handleQuantityInputChange = (rowIndex, e) => {
  165. const { selectedGoods } = this.state;
  166. const targetRow = selectedGoods[rowIndex];
  167. targetRow.quantity = e.target.value;
  168. selectedGoods[rowIndex] = targetRow;
  169. this.setState({ selectedGoods });
  170. };
  171. // 响应数量变化 - 加减
  172. handleQuantityStepChange = (rowIndex, type) => {
  173. const { selectedGoods } = this.state;
  174. const targetRow = selectedGoods[rowIndex];
  175. const { quantity } = targetRow;
  176. if (type === 'plus') {
  177. targetRow.quantity = quantity + 1;
  178. } else if (type === 'minus' && quantity > 1) {
  179. targetRow.quantity = quantity - 1;
  180. }
  181. selectedGoods[rowIndex] = targetRow;
  182. this.setState({ selectedGoods });
  183. };
  184. // 优惠价格调整
  185. handleAdjustPriceChange = (value) => {
  186. this.setState({ adjustPrice: value });
  187. };
  188. // 下一步
  189. nextStep = () => {
  190. const { currentStep } = this.state;
  191. if (currentStep === 0) {
  192. this.props.form.validateFieldsAndScroll((error, values) => {
  193. if (!error) {
  194. this.setState({
  195. currentStep: this.state.currentStep + 1,
  196. deliveryInfo: {
  197. ...this.state.deliveryInfo,
  198. ...values,
  199. },
  200. });
  201. }
  202. });
  203. return;
  204. }
  205. this.setState({ currentStep: this.state.currentStep + 1 });
  206. };
  207. // 上一步
  208. prevStep = () => {
  209. this.setState({ currentStep: this.state.currentStep - 1 });
  210. };
  211. // 提交订单
  212. handleSubmitOrder = (goodsList) => {
  213. const { deliveryInfo, adjustPrice } = this.state;
  214. const { id, contactName, mobile, address } = deliveryInfo;
  215. const goods = goodsList.map(item => ({
  216. goodsId: item.selectedGoodsId,
  217. quantity: item.quantity,
  218. }));
  219. const jsonBody = {
  220. mobile,
  221. address,
  222. goods,
  223. adjustPrice,
  224. uid: id,
  225. name: contactName,
  226. status: Hotax.ORDER_UNPAID,
  227. };
  228. this.props.dispatch({
  229. type: 'trade/createOrderItem',
  230. payload: jsonBody,
  231. });
  232. };
  233. render() {
  234. const {
  235. currentStep, selectedGoods, adjustPrice = 0, deliveryInfo, packageContent,
  236. terminalSelectorDestroy, goodsSelectorDestroy, packageFixModalDestroy,
  237. } = this.state;
  238. const {
  239. code, name, campusName, contactName, mobile, address,
  240. } = deliveryInfo;
  241. const { terminal, tLoading, shelves, sLoading, form } = this.props;
  242. const { getFieldDecorator } = form;
  243. // ##### Card1: 终端选择及收货信息填写 #####
  244. const terminalInfoCard = () => {
  245. const getTerminalModal = () => {
  246. return (
  247. <Modal
  248. visible
  249. width={1100}
  250. footer={null}
  251. title="终端列表"
  252. maskClosable={false}
  253. onCancel={this.handleTerminalSelectorCancel}
  254. >
  255. <Selector
  256. multiple={false}
  257. loading={tLoading}
  258. selectorName="Terminal"
  259. list={terminal.list}
  260. pageNo={terminal.pageNo}
  261. pageSize={terminal.pageSize}
  262. totalSize={terminal.totalSize}
  263. onCancel={this.handleTerminalSelectorCancel}
  264. onChange={this.handleTerminalSelectorChange}
  265. onFinish={this.handleTerminalSelectorFinish}
  266. />
  267. </Modal>
  268. );
  269. };
  270. return (
  271. <Card title="终端信息" style={{ marginTop: 10, marginBottom: 70 }}>
  272. <Form>
  273. <Form.Item
  274. {...formItemLayout}
  275. label={<Button size="small" type="primary" onClick={this.handleTerminalSelectorModalShow}>选择终端</Button>}
  276. >
  277. <List
  278. bordered
  279. size="small"
  280. dataSource={[
  281. `终端编号: ${code || ''}`,
  282. `终端名称: ${name || ''}`,
  283. `所属校区: ${campusName || ''}`,
  284. ]}
  285. renderItem={item => <List.Item>{item}</List.Item>}
  286. />
  287. </Form.Item>
  288. <Form.Item label="收货人" {...formItemLayout}>
  289. {getFieldDecorator('contactName', {
  290. rules: [{ required: true, message: '请填写收货人' }],
  291. initialValue: contactName,
  292. })(
  293. <Input placeholder="请填写" />
  294. )}
  295. </Form.Item>
  296. <Form.Item label="收货地址" {...formItemLayout}>
  297. {getFieldDecorator('address', {
  298. rules: [{ required: true, message: '请填写收货地址' }],
  299. initialValue: address,
  300. })(
  301. <Input placeholder="请填写" />
  302. )}
  303. </Form.Item>
  304. <Form.Item label="手机号码" {...formItemLayout}>
  305. {getFieldDecorator('mobile', {
  306. rules: [
  307. {
  308. required: true, message: '请填写联系电话',
  309. }, {
  310. pattern: /^[1][34578][0-9]{9}$/g, message: '请输入11位有效手机号!',
  311. },
  312. ],
  313. initialValue: mobile,
  314. })(
  315. <Input placeholder="请填写" />
  316. )}
  317. </Form.Item>
  318. </Form>
  319. {!terminalSelectorDestroy && getTerminalModal()}
  320. </Card>
  321. );
  322. };
  323. // ##### Card2: 商品选择 #####
  324. const rowDataFormatter = (rows) => {
  325. // 默认选定第一个价格类型
  326. const findSelectedPrice = (goodsArr) => {
  327. if (!goodsArr) { return; }
  328. let selectedGoodsId = null;
  329. let selectedChargeUnit = null;
  330. let selectedPrice = null;
  331. goodsArr.forEach((item, index) => {
  332. if (index === 0) {
  333. selectedGoodsId = item.id;
  334. selectedChargeUnit = item.chargeUnit;
  335. selectedPrice = parseInt(item.merchantPrice, 10);
  336. }
  337. });
  338. return { selectedGoodsId, selectedChargeUnit, selectedPrice };
  339. };
  340. const newRows = [];
  341. for (let row of rows) {
  342. // 设置默认数量
  343. if (!row.quantity) {
  344. row.quantity = 1;
  345. }
  346. // 设置默认选中价格
  347. if (!row.selectedGoodsId) {
  348. const price = findSelectedPrice(row.goods);
  349. row = { ...row, ...price };
  350. }
  351. // 小计
  352. row.subTotal = row.quantity * row.selectedPrice;
  353. newRows.push(row);
  354. }
  355. return newRows;
  356. };
  357. // 按需求处理后的数据
  358. const formattedDataSource = rowDataFormatter(selectedGoods);
  359. // 计算总价
  360. const computeTotalPrice = (rows) => {
  361. let sum = 0;
  362. rows.forEach((row) => {
  363. sum += row.subTotal;
  364. });
  365. return sum;
  366. };
  367. const totalPrice = computeTotalPrice(formattedDataSource);
  368. const goodsSelectCard = () => {
  369. const getGoodsModal = () => {
  370. return (
  371. <Modal
  372. visible
  373. width={1100}
  374. footer={null}
  375. title="商品列表"
  376. maskClosable={false}
  377. onCancel={this.handleGoodsSelectorCancel}
  378. >
  379. <Selector
  380. multiple
  381. loading={sLoading}
  382. selectorName="Product"
  383. list={shelves.list}
  384. pageNo={shelves.pageNo}
  385. pageSize={shelves.pageSize}
  386. totalSize={shelves.totalSize}
  387. selectedRows={selectedGoods}
  388. onCancel={this.handleGoodsSelectorCancel}
  389. onChange={this.handleGoodsSelectorChange}
  390. onFinish={this.handleGoodsSelectorFinish}
  391. />
  392. </Modal>
  393. );
  394. };
  395. // 修正课程包内配套数量
  396. const getPackageFixModal = () => {
  397. const { products } = packageContent;
  398. const packageColumns = [{
  399. title: '产品编号',
  400. dataIndex: 'code',
  401. key: 'code',
  402. width: '20%',
  403. }, {
  404. title: '产品名称',
  405. dataIndex: 'name',
  406. key: 'name',
  407. width: '40%',
  408. }, {
  409. title: '产品类型',
  410. dataIndex: 'type',
  411. key: 'type',
  412. render: text => checkProductType(text),
  413. width: '20%',
  414. align: 'center',
  415. }, {
  416. title: '单价',
  417. dataIndex: 'merchantPrice',
  418. key: 'merchantPrice',
  419. width: '20%',
  420. render: (text, record) => {
  421. if (record.type !== Hotax.PRODUCT_SUPPORT) {
  422. return '-';
  423. }
  424. return `¥${text}/件`;
  425. },
  426. align: 'center',
  427. /* TODO: 套餐包内配套数量修改
  428. }, {
  429. title: '数量',
  430. dataIndex: 'quantity',
  431. key: 'quantity',
  432. width: '20%',
  433. render: (text, record, index) => {
  434. if (record.type !== Hotax.PRODUCT_SUPPORT) {
  435. return '-';
  436. }
  437. return (
  438. <Input
  439. style={{ width: 150 }}
  440. addonBefore={
  441. <Icon
  442. type="minus"
  443. className={styles.icon}
  444. onClick={() => this.handleQuantityStepChange(index, 'minus', record.id)}
  445. />
  446. }
  447. addonAfter={
  448. <Icon
  449. type="plus"
  450. className={styles.icon}
  451. onClick={() => this.handleQuantityStepChange(index, 'plus', record.id)}
  452. />
  453. }
  454. value={text}
  455. onChange={e => this.handleQuantityInputChange(index, e, record.id)}
  456. />
  457. );
  458. },
  459. align: 'center',
  460. */
  461. }];
  462. return (
  463. <Modal
  464. visible
  465. width={1100}
  466. title="套餐包详情"
  467. maskClosable={false}
  468. onCancel={this.handlePackageFixCancel}
  469. >
  470. <Table
  471. bordered
  472. pagination={false}
  473. columns={packageColumns}
  474. dataSource={products}
  475. rowKey={record => record.id}
  476. scroll={{ y: 500 }}
  477. />
  478. </Modal>
  479. );
  480. };
  481. const goodsColumns = [{
  482. title: '商品编号',
  483. dataIndex: 'code',
  484. key: 0,
  485. render: (text, record) => {
  486. if (record.type === Hotax.PRODUCT_PACKAGE) {
  487. return (
  488. <Tooltip placement="top" title="点击查看套餐包内容">
  489. <a className="a-link" onClick={() => this.handlePackageFixModalShow(record)}>{text}</a>
  490. </Tooltip>
  491. );
  492. }
  493. return text;
  494. },
  495. width: '17%',
  496. }, {
  497. title: '商品名称',
  498. dataIndex: 'name',
  499. key: 1,
  500. width: '28%',
  501. render: text => (
  502. <Ellipsis tooltip lines={1}>{text}</Ellipsis>
  503. ),
  504. }, {
  505. title: '商品类型',
  506. key: 2,
  507. dataIndex: 'type',
  508. render: text => checkProductType(text),
  509. width: '12%',
  510. align: 'center',
  511. }, {
  512. title: '单价',
  513. key: 3,
  514. dataIndex: 'goods',
  515. render: (goodsArr, record, index) => {
  516. if (!goodsArr) {
  517. return null;
  518. }
  519. return (
  520. <Select
  521. style={{ width: 150 }}
  522. value={record.selectedGoodsId}
  523. onChange={goodsId => this.handleGoodsSelectChange(index, goodsId)}
  524. >
  525. {
  526. goodsArr.map(item => (
  527. <Select.Option key={item.id} value={item.id}>
  528. {`¥${item.merchantPrice}/${item.chargeUnit}`}
  529. </Select.Option>
  530. ))
  531. }
  532. </Select>
  533. );
  534. },
  535. width: '12%',
  536. align: 'center',
  537. }, {
  538. title: '数量',
  539. key: 4,
  540. dataIndex: 'quantity',
  541. width: '13%',
  542. render: (text, _, index) => {
  543. return (
  544. <Input
  545. style={{ width: 150 }}
  546. addonBefore={
  547. <Icon
  548. type="minus"
  549. className={styles.icon}
  550. onClick={() => this.handleQuantityStepChange(index, 'minus')}
  551. />
  552. }
  553. addonAfter={
  554. <Icon
  555. type="plus"
  556. className={styles.icon}
  557. onClick={() => this.handleQuantityStepChange(index, 'plus')}
  558. />
  559. }
  560. value={text}
  561. onChange={e => this.handleQuantityInputChange(index, e)}
  562. />
  563. );
  564. },
  565. align: 'center',
  566. }, {
  567. title: '小计',
  568. key: 5,
  569. dataIndex: 'subTotal',
  570. width: '13%',
  571. render: text => (
  572. <span style={{ fontWeight: 500 }}>{`¥${text}`}</span>
  573. ),
  574. align: 'center',
  575. }];
  576. return (
  577. <Card
  578. title={<Button type="primary" onClick={this.handleGoodsSelectorModalShow}>选择商品</Button>}
  579. style={{ marginTop: 10, marginBottom: 70 }}
  580. >
  581. <Table
  582. border={false}
  583. pagination={false}
  584. columns={goodsColumns}
  585. dataSource={formattedDataSource}
  586. rowKey={record => record.id}
  587. />
  588. {!goodsSelectorDestroy && getGoodsModal()}
  589. {!packageFixModalDestroy && getPackageFixModal()}
  590. </Card>
  591. );
  592. };
  593. // ##### Card3: 确认订单 #####
  594. const confirmInfoCard = () => {
  595. const columns = [{
  596. title: '商品名称',
  597. dataIndex: 'name',
  598. key: 1,
  599. width: '20%',
  600. }, {
  601. title: '商品编号',
  602. dataIndex: 'code',
  603. key: 2,
  604. width: '20%',
  605. }, {
  606. title: '商品类型',
  607. dataIndex: 'type',
  608. key: 3,
  609. align: 'center',
  610. render: text => checkProductType(text),
  611. width: '12%',
  612. }, {
  613. title: '单价',
  614. dataIndex: 'selectedPrice',
  615. key: 4,
  616. align: 'center',
  617. render: text => `¥${text}`,
  618. width: '12%',
  619. }, {
  620. title: '数量',
  621. dataIndex: 'quantity',
  622. key: 5,
  623. align: 'center',
  624. render: text => `×${text}`,
  625. width: '12%',
  626. }, {
  627. title: '单位',
  628. dataIndex: 'selectedChargeUnit',
  629. key: 6,
  630. align: 'center',
  631. width: '12%',
  632. }, {
  633. title: '小计',
  634. dataIndex: 'subTotal',
  635. key: 7,
  636. align: 'center',
  637. render: text => `¥${text}`,
  638. width: '12%',
  639. }];
  640. return (
  641. <div>
  642. <Card title="商品清单" style={{ marginTop: 10 }}>
  643. <Table
  644. bordered
  645. columns={columns}
  646. pagination={false}
  647. rowKey={record => record.id}
  648. dataSource={formattedDataSource}
  649. />
  650. </Card>
  651. <Card title="收货信息" style={{ marginTop: 10, marginBottom: 70 }}>
  652. <List
  653. bordered
  654. size="small"
  655. dataSource={[
  656. `终端账号: ${code || ''}`,
  657. `收货人: ${contactName || ''}`,
  658. `收货地址: ${address || ''}`,
  659. `手机号码: ${mobile || ''}`,
  660. ]}
  661. renderItem={item => <List.Item>{item}</List.Item>}
  662. />
  663. </Card>
  664. </div>
  665. );
  666. };
  667. // 步骤条配置
  668. const steps = [{
  669. title: '选择购买终端',
  670. stepKey: 0,
  671. icon: 'shop',
  672. content: terminalInfoCard(),
  673. }, {
  674. title: '选择商品',
  675. stepKey: 1,
  676. icon: 'environment',
  677. content: goodsSelectCard(),
  678. }, {
  679. title: '确认订单',
  680. stepKey: 2,
  681. icon: 'profile',
  682. content: confirmInfoCard(),
  683. }];
  684. return (
  685. <div>
  686. <Steps current={currentStep}>
  687. {steps.map((item, index) =>
  688. (
  689. <Steps.Step
  690. key={item.stepKey}
  691. title={item.title}
  692. icon={<Icon type={steps[index].icon} />}
  693. />
  694. )
  695. )}
  696. </Steps>
  697. {steps[currentStep].content}
  698. <FooterToolbar
  699. extra={
  700. <div>
  701. <span className={styles.quantity}>
  702. 已选择&nbsp;
  703. <span style={{ color: '#f60', fontWeight: 500 }}>
  704. {selectedGoods.length}
  705. </span>
  706. &nbsp;件商品
  707. </span>
  708. {/*
  709. <span className={styles.adjustPrice}>
  710. <span style={{ color: '#2f7d0d' }}>
  711. 优惠:&nbsp;&nbsp;¥&nbsp;
  712. </span>
  713. <InputNumber
  714. min={0}
  715. max={totalPrice}
  716. size="small"
  717. value={adjustPrice}
  718. onChange={this.handleAdjustPriceChange}
  719. />
  720. </span>
  721. */}
  722. <span className={styles.totalPrice}>
  723. 总价:&nbsp;&nbsp;&nbsp;
  724. <span style={{ color: '#f60', fontSize: 24 }}>
  725. {`¥ ${toDecimal2(totalPrice - adjustPrice)}`}
  726. </span>
  727. </span>
  728. </div>
  729. }
  730. style={{ width: this.state.width }}
  731. >
  732. {
  733. (currentStep > 0) && (
  734. <Button onClick={this.prevStep}>
  735. {`上一步: ${steps[currentStep - 1].title}`}
  736. </Button>
  737. )
  738. }
  739. {/* 步骤一:选择终端 */}
  740. {
  741. (currentStep === 0) && (
  742. <Button
  743. type="primary"
  744. disabled={Object.keys(deliveryInfo).length === 0}
  745. onClick={this.nextStep}
  746. >
  747. {`下一步: ${steps[currentStep + 1].title}`}
  748. </Button>
  749. )
  750. }
  751. {/* 步骤二:选择产品 */}
  752. {
  753. (currentStep === 1) && (
  754. <Button
  755. type="primary"
  756. disabled={Object.keys(selectedGoods).length === 0}
  757. onClick={this.nextStep}
  758. >
  759. {`下一步: ${steps[currentStep + 1].title}`}
  760. </Button>
  761. )
  762. }
  763. {/* 步骤三:确认订单 */}
  764. {
  765. (currentStep === 2) && (
  766. <Button
  767. type="primary"
  768. onClick={() => this.handleSubmitOrder(formattedDataSource)}
  769. >
  770. 确认下单
  771. </Button>
  772. )
  773. }
  774. </FooterToolbar>
  775. </div>
  776. );
  777. }
  778. }