Merge branch 'master' of ssh://git.mmcuav.cn:8222/root/sharefly-admin-uav

src/assets/style/App.scss

@@ -11,7 +11,7 @@
     font-size: 14px;
   }
 
-  .ant-btn-link{
+  .ant-btn-link {
     padding: 0;
     font-size: 16px !important;
     font-weight: bold !important;
@@ -22,3 +22,27 @@
     }
   }
 }
+
+.ant-table-row:nth-child(odd) {
+  background: #FCFCFC;
+}
+
+.ant-table-row:nth-child(odd) > td {
+  background: #FCFCFC;
+}
+
+::-webkit-scrollbar {
+  background-color: transparent;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+  width: 7px;
+  height: 7px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #1677ff;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}

src/components/layout/index.scss

@@ -209,6 +209,7 @@ $page-background:  #F3F6FF ;
     box-sizing: border-box;
     position: relative;
     box-shadow: 0 16px 24px 0 #eeeeee;
+    min-width: 720px;
   }
 
   .layout-content::-webkit-scrollbar {

src/components/layout/menu/index.tsx

@@ -24,9 +24,10 @@ export function MenuView() {
   const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
     setOpenKeys([keys[keys.length - 1]]);
   };
-  // 点击侧边栏事件
-  const onSelect: MenuProps['onSelect'] = (keys) => {
-    setSelectedKeys(keys.selectedKeys);
+  // 点击侧边栏事件 onSelect改为onClick
+  const onSelect: MenuProps['onClick'] = (keys) => {
+    setSelectedKeys([keys.key]);
+    // setSelectedKeys(keys.selectedKeys);
     const id = Number(keys.key);
     const current = GetRouteByID(id, routerList);
     // console.log(current?.path);
@@ -74,7 +75,7 @@ export function MenuView() {
       <Menu
         openKeys={openKeys}
         selectedKeys={selectedKeys}
-        onSelect={onSelect}
+        onClick={onSelect}
         onOpenChange={onOpenChange}
         mode='inline'
         items={items}

src/pages/orderManage/productOrder/comp/detailDelivery/index.tsx

+import React from 'react';
+import { Image } from 'antd';
+
+function DetailDelivery() {
+  return (
+    <div className={'detail-delivery detail-half'}>
+      <div className={'detail-title'}>收货信息</div>
+      <div className={'detail-text'}>收货人：测试</div>
+      <div className={'detail-text'}>手机号：15889328503</div>
+      <div className={'detail-text'}>
+        收货地址：广东省深圳市南山区仙鼓路(南山区万科云城(仙鼓路西50米))
+      </div>
+
+      <div className={'detail-title'}>物流信息</div>
+      <div className={'detail-text'}>物流单号：YT6732436785799</div>
+      <div className={'detail-text'}>物流进度：--</div>
+
+      <div className={'detail-title'}>验收信息</div>
+      <div className={'detail-text'}>验收状态：已验收</div>
+      <div className={'detail-text'}>验收凭证：</div>
+      <div className={'detail-image'}>
+        {[
+          'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
+          'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
+        ].map((i, j) => (
+          <Image key={j} className={'image'} src={i} alt='付款凭证' />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default DetailDelivery;

src/pages/orderManage/productOrder/comp/detailInformation/index.tsx

+import { useState } from 'react';
+import { Table } from 'antd';
+import { ColumnsType } from 'antd/es/table';
+
+// 表格数据类型
+type TableType = any;
+
+function DetailInformation() {
+  // 表格数据
+  const [tableData] = useState<TableType>([{ id: 1 }]);
+  // 表格结构
+  const columns: ColumnsType<TableType[0]> = [
+    {
+      title: '商品',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '单价(元)',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '数量',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '订单状态',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '实收款',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+  ];
+  return (
+    <div className={'detail-information'}>
+      <div className={'detail-title'}>订单明细</div>
+      <div className={'detail-text'}>
+        <span className={'item'}>订单编号：UD202302181041156087</span>
+        <span className={'item'}>创建时间：2023-02-18 10:41:16</span>
+        <span className={'item'}>合同编号：UAV202334741131</span>
+      </div>
+      <Table
+        style={{ margin: '20px auto', width: '90%' }}
+        size='small'
+        dataSource={tableData}
+        columns={columns}
+        rowKey='id'
+        bordered
+        pagination={false}
+        // rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
+      />
+    </div>
+  );
+}
+
+export default DetailInformation;

src/pages/orderManage/productOrder/comp/detailPurchaser/index.tsx

+import React from 'react';
+import { Button, Image } from 'antd';
+
+function DetailPurchaser() {
+  return (
+    <div className={'detail-purchaser detail-half'}>
+      <div className={'detail-title'}>买家信息</div>
+      <div className={'detail-text'}>UID： UID4460817</div>
+      <div className={'detail-text'}>企业： 浙江科比特创新科技有限公司</div>
+      <div className={'detail-text'}>备注： 测试单，不用管</div>
+
+      <div className={'detail-title'}>合同信息</div>
+      <div className={'detail-text'}>合同编号： UAV202334741131</div>
+      <div className={'detail-text'}>合同状态： 已归档</div>
+      <div className={'detail-text'}>
+        合同操作：
+        <Button type={'link'}>平台签署</Button>
+        <Button type={'link'}>查看</Button>
+        <Button type={'link'}>下载</Button>
+      </div>
+
+      <div className={'detail-title'}>付款凭证</div>
+      <div className={'detail-text'}>预付款：</div>
+      <div className={'detail-image'}>
+        {[
+          'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
+          'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
+        ].map((i, j) => (
+          <Image key={j} className={'image'} src={i} alt='付款凭证' />
+        ))}
+      </div>
+      <div className={'detail-text'}>尾款：</div>
+      <div className={'detail-image'}>
+        {[
+          'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
+          'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
+        ].map((i, j) => (
+          <Image key={j} className={'image'} src={i} alt='付款凭证' />
+        ))}
+      </div>
+      <div className={'detail-text'}>全款：</div>
+      <div className={'detail-image'}>
+        {[
+          'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
+          'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
+        ].map((i, j) => (
+          <Image key={j} className={'image'} src={i} alt='付款凭证' />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default DetailPurchaser;

src/pages/orderManage/productOrder/detail/index.scss

+.order-detail {
+  position: relative;
+  box-sizing: border-box;
+
+  .order-head {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .head-text {
+      font-size: 13px;
+      font-weight: 600;
+      color: #000000;
+
+      div {
+        margin-bottom: 10px;
+
+        span {
+          margin-right: 20px;
+        }
+      }
+    }
+  }
+
+  .detail-wrap {
+    position: relative;
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    margin-top: 15px;
+    padding-bottom: 100px;
+
+    .detail-information {
+      margin-top: 10px;
+      width: 100%;
+    }
+
+    .detail-half {
+      width: 50%;
+    }
+
+    .detail-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: #000000;
+      margin-bottom: 15px;
+      margin-top: 20px;
+    }
+
+    .detail-title:first-child {
+      margin-top: 0;
+    }
+
+    .detail-text {
+      margin-bottom: 10px;
+
+      .item {
+        margin-right: 20px;
+      }
+    }
+
+    .detail-image {
+      display: flex;
+      justify-content: flex-start;
+      margin-left: 56px;
+      margin-top: -20px;
+      margin-bottom: 10px;
+
+      .image {
+        width: 68px;
+        height: 68px;
+        //margin-right: 10px;
+      }
+
+      .ant-image {
+        margin-right: 10px;
+      }
+    }
+  }
+}

src/pages/orderManage/productOrder/detail/index.tsx

+import { useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { Button } from 'antd';
+import './index.scss';
+import DetailDelivery from '~/pages/orderManage/productOrder/comp/detailDelivery';
+import DetailPurchaser from '~/pages/orderManage/productOrder/comp/detailPurchaser';
+import DetailInformation from '~/pages/orderManage/productOrder/comp/detailInformation';
+
+function ProductOrderDetail() {
+  // 路由钩子
+  const navigate = useNavigate();
+  // 参数钩子
+  const [searchParams] = useSearchParams();
+  // 接收到的参数
+  const id = searchParams.get('id');
+  // 返回上一页
+  const handleBack = () => {
+    navigate(-1);
+  };
+  // componentDidMount
+  useEffect(() => {
+    console.log('拿到的id是 --->', id);
+  }, [id]);
+  return (
+    <div className={'order-detail'}>
+      <div className={'order-head'}>
+        <div className='head-text'>
+          <div>
+            <span>订单编号：R2023051916330461</span>
+            <span>合同编号：UAV202334741131</span>
+          </div>
+          <div>
+            <span>当前状态：交易完成</span>
+            <span>创建时间：2023-02-18 10:41:16</span>
+          </div>
+        </div>
+        <Button type={'primary'} onClick={() => handleBack()}>
+          返回
+        </Button>
+      </div>
+      <div className={'detail-wrap'}>
+        <DetailPurchaser />
+        <DetailDelivery />
+        <DetailInformation />
+      </div>
+    </div>
+  );
+}
+
+export default ProductOrderDetail;

src/pages/orderManage/productOrder/index.tsx

 import { useState } from 'react';
 import SearchBox from '~/components/search-box';
-import { Button } from 'antd';
+import { Button, Table } from 'antd';
+import { ColumnsType } from 'antd/es/table';
+import { useNavigate } from 'react-router-dom';
+import qs from 'query-string';
+
+// 表格数据类型
+type TableType = any;
 
 // 订单状态搜索列表
 const statusCodeButtonList = [
@@ -14,12 +20,105 @@ const statusCodeButtonList = [
 ];
 
 function ProductOrderView() {
+  // 路由钩子
+  const navigate = useNavigate();
   // 当前选择的是第几个按钮
   const [statusCodeButtonIndex, setStatusCodeButtonIndex] = useState<number>(0);
+  // 表格分页配置
+  const [pagination] = useState({
+    total: 0,
+    pageSize: 10,
+    current: 1,
+    totalPage: 0,
+  });
+  // 表格数据
+  const [tableData] = useState<TableType>([{ id: 1 }]);
   // 订单状态筛选
-  const statusChangeEvent = (index: number) => {
-    setStatusCodeButtonIndex(index);
+  const statusChangeEvent = (i: number) => {
+    console.log('订单状态筛选 --->', i);
+    setStatusCodeButtonIndex(i);
+  };
+  // 跳转订单详情
+  const handleDetail = (record: TableType[0]) => {
+    console.log('跳转订单详情 --->', record.id);
+    navigate(`/orderManage/productOrder/detail?${qs.stringify({ id: record.id })}`);
   };
+  // 表格结构
+  const columns: ColumnsType<TableType[0]> = [
+    {
+      title: '商品',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '单价(元)',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '数量',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '买家',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '订单状态',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '实收款',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '相关运营',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '推荐人',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '订单交期',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '备注',
+      dataIndex: 'remark',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '操作',
+      dataIndex: 'action',
+      align: 'center',
+      fixed: 'right',
+      render: (_text, record) => (
+        <>
+          <Button type={'link'} onClick={() => handleDetail(record)}>
+            详情
+          </Button>
+        </>
+      ),
+    },
+  ];
   return (
     <>
       <SearchBox
@@ -68,6 +167,24 @@ function ProductOrderView() {
           </>
         }
       />
+      <Table
+        size='small'
+        dataSource={tableData}
+        columns={columns}
+        rowKey='id'
+        scroll={{ x: 1200 }}
+        pagination={{
+          total: pagination.total,
+          pageSize: pagination.pageSize,
+          current: pagination.current,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          // onChange: (page: number, pageSize: number) =>
+          //   paginationChange(page, pageSize),
+          showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
+        }}
+        // rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
+      />
     </>
   );
 }

src/router/router.tsx

@@ -2,7 +2,18 @@ import React from 'react';
 import { Navigate, RouteObject } from 'react-router-dom';
 import ErrorPage from '~/pages/common/error';
 import LayoutView from '~/components/layout';
+<<<<<<< HEAD
 import { AccountBookOutlined, MacCommandOutlined ,GiftOutlined,PayCircleOutlined} from '@ant-design/icons';
+=======
+import {
+  AccountBookOutlined,
+  BarsOutlined,
+  MacCommandOutlined,
+  ShopOutlined,
+  CreditCardOutlined,
+  ShoppingOutlined,
+} from '@ant-design/icons';
+>>>>>>> 6b4387b5925df322c6d7c37e64e4fc9eea147962
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { AgnosticIndexRouteObject } from '@remix-run/router';
@@ -14,6 +25,7 @@ import PointDetailList from '~/pages/pointManage/pointDetail';
 import DivideOrder from '~/pages/pointManage/divideOrder';
 import DivideRules from '~/pages/pointManage/divideRules';
 import LoginView from '~/pages/common/login';
+import ProductOrderDetail from '~/pages/orderManage/productOrder/detail';
 
 const ActivityList = React.lazy(() => import('src/pages/activityManage/activityList'));//活动管理
 const ProductOrderView = React.lazy(() => import('src/pages/orderManage/productOrder')); //销售订单
@@ -79,7 +91,7 @@ export const routerList: Array<RouteObjectType> = [
     errorElement: <ErrorPage />,
     meta: {
       id: 10000,
-      icon: <MacCommandOutlined />,
+      icon: <BarsOutlined />,
       title: '订单管理',
     },
     children: [
@@ -89,7 +101,17 @@ export const routerList: Array<RouteObjectType> = [
         meta: {
           id: 10010,
           title: '商城订单',
-          icon: <MacCommandOutlined />,
+          icon: <ShoppingOutlined />,
+        },
+      },
+      {
+        path: '/orderManage/productOrder/detail',
+        element: withLoadingComponent(<ProductOrderDetail />),
+        meta: {
+          id: 10010,
+          title: '商城订单 / 详情',
+          icon: <ShoppingOutlined />,
+          hidden: true,
         },
       },
       {
@@ -98,7 +120,7 @@ export const routerList: Array<RouteObjectType> = [
         meta: {
           id: 10020,
           title: '租赁订单',
-          icon: <MacCommandOutlined />,
+          icon: <ShopOutlined />,
         },
       },
       {
@@ -107,7 +129,7 @@ export const routerList: Array<RouteObjectType> = [
         meta: {
           id: 10030,
           title: '服务订单',
-          icon: <MacCommandOutlined />,
+          icon: <CreditCardOutlined />,
         },
       },
     ],
@@ -214,7 +236,6 @@ export const routerList: Array<RouteObjectType> = [
           title: '活动优惠券操作',
           icon: <PayCircleOutlined />,
           hidden:true,
-          selectKey:'/couponManage/couponList'
         },
       },
       {