diff --git a/src/pages/order/order-report-detail/index.jsx b/src/pages/order/order-report-detail/index.jsx index 1761009..14e19c3 100644 --- a/src/pages/order/order-report-detail/index.jsx +++ b/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() {
- #0 + #{orderInfo.sortId}
- 订单时间 + { + orderStatus ?
正常订单
:
异常订单
+ }
{orderInfo.createdAt} @@ -94,14 +108,25 @@ export default function Index() { {orderInfo.memberInfo.phone || '暂无电话'}
- {/*
-
- 备餐状态 -
-
- 制作中 +
+
+ 优惠信息 +
+
+ { + orderInfo.discountInfo?.map(discountItem => { + return ( +
+ {discountItem.type === 1 ? } color="#f50">{discountItem.name}:{discountItem.value} : null} + {discountItem.type === 2 ? } color="#87d068">{discountItem.name}:{discountItem.value} : null} + {discountItem.type === 3 ? } color="#108ee9">{discountItem.name}:{discountItem.value} : null} +
+ ) + }) + } + +
-
*/}
{/* 订单数据 */}
@@ -181,15 +206,20 @@ export default function Index() {
{ - saleAfterInfo.map(item => { - return ( - -
- {item.createdAt} {item.stutasStr} -
-
- ) - }) + orderInfo.informationRefundInfo.length > 0 ? + orderInfo.informationRefundInfo.map(item => { + return ( + +
+ {item.createdAt} {item.refundDesc} +
+
+ ) + }) + : + + 暂无售后信息 + }
diff --git a/src/pages/order/order-report-detail/index.less b/src/pages/order/order-report-detail/index.less index 474bef4..6768071 100644 --- a/src/pages/order/order-report-detail/index.less +++ b/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; diff --git a/src/pages/order/order-report/index.jsx b/src/pages/order/order-report/index.jsx index d8cf635..b6c4d07 100644 --- a/src/pages/order/order-report/index.jsx +++ b/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 ? } color="success"> + 正常 + + : + } color="error"> + 异常 + + } + + ) + } + }, { title: '操作', key: 'action', render: (_, record) => ( - - { - history.push({ - pathname: '/order/order-report/order-report-detail', - query: { - orderNumber: record.orderNumber - } - }); - }}>详情 - + + { + history.push({ + pathname: '/order/order-report/order-report-detail', + query: { + orderNumber: record.orderNumber + } + }); + }}>详情 + ), - }, + }, ]; +const LoadingCard = () => { + return ( +
+ +
+ ) +} + /** * 订单报表 * @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 ( + {showLoading ? : null}
{ diff --git a/src/pages/order/order-report/index.less b/src/pages/order/order-report/index.less index 9487917..c33fc6a 100644 --- a/src/pages/order/order-report/index.less +++ b/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); } \ No newline at end of file