Skip to content

W
web-ci-test
提交 697339e4 作者: 曹云
操作

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

上级 63352195 cb2becee
正在显示 包含 826 行增加 和 121 行删除
components/NavHeader/index.tsx
...@@ -125,23 +125,11 @@ export default function NavHeader(props: Props) { ...@@ -125,23 +125,11 @@ export default function NavHeader(props: Props) {
menu={{ menu={{
items: [ items: [
{ {
key: "3",
label: (
<div
onClick={() =>
router.push("/personalCenter/leasingOrders")
}
>
租赁订单
</div>
),
},
{
key: "2", key: "2",
label: ( label: (
<div <div
onClick={() => 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) { ...@@ -23,19 +23,26 @@ export default function CategoryItem(props: Props) {
}) })
} }
const showCount = 14; //展示数量
return ( return (
<div className={styles.filterItem}> <div className={styles.filterItem}>
<div className={styles.filterItemTitle}>{props.typeName}：</div> <div className={styles.filterItemTitle}>{props.typeName}：</div>
<div <div
className={`${styles.filterItemMain} ${ 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 <Collapse.Panel
header={ header={
<Space size={40}> <Space size={[40, 0]}>
{data.slice(0, 10).map((item) => { {data.slice(0, showCount).map((item) => {
return ( return (
<Button <Button
type="link" type="link"
...@@ -44,14 +51,14 @@ export default function CategoryItem(props: Props) { ...@@ -44,14 +51,14 @@ export default function CategoryItem(props: Props) {
> >
{item.name} {item.name}
</Button> </Button>
) );
})} })}
</Space> </Space>
} }
key="1" key="1"
> >
<Space size={40}> <Space size={40}>
{data.slice(10).map((item) => { {data.slice(showCount).map((item) => {
return ( return (
<Button <Button
type="link" type="link"
...@@ -60,12 +67,12 @@ export default function CategoryItem(props: Props) { ...@@ -60,12 +67,12 @@ export default function CategoryItem(props: Props) {
> >
{item.name} {item.name}
</Button> </Button>
) );
})} })}
</Space> </Space>
</Collapse.Panel> </Collapse.Panel>
</Collapse> </Collapse>
</div> </div>
</div> </div>
) );
} }
components/filter/index.module.scss
...@@ -31,6 +31,7 @@ ...@@ -31,6 +31,7 @@
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
overflow: hidden;
&.disabled { &.disabled {
:global .ant-collapse-expand-icon { :global .ant-collapse-expand-icon {
......
components/filter/index.tsx
...@@ -311,6 +311,7 @@ const Filter = (props: Props, ref: Ref<any>) => { ...@@ -311,6 +311,7 @@ const Filter = (props: Props, ref: Ref<any>) => {
{typeInfo?.length && {typeInfo?.length &&
typeInfo?.map((item) => ( typeInfo?.map((item) => (
<TypeInfo <TypeInfo
key={item.directoryId}
typeName={item.name} typeName={item.name}
dataValue={item.categoriesInfoListDTO} dataValue={item.categoriesInfoListDTO}
onChange={(item: FilterOptionResp) => onChange={(item: FilterOptionResp) =>
......
pages/equipmentLeasing/detail/[id].page.tsx
...@@ -320,7 +320,7 @@ export default function EquipmentLeasingDetail() { ...@@ -320,7 +320,7 @@ export default function EquipmentLeasingDetail() {
}} }}
> >
{detail?.images.map((item) => ( {detail?.images.map((item) => (
<AImage src={item.imgUrl} /> <AImage key={item.id} src={item.imgUrl} />
))} ))}
</AImage.PreviewGroup> </AImage.PreviewGroup>
</div> </div>
......
pages/mall/api/index.ts
import request, { Response } from '~/api/request' import request, { Response } from '~/api/request'
export interface ListPageGoodsInfoParams { export interface DeviceListParams {
pageNo: number categoryId?: any[];
pageSize: number pageNo: number;
categoryId?: any[] pageSize: number;
provinceId?: number provinceId?: number;
type: 0 type: number;
} }
export interface Goods { export interface Goods {
goodsName: string id: number;
id: number goodsName: string;
images: string images: string;
price: number | null price?: any;
} }
export interface ListPageGoodsInfoResp { export interface DeviceListResp {
pageNo: 1 "pageNo": 1,
pageSize: 10 "pageSize": 10,
list: Array<Goods> "list": Array<Goods>,
totalCount: 0 "totalCount": 0,
totalPage: 0 "totalPage": 0
} }
export interface Ad { export interface Ad {
id: number id: number
imageUrl: string bannerImg: string
} }
export default { export default {
//web-商品信息-分页 //web-商品信息-分页
listPageGoodsInfo: ( deviceList: (params: DeviceListParams, options = {}): Promise<Response<DeviceListResp>> => {
params: ListPageGoodsInfoParams,
options = {}
): Promise<Response<ListPageGoodsInfoResp>> => {
return request('/pms/product/mall/deviceList', 'post', params, options) return request('/pms/product/mall/deviceList', 'post', params, options)
}, },
//产品商城广告位 //产品商城广告位
ad: (): Promise<Response<Array<Ad>>> => { listBannerImg: () => {
return request('/pms/webProductMall/ad') return request('/release/module/listBannerImg', 'get', {
moduleCode: 'PRODUCT_MARKETP'
})
}, },
} }
pages/mall/detail/[id].page.tsx
...@@ -129,10 +129,7 @@ export default function MallDetail() { ...@@ -129,10 +129,7 @@ export default function MallDetail() {
<div className={`${styles.font1} ${styles.ellipsis}`}> <div className={`${styles.font1} ${styles.ellipsis}`}>
{detail?.goodsName} {detail?.goodsName}
</div> </div>
<div <div className={`${styles.font2} ${styles.ellipsis2}`} style={{}}>
className={`${styles.font2} ${styles.ellipsis}`}
style={{ height: 22 }}
>
{detail?.goodsDetail?.goodsDesc} {detail?.goodsDetail?.goodsDesc}
</div> </div>
<Space <Space
......
pages/mall/detail/index.module.scss
...@@ -4,6 +4,10 @@ ...@@ -4,6 +4,10 @@
@include ellipsis(1); @include ellipsis(1);
} }
.ellipsis2 {
@include ellipsis(2);
}
.font1 { .font1 {
font-size: 28px; font-size: 28px;
font-weight: bold; font-weight: bold;
......
pages/mall/index.page.tsx
...@@ -4,7 +4,7 @@ import Layout from '~/components/layout' ...@@ -4,7 +4,7 @@ import Layout from '~/components/layout'
import styles from './index.module.scss' import styles from './index.module.scss'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import Filter, { AdapterResult, FilterResult } from '~/components/filter' 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' import errImg from '~/assets/errImg'
// 此函数在构建时被调用 // 此函数在构建时被调用
...@@ -23,14 +23,12 @@ export default function Mall(props: Props) { ...@@ -23,14 +23,12 @@ export default function Mall(props: Props) {
const [pageParams, setPageParams] = useState<{ const [pageParams, setPageParams] = useState<{
pageNo: number pageNo: number
pageSize: number pageSize: number
type: 0
}>({ }>({
pageNo: 1, pageNo: 1,
pageSize: 15, pageSize: 15,
type: 0,
}) //分页器对象 }) //分页器对象
const [count, setCount] = useState(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 [adList, setAdList] = useState<Array<Ad>>([]) //广告列表
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
...@@ -47,27 +45,28 @@ export default function Mall(props: Props) { ...@@ -47,27 +45,28 @@ export default function Mall(props: Props) {
} }
setLoading(true) setLoading(true)
api api
.listPageGoodsInfo( .deviceList(
{ {
...filterResult, type: 0,
...pageParams, ...pageParams,
...filterResult,
}, },
{ {
signal: abort?.signal, signal: abort?.signal,
} }
) )
.then((res) => { .then((res) => {
setProductList(res.result?.list || []) setProductList(res.result?.list || []);
setCount(res.result?.totalCount || 0) setCount(res.result?.totalCount || 0);
setLoading(false) setLoading(false);
}) });
}, [abort]) }, [abort])
//广告请求 //广告请求
useEffect(() => { useEffect(() => {
api.ad().then((res) => { api.listBannerImg().then((res) => {
setAdList(res.result || []) setAdList(res.result || []);
}) });
}, []) }, [])
const onFilterChange = ( const onFilterChange = (
...@@ -89,9 +88,9 @@ export default function Mall(props: Props) { ...@@ -89,9 +88,9 @@ export default function Mall(props: Props) {
} }
return ( return (
<Layout> <Layout>
<div className="page" style={{ paddingTop: '18px' }}> <div className="page" style={{ paddingTop: "18px" }}>
<Filter <Filter
types={['类目', '地域', '品牌', '部件' /* "型号", "成色" */]} types={["地域"]}
showResultItem showResultItem
onChange={onFilterChange} onChange={onFilterChange}
></Filter> ></Filter>
...@@ -99,42 +98,45 @@ export default function Mall(props: Props) { ...@@ -99,42 +98,45 @@ export default function Mall(props: Props) {
<div className={styles.productList}> <div className={styles.productList}>
<div className={styles.main}> <div className={styles.main}>
<div className={styles.listContent}> <div className={styles.listContent}>
<ul className={styles.listWrap}> <Spin spinning={loading} delay={500}>
{productList.map((item, i) => { <ul className={styles.listWrap}>
return ( {productList.map((item, i) => {
<li return (
key={i} <li
className={styles.item} key={i}
onClick={() => router.push('/mall/detail/' + item.id)} className={styles.item}
> onClick={() => router.push("/mall/detail/" + item.id)}
<div className={styles.imgBox}> >
<Image <div className={styles.imgBox}>
alt="" <Image
src={item.images} alt=""
className={styles.img} src={item.images}
width={116} className={styles.img}
height={116} width={116}
preview={false} height={116}
></Image> preview={false}
</div> ></Image>
<div className={styles.title}>{item.goodsName}</div> </div>
<div className={styles.sellCount}> <div className={styles.title}>{item.goodsName}</div>
半年售 <div className={styles.sellCount}>
{(Math.floor(Math.random() * 901) + 100).toFixed(0)} 半年售
</div> {(Math.floor(Math.random() * 901) + 100).toFixed(0)}
</li> </div>
) </li>
})} );
{productList.length === 0 && ( })}
<Empty {productList.length === 0 && (
style={{ <Empty
paddingTop: 20, style={{
width: '100%', paddingTop: 20,
textAlign: 'center', width: "100%",
}} textAlign: "center",
></Empty> }}
)} ></Empty>
</ul> )}
</ul>
</Spin>
<div className={styles.paginationPage}> <div className={styles.paginationPage}>
<Pagination <Pagination
current={pageParams.pageNo} current={pageParams.pageNo}
...@@ -155,18 +157,18 @@ export default function Mall(props: Props) { ...@@ -155,18 +157,18 @@ export default function Mall(props: Props) {
<Image <Image
key={item.id} key={item.id}
className={styles.ad} className={styles.ad}
src={item.imageUrl} src={item.bannerImg}
width={189} width={189}
height={295} height={295}
preview={false} preview={false}
fallback={errImg} fallback={errImg}
></Image> ></Image>
) );
})} })}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</Layout> </Layout>
) );
} }
pages/personalCenter/components/sider/index.tsx
...@@ -26,7 +26,7 @@ const items: MenuItem[] = [ ...@@ -26,7 +26,7 @@ const items: MenuItem[] = [
getItem("服务订单", "/personalCenter/servicesOrders"), getItem("服务订单", "/personalCenter/servicesOrders"),
getItem("租赁订单", "/personalCenter/leasingOrders"), getItem("租赁订单", "/personalCenter/leasingOrders"),
getItem("商城订单", "/personalCenter/mallOrders"), getItem("商城订单", "/personalCenter/mallOrders"),
getItem("培训订单", "1-2"), getItem("培训订单", "/personalCenter/trainOrders"),
]), ]),
getItem("账户信息", "2"), getItem("账户信息", "2"),
getItem("优惠券卡包", "3"), getItem("优惠券卡包", "3"),
......
pages/personalCenter/servicesOrders/api/index.ts 0 → 100644
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 { .font1 {
font-size: 14px; font-size: 14px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #9b9b9b; color: #9b9b9b;
line-height: 19px; 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 {
import {useRouter} from "next/router"; TabsProps,
Tabs,
Row,
Col,
Image,
Space,
Button,
Spin,
Pagination,
Empty,
} from "antd";
import { useRouter } from "next/router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import errImg from "~/assets/errImg";
import Right from "~/components/contentBox/right";
import LayoutView from "~/components/layout"; import LayoutView from "~/components/layout";
import Sider from "../components/sider"; import Sider from "../components/sider";
import api, { OrderList, GetServiceOrderStatusResp } from "./api";
import styles from "./index.module.scss"; import styles from "./index.module.scss";
import Moment from 'moment';
const onChange = (key: string) => {
console.log(key);
};
const items: TabsProps["items"] = [ const items: TabsProps["items"] = [
{ {
key: "1", key: "",
label: `Tab 1`, label: `全部`,
children: `Content of Tab Pane 1`, },
{
key: "200",
label: `待付款`,
}, },
{ {
key: "2", key: "575",
label: `Tab 2`, label: `待验收`,
children: `Content of Tab Pane 2`,
}, },
{ {
key: "3", key: "700",
label: `Tab 3`, label: `已完成`,
children: `Content of Tab Pane 3`, },
{
key: "900",
label: `已取消`,
}, },
]; ];
export default function ServicesOrder() { export default function ServicesOrder() {
const router = useRouter(); 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 ( return (
<> <>
<LayoutView <LayoutView
layoutStyle={{ backgroundColor: "#fff" }} layoutStyle={{ backgroundColor: "#fff" }}
contentStyle={{ width: 1000, marginLeft: 526 }} contentStyle={{ width: 1000, marginLeft: 526 }}
headerStyle={{ borderBottom: "1px solid #e2e2e2" }}
> >
<Sider <Sider
style={{ style={{
position: "absolute", position: "absolute",
left: -37, left: -37,
top: 15,
transform: "translateX(-100%)", transform: "translateX(-100%)",
}} }}
selectedKeys={[router.pathname]} selectedKeys={[router.pathname]}
></Sider> ></Sider>
<div> <div style={{ paddingTop: 19 }}>
<div className={styles.font1}>服务订单</div> <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> </div>
</LayoutView> </LayoutView>
</> </>
......
pages/personalCenter/trainOrders/api/index.ts 0 → 100644
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 0 → 100644
@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 0 → 100644
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>
</>
);
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论