bpa
/
BPA.KitChen.Web
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 1 Wiki Activity
Browse Source

调用订单报表、订单报表详情接口

tags/小炒逻辑变更前
yangwenhua 2 years ago
parent
3e28b8da2e
commit
1ccf734c05
7 changed files with 302 additions and 251 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      config/routes.js
  2. +156
    -169
      src/pages/order/order-report-detail/index.jsx
  3. +21
    -75
      src/pages/order/order-report-detail/index.less
  4. +9
    -0
      src/pages/order/order-report-detail/service.js
  5. +100
    -5
      src/pages/order/order-report/index.jsx
  6. +5
    -1
      src/pages/order/order-report/index.less
  7. +10
    -0
      src/pages/order/order-report/service.js

+ 1
- 1
config/routes.js View File

@@ -600,7 +600,7 @@ export default [
},
{
name: '订单报表详情',
path: '/order/order-report-detail',
path: '/order/order-report/order-report-detail',
component: './order/order-report-detail',
access: 'k31',
},


+ 156
- 169
src/pages/order/order-report-detail/index.jsx View File

@@ -1,7 +1,13 @@
import React, { useState } from 'react';
import { Button, Card, Image, Timeline } from 'antd';
import React, { useState, useEffect } from 'react';
import { Button, Card, Image, Timeline, message } from 'antd';
import styles from './index.less';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { history } from 'umi';
import orderReportAPI from "./service";
import { PageContainer } from '@ant-design/pro-layout';

const orderNumber = history.location.query.orderNumber;

