新增订单状态、售后信息、折扣信息

src/pages/order/order-report-detail/index.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import { Button, Card, Image, Timeline, message } from 'antd';
+import { Button, Card, Image, Timeline, message, Tag } from 'antd';
 import styles from './index.less';
-import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { ExclamationCircleOutlined, UserOutlined, RedEnvelopeOutlined, WhatsAppOutlined } from '@ant-design/icons';
 import { history } from 'umi';
 import orderReportAPI from "./service";
 import { PageContainer } from '@ant-design/pro-layout';
@@ -15,34 +15,46 @@ const orderNumber = history.location.query.orderNumber;
 export default function Index() {
 
     const [orderInfo, setOrderInfo] = useState({
-        memberInfo: {},
-        goodsInfo: []
+        memberInfo: {},             //用户信息
+        goodsInfo: [],              //商品信息
+        informationRefundInfo: [],  //售后信息
+        discountInfo: []            //优惠信息
     });
 
-    const [saleAfterInfo, setSaleAfterInfo] = useState([
-        {
-            id: "acc670f8-317f-4c2d-94f5-f7af12c80ebd",
-            createdAt: "2022-05-18 07:52:09",
-            stutasStr: "申请退款"
-        },
-        {
-            id: "acc670f8-317f-4c2d-94f5-f7af12c80eb1",
-            createdAt: "2022-05-18 09:52:09",
-            stutasStr: "已退款"
-        },
-    ]);
+    const [orderStatus, setOrderStatus] = useState(true);
 
     const onQueryOrderDetail = async () => {
         if (orderNumber) {
             const response = await orderReportAPI.getOrderReporByNumber(orderNumber);
             if (response.statusCode === 200) {
                 setOrderInfo(response.data);
+                orderIsNormal(response.data);
             } else {
                 message.error(response.errors || '订单详情获取失败');
             }
         }
     }
 
+    const orderIsNormal = (order) => {
+        let isNormal = true;
+        if (!(order.payMoneyEx === '正常' &&
+            order.payOrderTimeEx === '正常' &&
+            order.payOrderEx === '正常')
+        ) {
+            isNormal = false;
+        }
+        if (!(order.refundMoneyEx === '正常' || order.refundMoneyEx === '' || order.refundMoneyEx === null)) {
+            isNormal = false;
+        }
+        if (!(order.refundOrderTimeEx === '正常' || order.refundOrderTimeEx === '' || order.refundOrderTimeEx === null)) {
+            isNormal = false;
+        }
+        if (!(order.refundOrderEx === '正常' || order.refundOrderEx === '' || order.refundOrderEx === null)) {
+            isNormal = false;
+        }
+        setOrderStatus(isNormal);
+    }
+
     useEffect(() => {
         onQueryOrderDetail();
     }, []);
@@ -54,10 +66,12 @@ export default function Index() {
                 <div className={styles['order-head-card']}>
                     <div className={styles['order-head']}>
                         <div className={styles['order-number']}>
-                            #0
+                            #{orderInfo.sortId}
                         </div>
                         <div className={styles['order-cook-state']}>
-                            订单时间
+                            {
+                                orderStatus ? <div className={styles['order-status-true']}>正常订单</div> : <div className={styles['order-status-false']}>异常订单</div>
+                            }
                         </div>
                         <div className={styles['order-cook-date']}>
                             {orderInfo.createdAt}
@@ -94,14 +108,25 @@ export default function Index() {
                             {orderInfo.memberInfo.phone || '暂无电话'}
                         </span>
                     </div>
-                    {/* <div className={styles['prepare-meals']}>
-                    <div className={styles['prepare-meals-title']}>
-                        备餐状态
-                    </div>
-                    <div className={styles['prepare-meals-status']}>
-                        制作中
+                    <div className={styles['prepare-meals']}>
+                        <div className={styles['prepare-meals-title']}>
+                            优惠信息
+                        </div>
+                        <div className={styles['prepare-meals-status']}>
+                            {
+                                orderInfo.discountInfo?.map(discountItem => {
+                                    return (
+                                        <div>
+                                            {discountItem.type === 1 ? <Tag icon={<UserOutlined />} color="#f50">{discountItem.name}：{discountItem.value}</Tag> : null}
+                                            {discountItem.type === 2 ? <Tag icon={<RedEnvelopeOutlined />} color="#87d068">{discountItem.name}：{discountItem.value}</Tag> : null}
+                                            {discountItem.type === 3 ? <Tag icon={<WhatsAppOutlined />} color="#108ee9">{discountItem.name}：{discountItem.value}</Tag> : null}
+                                        </div>
+                                    )
+                                })
+                            }
+
+                        </div>
                     </div>
-                </div> */}
                 </div>
                 {/* 订单数据 */}
                 <div className={styles['order-base-card']}>
@@ -181,15 +206,20 @@ export default function Index() {
                     </div>
                     <Timeline>
                         {
-                            saleAfterInfo.map(item => {
-                                return (
-                                    <Timeline.Item color="green" key={item.id}>
-                                        <div className={styles['sale-after-line']}>
-                                            {item.createdAt} {item.stutasStr}
-                                        </div>
-                                    </Timeline.Item>
-                                )
-                            })
+                            orderInfo.informationRefundInfo.length > 0 ?
+                                orderInfo.informationRefundInfo.map(item => {
+                                    return (
+                                        <Timeline.Item color="green" key={item.id}>
+                                            <div className={styles['sale-after-line']}>
+                                                {item.createdAt} {item.refundDesc}
+                                            </div>
+                                        </Timeline.Item>
+                                    )
+                                })
+                                :
+                                <Timeline.Item color="green">
+                                    暂无售后信息
+                                </Timeline.Item>
                         }
                     </Timeline>
                 </div>

src/pages/order/order-report-detail/index.less

@@ -17,7 +17,8 @@
     content: '';
     width: 0;
     height: 0;
-    top: 0;
+    top: 50%;
+    transform: translateY(-50%);
     left: 50px;
     border-top: 20px solid transparent;
     border-bottom: 20px solid transparent;
@@ -32,12 +33,27 @@
     width: 70px;
     height: 40px;
     left: -20px;
-    top: 0;
+    top: 50%;
+    transform: translateY(-50%);
     background-color: rgb(88, 91, 110);
     color: #FFF;
     font-size: 26px;
 }
 
+.order-status-true {
+    font-size: 14px;
+    padding: 5px 20px;
+    background-color: #2db7f5;
+    color: #FFF;
+}
+
+.order-status-false {
+    font-size: 14px;
+    padding: 5px 20px;
+    background-color: #F84352;
+    color: #FFF;
+}
+
 .order-cook-state {
     font-size: 22px;
     margin-left: 100px;
@@ -110,6 +126,8 @@
     font-weight: 700;
 }
 
+
+
 // 商品信息
 .goods-card {
     // margin-top: 20px;

src/pages/order/order-report/index.jsx

@@ -1,13 +1,19 @@
 import React, { useState, useEffect } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
-import { Button, Card, DatePicker, Table, message, Pagination, Space } from 'antd';
+import { Button, Card, DatePicker, Table, message, Pagination, Space, Tag, Spin } from 'antd';
 import styles from './index.less';
 const { RangePicker } = DatePicker;
 import orderReportAPI from "./service";
 import moment from 'moment';
 import { history } from "umi";
+import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
 
 const columns = [
+    {
+        title: '交易单号',
+        dataIndex: 'transactionId',
+        key: 'transactionId',
+    },
     {
         title: '店铺名称',
         dataIndex: 'shopName',
@@ -33,24 +39,67 @@ const columns = [
         dataIndex: 'createdAt',
         key: 'createdAt',
     },
+    {
+        title: '订单状态',
+        key: 'orderStatus',
+        render: (record) => {
+            let isNormal = true;
+            if (!(record.payMoneyEx === '正常' &&
+                record.payOrderTimeEx === '正常' &&
+                record.payOrderEx === '正常')
+            ) {
+                isNormal = false;
+            }
+            if (!(record.refundMoneyEx === '正常' || record.refundMoneyEx === '' || record.refundMoneyEx === null)) {
+                isNormal = false;
+            }
+            if (!(record.refundOrderTimeEx === '正常' || record.refundOrderTimeEx === '' || record.refundOrderTimeEx === null)) {
+                isNormal = false;
+            }
+            if (!(record.refundOrderEx === '正常' || record.refundOrderEx === '' || record.refundOrderEx === null)) {
+                isNormal = false;
+            }
+            return (
+                <>
+                    {
+                        isNormal ? <Tag icon={<CheckCircleOutlined />} color="success">
+                            正常
+                        </Tag>
+                            :
+                            <Tag icon={<CloseCircleOutlined />} color="error">
+                                异常
+                            </Tag>
+                    }
+                </>
+            )
+        }
+    },
     {
         title: '操作',
         key: 'action',
         render: (_, record) => (
-          <Space size="middle">
-            <a onClick={() => {
-                history.push({
-                    pathname: '/order/order-report/order-report-detail',
-                    query: {
-                        orderNumber: record.orderNumber
-                    }
-                });
-            }}>详情</a>
-          </Space>
+            <Space size="middle">
+                <a onClick={() => {
+                    history.push({
+                        pathname: '/order/order-report/order-report-detail',
+                        query: {
+                            orderNumber: record.orderNumber
+                        }
+                    });
+                }}>详情</a>
+            </Space>
         ),
-      },
+    },
 ];
 
+const LoadingCard = () => {
+    return (
+        <div className={styles['loading-card']}>
+            <Spin size="large" />
+        </div>
+    )
+}
+
 /**
  * 订单报表
  * @returns 
@@ -62,6 +111,7 @@ export default function Index() {
     const [current, setCurrent] = useState(1);
     const [pageSize, setPageSize] = useState(10);
     const [total, setTotal] = useState(0);
+    const [showLoading, setShowLoading] = useState(false);
 
     const [timeRange, setTimeRange] = useState([
         moment(moment(new Date(Date.now() - 24 * 60 * 60 * 1000 * 7)).format('YYYY-MM-DD 00:00:00')),
@@ -80,7 +130,9 @@ export default function Index() {
             current,
             pageSize
         }
+        setShowLoading(true);
         const response = await orderReportAPI.getOrderReportList(jsonData);
+        setShowLoading(false);
         if (response.statusCode === 200) {
             setOrderReportList(response.data.data);
             setTotal(response.data.total)
@@ -97,6 +149,7 @@ export default function Index() {
 
     return (
         <PageContainer>
+            {showLoading ? <LoadingCard></LoadingCard> : null}
             <Card className={styles['data-search-card']}>
                 <div className={styles['data-search-box']}>
                     <RangePicker className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => {

src/pages/order/order-report/index.less

@@ -17,4 +17,20 @@
     justify-content: flex-end;
     align-items: center;
     height: 50px;
+}
+
+// 加载中
+.loading-card {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999;
+    background-color: rgba(0, 0, 0, 0.5);
 }