- 添加订单取消

- 优化订单列表
- 添加订单备注

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

@@ -6,6 +6,8 @@ import { Button, Card, Col, Divider, Form, Input, Row, Tabs, DatePicker, List }
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
 import DictionaryText from '@/components/Dictionary/DictionaryText';
 import OrderUpdatePayAmount from './OrderUpdatePayAmount';
+import OrderRemark from './OrderRemark';
+import OrderCancel from './OrderCancel';
 import dictionary from '@/utils/dictionary';
 
 import styles from './OrderList.less';
@@ -14,8 +16,10 @@ const { RangePicker } = DatePicker;
 const FormItem = Form.Item;
 const { TabPane } = Tabs;
 
-const OrderContent = orderItem => {
-  const { dispatch, skuName, skuImage, quantity, price, payAmount, createTime, status } = orderItem;
+const OrderContent = props => {
+  const { dispatch, item } = props;
+  const { createTime, status, payAmount } = item;
+  const { name, mobile } = item.orderRecipient;
 
   const handleUpdatePayAmount = updateOrderItem => {
     dispatch({
@@ -29,27 +33,58 @@ const OrderContent = orderItem => {
     });
   };
 
+  // const handleCancelOrder = ({ orderId }) => {
+  //   dispatch({
+  //     type: 'orderList/changeOrderCancelVisible',
+  //     payload: {
+  //       orderCancelVisible: true,
+  //       orderId,
+  //     },
+  //   });
+  // };
+  //
+  // const handleRenderGoods = () => {};
+
+  const renderStatusButtons = () => {
+    let res = '';
+    if (status === 1) {
+      res = <Button>取消订单</Button>;
+    } else if (status === 2) {
+      res = <Button>发货</Button>;
+    }
+    return res;
+  };
+
+  const renderGoods = orderItems => {
+    return orderItems.map(({ skuName, skuImage, quantity, price }) => {
+      return (
+        <div className={styles.orderGoods}>
+          <img alt={skuName} className={`${styles.image}`} src={skuImage} />
+          <div className={styles.contentItem}>
+            <div>
+              <a>{skuName}</a>
+            </div>
+            <div>秋季精选</div>
+          </div>
+          <div className={styles.contentItem}>
+            <div>{quantity}件</div>
+            <div>
+              {price / 100} 元/{quantity * (price / 100)} 元
+            </div>
+          </div>
+        </div>
+      );
+    });
+  };
+
   return (
     <div className={styles.order}>
-      <img alt={skuName} className={`${styles.image}`} src={skuImage} />
-      <div className={styles.contentItem}>
-        <div className={styles.columnName}>(名称)</div>
-        <div>
-          <a>{skuName}</a>
-        </div>
-        <div>秋季精选</div>
+      <div className={`${styles.contentItem} ${styles.goodsContainer}`}>
+        {renderGoods(item.orderItems)}
       </div>
       <div className={styles.contentItem}>
-        <div className={styles.columnName}>(金额/物件)</div>
-        <div>{quantity}件</div>
-        <div>
-          {price / 100} 元/{quantity * (price / 100)} 元
-        </div>
-      </div>
-      <div className={styles.contentItem}>
-        <div className={styles.columnName}>(购买人)</div>
-        <div>范先生</div>
-        <div>13302926050</div>
+        <div>{name}</div>
+        <div>{mobile}</div>
       </div>
       <div className={styles.contentItem}>
         <div className={styles.columnName}>(下单时间)</div>
@@ -57,17 +92,16 @@ const OrderContent = orderItem => {
         <div>&nbsp;</div>
       </div>
       <div className={styles.contentItem}>
-        <div className={styles.columnName}>(订单状态)</div>
         <div>
           <DictionaryText dicKey={dictionary.ORDER_STATUS} dicValue={status} />
         </div>
-        <div>{[0, 1, 2].indexOf(status) ? <Button>取消订单</Button> : ''}</div>
+        <div>{renderStatusButtons()}</div>
       </div>
       <div className={styles.contentItem}>
         <div className={styles.columnName}>(实付金额)</div>
         <div>{payAmount / 100}元</div>
         <div>
-          <a onClick={() => handleUpdatePayAmount(orderItem)}>修改价格</a>
+          <a onClick={() => handleUpdatePayAmount(props)}>修改价格</a>
         </div>
       </div>
     </div>
@@ -82,6 +116,18 @@ const OrderList = props => {
     ...pagination,
   };
 
+  const handleRemakeClick = item => {
+    const { id, remark } = item;
+    dispatch({
+      type: 'orderList/changeRemakeVisible',
+      payload: {
+        remarkVisible: true,
+        orderId: id,
+        remark,
+      },
+    });
+  };
+
   return (
     <List
       size="large"
@@ -102,13 +148,11 @@ const OrderList = props => {
               <div>
                 <a>查看详情</a>
                 <Divider type="vertical" />
-                <a>备注</a>
+                <a onClick={() => handleRemakeClick(item)}>备注</a>
               </div>
             </div>
 
-            {item.orderItems.map(orderItem => {
-              return <OrderContent key={orderItem.id} dispatch={dispatch} {...orderItem} />;
-            })}
+            <OrderContent item={item} dispatch={dispatch} />
           </div>
         </List.Item>
       )}
@@ -131,11 +175,9 @@ const SearchForm = Form.create()(props => {
     form.validateFields((err, fields) => {
       const buildTime = (fieldValue, key) => {
         const res = {};
-        if (fieldValue) {
+        if (fieldValue && fieldValue.length >= 2) {
           const keySuffix = key.substring(0, 1).toUpperCase() + key.substring(1);
-          // res[`start${keySuffix}`] = fieldValue[0].valueOf();
           res[`start${keySuffix}`] = fieldValue[0].format('YYYY-MM-DD HH:mm:ss');
-          // res[`end${keySuffix}`] = fieldValue[1].valueOf();
           res[`end${keySuffix}`] = fieldValue[1].format('YYYY-MM-DD HH:mm:ss');
         }
         return res;
@@ -186,9 +228,6 @@ const SearchForm = Form.create()(props => {
         <Col md={8} sm={24}>
           <FormItem label="创建时间">{getFieldDecorator('createTime')(<RangePicker />)}</FormItem>
         </Col>
-        <Col md={8} sm={24}>
-          <FormItem label="成交时间">{getFieldDecorator('closingTime')(<RangePicker />)}</FormItem>
-        </Col>
         <Col md={8} sm={24}>
           <span className={styles.submitButtons}>
             <Button type="primary" htmlType="submit">
@@ -234,9 +273,7 @@ class BasicList extends PureComponent {
     });
   };
 
-  handleEditorClick = () => {
-    console.info('edit');
-  };
+  handleEditorClick = () => {};
 
   handleSearch = fields => {
     const {
@@ -287,6 +324,8 @@ class BasicList extends PureComponent {
         </div>
 
         <OrderUpdatePayAmount {...this.props} />
+        <OrderRemark {...this.props} />
+        <OrderCancel {...this.props} />
       </PageHeaderWrapper>
     );
   }