Selaa lähdekoodia

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

tags/小炒逻辑变更前
yangwenhua 2 vuotta sitten
vanhempi
commit
656841e57b
4 muutettua tiedostoa jossa 165 lisäystä ja 48 poistoa
  1. +64
    -34
      src/pages/order/order-report-detail/index.jsx
  2. +20
    -2
      src/pages/order/order-report-detail/index.less
  3. +65
    -12
      src/pages/order/order-report/index.jsx
  4. +16
    -0
      src/pages/order/order-report/index.less

+ 64
- 34
src/pages/order/order-report-detail/index.jsx Näytä tiedosto

@@ -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>


+ 20
- 2
src/pages/order/order-report-detail/index.less Näytä tiedosto

@@ -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;


+ 65
- 12
src/pages/order/order-report/index.jsx Näytä tiedosto

@@ -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) => {


+ 16
- 0
src/pages/order/order-report/index.less Näytä tiedosto

@@ -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);
}

Ladataan…
Peruuta
Tallenna