Merge branch 'master' of ssh://git.mmcuav.cn:8222/iuav/csf-web into caoyun

components/NavHeader/index.tsx

@@ -125,23 +125,11 @@ export default function NavHeader(props: Props) {
               menu={{
                 items: [
                   {
-                    key: "3",
-                    label: (
-                      <div
-                        onClick={() =>
-                          router.push("/personalCenter/leasingOrders")
-                        }
-                      >
-                        租赁订单
-                      </div>
-                    ),
-                  },
-                  {
                     key: "2",
                     label: (
                       <div
                         onClick={() =>
-                          router.push("/personalCenter/mallOrders")
+                          router.push("/personalCenter/servicesOrders")
                         }
                       >
                         我的订单

components/filter/compoents/typeInfo/index.tsx

@@ -23,19 +23,26 @@ export default function CategoryItem(props: Props) {
     })
   }
 
+  const showCount = 14;   //展示数量
+
   return (
     <div className={styles.filterItem}>
       <div className={styles.filterItemTitle}>{props.typeName}：</div>
       <div
         className={`${styles.filterItemMain} ${
-          data.length <= 10 && styles.disabled
+          data.length <= showCount && styles.disabled
         }`}
       >
-        <Collapse ghost collapsible="icon" expandIconPosition="end">
+        <Collapse
+          ghost
+          collapsible="icon"
+          expandIconPosition="end"
+          style={{ width: "100%" }}
+        >
           <Collapse.Panel
             header={
-              <Space size={40}>
-                {data.slice(0, 10).map((item) => {
+              <Space size={[40, 0]}>
+                {data.slice(0, showCount).map((item) => {
                   return (
                     <Button
                       type="link"
@@ -44,14 +51,14 @@ export default function CategoryItem(props: Props) {
                     >
                       {item.name}
                     </Button>
-                  )
+                  );
                 })}
               </Space>
             }
             key="1"
           >
             <Space size={40}>
-              {data.slice(10).map((item) => {
+              {data.slice(showCount).map((item) => {
                 return (
                   <Button
                     type="link"
@@ -60,12 +67,12 @@ export default function CategoryItem(props: Props) {
                   >
                     {item.name}
                   </Button>
-                )
+                );
               })}
             </Space>
           </Collapse.Panel>
         </Collapse>
       </div>
     </div>
-  )
+  );
 }

components/filter/index.module.scss

@@ -31,6 +31,7 @@
     flex: 1;
     display: flex;
     justify-content: space-between;
+    overflow: hidden;
 
     &.disabled {
       :global .ant-collapse-expand-icon {

components/filter/index.tsx

@@ -311,6 +311,7 @@ const Filter = (props: Props, ref: Ref<any>) => {
         {typeInfo?.length &&
           typeInfo?.map((item) => (
             <TypeInfo
+              key={item.directoryId}
               typeName={item.name}
               dataValue={item.categoriesInfoListDTO}
               onChange={(item: FilterOptionResp) =>

pages/equipmentLeasing/detail/[id].page.tsx

@@ -320,7 +320,7 @@ export default function EquipmentLeasingDetail() {
                     }}
                   >
                     {detail?.images.map((item) => (
-                      <AImage src={item.imgUrl} />
+                      <AImage key={item.id} src={item.imgUrl} />
                     ))}
                   </AImage.PreviewGroup>
                 </div>

pages/mall/api/index.ts

 import request, { Response } from '~/api/request'
 
-export interface ListPageGoodsInfoParams {
-  pageNo: number
-  pageSize: number
-  categoryId?: any[]
-  provinceId?: number
-  type: 0
+export interface DeviceListParams {
+  categoryId?: any[];
+  pageNo: number;
+  pageSize: number;
+  provinceId?: number;
+  type: number;
 }
 
 export interface Goods {
-  goodsName: string
-  id: number
-  images: string
-  price: number | null
+  id: number;
+  goodsName: string;
+  images: string;
+  price?: any;
 }
 
-export interface ListPageGoodsInfoResp {
-  pageNo: 1
-  pageSize: 10
-  list: Array<Goods>
-  totalCount: 0
-  totalPage: 0
+export interface DeviceListResp {
+  "pageNo": 1,
+  "pageSize": 10,
+  "list": Array<Goods>,
+  "totalCount": 0,
+  "totalPage": 0
 }
 
 export interface Ad {
   id: number
-  imageUrl: string
+  bannerImg: string
 }
 
 export default {
   //web-商品信息-分页
-  listPageGoodsInfo: (
-    params: ListPageGoodsInfoParams,
-    options = {}
-  ): Promise<Response<ListPageGoodsInfoResp>> => {
+  deviceList: (params: DeviceListParams, options = {}): Promise<Response<DeviceListResp>> => {
     return request('/pms/product/mall/deviceList', 'post', params, options)
   },
   //产品商城广告位
-  ad: (): Promise<Response<Array<Ad>>> => {
-    return request('/pms/webProductMall/ad')
+  listBannerImg: () => {
+    return request('/release/module/listBannerImg', 'get', {
+      moduleCode: 'PRODUCT_MARKETP'
+    })
   },
 }

pages/mall/detail/[id].page.tsx

@@ -129,10 +129,7 @@ export default function MallDetail() {
             <div className={`${styles.font1} ${styles.ellipsis}`}>
               {detail?.goodsName}
             </div>
-            <div
-              className={`${styles.font2} ${styles.ellipsis}`}
-              style={{ height: 22 }}
-            >
+            <div className={`${styles.font2} ${styles.ellipsis2}`} style={{}}>
               {detail?.goodsDetail?.goodsDesc}
             </div>
             <Space

pages/mall/detail/index.module.scss

@@ -4,6 +4,10 @@
   @include ellipsis(1);
 }
 
+.ellipsis2 {
+  @include ellipsis(2);
+}
+
 .font1 {
   font-size: 28px;
   font-weight: bold;

pages/mall/index.page.tsx

@@ -4,7 +4,7 @@ import Layout from '~/components/layout'
 import styles from './index.module.scss'
 import { useRouter } from 'next/router'
 import Filter, { AdapterResult, FilterResult } from '~/components/filter'
-import api, { Ad, Goods, ListPageGoodsInfoParams } from './api'
+import api, { Ad, Goods } from './api'
 import errImg from '~/assets/errImg'
 
 // 此函数在构建时被调用
@@ -23,14 +23,12 @@ export default function Mall(props: Props) {
   const [pageParams, setPageParams] = useState<{
     pageNo: number
     pageSize: number
-    type: 0
   }>({
     pageNo: 1,
     pageSize: 15,
-    type: 0,
   }) //分页器对象
   const [count, setCount] = useState(0) //商品总数
-  const [abort, setAbort] = useState<AbortController | null>(null) //请求中断对你
+  const [abort, setAbort] = useState<AbortController | null>(null) //请求中断对象
   const [adList, setAdList] = useState<Array<Ad>>([]) //广告列表
   const [loading, setLoading] = useState(false)
 
@@ -47,27 +45,28 @@ export default function Mall(props: Props) {
     }
     setLoading(true)
     api
-      .listPageGoodsInfo(
+      .deviceList(
         {
-          ...filterResult,
+          type: 0,
           ...pageParams,
+          ...filterResult,
         },
         {
           signal: abort?.signal,
         }
       )
       .then((res) => {
-        setProductList(res.result?.list || [])
-        setCount(res.result?.totalCount || 0)
-        setLoading(false)
-      })
+        setProductList(res.result?.list || []);
+        setCount(res.result?.totalCount || 0);
+        setLoading(false);
+      });
   }, [abort])
 
   //广告请求
   useEffect(() => {
-    api.ad().then((res) => {
-      setAdList(res.result || [])
-    })
+    api.listBannerImg().then((res) => {
+      setAdList(res.result || []);
+    });
   }, [])
 
   const onFilterChange = (
@@ -89,9 +88,9 @@ export default function Mall(props: Props) {
   }
   return (
     <Layout>
-      <div className="page" style={{ paddingTop: '18px' }}>
+      <div className="page" style={{ paddingTop: "18px" }}>
         <Filter
-          types={['类目', '地域', '品牌', '部件' /*  "型号", "成色" */]}
+          types={["地域"]}
           showResultItem
           onChange={onFilterChange}
         ></Filter>
@@ -99,42 +98,45 @@ export default function Mall(props: Props) {
         <div className={styles.productList}>
           <div className={styles.main}>
             <div className={styles.listContent}>
-              <ul className={styles.listWrap}>
-                {productList.map((item, i) => {
-                  return (
-                    <li
-                      key={i}
-                      className={styles.item}
-                      onClick={() => router.push('/mall/detail/' + item.id)}
-                    >
-                      <div className={styles.imgBox}>
-                        <Image
-                          alt=""
-                          src={item.images}
-                          className={styles.img}
-                          width={116}
-                          height={116}
-                          preview={false}
-                        ></Image>
-                      </div>
-                      <div className={styles.title}>{item.goodsName}</div>
-                      <div className={styles.sellCount}>
-                        半年售
-                        {(Math.floor(Math.random() * 901) + 100).toFixed(0)}
-                      </div>
-                    </li>
-                  )
-                })}
-                {productList.length === 0 && (
-                  <Empty
-                    style={{
-                      paddingTop: 20,
-                      width: '100%',
-                      textAlign: 'center',
-                    }}
-                  ></Empty>
-                )}
-              </ul>
+              <Spin spinning={loading} delay={500}>
+                <ul className={styles.listWrap}>
+                  {productList.map((item, i) => {
+                    return (
+                      <li
+                        key={i}
+                        className={styles.item}
+                        onClick={() => router.push("/mall/detail/" + item.id)}
+                      >
+                        <div className={styles.imgBox}>
+                          <Image
+                            alt=""
+                            src={item.images}
+                            className={styles.img}
+                            width={116}
+                            height={116}
+                            preview={false}
+                          ></Image>
+                        </div>
+                        <div className={styles.title}>{item.goodsName}</div>
+                        <div className={styles.sellCount}>
+                          半年售
+                          {(Math.floor(Math.random() * 901) + 100).toFixed(0)}
+                        </div>
+                      </li>
+                    );
+                  })}
+                  {productList.length === 0 && (
+                    <Empty
+                      style={{
+                        paddingTop: 20,
+                        width: "100%",
+                        textAlign: "center",
+                      }}
+                    ></Empty>
+                  )}
+                </ul>
+              </Spin>
+
               <div className={styles.paginationPage}>
                 <Pagination
                   current={pageParams.pageNo}
@@ -155,18 +157,18 @@ export default function Mall(props: Props) {
                   <Image
                     key={item.id}
                     className={styles.ad}
-                    src={item.imageUrl}
+                    src={item.bannerImg}
                     width={189}
                     height={295}
                     preview={false}
                     fallback={errImg}
                   ></Image>
-                )
+                );
               })}
             </div>
           </div>
         </div>
       </div>
     </Layout>
-  )
+  );
 }

pages/personalCenter/components/sider/index.tsx

@@ -26,7 +26,7 @@ const items: MenuItem[] = [
     getItem("服务订单", "/personalCenter/servicesOrders"),
     getItem("租赁订单", "/personalCenter/leasingOrders"),
     getItem("商城订单", "/personalCenter/mallOrders"),
-    getItem("培训订单", "1-2"),
+    getItem("培训订单", "/personalCenter/trainOrders"),
   ]),
   getItem("账户信息", "2"),
   getItem("优惠券卡包", "3"),

pages/personalCenter/servicesOrders/api/index.ts

+import request, { Response } from "~/api/request"
+
+export interface QueryOrderTaskListParams {
+  orderStatus?: number;
+  pageNo: number;
+  pageSize: number;
+}
+
+export interface QueryOrderTaskListResp {
+  pageNo: number;
+  pageSize: number;
+  list: OrderList[];
+  totalCount: number;
+  totalPage: number;
+}
+
+export interface OrderList {
+  address: string;
+  city: string;
+  endTime: string;
+  images: any[];
+  inspectionId: number;
+  lat: number;
+  lon: number;
+  orderAmt: number;
+  orderName: string;
+  orderStatus: number,
+  orderNo: string;
+  province: string;
+  startTime: string;
+  taskDescription: string;
+}
+
+
+export interface GetServiceOrderStatusResp {
+  id: number;
+  orderStatus: number;
+  userPort: string;
+  flyerPort: string;
+  managePort: string;
+}
+
+export default {
+  //查询服务订单列表
+  queryOrderTaskList(params: QueryOrderTaskListParams, options: any): Promise<Response<QueryOrderTaskListResp>> {
+    return request('/oms/serviceOrderTask/queryOrderTaskList', 'post', params, options)
+  },
+
+  //订单状态-字典
+  getServiceOrderStatus(): Promise<Response<GetServiceOrderStatusResp[]>> {
+    return request('/oms/serviceOrderTask/getServiceOrderStatus', 'POST');
+  }
+}
\ No newline at end of file

pages/personalCenter/servicesOrders/index.module.scss

+@import "~/styles/mixins.scss";
+
 .font1 {
   font-size: 14px;
   font-family: MicrosoftYaHei;
   color: #9b9b9b;
   line-height: 19px;
 }
+
+.font2 {
+  font-size: 12px;
+  font-family: Arial-BoldMT, Arial;
+  font-weight: normal;
+  color: #626262;
+  line-height: 14px;
+}
+
+.font3 {
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #6c6c6c;
+  line-height: 20px;
+}
+
+.font4 {
+  font-size: 14px;
+  font-family: ArialMT;
+  color: #141414;
+  line-height: 16px;
+}
+
+.font5 {
+  font-size: 12px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #929295;
+  line-height: 17px;
+}
+
+.font6 {
+  font-size: 13px;
+  font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+  font-weight: bold;
+  color: #070707;
+  line-height: 16px;
+}
+
+.btn1 {
+  border-radius: 16px;
+  border: 1px solid #ff552d;
+  padding: 6px 16px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ff552d;
+  line-height: 20px;
+}
+
+.btn2 {
+  border-radius: 16px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 20px;
+  padding: 6px 16px;
+}

pages/personalCenter/servicesOrders/index.page.tsx

-import { TabsProps, Tabs } from "antd";
-import {useRouter} from "next/router";
+import {
+  TabsProps,
+  Tabs,
+  Row,
+  Col,
+  Image,
+  Space,
+  Button,
+  Spin,
+  Pagination,
+  Empty,
+} from "antd";
+import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import errImg from "~/assets/errImg";
+import Right from "~/components/contentBox/right";
 import LayoutView from "~/components/layout";
 import Sider from "../components/sider";
+import api, { OrderList, GetServiceOrderStatusResp } from "./api";
 import styles from "./index.module.scss";
-
-const onChange = (key: string) => {
-  console.log(key);
-};
+import Moment from 'moment';
 
 const items: TabsProps["items"] = [
   {
-    key: "1",
-    label: `Tab 1`,
-    children: `Content of Tab Pane 1`,
+    key: "",
+    label: `全部`,
+  },
+  {
+    key: "200",
+    label: `待付款`,
   },
   {
-    key: "2",
-    label: `Tab 2`,
-    children: `Content of Tab Pane 2`,
+    key: "575",
+    label: `待验收`,
   },
   {
-    key: "3",
-    label: `Tab 3`,
-    children: `Content of Tab Pane 3`,
+    key: "700",
+    label: `已完成`,
+  },
+  {
+    key: "900",
+    label: `已取消`,
   },
 ];
 
 export default function ServicesOrder() {
   const router = useRouter();
+  const [pageParams, setPageParams] = useState({
+    pageNo: 1,
+    pageSize: 5,
+  }); //分页器对象
+  const [total, setTotal] = useState(0); //总数
+  const [abort, setAbort] = useState<AbortController | null>(null); //请求中断对你
+  const [tabKey, setTabKey] = useState("");
+  const [orderList, setOrderList] = useState<OrderList[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [orderNo, setOrderNo] = useState<string | undefined>();
+  const [tranStatusMap, setTranStatusMap] = useState<GetServiceOrderStatusResp[]>([]); //订单状态字典
+
+  //获取订单状态字典
+  useEffect(() => {
+    api.getServiceOrderStatus().then((res) => {
+      setTranStatusMap(res.result || []);
+    });
+  }, []);
+
+  useEffect(() => {
+    //中断前一次列表请求
+    abort?.abort();
+    setAbort(new AbortController());
+  }, [pageParams]);
+
+  //商品列表请求
+  useEffect(() => {
+    if (!abort) {
+      return;
+    }
+    setLoading(true);
+    api
+      .queryOrderTaskList(
+        {
+          ...pageParams,
+          orderStatus: Number(tabKey),
+        },
+        {
+          signal: abort?.signal,
+        }
+      )
+      .then((res) => {
+        setOrderList(res.result?.list || []);
+        setTotal(res.result?.totalCount || 0);
+        setLoading(false);
+      });
+  }, [abort]);
+
+  const onPageChange = (page: number, pageSize: number) => {
+    setPageParams({
+      ...pageParams,
+      pageNo: page,
+    });
+  };
+
+  const onTabsChange = (key: string) => {
+    setTabKey(key);
+    setPageParams({
+      ...pageParams,
+      pageNo: 1,
+    });
+    setTotal(0);
+  };
 
   return (
     <>
       <LayoutView
         layoutStyle={{ backgroundColor: "#fff" }}
         contentStyle={{ width: 1000, marginLeft: 526 }}
+        headerStyle={{ borderBottom: "1px solid #e2e2e2" }}
       >
         <Sider
           style={{
             position: "absolute",
             left: -37,
+            top: 15,
             transform: "translateX(-100%)",
           }}
           selectedKeys={[router.pathname]}
         ></Sider>
-        <div>
+        <div style={{ paddingTop: 19 }}>
           <div className={styles.font1}>服务订单</div>
-          <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
+          <Tabs activeKey={tabKey} items={items} onChange={onTabsChange} />
+          <Spin spinning={loading} delay={500}>
+            <ul className={styles.orderList} style={{ minHeight: 650 }}>
+              {orderList.map((item) => {
+                return (
+                  <li key={item.inspectionId} className={styles.orderItem}>
+                    <Row
+                      justify="space-between"
+                      align="middle"
+                      style={{
+                        height: 30,
+                        padding: "0 26px 0 16px",
+                        background: "#EBF8FF",
+                      }}
+                    >
+                      <div className={styles.font2}>
+                        {Moment(item.startTime).format("YYYY/MM/DD")} -{" "}
+                        {Moment(item.endTime).format("YYYY/MM/DD")}
+                      </div>
+                      <div className={styles.font3}>
+                        {
+                          tranStatusMap.find(
+                            (status) => status.orderStatus === item.orderStatus
+                          )?.userPort
+                        }
+                      </div>
+                    </Row>
+                    <Row
+                      style={{ minHeight: 100, border: "1px solid #D0EAF5" }}
+                    >
+                      <Col style={{ width: 380 }}>
+                        <Row>
+                          <div style={{ margin: "10px 10px 0 16px" }}>
+                            <Image
+                              width={80}
+                              height={80}
+                              preview={false}
+                              fallback={errImg}
+                              src={item.images[0]}
+                            ></Image>
+                          </div>
+
+                          <div style={{ marginTop: 12 }}>
+                            <div className={`ellipsis1 ${styles.font4}`}>
+                              {item.orderName}
+                            </div>
+                          </div>
+                        </Row>
+                      </Col>
+                      <Col
+                        style={{
+                          width: 270,
+                          borderLeft: "1px solid #D0EAF5",
+                          borderRight: "1px solid #D0EAF5",
+                        }}
+                      >
+                        <Row
+                          justify={"center"}
+                          align="middle"
+                          style={{ height: "100%" }}
+                        >
+                          预付金额:{" "}
+                          <span className={styles.font6}>¥{item.orderAmt}</span>
+                        </Row>
+                      </Col>
+                      <Col flex={"auto"} style={{}}>
+                        <Space
+                          size={7}
+                          style={{
+                            float: "right",
+                            marginTop: 20,
+                            marginRight: 24,
+                          }}
+                        >
+                          <Space direction="vertical" size={0} align="center">
+                            <Button className={styles.btn2} type="primary">
+                              预付款
+                            </Button>
+                            <Button type="text">取消订单</Button>
+                          </Space>
+                        </Space>
+                      </Col>
+                    </Row>
+                  </li>
+                );
+              })}
+              {orderList.length === 0 && (
+                <Empty
+                  style={{
+                    paddingTop: 20,
+                    width: "100%",
+                    textAlign: "center",
+                  }}
+                ></Empty>
+              )}
+            </ul>
+          </Spin>
+          <Pagination
+            current={pageParams.pageNo}
+            showSizeChanger={false}
+            showQuickJumper
+            total={total}
+            pageSize={pageParams.pageSize}
+            onChange={onPageChange}
+            hideOnSinglePage={true}
+            style={{ marginTop: 20 }}
+          ></Pagination>
         </div>
       </LayoutView>
     </>

pages/personalCenter/trainOrders/api/index.ts

+import request, { Response } from "~/api/request"
+
+export interface ListPageParams {
+  keyword?: string,
+  showType: number,
+  pageNo: number;
+  pageSize: number;
+}
+
+export interface ListPageResp {
+  pageNo: number;
+  pageSize: number;
+  list: OrderList[];
+  totalCount: number;
+  totalPage: number;
+}
+
+export interface OrderList {
+  id: number;
+  orderNo: string;
+  orderMainImg: string;
+  orderName: string;
+  totalBuyNum: number;
+  orderAmount: number;
+  statusCode: number;
+  signStatus?: any;
+  operationName?: any;
+  operationId?: any;
+  deliveryTime?: any;
+  contractNo?: any;
+  userAccountId: number;
+  uid?: any;
+  userName?: any;
+  phoneNum?: any;
+  payMethod: number;
+  contractSignedWay?: any;
+  createTime: string;
+  recMallUserName?: any;
+  ogSkuSpecDTOList: OgSkuSpecDTOList[];
+  remark: string;
+  creditPeriod?: any;
+  entName?: any;
+  saleId?: any;
+  saleName?: any;
+  tagName?: any;
+  realNameAuth?: any;
+  realPayAmount?: any;
+  subAmount?: any;
+  shareId?: any;
+  shareStatus: number;
+  deductAmount?: any;
+  discountAmount?: any;
+  realityAmount?: any;
+  shutReason?: any;
+  mallOrderProdListDTOList: MallOrderProdListDTOList[];
+  mremark?: any;
+}
+
+interface MallOrderProdListDTOList {
+  id: number;
+  goodsInfoId: number;
+  productName: string;
+  model?: any;
+  prodSkuSpecName: string;
+  prodSkuSpecImage: string;
+  partNo: string;
+  versionDesc: string;
+  buyNum: number;
+  unitPrice: number;
+  skuSpecAmount: number;
+}
+
+interface OgSkuSpecDTOList {
+  id: number;
+  directoryId: number;
+  shopCarId?: any;
+  skuSpecName: string;
+}
+
+
+export interface ListStatusResp {
+  status: string;
+  code: number;
+  nextCode: number;
+}
+
+export default {
+  //v1.0.0订单列表-查询
+  listPage(params: ListPageParams, options: any): Promise<Response<ListPageResp>> {
+    return request('/oms/app-order/listPage', 'get', params, options)
+  },
+
+  //订单状态-字典
+  listStatus(): Promise<Response<ListStatusResp[]>> {
+    return request('/oms/mallorder/listStatus', 'get');
+  }
+}
\ No newline at end of file

pages/personalCenter/trainOrders/index.module.scss

+@import "~/styles/mixins.scss";
+
+.font1 {
+  font-size: 14px;
+  font-family: MicrosoftYaHei;
+  color: #9b9b9b;
+  line-height: 19px;
+}
+
+.font2 {
+  font-size: 12px;
+  font-family: Arial-BoldMT, Arial;
+  font-weight: normal;
+  color: #626262;
+  line-height: 14px;
+}
+
+.font3 {
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #6c6c6c;
+  line-height: 20px;
+}
+
+.font4 {
+  font-size: 14px;
+  font-family: ArialMT;
+  color: #141414;
+  line-height: 16px;
+}
+
+.font5 {
+  font-size: 12px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #929295;
+  line-height: 17px;
+}
+
+.font6 {
+  font-size: 13px;
+  font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+  font-weight: bold;
+  color: #070707;
+  line-height: 16px;
+}
+
+.btn1 {
+  border-radius: 16px;
+  border: 1px solid #ff552d;
+  padding: 6px 16px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ff552d;
+  line-height: 20px;
+}
+
+.btn2 {
+  border-radius: 16px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 20px;
+  padding: 6px 16px;
+}

pages/personalCenter/trainOrders/index.page.tsx

+import {
+  TabsProps,
+  Tabs,
+  Row,
+  Col,
+  Image,
+  Space,
+  Button,
+  Spin,
+  Pagination,
+  Empty,
+} from "antd";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import errImg from "~/assets/errImg";
+import Right from "~/components/contentBox/right";
+import LayoutView from "~/components/layout";
+import Sider from "../components/sider";
+import api, { OrderList, ListStatusResp } from "./api";
+import styles from "./index.module.scss";
+
+const items: TabsProps["items"] = [
+  {
+    key: "",
+    label: `全部`,
+  },
+  {
+    key: "0",
+    label: `待付款`,
+  },
+  {
+    key: "1",
+    label: `待验收`,
+  },
+  {
+    key: "2",
+    label: `已完成`,
+  },
+  {
+    key: "3",
+    label: `已取消`,
+  },
+];
+
+export default function TrainOrder() {
+  const router = useRouter();
+  const [pageParams, setPageParams] = useState({
+    pageNo: 1,
+    pageSize: 5,
+  }); //分页器对象
+  const [total, setTotal] = useState(0); //总数
+  const [abort, setAbort] = useState<AbortController | null>(null); //请求中断对你
+  const [tabKey, setTabKey] = useState("");
+  const [orderList, setOrderList] = useState<OrderList[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [orderNo, setOrderNo] = useState<string | undefined>();
+  const [tranStatusMap, setTranStatusMap] = useState<ListStatusResp[]>([]); //订单状态字典
+
+  //获取订单状态字典
+  useEffect(() => {
+    api.listStatus().then((res) => {
+      setTranStatusMap(res.result || []);
+    });
+  }, []);
+
+  useEffect(() => {
+    //中断前一次列表请求
+    abort?.abort();
+    setAbort(new AbortController());
+  }, [pageParams]);
+
+  //商品列表请求
+  useEffect(() => {
+    if (!abort) {
+      return;
+    }
+    setLoading(true);
+    api
+      .listPage(
+        {
+          ...pageParams,
+          showType: Number(tabKey),
+        },
+        {
+          signal: abort?.signal,
+        }
+      )
+      .then((res) => {
+        setOrderList(res.result?.list || []);
+        setTotal(res.result?.totalCount || 0);
+        setLoading(false);
+      });
+  }, [abort]);
+
+  const onPageChange = (page: number, pageSize: number) => {
+    setPageParams({
+      ...pageParams,
+      pageNo: page,
+    });
+  };
+
+  const onTabsChange = (key: string) => {
+    setTabKey(key);
+    setPageParams({
+      ...pageParams,
+      pageNo: 1,
+    });
+    setTotal(0);
+  };
+
+  return (
+    <>
+      <LayoutView
+        layoutStyle={{ backgroundColor: "#fff" }}
+        contentStyle={{ width: 1000, marginLeft: 526 }}
+        headerStyle={{ borderBottom: "1px solid #e2e2e2" }}
+      >
+        <Sider
+          style={{
+            position: "absolute",
+            left: -37,
+            top: 15,
+            transform: "translateX(-100%)",
+          }}
+          selectedKeys={[router.pathname]}
+        ></Sider>
+        <div style={{ paddingTop: 19 }}>
+          <div className={styles.font1}>培训订单</div>
+          <Tabs activeKey={tabKey} items={items} onChange={onTabsChange} />
+          <Spin spinning={loading} delay={500}>
+            <ul className={styles.orderList} style={{ minHeight: 650 }}>
+              {orderList.map((item) => {
+                return (
+                  <li key={item.id} className={styles.orderItem}>
+                    <Row
+                      justify="space-between"
+                      align="middle"
+                      style={{
+                        height: 30,
+                        padding: "0 26px 0 16px",
+                        background: "#EBF8FF",
+                      }}
+                    >
+                      <div className={styles.font2}>{item.createTime}</div>
+                      <div className={styles.font3}>
+                        {
+                          tranStatusMap.find(
+                            (status) => status.code === item.statusCode
+                          )?.status
+                        }
+                      </div>
+                    </Row>
+                    <Row
+                      style={{ minHeight: 100, border: "1px solid #D0EAF5" }}
+                    >
+                      <Col style={{ width: 380 }}>
+                        <Row>
+                          <div style={{ margin: "10px 10px 0 16px" }}>
+                            <Image
+                              width={80}
+                              height={80}
+                              preview={false}
+                              fallback={errImg}
+                              src={item.orderMainImg}
+                            ></Image>
+                          </div>
+
+                          <div style={{ marginTop: 12 }}>
+                            <div className={`ellipsis1 ${styles.font4}`}>
+                              {item.orderName}
+                            </div>
+                          </div>
+                        </Row>
+                      </Col>
+                      <Col
+                        style={{
+                          width: 270,
+                          borderLeft: "1px solid #D0EAF5",
+                          borderRight: "1px solid #D0EAF5",
+                        }}
+                      >
+                        <Row
+                          justify={"center"}
+                          align="middle"
+                          style={{ height: "100%" }}
+                        >
+                          预付金额:{" "}
+                          <span className={styles.font6}>
+                            ¥{item.totalBuyNum}
+                          </span>
+                        </Row>
+                      </Col>
+                      <Col flex={"auto"} style={{}}>
+                        <Space
+                          size={7}
+                          style={{
+                            float: "right",
+                            marginTop: 20,
+                            marginRight: 24,
+                          }}
+                        >
+                          <Button className={styles.btn1}>取消订单</Button>
+                          <Button className={styles.btn2} type="primary">
+                            查看合同
+                          </Button>
+                        </Space>
+                      </Col>
+                    </Row>
+                  </li>
+                );
+              })}
+              {orderList.length === 0 && (
+                <Empty
+                  style={{
+                    paddingTop: 20,
+                    width: "100%",
+                    textAlign: "center",
+                  }}
+                ></Empty>
+              )}
+            </ul>
+          </Spin>
+          <Pagination
+            current={pageParams.pageNo}
+            showSizeChanger={false}
+            showQuickJumper
+            total={total}
+            pageSize={pageParams.pageSize}
+            onChange={onPageChange}
+            hideOnSinglePage={true}
+            style={{ marginTop: 20 }}
+          ></Pagination>
+        </div>
+      </LayoutView>
+    </>
+  );
+}