/**
* 订单详情
* @returns
@@ -9,46 +15,15 @@ import { ExclamationCircleOutlined } from '@ant-design/icons';
export default function Index() {

const [orderInfo, setOrderInfo] = useState({
id: '1008611',
sortId: '99', //取餐号
orderDetail: [ //订单商品列表
{
id: 'cda34f2c-7965-46ef-8517-0bc6fae87a71',
goodName: '牛肉面',
goodImg: 'https://hbl-1305371387.cos.ap-chengdu.myqcloud.com/Franchisee//goods/132969698918875531.jpg',
order_Status: 3,
originalMoney: 0.03
},
{
id: 'cda34f2c-7965-46ef-8517-0bc6fae87a72',
goodName: '姜鸭面',
goodImg: 'https://hbl-1305371387.cos.ap-chengdu.myqcloud.com/Franchisee//goods/132969698918875531.jpg',
order_Status: 3,
originalMoney: 0.03
},
],
discountMoney: 0.02, //优惠金额
orderRealMoney: 0.01, //支付金额
orderNumber: '202205201022415338172',
createdAt: '2022-05-20 02:22:41',
orderSourceFrom: 0, //桌号
payMode: 0 //支付方式
});

const [memberInfo, setMemberInfo] = useState({
id: '4fb28567-8294-4dfc-b2ca-485dc1310837',
nickName: 'Emperor_',
phone: '18200000000',
headImgUrl: 'https://thirdwx.qlogo.cn/mmopen/vi_32/Tnw5gbRSiaekqqHYERFT4x8o8GSkkBINuStbvml530FYjyeO2EKSYouKCAZLHBX3PDLLYInn130vwda6Y3gK0yA/132',
createAt: '2022-05-18 11:20:44',
address: '四川省 成都市 高新区 环球中心9-11B'
memberInfo: {},
goodsInfo: []
});

const [saleAfterInfo, setSaleAfterInfo] = useState([
{
id: "acc670f8-317f-4c2d-94f5-f7af12c80ebd",
createdAt: "2022-05-18 07:52:09",
stutasStr: "待处理"
stutasStr: "申请退款"
},
{
id: "acc670f8-317f-4c2d-94f5-f7af12c80eb1",
@@ -57,157 +32,169 @@ export default function Index() {
},
]);

const onQueryOrderDetail = async () => {
if (orderNumber) {
const response = await orderReportAPI.getOrderReporByNumber(orderNumber);
if (response.statusCode === 200) {
setOrderInfo(response.data);
} else {
message.error(response.errors || '订单详情获取失败');
}
}
}

useEffect(() => {
onQueryOrderDetail();
}, []);

return (
<div className={styles['order-detail-container']}>
{/* 用户基本信息 */}
<div className={styles['order-head-card']}>
<div className={styles['order-head']}>
<div className={styles['order-number']}>
#{orderInfo.sortId}
</div>
<div className={styles['order-cook-state']}>
立即制作
</div>
<div className={styles['order-cook-date']}>
2022-6-23 10:36:42 前制作完成
</div>
</div>
<div className={styles['member-info']}>
<div className={styles['member-info-img']}>
<img src={memberInfo.headImgUrl} alt="用户头像"></img>
<PageContainer>
<div className={styles['order-detail-container']}>
{/* 用户基本信息 */}
<div className={styles['order-head-card']}>
<div className={styles['order-head']}>
<div className={styles['order-number']}>
#0
</div>
<div className={styles['order-cook-state']}>
订单时间
</div>
<div className={styles['order-cook-date']}>
{orderInfo.createdAt}
</div>
</div>
<div className={styles['member-info-row']}>
<div className={styles['member-info-head']}>
{memberInfo.nickName}
<div className={styles['member-info']}>
<div className={styles['member-info-img']}>
<Image
width={100}
height={100}
src={orderInfo.memberInfo.headUrl}
fallback="data:image/png;base64,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"
/>
</div>
<div className={styles['member-info-label']}>
<span>#门店新客</span>
<span>#门店会员</span>
<div className={styles['member-info-row']}>
<div className={styles['member-info-head']}>
{orderInfo.memberInfo.memberName || '系统用户'}
</div>
<div className={styles['member-info-label']}>
<span>#门店新客</span>
<span>#门店会员</span>
</div>
</div>
</div>
</div>
<div className={styles['member-info-privacy']}>
<ExclamationCircleOutlined />
<span>为保证服务体验，您在拨打或接听隐私号电话时，可能被录音</span>
</div>
<div className={styles['member-info-item']}>
<span className={styles['member-info-prefix']}>
顾客电话
</span>
<span className={styles['member-info-suffix']}>
{memberInfo.phone}
</span>
</div>
<div className={styles['member-info-item']}>
<span className={styles['member-info-prefix']}>
顾客地址
</span>
<span className={styles['member-info-suffix']}>
{memberInfo.address}
</span>
</div>
<div className={styles['prepare-meals']}>
<div className={styles['member-info-privacy']}>
<ExclamationCircleOutlined />
<span>为保证服务体验，您在拨打或接听隐私号电话时，可能被录音</span>
</div>
<div className={styles['member-info-item']}>
<span className={styles['member-info-prefix']}>
顾客电话
</span>
<span className={styles['member-info-suffix']}>
{orderInfo.memberInfo.phone || '暂无电话'}
</span>
</div>
{/* <div className={styles['prepare-meals']}>
<div className={styles['prepare-meals-title']}>
备餐状态
</div>
<div className={styles['prepare-meals-status']}>
制作中
</div>
</div> */}
</div>
</div>
{/* 订单数据 */}
<div className={styles['order-base-card']}>
<div className={styles['goods-title']}>
订单信息
</div>
<div className={styles['goods-calc-item']}>
<div className={styles['goods-calc-prefix']}>订单编号</div>
<div className={styles['goods-calc-sufix']}>{orderInfo.orderNumber}</div>
</div>
<div className={styles['goods-calc-item']}>
<div className={styles['goods-calc-prefix']}>支付方式</div>
<div className={styles['goods-calc-sufix']}>{orderInfo.payMode === 0 ? '微信支付' : '其他支付'}</div>
</div>
<div className={styles['goods-calc-item']}>
<div className={styles['goods-calc-prefix']}>下单时间</div>
<div className={styles['goods-calc-sufix']}>{orderInfo.createdAt}</div>
</div>
<div className={styles['goods-calc-item']}>
<div className={styles['goods-calc-prefix']}>就餐人数</div>
<div className={styles['goods-calc-sufix']}>商家按餐量提供</div>
</div>
<div className={styles['goods-calc-item']}>
<div className={styles['goods-calc-prefix']}>桌台号码</div>
<div className={styles['goods-calc-sufix']}>{orderInfo.orderSourceFrom}</div>
</div>
</div>
{/* 商品信息 */}
<div className={styles['goods-card']}>
<div className={styles['goods-title']}>
商品信息
{/* 订单数据 */}
<div className={styles['order-base-card']}>
<div className={styles['goods-title']}>
订单信息
</div>
<div className={styles['goods-calc-item']}>
<div className={styles['goods-calc-prefix']}>订单编号</div>
<div className={styles['goods-calc-sufix']}>{orderInfo.orderNumber}</div>
</div>
<div className={styles['goods-calc-item']}>
<div className={styles['goods-calc-prefix']}>支付方式</div>
<div className={styles['goods-calc-sufix']}>微信支付</div>
</div>
<div className={styles['goods-calc-item']}>
<div className={styles['goods-calc-prefix']}>下单时间</div>
<div className={styles['goods-calc-sufix']}>{orderInfo.createdAt}</div>
</div>
<div className={styles['goods-calc-item']}>
<div className={styles['goods-calc-prefix']}>就餐人数</div>
<div className={styles['goods-calc-sufix']}>商家按餐量提供</div>
</div>
<div className={styles['goods-calc-item']}>
<div className={styles['goods-calc-prefix']}>桌台号码</div>
<div className={styles['goods-calc-sufix']}>0</div>
</div>
</div>
<div className={styles['goods-list']}>
{
orderInfo.orderDetail.map(item => {
return (
<div className={styles['goods-item']} key={item.id}>
<div className={styles['goods-item-img']}>
<img src={item.goodImg} alt="商品图片"></img>
</div>
<div className={styles['goods-item-name']}>
{item.goodName}
</div>
<div className={styles['goods-item-price']}>
￥{item.originalMoney}
</div>
<div className={styles['goods-item-count']}>
x1份
</div>
<div className={`${styles['goods-item-state']} ${styles['product-show-state']} ${styles[`product-show-${item.order_Status}`]}`}>
{item.order_Status === 0 ? '等待制作' : ''}
{item.order_Status === 1 ? '制作中' : ''}
{item.order_Status === 2 ? '等待取餐' : ''}
{item.order_Status === 3 ? '取餐完成' : ''}
{item.order_Status === 99998 ? '正常订单' : ''}
{item.order_Status === 99999 ? '异常订单' : ''}
{/* 商品信息 */}
<div className={styles['goods-card']}>
<div className={styles['goods-title']}>
商品信息
</div>
<div className={styles['goods-list']}>
{
orderInfo.goodsInfo.map(item => {
return (
<div className={styles['goods-item']} key={item.goodsId}>
<div className={styles['goods-item-img']}>
<Image
width={80}
height={80}
src={item.goodsImg}
fallback="data:image/png;base64,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"
/>
</div>
<div className={styles['goods-item-name']}>
{item.goodsName || '暂无名称'}
</div>
<div className={styles['goods-item-price']}>
￥{item.memberPrice}
</div>
<div className={styles['goods-item-count']}>
x{item.count}份
</div>
</div>
</div>
)
})
}
</div>
{/* 小计 */}
<div className={styles['goods-calc']}>
<div className={styles['goods-calc-title']}>小计</div>
<div className={styles['goods-calc-item']}>
<div className={styles['goods-calc-prefix']}>优惠金额</div>
<div className={styles['goods-calc-sufix']}>￥{orderInfo.discountMoney}</div>
)
})
}
</div>
<div className={`${styles['goods-calc-item']} ${styles['goods-calc-pay']}`}>
<div className={styles['goods-calc-prefix']}>支付金额</div>
<div className={styles['goods-calc-sufix']}>￥{orderInfo.orderRealMoney}</div>
{/* 小计 */}
<div className={styles['goods-calc']}>
<div className={styles['goods-calc-title']}>小计</div>
<div className={styles['goods-calc-item']}>
<div className={styles['goods-calc-prefix']}>优惠金额</div>
<div className={styles['goods-calc-sufix']}>￥{orderInfo.discountMoney}</div>
</div>
<div className={`${styles['goods-calc-item']} ${styles['goods-calc-pay']}`}>
<div className={styles['goods-calc-prefix']}>支付金额</div>
<div className={styles['goods-calc-sufix']}>￥{orderInfo.orderRealMoney}</div>
</div>
</div>
</div>
</div>
{/* 售后信息 */}
<div className={styles['sale-after-card']}>
<div className={styles['goods-title']}>
售后信息
{/* 售后信息 */}
<div className={styles['sale-after-card']}>
<div className={styles['goods-title']}>
售后信息
</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>
)
})
}
</Timeline>
</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>
)
})
}
</Timeline>
</div>
</div>
</PageContainer>

)
}

