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
4fbc9f2a98
commit
47ceaf7595
3 changed files with 450 additions and 0 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +6
    -0
      config/routes.js
  2. +213
    -0
      src/pages/order/order-report-detail/index.jsx
  3. +231
    -0
      src/pages/order/order-report-detail/index.less

+ 6
- 0
config/routes.js View File

@@ -598,6 +598,12 @@ export default [
component: './order/order-report',
access: 'k31',
},
{
name: '订单报表详情',
path: '/order/order-report-detail',
component: './order/order-report-detail',
access: 'k31',
},
{
name: '营收报表',
path: '/order/order-revenue-statement',


+ 213
- 0
src/pages/order/order-report-detail/index.jsx View File

@@ -0,0 +1,213 @@
import React, { useState } from 'react';
import { Button, Card, Image, Timeline } from 'antd';
import styles from './index.less';
import { ExclamationCircleOutlined } from '@ant-design/icons';
/**
* 订单详情
* @returns
*/
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'
});

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: "已退款"
},
]);

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>
</div>
<div className={styles['member-info-row']}>
<div className={styles['member-info-head']}>
{memberInfo.nickName}
</div>
<div className={styles['member-info-label']}>
<span>#门店新客</span>
<span>#门店会员</span>
</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['prepare-meals-title']}>
备餐状态
</div>
<div className={styles['prepare-meals-status']}>
制作中
</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>
<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>
</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>
</div>
</div>
{/* 售后信息 */}
<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>
</div>
)
}

+ 231
- 0
src/pages/order/order-report-detail/index.less View File

@@ -0,0 +1,231 @@
.order-detail-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.order-head-card, .goods-card {
padding: 20px;
background-color: #FFF;
width: 50%;
box-sizing: border-box;
}

.order-head {
display: flex;
align-items: center;
position: relative;
height: 50px;
margin-bottom: 10px;
}

.order-head::before {
position: absolute;
content: '';
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);
}

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

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

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

// 用户信息
.member-info {
display: flex;
}
.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;
justify-content: center;
}

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

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

.member-info-label span {
margin-right: 10px;
}

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

.member-info-privacy span {
margin-left: 10px;
}

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

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

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

.prepare-meals-title {
font-weight: 700;
}

// 商品信息
.goods-card {
// margin-top: 20px;
}

.goods-title {
font-size: 30px;
font-weight: 700;
margin-bottom: 10px;
}

.goods-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
font-size: 20px;
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;
}

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

.goods-calc-item {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 20px;
}

.goods-calc-pay .goods-calc-sufix {
color: #F84352;
}

// 订单信息
.order-base-card {
width: 49%;
background-color: #FFF;
padding: 20px;
box-sizing: border-box;
}

.sale-after-card {
margin-top: 20px;
width: 49%;
background-color: #FFF;
padding: 20px;
box-sizing: border-box;
}

.sale-after-line {
font-size: 18px;
}

Write Preview
Loading…
Cancel
Save