@@ -1,7 +1,7 @@ | |||||
import React, { useState, useEffect } from 'react'; | 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 styles from './index.less'; | ||||
import { ExclamationCircleOutlined } from '@ant-design/icons'; | |||||
import { ExclamationCircleOutlined, UserOutlined, RedEnvelopeOutlined, WhatsAppOutlined } from '@ant-design/icons'; | |||||
import { history } from 'umi'; | import { history } from 'umi'; | ||||
import orderReportAPI from "./service"; | import orderReportAPI from "./service"; | ||||
import { PageContainer } from '@ant-design/pro-layout'; | import { PageContainer } from '@ant-design/pro-layout'; | ||||
@@ -15,34 +15,46 @@ const orderNumber = history.location.query.orderNumber; | |||||
export default function Index() { | export default function Index() { | ||||
const [orderInfo, setOrderInfo] = useState({ | 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 () => { | const onQueryOrderDetail = async () => { | ||||
if (orderNumber) { | if (orderNumber) { | ||||
const response = await orderReportAPI.getOrderReporByNumber(orderNumber); | const response = await orderReportAPI.getOrderReporByNumber(orderNumber); | ||||
if (response.statusCode === 200) { | if (response.statusCode === 200) { | ||||
setOrderInfo(response.data); | setOrderInfo(response.data); | ||||
orderIsNormal(response.data); | |||||
} else { | } else { | ||||
message.error(response.errors || '订单详情获取失败'); | 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(() => { | useEffect(() => { | ||||
onQueryOrderDetail(); | onQueryOrderDetail(); | ||||
}, []); | }, []); | ||||
@@ -54,10 +66,12 @@ export default function Index() { | |||||
<div className={styles['order-head-card']}> | <div className={styles['order-head-card']}> | ||||
<div className={styles['order-head']}> | <div className={styles['order-head']}> | ||||
<div className={styles['order-number']}> | <div className={styles['order-number']}> | ||||
#0 | |||||
#{orderInfo.sortId} | |||||
</div> | </div> | ||||
<div className={styles['order-cook-state']}> | <div className={styles['order-cook-state']}> | ||||
订单时间 | |||||
{ | |||||
orderStatus ? <div className={styles['order-status-true']}>正常订单</div> : <div className={styles['order-status-false']}>异常订单</div> | |||||
} | |||||
</div> | </div> | ||||
<div className={styles['order-cook-date']}> | <div className={styles['order-cook-date']}> | ||||
{orderInfo.createdAt} | {orderInfo.createdAt} | ||||
@@ -94,14 +108,25 @@ export default function Index() { | |||||
{orderInfo.memberInfo.phone || '暂无电话'} | {orderInfo.memberInfo.phone || '暂无电话'} | ||||
</span> | </span> | ||||
</div> | </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> | </div> | ||||
{/* 订单数据 */} | {/* 订单数据 */} | ||||
<div className={styles['order-base-card']}> | <div className={styles['order-base-card']}> | ||||
@@ -181,15 +206,20 @@ export default function Index() { | |||||
</div> | </div> | ||||
<Timeline> | <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> | </Timeline> | ||||
</div> | </div> | ||||
@@ -17,7 +17,8 @@ | |||||
content: ''; | content: ''; | ||||
width: 0; | width: 0; | ||||
height: 0; | height: 0; | ||||
top: 0; | |||||
top: 50%; | |||||
transform: translateY(-50%); | |||||
left: 50px; | left: 50px; | ||||
border-top: 20px solid transparent; | border-top: 20px solid transparent; | ||||
border-bottom: 20px solid transparent; | border-bottom: 20px solid transparent; | ||||
@@ -32,12 +33,27 @@ | |||||
width: 70px; | width: 70px; | ||||
height: 40px; | height: 40px; | ||||
left: -20px; | left: -20px; | ||||
top: 0; | |||||
top: 50%; | |||||
transform: translateY(-50%); | |||||
background-color: rgb(88, 91, 110); | background-color: rgb(88, 91, 110); | ||||
color: #FFF; | color: #FFF; | ||||
font-size: 26px; | 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 { | .order-cook-state { | ||||
font-size: 22px; | font-size: 22px; | ||||
margin-left: 100px; | margin-left: 100px; | ||||
@@ -110,6 +126,8 @@ | |||||
font-weight: 700; | font-weight: 700; | ||||
} | } | ||||
// 商品信息 | // 商品信息 | ||||
.goods-card { | .goods-card { | ||||
// margin-top: 20px; | // margin-top: 20px; | ||||
@@ -1,13 +1,19 @@ | |||||
import React, { useState, useEffect } from 'react'; | import React, { useState, useEffect } from 'react'; | ||||
import { PageContainer } from '@ant-design/pro-layout'; | 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'; | import styles from './index.less'; | ||||
const { RangePicker } = DatePicker; | const { RangePicker } = DatePicker; | ||||
import orderReportAPI from "./service"; | import orderReportAPI from "./service"; | ||||
import moment from 'moment'; | import moment from 'moment'; | ||||
import { history } from "umi"; | import { history } from "umi"; | ||||
import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons'; | |||||
const columns = [ | const columns = [ | ||||
{ | |||||
title: '交易单号', | |||||
dataIndex: 'transactionId', | |||||
key: 'transactionId', | |||||
}, | |||||
{ | { | ||||
title: '店铺名称', | title: '店铺名称', | ||||
dataIndex: 'shopName', | dataIndex: 'shopName', | ||||
@@ -33,24 +39,67 @@ const columns = [ | |||||
dataIndex: 'createdAt', | dataIndex: 'createdAt', | ||||
key: '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: '操作', | title: '操作', | ||||
key: 'action', | key: 'action', | ||||
render: (_, record) => ( | 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 | * @returns | ||||
@@ -62,6 +111,7 @@ export default function Index() { | |||||
const [current, setCurrent] = useState(1); | const [current, setCurrent] = useState(1); | ||||
const [pageSize, setPageSize] = useState(10); | const [pageSize, setPageSize] = useState(10); | ||||
const [total, setTotal] = useState(0); | const [total, setTotal] = useState(0); | ||||
const [showLoading, setShowLoading] = useState(false); | |||||
const [timeRange, setTimeRange] = useState([ | const [timeRange, setTimeRange] = useState([ | ||||
moment(moment(new Date(Date.now() - 24 * 60 * 60 * 1000 * 7)).format('YYYY-MM-DD 00:00:00')), | 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, | current, | ||||
pageSize | pageSize | ||||
} | } | ||||
setShowLoading(true); | |||||
const response = await orderReportAPI.getOrderReportList(jsonData); | const response = await orderReportAPI.getOrderReportList(jsonData); | ||||
setShowLoading(false); | |||||
if (response.statusCode === 200) { | if (response.statusCode === 200) { | ||||
setOrderReportList(response.data.data); | setOrderReportList(response.data.data); | ||||
setTotal(response.data.total) | setTotal(response.data.total) | ||||
@@ -97,6 +149,7 @@ export default function Index() { | |||||
return ( | return ( | ||||
<PageContainer> | <PageContainer> | ||||
{showLoading ? <LoadingCard></LoadingCard> : null} | |||||
<Card className={styles['data-search-card']}> | <Card className={styles['data-search-card']}> | ||||
<div className={styles['data-search-box']}> | <div className={styles['data-search-box']}> | ||||
<RangePicker className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => { | <RangePicker className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => { | ||||
@@ -17,4 +17,20 @@ | |||||
justify-content: flex-end; | justify-content: flex-end; | ||||
align-items: center; | align-items: center; | ||||
height: 50px; | 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); | |||||
} | } |