- 修改订单展示

- 增加实付金额修改功能

admin-web/src/models/order/orderList.js

@@ -1,5 +1,5 @@
 import { message } from 'antd';
-import { orderPage, updateOrderItem } from '../../services/order';
+import { orderPage, updateOrderItem, updateOrderItemPayAmount } from '../../services/order';
 
 export default {
   namespace: 'orderList',
@@ -13,11 +13,26 @@ export default {
       },
       dataSource: [],
     },
+    payAmountVisible: false,
+    payAmount: 0,
+    orderId: 0,
+    orderItemId: 0,
+    searchParams: {},
   },
 
   effects: {
     *queryPage({ payload }, { call, put }) {
       const response = yield call(orderPage, payload);
+
+      yield put({
+        type: 'changeSearchParams',
+        payload: {
+          searchParams: {
+            ...payload,
+          },
+        },
+      });
+
       message.info('查询成功!', response);
       const { total, orders } = response.data;
       yield put({
@@ -45,6 +60,23 @@ export default {
         },
       });
     },
+    *updatePayAmount({ payload }, { call, put }) {
+      const { searchParams, params } = payload;
+      yield call(updateOrderItemPayAmount, params);
+      yield put({
+        type: 'changePayAmountVisible',
+        payload: {
+          payAmountVisible: false,
+        },
+      });
+
+      yield put({
+        type: 'queryPage',
+        payload: {
+          ...searchParams,
+        },
+      });
+    },
   },
 
   reducers: {
@@ -55,5 +87,17 @@ export default {
         list,
       };
     },
+    changePayAmountVisible(state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+    changeSearchParams(state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
   },
 };

admin-web/src/pages/Order/OrderList.js

