|
@@ -0,0 +1,676 @@
|
|
|
+/* eslint-disable no-trailing-spaces */
|
|
|
+import React, { Component } from 'react';
|
|
|
+import { connect } from 'dva';
|
|
|
+import { Card, Modal, Form, Table, List, Steps, Select, Button, Input, InputNumber, Icon } from 'antd';
|
|
|
+import Selector from '../../../components/RBTableSelector/Selector';
|
|
|
+import FooterToolbar from '../../../components/FooterToolbar';
|
|
|
+import { checkProductType, toDecimal2 } from '../../../utils/utils';
|
|
|
+import { ORDER_UNPAID } from '../../../utils/config';
|
|
|
+import styles from './OrderCreate.less';
|
|
|
+
|
|
|
+const formItemLayout = {
|
|
|
+ labelCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 7 },
|
|
|
+ },
|
|
|
+ wrapperCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 14 },
|
|
|
+ md: { span: 10 },
|
|
|
+ },
|
|
|
+};
|
|
|
+
|
|
|
+@connect(({ terminal, shelves, trade, loading }) => ({
|
|
|
+ trade,
|
|
|
+ shelves,
|
|
|
+ terminal,
|
|
|
+ sLoading: loading.models.shelves,
|
|
|
+ tLoading: loading.models.terminal,
|
|
|
+ submitting: loading.models.trade,
|
|
|
+}))
|
|
|
+@Form.create()
|
|
|
+export default class OrderCreatePage extends Component {
|
|
|
+ state = {
|
|
|
+ currentStep: 0,
|
|
|
+ selectedGoods: [],
|
|
|
+ adjustPrice: 0,
|
|
|
+ deliveryInfo: {},
|
|
|
+ terminalSelectorDestroy: true,
|
|
|
+ goodsSelectorDestroy: true,
|
|
|
+ width: '100%',
|
|
|
+ };
|
|
|
+ componentDidMount() {
|
|
|
+ // 监听视图窗口变化
|
|
|
+ window.addEventListener('resize', this.resizeFooterToolbar);
|
|
|
+ this.resizeFooterToolbar();
|
|
|
+ }
|
|
|
+ componentWillUnmount() {
|
|
|
+ window.removeEventListener('resize', this.resizeFooterToolbar);
|
|
|
+ }
|
|
|
+ resizeFooterToolbar = () => {
|
|
|
+ const sider = document.querySelectorAll('.ant-layout-sider')[0];
|
|
|
+ const width = `calc(100% - ${sider.style.width})`;
|
|
|
+ if (this.state.width !== width) {
|
|
|
+ this.setState({ width });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 终端模态选择器显示
|
|
|
+ handleTerminalSelectorModalShow = () => {
|
|
|
+ this.setState({
|
|
|
+ terminalSelectorDestroy: false,
|
|
|
+ });
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'terminal/fetchTerminalList',
|
|
|
+ payload: {},
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 终端模态选择器完成
|
|
|
+ handleTerminalSelectorFinish = (rows) => {
|
|
|
+ this.setState({
|
|
|
+ terminalSelectorDestroy: true,
|
|
|
+ });
|
|
|
+ if (!rows || !rows.length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const {
|
|
|
+ id, code, name, campusName, merchantId, merchantName, contactName, mobile, address,
|
|
|
+ } = rows[0];
|
|
|
+ this.setState({
|
|
|
+ deliveryInfo: {
|
|
|
+ id, code, name, campusName, merchantId, merchantName, contactName, mobile, address,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ };
|
|
|
+ // 终端模态选择器取消
|
|
|
+ handleTerminalSelectorCancel = () => {
|
|
|
+ this.setState({
|
|
|
+ terminalSelectorDestroy: true,
|
|
|
+ });
|
|
|
+ };
|
|
|
+ // 终端模态选择器变化
|
|
|
+ handleTerminalSelectorChange = (params) => {
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'terminal/fetchTerminalList',
|
|
|
+ payload: params,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 商品模态选择器展现
|
|
|
+ handleGoodsSelectorModalShow = () => {
|
|
|
+ const { deliveryInfo } = this.state;
|
|
|
+ const { merchantId } = deliveryInfo;
|
|
|
+ this.setState({
|
|
|
+ goodsSelectorDestroy: false,
|
|
|
+ });
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'shelves/fetchItemList',
|
|
|
+ payload: { merchantId },
|
|
|
+ });
|
|
|
+ };
|
|
|
+ // 商品模态选择器变化
|
|
|
+ handleGoodsSelectorChange = (params) => {
|
|
|
+ const { deliveryInfo } = this.state;
|
|
|
+ const { merchantId } = deliveryInfo;
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'shelves/fetchItemList',
|
|
|
+ payload: { merchantId, ...params },
|
|
|
+ });
|
|
|
+ };
|
|
|
+ // 商品模态选择器完成
|
|
|
+ handleGoodsSelectorFinish = (rows) => {
|
|
|
+ // 去掉没有定价的商品
|
|
|
+ const newRows = rows.filter((row) => {
|
|
|
+ if (!row.goods || !row.goods.length) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ });
|
|
|
+ this.setState({
|
|
|
+ goodsSelectorDestroy: true,
|
|
|
+ selectedGoods: newRows,
|
|
|
+ });
|
|
|
+ };
|
|
|
+ // 商品模态选择器取消
|
|
|
+ handleGoodsSelectorCancel = () => {
|
|
|
+ this.setState({
|
|
|
+ goodsSelectorDestroy: true,
|
|
|
+ });
|
|
|
+ };
|
|
|
+ // 响应价格变化
|
|
|
+ handleGoodsSelectChange = (rowIndex, goodsId) => {
|
|
|
+ const { selectedGoods } = this.state;
|
|
|
+ const targetRow = selectedGoods[rowIndex];
|
|
|
+ const { goods } = targetRow;
|
|
|
+ const targetGoods = goods.find(goodsItem => goodsItem.id === goodsId);
|
|
|
+ if (targetGoods) {
|
|
|
+ targetRow.selectedGoodsId = targetGoods.id;
|
|
|
+ targetRow.selectedChargeUnit = targetGoods.chargeUnit;
|
|
|
+ targetRow.selectedPrice = targetGoods.merchantPrice;
|
|
|
+ selectedGoods[rowIndex] = targetRow;
|
|
|
+ this.setState({ selectedGoods });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 响应数量变化 - 填写
|
|
|
+ handleQuantityInputChange = (rowIndex, e) => {
|
|
|
+ const { selectedGoods } = this.state;
|
|
|
+ const targetRow = selectedGoods[rowIndex];
|
|
|
+ targetRow.quantity = e.target.value;
|
|
|
+ selectedGoods[rowIndex] = targetRow;
|
|
|
+ this.setState({ selectedGoods });
|
|
|
+ }
|
|
|
+ // 响应数量变化 - 加减
|
|
|
+ handleQuantityStepChange = (rowIndex, type) => {
|
|
|
+ const { selectedGoods } = this.state;
|
|
|
+ const targetRow = selectedGoods[rowIndex];
|
|
|
+ const { quantity } = targetRow;
|
|
|
+ if (type === 'plus') {
|
|
|
+ targetRow.quantity = quantity + 1;
|
|
|
+ } else if (type === 'minus' && quantity > 1) {
|
|
|
+ targetRow.quantity = quantity - 1;
|
|
|
+ }
|
|
|
+ selectedGoods[rowIndex] = targetRow;
|
|
|
+ this.setState({ selectedGoods });
|
|
|
+ }
|
|
|
+ // 优惠价格调整
|
|
|
+ handleAdjustPriceChange = (value) => {
|
|
|
+ this.setState({ adjustPrice: value });
|
|
|
+ }
|
|
|
+ // 下一步
|
|
|
+ nextStep = () => {
|
|
|
+ const { currentStep } = this.state;
|
|
|
+ if (currentStep === 0) {
|
|
|
+ this.props.form.validateFieldsAndScroll((error, values) => {
|
|
|
+ if (!error) {
|
|
|
+ this.setState({
|
|
|
+ currentStep: this.state.currentStep + 1,
|
|
|
+ deliveryInfo: {
|
|
|
+ ...this.state.deliveryInfo,
|
|
|
+ ...values,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.setState({ currentStep: this.state.currentStep + 1 });
|
|
|
+ }
|
|
|
+ // 上一步
|
|
|
+ prevStep = () => {
|
|
|
+ this.setState({ currentStep: this.state.currentStep - 1 });
|
|
|
+ }
|
|
|
+ // 提交订单
|
|
|
+ handleSubmitOrder = (goodsList) => {
|
|
|
+ const { deliveryInfo, adjustPrice } = this.state;
|
|
|
+ const { id, contactName, mobile, address } = deliveryInfo;
|
|
|
+ const goods = goodsList.map(item => ({
|
|
|
+ goodsId: item.selectedGoodsId,
|
|
|
+ quantity: item.quantity,
|
|
|
+ }));
|
|
|
+ const jsonBody = {
|
|
|
+ mobile,
|
|
|
+ address,
|
|
|
+ goods,
|
|
|
+ adjustPrice,
|
|
|
+ uid: id,
|
|
|
+ name: contactName,
|
|
|
+ status: ORDER_UNPAID,
|
|
|
+ };
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'trade/createOrderItem',
|
|
|
+ payload: jsonBody,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const {
|
|
|
+ currentStep, selectedGoods, adjustPrice = 0, deliveryInfo,
|
|
|
+ terminalSelectorDestroy, goodsSelectorDestroy,
|
|
|
+ } = this.state;
|
|
|
+ const {
|
|
|
+ code, name, campusName, merchantName, contactName, mobile, address,
|
|
|
+ } = deliveryInfo;
|
|
|
+ const { terminal, tLoading, shelves, sLoading, form } = this.props;
|
|
|
+ const { getFieldDecorator } = form;
|
|
|
+
|
|
|
+ // ##### Card1: 终端选择及收货信息填写 #####
|
|
|
+ const terminalInfoCard = () => {
|
|
|
+ const getTerminalModal = () => {
|
|
|
+ return (
|
|
|
+ <Modal
|
|
|
+ visible
|
|
|
+ width={1100}
|
|
|
+ footer={null}
|
|
|
+ title="终端列表"
|
|
|
+ maskClosable={false}
|
|
|
+ onCancel={this.handleTerminalSelectorCancel}
|
|
|
+ >
|
|
|
+ <Selector
|
|
|
+ multiple={false}
|
|
|
+ loading={tLoading}
|
|
|
+ selectorName="Terminal"
|
|
|
+ list={terminal.list}
|
|
|
+ pageNo={terminal.pageNo}
|
|
|
+ pageSize={terminal.pageSize}
|
|
|
+ totalSize={terminal.totalSize}
|
|
|
+ onCancel={this.handleTerminalSelectorCancel}
|
|
|
+ onChange={this.handleTerminalSelectorChange}
|
|
|
+ onFinish={this.handleTerminalSelectorFinish}
|
|
|
+ />
|
|
|
+ </Modal>
|
|
|
+ );
|
|
|
+ };
|
|
|
+ return (
|
|
|
+ <Card title="终端信息" style={{ marginTop: 10, marginBottom: 70 }}>
|
|
|
+ <Form>
|
|
|
+ <Form.Item
|
|
|
+ {...formItemLayout}
|
|
|
+ label={<a onClick={this.handleTerminalSelectorModalShow}>选择终端</a>}
|
|
|
+ >
|
|
|
+ <List
|
|
|
+ bordered
|
|
|
+ size="small"
|
|
|
+ dataSource={[
|
|
|
+ `终端编号: ${code || ''}`,
|
|
|
+ `终端名称: ${name || ''}`,
|
|
|
+ `所属校区: ${campusName || ''}`,
|
|
|
+ `所属渠道: ${merchantName || ''}`,
|
|
|
+ ]}
|
|
|
+ renderItem={item => <List.Item>{item}</List.Item>}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="收货人" {...formItemLayout}>
|
|
|
+ {getFieldDecorator('contactName', {
|
|
|
+ rules: [{ required: true, message: '请填写收货人' }],
|
|
|
+ initialValue: contactName,
|
|
|
+ })(
|
|
|
+ <Input placeholder="请填写" />
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="收货地址" {...formItemLayout}>
|
|
|
+ {getFieldDecorator('address', {
|
|
|
+ rules: [{ required: true, message: '请填写收货地址' }],
|
|
|
+ initialValue: address,
|
|
|
+ })(
|
|
|
+ <Input placeholder="请填写" />
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="手机号码" {...formItemLayout}>
|
|
|
+ {getFieldDecorator('mobile', {
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true, message: '请填写联系电话',
|
|
|
+ }, {
|
|
|
+ pattern: /^[1][34578][0-9]{9}$/g, message: '请输入11位有效手机号!',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ initialValue: mobile,
|
|
|
+ })(
|
|
|
+ <Input placeholder="请填写" />
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ {!terminalSelectorDestroy && getTerminalModal()}
|
|
|
+ </Card>
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ // ##### Card2: 商品选择 #####
|
|
|
+ const rowDataFormatter = (rows) => {
|
|
|
+ // 默认选定第一个价格类型
|
|
|
+ const findSelectedPrice = (goodsArr) => {
|
|
|
+ if (!goodsArr) { return; }
|
|
|
+ let selectedGoodsId = null;
|
|
|
+ let selectedChargeUnit = null;
|
|
|
+ let selectedPrice = null;
|
|
|
+ goodsArr.forEach((item, index) => {
|
|
|
+ if (index === 0) {
|
|
|
+ selectedGoodsId = item.id;
|
|
|
+ selectedChargeUnit = item.chargeUnit;
|
|
|
+ selectedPrice = parseInt(item.merchantPrice, 10);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return { selectedGoodsId, selectedChargeUnit, selectedPrice };
|
|
|
+ };
|
|
|
+ const newRows = [];
|
|
|
+ for (let row of rows) {
|
|
|
+ // 默认数量
|
|
|
+ if (!row.quantity) {
|
|
|
+ row.quantity = 1;
|
|
|
+ }
|
|
|
+ // 默认选中价格
|
|
|
+ if (!row.selectedGoodsId) {
|
|
|
+ const price = findSelectedPrice(row.goods);
|
|
|
+ row = { ...row, ...price };
|
|
|
+ }
|
|
|
+ // 小计
|
|
|
+ row.subTotal = row.quantity * row.selectedPrice;
|
|
|
+ newRows.push(row);
|
|
|
+ }
|
|
|
+ return newRows;
|
|
|
+ };
|
|
|
+ // 按需求处理后的数据
|
|
|
+ const formattedDataSource = rowDataFormatter(selectedGoods);
|
|
|
+ // 计算总价
|
|
|
+ const computeTotalPrice = (rows) => {
|
|
|
+ let sum = 0;
|
|
|
+ rows.forEach((row) => sum += row.subTotal);
|
|
|
+ return sum;
|
|
|
+ };
|
|
|
+ const totalPrice = computeTotalPrice(formattedDataSource);
|
|
|
+ const goodsSelectCard = () => {
|
|
|
+ const getGoodsModal = () => {
|
|
|
+ return (
|
|
|
+ <Modal
|
|
|
+ visible
|
|
|
+ width={1100}
|
|
|
+ footer={null}
|
|
|
+ title="商品列表"
|
|
|
+ maskClosable={false}
|
|
|
+ onCancel={this.handleGoodsSelectorCancel}
|
|
|
+ >
|
|
|
+ <Selector
|
|
|
+ multiple
|
|
|
+ loading={sLoading}
|
|
|
+ selectorName="Product"
|
|
|
+ list={shelves.list}
|
|
|
+ pageNo={shelves.pageNo}
|
|
|
+ pageSize={shelves.pageSize}
|
|
|
+ totalSize={shelves.totalSize}
|
|
|
+ selectedRows={selectedGoods}
|
|
|
+ onCancel={this.handleGoodsSelectorCancel}
|
|
|
+ onChange={this.handleGoodsSelectorChange}
|
|
|
+ onFinish={this.handleGoodsSelectorFinish}
|
|
|
+ />
|
|
|
+ </Modal>
|
|
|
+ );
|
|
|
+ };
|
|
|
+ const goodsColumns = [{
|
|
|
+ title: '商品编号',
|
|
|
+ dataIndex: 'code',
|
|
|
+ key: 0,
|
|
|
+ render: text => (
|
|
|
+ <a>{text}</a>
|
|
|
+ ),
|
|
|
+ width: '16%',
|
|
|
+ }, {
|
|
|
+ title: '商品名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ key: 1,
|
|
|
+ render: text => (
|
|
|
+ <a>{text}</a>
|
|
|
+ ),
|
|
|
+ width: '24%',
|
|
|
+ }, {
|
|
|
+ title: '商品类型',
|
|
|
+ key: 2,
|
|
|
+ dataIndex: 'type',
|
|
|
+ render: text => checkProductType(text),
|
|
|
+ width: '15%',
|
|
|
+ align: 'center',
|
|
|
+ }, {
|
|
|
+ title: '单价',
|
|
|
+ key: 3,
|
|
|
+ dataIndex: 'goods',
|
|
|
+ render: (goodsArr, record, index) => {
|
|
|
+ if (!goodsArr) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ <Select
|
|
|
+ style={{ width: 150 }}
|
|
|
+ value={record.selectedGoodsId}
|
|
|
+ onChange={goodsId => this.handleGoodsSelectChange(index, goodsId)}
|
|
|
+ >
|
|
|
+ {
|
|
|
+ goodsArr.map(item => (
|
|
|
+ <Select.Option key={item.id} value={item.id}>
|
|
|
+ {`¥${item.merchantPrice}/${item.chargeUnit}`}
|
|
|
+ </Select.Option>
|
|
|
+ ))
|
|
|
+ }
|
|
|
+ </Select>
|
|
|
+ );
|
|
|
+ },
|
|
|
+ width: '12%',
|
|
|
+ align: 'center',
|
|
|
+ }, {
|
|
|
+ title: '数量',
|
|
|
+ key: 4,
|
|
|
+ dataIndex: 'quantity',
|
|
|
+ width: '15%',
|
|
|
+ render: (text, _, index) => {
|
|
|
+ return (
|
|
|
+ <Input
|
|
|
+ style={{ width: 150 }}
|
|
|
+ addonBefore={
|
|
|
+ <Icon
|
|
|
+ type="minus"
|
|
|
+ className={styles.icon}
|
|
|
+ onClick={() => this.handleQuantityStepChange(index, 'minus')}
|
|
|
+ />
|
|
|
+ }
|
|
|
+ addonAfter={
|
|
|
+ <Icon
|
|
|
+ type="plus"
|
|
|
+ className={styles.icon}
|
|
|
+ onClick={() => this.handleQuantityStepChange(index, 'plus')}
|
|
|
+ />
|
|
|
+ }
|
|
|
+ value={text}
|
|
|
+ onChange={e => this.handleQuantityInputChange(index, e)}
|
|
|
+ />
|
|
|
+ );
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
+ }, {
|
|
|
+ title: '小计',
|
|
|
+ key: 5,
|
|
|
+ dataIndex: 'subTotal',
|
|
|
+ width: '13%',
|
|
|
+ render: text => (
|
|
|
+ <span style={{ fontWeight: 500 }}>{`¥${text}`}</span>
|
|
|
+ ),
|
|
|
+ align: 'center',
|
|
|
+ }];
|
|
|
+ return (
|
|
|
+ <Card
|
|
|
+ title={<a onClick={this.handleGoodsSelectorModalShow}>选择商品</a>}
|
|
|
+ style={{ marginTop: 10, marginBottom: 70 }}
|
|
|
+ >
|
|
|
+ <Table
|
|
|
+ border={false}
|
|
|
+ pagination={false}
|
|
|
+ columns={goodsColumns}
|
|
|
+ dataSource={formattedDataSource}
|
|
|
+ rowKey={record => record.id}
|
|
|
+ />
|
|
|
+ {!goodsSelectorDestroy && getGoodsModal()}
|
|
|
+ </Card>
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ // ##### Card3: 确认订单 #####
|
|
|
+ const confirmInfoCard = () => {
|
|
|
+ const columns = [{
|
|
|
+ title: '商品名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ key: 1,
|
|
|
+ width: '20%',
|
|
|
+ }, {
|
|
|
+ title: '商品编号',
|
|
|
+ dataIndex: 'code',
|
|
|
+ key: 2,
|
|
|
+ width: '20%',
|
|
|
+ }, {
|
|
|
+ title: '商品类型',
|
|
|
+ dataIndex: 'type',
|
|
|
+ key: 3,
|
|
|
+ align: 'center',
|
|
|
+ render: text => checkProductType(text),
|
|
|
+ width: '12%',
|
|
|
+ }, {
|
|
|
+ title: '单价',
|
|
|
+ dataIndex: 'selectedPrice',
|
|
|
+ key: 4,
|
|
|
+ align: 'center',
|
|
|
+ render: text => `¥${text}`,
|
|
|
+ width: '12%',
|
|
|
+ }, {
|
|
|
+ title: '数量',
|
|
|
+ dataIndex: 'quantity',
|
|
|
+ key: 5,
|
|
|
+ align: 'center',
|
|
|
+ render: text => `×${text}`,
|
|
|
+ width: '12%',
|
|
|
+ }, {
|
|
|
+ title: '单位',
|
|
|
+ dataIndex: 'selectedChargeUnit',
|
|
|
+ key: 6,
|
|
|
+ align: 'center',
|
|
|
+ width: '12%',
|
|
|
+ }, {
|
|
|
+ title: '小计',
|
|
|
+ dataIndex: 'subTotal',
|
|
|
+ key: 7,
|
|
|
+ align: 'center',
|
|
|
+ render: text => `¥${text}`,
|
|
|
+ width: '12%',
|
|
|
+ }];
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <Card title="商品清单" style={{ marginTop: 10 }}>
|
|
|
+ <Table
|
|
|
+ bordered
|
|
|
+ columns={columns}
|
|
|
+ pagination={false}
|
|
|
+ rowKey={record => record.id}
|
|
|
+ dataSource={formattedDataSource}
|
|
|
+ />
|
|
|
+ </Card>
|
|
|
+ <Card title="收货信息" style={{ marginTop: 10, marginBottom: 70 }}>
|
|
|
+ <List
|
|
|
+ bordered
|
|
|
+ size="small"
|
|
|
+ dataSource={[
|
|
|
+ `终端账号: ${code || ''}`,
|
|
|
+ `收货人: ${contactName || ''}`,
|
|
|
+ `收货地址: ${address || ''}`,
|
|
|
+ `手机号码: ${mobile || ''}`,
|
|
|
+ ]}
|
|
|
+ renderItem={item => <List.Item>{item}</List.Item>}
|
|
|
+ />
|
|
|
+ </Card>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ // 步骤条配置
|
|
|
+ const steps = [{
|
|
|
+ title: '选择购买终端',
|
|
|
+ stepKey: 0,
|
|
|
+ icon: 'shop',
|
|
|
+ content: terminalInfoCard(),
|
|
|
+ }, {
|
|
|
+ title: '选择商品',
|
|
|
+ stepKey: 1,
|
|
|
+ icon: 'environment',
|
|
|
+ content: goodsSelectCard(),
|
|
|
+ }, {
|
|
|
+ title: '确认订单',
|
|
|
+ stepKey: 2,
|
|
|
+ icon: 'profile',
|
|
|
+ content: confirmInfoCard(),
|
|
|
+ }];
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <Steps current={currentStep}>
|
|
|
+ {steps.map((item, index) =>
|
|
|
+ (
|
|
|
+ <Steps.Step
|
|
|
+ key={item.stepKey}
|
|
|
+ title={item.title}
|
|
|
+ icon={<Icon type={steps[index].icon} />}
|
|
|
+ />
|
|
|
+ )
|
|
|
+ )}
|
|
|
+ </Steps>
|
|
|
+ {steps[currentStep].content}
|
|
|
+ <FooterToolbar
|
|
|
+ extra={
|
|
|
+ <div>
|
|
|
+ <span className={styles.quantity}>
|
|
|
+ 已选择
|
|
|
+ <span style={{ color: '#f60', fontWeight: 500 }}>
|
|
|
+ {selectedGoods.length}
|
|
|
+ </span>
|
|
|
+ 件商品
|
|
|
+ </span>
|
|
|
+ <span className={styles.adjustPrice}>
|
|
|
+ <span style={{ color: '#2f7d0d' }}>
|
|
|
+ 优惠: ¥
|
|
|
+ </span>
|
|
|
+ <InputNumber
|
|
|
+ min={0}
|
|
|
+ max={totalPrice}
|
|
|
+ size="small"
|
|
|
+ value={adjustPrice}
|
|
|
+ onChange={this.handleAdjustPriceChange}
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ <span className={styles.totalPrice}>
|
|
|
+ 总价:
|
|
|
+ <span style={{ color: '#f60', fontSize: 24 }}>
|
|
|
+ {`¥ ${toDecimal2(totalPrice - adjustPrice)}`}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ style={{ width: this.state.width }}
|
|
|
+ >
|
|
|
+ {
|
|
|
+ (currentStep > 0) && (
|
|
|
+ <Button onClick={this.prevStep}>
|
|
|
+ {`上一步: ${steps[currentStep - 1].title}`}
|
|
|
+ </Button>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ {/* 步骤一:选择终端 */}
|
|
|
+ {
|
|
|
+ (currentStep === 0) && (
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ disabled={Object.keys(deliveryInfo).length === 0}
|
|
|
+ onClick={this.nextStep}
|
|
|
+ >
|
|
|
+ {`下一步: ${steps[currentStep + 1].title}`}
|
|
|
+ </Button>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ {/* 步骤二:选择产品 */}
|
|
|
+ {
|
|
|
+ (currentStep === 1) && (
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ disabled={Object.keys(selectedGoods).length === 0}
|
|
|
+ onClick={this.nextStep}
|
|
|
+ >
|
|
|
+ {`下一步: ${steps[currentStep + 1].title}`}
|
|
|
+ </Button>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ {/* 步骤三:确认订单 */}
|
|
|
+ {
|
|
|
+ (currentStep === 2) && (
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ onClick={() => this.handleSubmitOrder(formattedDataSource)}
|
|
|
+ >
|
|
|
+ 确认下单
|
|
|
+ </Button>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ </FooterToolbar>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|