+ 21
- 75
src/pages/order/order-report-detail/index.less View File

@@ -18,10 +18,10 @@
width: 0;
height: 0;
top: 0;
left: 70px;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid rgb(88, 91, 110);
left: 50px;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid rgb(88, 91, 110);
}

.order-number {
@@ -29,23 +29,23 @@
align-items: center;
justify-content: center;
position: absolute;
width: 90px;
height: 50px;
width: 70px;
height: 40px;
left: -20px;
top: 0;
background-color: rgb(88, 91, 110);
color: #FFF;
font-size: 35px;
font-size: 26px;
}

.order-cook-state {
font-size: 30px;
margin-left: 130px;
font-size: 22px;
margin-left: 100px;
margin-right: 20px;
}

.order-cook-date {
font-size: 20px;
font-size: 16px;
color: rgb(246, 152, 38);
}

@@ -55,18 +55,9 @@
}

.member-info-img {
width: 100px;
height: 100px;
margin-right: 20px;
}

.member-info-img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}

.member-info-row {
display: flex;
flex-direction: column;
@@ -74,12 +65,12 @@
}

.member-info-head {
font-size: 30px;
font-size: 22px;
margin-right: 10px;
}

.member-info-label {
font-size: 20px;
font-size: 16px;
color: #999;
}