@@ -1,119 +1,123 @@
-import React, { Fragment, PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import moment from 'moment';
 import { connect } from 'dva';
-import { Button, Card, Col, Divider, Form, Input, Row, Table, DatePicker } from 'antd';
+import { Button, Card, Col, Divider, Form, Input, Row, Tabs, DatePicker, List } from 'antd';
 
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
 import DictionaryText from '@/components/Dictionary/DictionaryText';
-import DictionarySelect from '@/components/Dictionary/DictionarySelect';
+import OrderUpdatePayAmount from './OrderUpdatePayAmount';
 import dictionary from '@/utils/dictionary';
 
 import styles from './OrderList.less';
 
 const { RangePicker } = DatePicker;
 const FormItem = Form.Item;
+const { TabPane } = Tabs;
 
-const OrderList = props => {
+const OrderContent = orderItem => {
-  const { list, dispatch, loading, handleModalVisible } = props;
+  const { dispatch, skuName, skuImage, quantity, price, payAmount, createTime, status } = orderItem;
 
-  // 翻页
+  const handleUpdatePayAmount = updateOrderItem => {
-  const onPageChange = page => {
-    const { searchParams } = props;
     dispatch({
-      type: 'adminList/query',
+      type: 'orderList/changePayAmountVisible',
       payload: {
-        pageNo: page.current,
+        payAmountVisible: true,
-        pageSize: page.pageSize,
+        payAmount: updateOrderItem.payAmount,
-        ...searchParams,
+        orderId: updateOrderItem.orderId,
+        orderItemId: updateOrderItem.id,
       },
     });
   };
 
-  const columns = [
+  return (
-    {
+    <div className={styles.order}>
-      title: '订单id',
+      <img alt={skuName} className={`${styles.image}`} src={skuImage} />
-      dataIndex: 'id',
+      <div className={styles.contentItem}>
-    },
+        <div className={styles.columnName}>(名称)</div>
-    {
+        <div>
-      title: '用户',
+          <a>{skuName}</a>
-      dataIndex: 'userId',
+        </div>
-    },
+        <div>秋季精选</div>
-    {
+      </div>
-      title: '订单号',
+      <div className={styles.contentItem}>
-      dataIndex: 'orderNo',
+        <div className={styles.columnName}>(金额/物件)</div>
-    },
+        <div>{quantity}件</div>
-    {
+        <div>
-      title: '金额',
+          {price / 100} 元/{quantity * (price / 100)} 元
-      dataIndex: 'price',
+        </div>
-      render(val) {
+      </div>
-        return <span>{val} 元</span>;
+      <div className={styles.contentItem}>
-      },
+        <div className={styles.columnName}>(购买人)</div>
-    },
+        <div>范先生</div>
-    {
+        <div>13302926050</div>
-      title: '状态',
+      </div>
-      dataIndex: 'status',
+      <div className={styles.contentItem}>
-      render(val) {
+        <div className={styles.columnName}>(下单时间)</div>
-        return <DictionaryText dicKey={dictionary.ORDER_STATUS} dicValue={val} />;
+        <div>{moment(createTime).format('YYYY-MM-DD HH:mm')}</div>
-      },
+        <div>&nbsp;</div>
-    },
+      </div>
-    {
+      <div className={styles.contentItem}>
-      title: '付款时间',
+        <div className={styles.columnName}>(订单状态)</div>
-      dataIndex: 'paymentTime',
+        <div>
-      render: val => (!val ? '' : <span>{moment(val).format('YYYY-MM-DD HH:mm')}</span>),
+          <DictionaryText dicKey={dictionary.ORDER_STATUS} dicValue={status} />
-    },
+        </div>
-    {
+        <div>{[0, 1, 2].indexOf(status) ? <Button>取消订单</Button> : ''}</div>
-      title: '发货时间',
+      </div>
-      dataIndex: 'deliveryTime',
+      <div className={styles.contentItem}>
-      render: val => (!val ? '' : <span>{moment(val).format('YYYY-MM-DD HH:mm')}</span>),
+        <div className={styles.columnName}>(实付金额)</div>
-    },
+        <div>{payAmount / 100}元</div>
-    {
+        <div>
-      title: '收货时间',
+          <a onClick={() => handleUpdatePayAmount(orderItem)}>修改价格</a>
-      dataIndex: 'receiverTime',
+        </div>
-      render: val => (!val ? '' : <span>{moment(val).format('YYYY-MM-DD HH:mm')}</span>),
+      </div>
-    },
+    </div>
-    {
+  );
-      title: '成交时间',
+};
-      dataIndex: 'closingTime',
-      render: val => (!val ? '' : <span>{moment(val).format('YYYY-MM-DD HH:mm')}</span>),
-    },
-    {
-      title: '创建时间',
-      dataIndex: 'createTime',
-      render: val => (!val ? '' : <span>{moment(val).format('YYYY-MM-DD HH:mm')}</span>),
-    },
-    {
-      title: '操作',
-      width: 100,
-      render: (text, record) => {
-        return (
-          <Fragment>
-            <a onClick={() => handleModalVisible(true, 'update', record)}>编辑</a>
-            <Divider type="vertical" />
-          </Fragment>
-        );
-      },
-    },
-  ];
 
-  const tableScroll = {
+const OrderList = props => {
-    x: 1400,
+  const { list, dispatch, loading } = props;
+  const { pagination, dataSource } = list;
+
+  const paginationProps = {
+    ...pagination,
   };
 
   return (
-    <Table
+    <List
+      size="large"
       rowKey="id"
-      columns={columns}
-      dataSource={list.dataSource}
       loading={loading}
-      pagination={list.pagination}
+      pagination={paginationProps}
-      onChange={onPageChange}
+      dataSource={dataSource}
-      scroll={tableScroll}
+      renderItem={item => (
+        <List.Item>
+          <div className={styles.orderGroup}>
+            <div className={styles.header}>
+              <div>
+                <span>订单号: {item.orderNo}</span>
+                <Divider type="vertical" />
+                <span>支付金额: {item.payAmount / 100} 元</span>
+              </div>
+
+              <div>
+                <a>查看详情</a>
+                <Divider type="vertical" />
+                <a>备注</a>
+              </div>
+            </div>
+
+            {item.orderItems.map(orderItem => {
+              return <OrderContent key={orderItem.id} dispatch={dispatch} {...orderItem} />;
+            })}
+          </div>
+        </List.Item>
+      )}
     />
   );
 };
 
 // SearchForm
-const SearchForm = props => {
+const SearchForm = Form.create()(props => {
   const {
     form: { getFieldDecorator },
     form,
@@ -176,11 +180,6 @@ const SearchForm = props => {
             {getFieldDecorator('orderNo')(<Input placeholder="请输入订单号" />)}
           </FormItem>
         </Col>
-        <Col md={8} sm={24}>
-          <FormItem label="状态">
-            {getFieldDecorator('status', {})(<DictionarySelect dicKey={dictionary.ORDER_STATUS} />)}
-          </FormItem>
-        </Col>
       </Row>
 
       <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
@@ -203,14 +202,13 @@ const SearchForm = props => {
       </Row>
     </Form>
   );
-};
+});
 
 @connect(({ orderList, loading }) => ({
   orderList,
   list: orderList.list,
   loading: loading.models.orderList,
 }))
-@Form.create()
 class BasicList extends PureComponent {
   componentDidMount() {
     const {
@@ -225,6 +223,9 @@ class BasicList extends PureComponent {
 
   queryList = params => {
     const { dispatch } = this.props;
+    // 保存每次操作 searchParams
+    this.searchParams = params;
+    // dispatch
     dispatch({
       type: 'orderList/queryPage',
       payload: {
@@ -249,6 +250,15 @@ class BasicList extends PureComponent {
     });
   };
 
+  handleTabsChange = key => {
+    const params = {
+      ...this.searchParams,
+      status: key,
+    };
+
+    this.queryList(params);
+  };
+
   render() {
     return (
       <PageHeaderWrapper>
@@ -263,9 +273,20 @@ class BasicList extends PureComponent {
             <div className={styles.tableListForm}>
               <SearchForm {...this.props} handleSearch={this.handleSearch} />
             </div>
+            <Tabs defaultActiveKey={null} onChange={this.handleTabsChange}>
+              <TabPane tab="全部" key={null} />
+              <TabPane tab="待付款" key={0} />
+              <TabPane tab="待发货" key={1} />
+              <TabPane tab="已发货" key={2} />
+              <TabPane tab="已完成" key={3} />
+              <TabPane tab="已关闭" key={4} />
+            </Tabs>
+
             <OrderList {...this.props} handleEditorClick={this.handleEditorClick} />
           </Card>
         </div>
+
+        <OrderUpdatePayAmount {...this.props} />
       </PageHeaderWrapper>
     );
   }

admin-web/src/pages/Order/OrderList.less

@@ -235,3 +235,58 @@
     margin-right: 8px;
   }
 }
+
+// 订单content
+.orderGroup {
+  @padding-slid: 10px;
+
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: flex-start;
+
+  .header {
+    display: flex;
+    flex: 1;
+    justify-content: space-between;
+    padding-right: @padding-slid;
+    padding-left: @padding-slid;
+    font-weight: bold;
+    font-size: 15px;
+    line-height: 35px;
+    background-color: #c0bfb9;
+  }
+
+  .order {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    padding-right: @padding-slid;
+    padding-left: @padding-slid;
+    line-height: 100px;
+    border: 1px solid #c0bfb9;
+
+    .contentItem {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+
+      > div {
+        line-height: 30px;
+      }
+
+      .columnName {
+        font-weight: bold;
+        font-size: 12px;
+      }
+    }
+
+    .image {
+      width: 100px;
+      height: 100px;
+    }
+  }
+}

admin-web/src/pages/Order/OrderUpdatePayAmount.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Form, Input, Modal } from 'antd';
+
+const FormItem = Form.Item;
+
+// 订单 - 更新支付金额
+const OrderUpdatePayAmount = Form.create()(props => {
+  const { dispatch, loading } = props;
+  const { orderId, orderItemId, payAmount, payAmountVisible, searchParams } = props.orderList;
+  const { getFieldDecorator, getFieldsValue } = props.form;
+
+  const handleOk = e => {
+    e.preventDefault();
+    const fieldsValue = getFieldsValue();
+
+    dispatch({
+      type: 'orderList/updatePayAmount',
+      payload: {
+        params: {
+          payAmount: fieldsValue.payAmount * 100,
+          orderId,
+          orderItemId,
+        },
+        searchParams,
+      },
+    });
+  };
+
+  const handleCancel = () => {
+    dispatch({
+      type: 'orderList/changePayAmountVisible',
+      payload: {
+        payAmountVisible: false,
+      },
+    });
+  };
+
+  return (
+    <Modal
+      destroyOnClose
+      title="修改实付金额"
+      visible={payAmountVisible}
+      onOk={handleOk}
+      okText="保存"
+      onCancel={handleCancel}
+      confirmLoading={loading}
+    >
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="用户名">
+        {getFieldDecorator('payAmount', {
+          rules: [
+            { required: true, message: '请输入需要修改的金额！' },
+            { max: 10000, min: 0, message: '金额值 0 - 100000 元' },
+          ],
+          initialValue: payAmount / 100,
+        })(<Input placeholder="请输入修改的金额" />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+export default OrderUpdatePayAmount;

admin-web/src/services/order.js

@@ -8,6 +8,12 @@ export async function orderPage(params) {
   });
 }
 
+export async function updateOrderItemPayAmount(params) {
+  return request(`/order-api/admins/order/order_item/update_pay_amount?${stringify(params)}`, {
+    method: 'PUT',
+  });
+}
+
 export async function updateOrderItem(params) {
   return request(`/order-api/admins/order_item/update?${stringify(params)}`, {
     method: 'PUT',