From 1ccf734c0567bdd00a91f30fee9cf7f1c215427d Mon Sep 17 00:00:00 2001 From: yangwenhua <1289978696@qq.com> Date: Fri, 24 Jun 2022 14:50:34 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E7=94=A8=E8=AE=A2=E5=8D=95=E6=8A=A5?= =?UTF-8?q?=E8=A1=A8=E3=80=81=E8=AE=A2=E5=8D=95=E6=8A=A5=E8=A1=A8=E8=AF=A6?= =?UTF-8?q?=E6=83=85=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/routes.js | 2 +- src/pages/order/order-report-detail/index.jsx | 325 +++++++++--------- .../order/order-report-detail/index.less | 96 ++---- .../order/order-report-detail/service.js | 9 + src/pages/order/order-report/index.jsx | 105 +++++- src/pages/order/order-report/index.less | 6 +- src/pages/order/order-report/service.js | 10 + 7 files changed, 302 insertions(+), 251 deletions(-) create mode 100644 src/pages/order/order-report-detail/service.js create mode 100644 src/pages/order/order-report/service.js diff --git a/config/routes.js b/config/routes.js index 2df949c..cc29f64 100644 --- a/config/routes.js +++ b/config/routes.js @@ -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', }, diff --git a/src/pages/order/order-report-detail/index.jsx b/src/pages/order/order-report-detail/index.jsx index aefa3a0..1761009 100644 --- a/src/pages/order/order-report-detail/index.jsx +++ b/src/pages/order/order-report-detail/index.jsx @@ -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 ( -
- {/* 用户基本信息 */} -
-
-
- #{orderInfo.sortId} -
-
- 立即制作 -
-
- 2022-6-23 10:36:42 前制作完成 -
-
-
-
- 用户头像 + +
+ {/* 用户基本信息 */} +
+
+
+ #0 +
+
+ 订单时间 +
+
+ {orderInfo.createdAt} +
-
-
- {memberInfo.nickName} +
+
+
-
- #门店新客 - #门店会员 +
+
+ {orderInfo.memberInfo.memberName || '系统用户'} +
+
+ #门店新客 + #门店会员 +
-
-
- - 为保证服务体验，您在拨打或接听隐私号电话时，可能被录音 -
-
- - 顾客电话 - - - {memberInfo.phone} - -
-
- - 顾客地址 - - - {memberInfo.address} - -
-
+
+ + 为保证服务体验，您在拨打或接听隐私号电话时，可能被录音 +
+
+ + 顾客电话 + + + {orderInfo.memberInfo.phone || '暂无电话'} + +
+ {/*
备餐状态
制作中
+
*/}
-
- {/* 订单数据 */} -
-
- 订单信息 -
-
-
订单编号
-
{orderInfo.orderNumber}
-
-
-
支付方式
-
{orderInfo.payMode === 0 ? '微信支付' : '其他支付'}
-
-
-
下单时间
-
{orderInfo.createdAt}
-
-
-
就餐人数
-
商家按餐量提供
-
-
-
桌台号码
-
{orderInfo.orderSourceFrom}
-
-
- {/* 商品信息 */} -
-
- 商品信息 + {/* 订单数据 */} +
+
+ 订单信息 +
+
+
订单编号
+
{orderInfo.orderNumber}
+
+
+
支付方式
+
微信支付
+
+
+
下单时间
+
{orderInfo.createdAt}
+
+
+
就餐人数
+
商家按餐量提供
+
+
+
桌台号码
+
0
+
-
- { - orderInfo.orderDetail.map(item => { - return ( -
-
- 商品图片 -
-
- {item.goodName} -
-
- ￥{item.originalMoney} -
-
- x1份 -
-
- {item.order_Status === 0 ? '等待制作' : ''} - {item.order_Status === 1 ? '制作中' : ''} - {item.order_Status === 2 ? '等待取餐' : ''} - {item.order_Status === 3 ? '取餐完成' : ''} - {item.order_Status === 99998 ? '正常订单' : ''} - {item.order_Status === 99999 ? '异常订单' : ''} + {/* 商品信息 */} +
+
+ 商品信息 +
+
+ { + orderInfo.goodsInfo.map(item => { + return ( +
+
+ +
+
+ {item.goodsName || '暂无名称'} +
+
+ ￥{item.memberPrice} +
+
+ x{item.count}份 +
-
- ) - }) - } -
- {/* 小计 */} -
-
小计
-
-
优惠金额
-
￥{orderInfo.discountMoney}
+ ) + }) + }
-
-
支付金额
-
￥{orderInfo.orderRealMoney}
+ {/* 小计 */} +
+
小计
+
+
优惠金额
+
￥{orderInfo.discountMoney}
+
+
+
支付金额
+
￥{orderInfo.orderRealMoney}
+
-
- {/* 售后信息 */} -
-
- 售后信息 + {/* 售后信息 */} +
+
+ 售后信息 +
+ + { + saleAfterInfo.map(item => { + return ( + +
+ {item.createdAt} {item.stutasStr} +
+ + ) + }) + } +
- - { - saleAfterInfo.map(item => { - return ( - -
- {item.createdAt} {item.stutasStr} -
- - ) - }) - } -
-
+ + ) } diff --git a/src/pages/order/order-report-detail/index.less b/src/pages/order/order-report-detail/index.less index f6a5d24..474bef4 100644 --- a/src/pages/order/order-report-detail/index.less +++ b/src/pages/order/order-report-detail/index.less @@ -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; } } \ No newline at end of file diff --git a/src/pages/order/order-report-detail/service.js b/src/pages/order/order-report-detail/service.js new file mode 100644 index 0000000..bc9b448 --- /dev/null +++ b/src/pages/order/order-report-detail/service.js @@ -0,0 +1,9 @@ +import { request } from 'umi'; + +export default { + getOrderReporByNumber(orderNumber) { + return request(`/kitchen/api/report-statistics/order-info-report/${orderNumber}`, { + method: 'GET', + }); + } +}; diff --git a/src/pages/order/order-report/index.jsx b/src/pages/order/order-report/index.jsx index dcd0de6..d8cf635 100644 --- a/src/pages/order/order-report/index.jsx +++ b/src/pages/order/order-report/index.jsx @@ -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) => ( + + { + history.push({ + pathname: '/order/order-report/order-report-detail', + query: { + orderNumber: record.orderNumber + } + }); + }}>详情 + + ), + }, +]; + /** * 订单报表 * @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 (
- + { + 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); + }} />
- +
- 订单报表 + +
+ +
) diff --git a/src/pages/order/order-report/index.less b/src/pages/order/order-report/index.less index 74d0c92..9487917 100644 --- a/src/pages/order/order-report/index.less +++ b/src/pages/order/order-report/index.less @@ -12,5 +12,9 @@ margin-left: 20px; } -.table-card { +.table-page { + display: flex; + justify-content: flex-end; + align-items: center; + height: 50px; } \ No newline at end of file diff --git a/src/pages/order/order-report/service.js b/src/pages/order/order-report/service.js new file mode 100644 index 0000000..11107ef --- /dev/null +++ b/src/pages/order/order-report/service.js @@ -0,0 +1,10 @@ +import { request } from 'umi'; + +export default { + getOrderReportList(data) { + return request(`/kitchen/api/report-statistics/order-report`, { + method: 'Post', + data: data, + }); + } +};