@@ -98,20 +89,20 @@
}

.member-info-prefix {
font-size: 20px;
font-size: 16px;
color: rgb(88, 91, 110);
margin-right: 10px;
}

.member-info-suffix {
font-size: 20px;
font-size: 16px;
color: #222;
}

// 备餐状态
.prepare-meals {
margin-top: 20px;
font-size: 20px;
font-size: 16px;
color: #222;
}

@@ -125,7 +116,7 @@
}

.goods-title {
font-size: 30px;
font-size: 22px;
font-weight: 700;
margin-bottom: 10px;
}
@@ -135,62 +126,19 @@
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
font-size: 20px;
font-size: 16px;
color: #222;
}

.goods-item-img {
width: 80px;
height: 80px;
}

.goods-item-img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}

.product-show-state {
border: 1px solid;
padding: 0px 30px;
}

.product-show-0 {
border-color: #51A97D;
color: #51A97D;
}

.product-show-1 {
border-color: #F84352;
color: #F84352;
}

.product-show-2 {
border-color: #800080;
color: #800080;
}

.product-show-3 {
border-color: #4169E1;
color: #4169E1;
}

.product-show-99999,
.product-show-99998 {
border-color: #FFA500;
color: #FFA500;
}

// 小计
.goods-calc {
padding-top: 10px;
border-top: 1px dashed #dedede;
font-size: 20px;
font-size: 16px;
}

.goods-calc-title {
font-size: 20px;
font-size: 16px;
font-weight: 700;
}

@@ -198,7 +146,7 @@
display: flex;
align-items: center;
justify-content: space-between;
font-size: 20px;
font-size: 16px;
}

.goods-calc-pay .goods-calc-sufix {
@@ -207,7 +155,7 @@

// 订单信息
.sale-after-line {
font-size: 18px;
font-size: 16px;
}

@media screen and (min-width: 1200px) {
@@ -219,7 +167,6 @@
background-color: #FFF;
width: 49.5%;
box-sizing: border-box;
margin-bottom: 10px;
}
}

@@ -232,6 +179,5 @@
background-color: #FFF;
width: 100%;
box-sizing: border-box;
margin-bottom: 10px;
}
}

+ 9
- 0
src/pages/order/order-report-detail/service.js View File

@@ -0,0 +1,9 @@
import { request } from 'umi';

export default {
getOrderReporByNumber(orderNumber) {
return request(`/kitchen/api/report-statistics/order-info-report/${orderNumber}`, {
method: 'GET',
});
}
};

+ 100
- 5
src/pages/order/order-report/index.jsx View File

@@ -1,27 +1,122 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Card, DatePicker } from 'antd';
import { Button, Card, DatePicker, Table, message, Pagination, Space } from 'antd';
import styles from './index.less';
const { RangePicker } = DatePicker;
import orderReportAPI from "./service";
import moment from 'moment';
import { history } from "umi";

const columns = [
{
title: '店铺名称',
dataIndex: 'shopName',
key: 'shopName',
},
{
title: '原价（￥）',
dataIndex: 'orderOriginalMoney',
key: 'orderOriginalMoney',
},
{
title: '优惠（￥）',
dataIndex: 'discountMoney',
key: 'discountMoney',
},
{
title: '实际支付（￥）',
dataIndex: 'orderRealMoney',
key: 'orderRealMoney',
},
{
title: '创建时间',
dataIndex: 'createdAt',
key: 'createdAt',
},
{
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>
),
},
];

/**
* 订单报表
* @returns
*/
export default function Index() {

//订单报表列表
const [orderReportList, setOrderReportList] = useState([]);
const [current, setCurrent] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [total, setTotal] = useState(0);

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())).format('YYYY-MM-DD 23:59:59')),
]); //日期选择器

useEffect(() => {
onQueryOrderReportList();
}, [current, pageSize]);



//获取订单列表
const onQueryOrderReportList = async () => {
const jsonData = {
current,
pageSize
}
const response = await orderReportAPI.getOrderReportList(jsonData);
if (response.statusCode === 200) {
setOrderReportList(response.data.data);
setTotal(response.data.total)
} else {
message.error(response.errors || '获取订单报表列表失败');
}
}

//页码变化
const onPageChange = (current, pageSize) => {
setCurrent(current);
setPageSize(pageSize);
}

return (
<PageContainer>
<Card className={styles['data-search-card']}>
<div className={styles['data-search-box']}>
<RangePicker />
<RangePicker className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => {
let tempDate = [
moment(moment(new Date(dateStrings[0])).format('YYYY-MM-DD 00:00:00')),
moment(moment(new Date(dateStrings[1])).format('YYYY-MM-DD 23:59:59')),
]
setTimeRange(tempDate);
}} />
<div className={styles['data-search-btns']}>
<Button className={styles['search-btn-item']}>重置</Button>
<Button className={styles['search-btn-item']} type="primary">查询</Button>
<Button className={styles['search-btn-item']} type="primary" onClick={onQueryOrderReportList}>查询</Button>
</div>
</div>
</Card>
<Card className={styles['table-card']}>
订单报表
<Table dataSource={orderReportList} columns={columns} pagination={false} />
<div className={styles['table-page']}>
<Pagination current={current} pageSize={pageSize} total={total} onChange={onPageChange} />
</div>
</Card>
</PageContainer>
)


+ 5
- 1
src/pages/order/order-report/index.less View File

@@ -12,5 +12,9 @@
margin-left: 20px;
}

.table-card {
.table-page {
display: flex;
justify-content: flex-end;
align-items: center;
height: 50px;
}

+ 10
- 0
src/pages/order/order-report/service.js View File

@@ -0,0 +1,10 @@
import { request } from 'umi';

export default {
getOrderReportList(data) {
return request(`/kitchen/api/report-statistics/order-report`, {
method: 'Post',
data: data,
});
}
};

Write Preview
Loading…
Cancel
Save