Commit d0848794 authored by GuanHua's avatar GuanHua

feat:交易记录接口对接

parent b4e84ca8
...@@ -185,7 +185,7 @@ ...@@ -185,7 +185,7 @@
&:hover { &:hover {
&>a { &>a {
color: #ffffff; color: #ffffff !important;
} }
} }
......
...@@ -107,7 +107,7 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => { ...@@ -107,7 +107,7 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
<div className={styles.info_box}> <div className={styles.info_box}>
<div className={styles.info_box_content}> <div className={styles.info_box_content}>
<div className={styles.name}>{item.name}</div> <div className={styles.name}>{item.name}</div>
<div className={styles.price}><span></span>{item.min}</div> <div className={styles.price}><span></span>{priceFormat(item.min)}</div>
<div className={styles.count}>已售: {numFormat(item.sold) || 0}</div> <div className={styles.count}>已售: {numFormat(item.sold) || 0}</div>
</div> </div>
<ul className={styles.tags_list}> <ul className={styles.tags_list}>
......
...@@ -123,21 +123,21 @@ ...@@ -123,21 +123,21 @@
&:hover, &:hover,
&:active { &:active {
border-color: #D32F2F; border-color: var(--mall_main_color);
&>a { &>a {
color: #D32F2F; color: var(--mall_main_color);
} }
} }
} }
.ant-pagination-item-active { .ant-pagination-item-active {
background-color: #D32F2F; background-color: var(--mall_main_color);
border-color: #D32F2F; border-color: var(--mall_main_color);
&:hover { &:hover {
&>a { &>a {
color: #ffffff; color: #ffffff !important;
} }
} }
......
...@@ -12,37 +12,35 @@ ...@@ -12,37 +12,35 @@
} }
.trade_record_container { .trade_record_container {
.ant-pagination-item { :global {
.ant-pagination-item {
&:hover, &:hover,
&:active { &:active {
border-color: #D32F2F; border-color: var(--mall_main_color);
&>a { &>a {
color: #FFF; color: var(--mall_main_color);
}
} }
} }
}
.ant-pagination-item-active { .ant-pagination-item-active {
background-color: #D32F2F; background-color: var(--mall_main_color);
border-color: #D32F2F; border-color: var(--mall_main_color);
&:hover {
&>a {
color: #ffffff !important;
}
}
&>a { &>a {
color: #ffffff; color: #ffffff;
}
} }
} }
// .ant-pagination-item-active {
// border-color: #D32F2F;
// background-color: #D32F2F;
// color: #ffffff;
// a {
// color: #FFFFFF;
// }
// }
.columns_item { .columns_item {
height: 48px; height: 48px;
display: flex; display: flex;
......
import React from 'react' import React, { useEffect, useState } from 'react'
import { Table } from 'antd' import { Table } from 'antd'
import isEmpty from 'lodash/isEmpty'
import { PublicApi } from '@/services/api'
import moment from 'moment'
import { GetOrderTransactionRecordsListResponseDetail } from '@/services/OrderApi'
import styles from './index.less' import styles from './index.less'
const TradeRecord: React.FC = () => { interface TradeRecordPropsType {
productIds: number[],
setCount: Function
}
const TradeRecord: React.FC<TradeRecordPropsType> = (props) => {
const { productIds, setCount } = props
const [current, setCurrent] = useState<number>(1)
const [pageSize, setPageSize] = useState<number>(10)
const [totalCount, setTotalCount] = useState<number>(0)
const [recordList, setRecordList] = useState<GetOrderTransactionRecordsListResponseDetail[]>([])
useEffect(() => {
if (productIds && !isEmpty(productIds)) {
fetchRecordsList()
}
}, [productIds])
const fetchRecordsList = () => {
let param = {
current,
pageSize,
productIds: productIds.toString() // '2339'
}
//@ts-ignore
PublicApi.getOrderTransactionRecordsList(param).then(res => {
if (res.code === 1000) {
setTotalCount(res.data.totalCount)
setRecordList(res.data.data)
setCount(res.data.totalCount)
}
})
}
const columns = [ const columns = [
{ {
...@@ -10,42 +46,24 @@ const TradeRecord: React.FC = () => { ...@@ -10,42 +46,24 @@ const TradeRecord: React.FC = () => {
width: '33%', width: '33%',
render: (_, record: any) => { render: (_, record: any) => {
return ( return (
<div className="columns_item"> <div className={styles.columns_item}>
<div className="columns_item_name">{record.name}</div> <div className={styles.columns_item_name}>{record.memberName}</div>
{record.type === 1 && <div className="columns_item_member">VIP会员</div>} <div className={styles.columns_item_member}>VIP会员</div>
</div> </div>
) )
} }
}, },
{ {
title: '成交数量', title: '成交数量',
dataIndex: 'count', dataIndex: 'purchaseCount',
width: '33%' width: '33%'
}, },
{ {
title: '交易时间', title: '交易时间',
dataIndex: 'date', dataIndex: 'tradingTime',
width: '33%' width: '33%',
}, render: (tradingTime) => moment(tradingTime).format('YYYY-MM-DD HH:mm')
]
const mockData = [
{
id: 1,
name: '温州市****皮具有限公司',
count: 30,
date: '2020-05-20 15:58',
type: 1
},
{
id: 2,
name: '温州市****皮具有限公司',
count: 30,
date: '2020-05-20 15:58',
type: 2
}, },
] ]
return ( return (
...@@ -54,7 +72,12 @@ const TradeRecord: React.FC = () => { ...@@ -54,7 +72,12 @@ const TradeRecord: React.FC = () => {
交易记录 交易记录
</div> </div>
<div className={styles.trade_record_container}> <div className={styles.trade_record_container}>
<Table rowKey="id" columns={columns} dataSource={mockData} /> <Table
rowKey="orderId"
columns={columns}
dataSource={recordList}
locale={{ emptyText: '暂无交易记录' }}
/>
</div> </div>
</div> </div>
) )
......
...@@ -19,6 +19,8 @@ interface ProductDescriptionPropsType { ...@@ -19,6 +19,8 @@ interface ProductDescriptionPropsType {
const ProductDescription: React.FC<ProductDescriptionPropsType> = (props) => { const ProductDescription: React.FC<ProductDescriptionPropsType> = (props) => {
const { commodityDetail, dataList } = props const { commodityDetail, dataList } = props
const [currentAnchor, setCurrentAnchor] = useState<string>("#introduction") const [currentAnchor, setCurrentAnchor] = useState<string>("#introduction")
const [productIds, setProductIds] = useState<number[]>([])
const [tradeRecordCount, setTradeRecordCount] = useState<number>(0)
const handleAnchorChange = (currentActiveLink: string) => { const handleAnchorChange = (currentActiveLink: string) => {
if (currentActiveLink) { if (currentActiveLink) {
...@@ -26,6 +28,14 @@ const ProductDescription: React.FC<ProductDescriptionPropsType> = (props) => { ...@@ -26,6 +28,14 @@ const ProductDescription: React.FC<ProductDescriptionPropsType> = (props) => {
} }
} }
useEffect(() => {
if (commodityDetail) {
if (commodityDetail.unitPricePicList) {
setProductIds(commodityDetail.unitPricePicList.map(item => item.id))
}
}
}, [commodityDetail])
return ( return (
<div className={styles.product_description} id="product_description"> <div className={styles.product_description} id="product_description">
<Anchor <Anchor
...@@ -34,12 +44,12 @@ const ProductDescription: React.FC<ProductDescriptionPropsType> = (props) => { ...@@ -34,12 +44,12 @@ const ProductDescription: React.FC<ProductDescriptionPropsType> = (props) => {
onChange={handleAnchorChange} onChange={handleAnchorChange}
> >
<Link className={cx(currentAnchor === "#introduction" ? 'active' : '')} href="#introduction" title="产品简介" /> <Link className={cx(currentAnchor === "#introduction" ? 'active' : '')} href="#introduction" title="产品简介" />
<Link href="#trade_record" title={commodityDetail?.priceType === COMMODITY_TYPE.integral ? `兑换记录(2)` : `交易记录(2)`} /> <Link href="#trade_record" title={commodityDetail?.priceType === COMMODITY_TYPE.integral ? `兑换记录(2)` : `交易记录${tradeRecordCount ? `(${tradeRecordCount})` : `(0)`}`} />
<Link href="#comment" title="交易评价(96)" /> <Link href="#comment" title="交易评价(96)" />
<BackTop className={styles.buy_now_btn} visibilityHeight={800} >立即订购</BackTop> <BackTop className={styles.buy_now_btn} visibilityHeight={800} >立即订购</BackTop>
</Anchor> </Anchor>
<Introduction commodityDetail={commodityDetail} /> <Introduction commodityDetail={commodityDetail} />
<TradeRecord /> <TradeRecord productIds={productIds} setCount={(count) => setTradeRecordCount(count)} />
<Comment /> <Comment />
<Recommand dataList={dataList} {...props} /> <Recommand dataList={dataList} {...props} />
</div> </div>
......
...@@ -31,6 +31,10 @@ ...@@ -31,6 +31,10 @@
&>a { &>a {
color: #303133; color: #303133;
&:hover {
color: #303133 !important;
}
} }
&.active { &.active {
...@@ -55,6 +59,10 @@ ...@@ -55,6 +59,10 @@
a { a {
color: #FFF; color: #FFF;
&:hover {
color: #FFF !important;
}
} }
} }
} }
......
...@@ -70,9 +70,11 @@ const LXShopLayout: React.FC<LXMallLayoutPropsType> = (props) => { ...@@ -70,9 +70,11 @@ const LXShopLayout: React.FC<LXMallLayoutPropsType> = (props) => {
} }
useEffect(() => { useEffect(() => {
let body = document.getElementsByTagName('body')[0];
if (shopInfo) { if (shopInfo) {
let body = document.getElementsByTagName('body')[0];
body.className = shopInfo.fileName ? `theme-shop-${shopInfo.fileName}` : templateName; body.className = shopInfo.fileName ? `theme-shop-${shopInfo.fileName}` : templateName;
} else {
body.className = templateName;
} }
}, [shopInfo]) }, [shopInfo])
......
...@@ -263,9 +263,12 @@ const Order: React.FC<OrderPropsType> = (props) => { ...@@ -263,9 +263,12 @@ const Order: React.FC<OrderPropsType> = (props) => {
} }
let orderProductRequests = [] let orderProductRequests = []
let purchaseIds = []
for (let item of orderList) { for (let item of orderList) {
for (let orderItem of item.orderList) { for (let orderItem of item.orderList) {
let temp: any = {} let temp: any = {}
purchaseIds.push(orderItem.purchaseId)
temp.imgUrl = orderItem.commodityPic temp.imgUrl = orderItem.commodityPic
temp.productId = orderItem.id temp.productId = orderItem.id
temp.productName = orderItem.name temp.productName = orderItem.name
...@@ -292,6 +295,11 @@ const Order: React.FC<OrderPropsType> = (props) => { ...@@ -292,6 +295,11 @@ const Order: React.FC<OrderPropsType> = (props) => {
params.theInvoiceId = selectInvoiceInfo.id params.theInvoiceId = selectInvoiceInfo.id
params.theInvoiceInfo = selectInvoiceInfo params.theInvoiceInfo = selectInvoiceInfo
} }
if (!!orderInfo.purchaseOrder) {
params.idList = purchaseIds
params.productType = (layoutType === LAYOUT_TYPE.channel || layoutType === LAYOUT_TYPE.ichannel) ? 2 : 1
}
setConfirmLoading(true) setConfirmLoading(true)
PublicApi.postOrderProcurementOrderAdd(params).then(res => { PublicApi.postOrderProcurementOrderAdd(params).then(res => {
if (res.code === 1000) { if (res.code === 1000) {
......
...@@ -145,6 +145,7 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => { ...@@ -145,6 +145,7 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
defaultCheckedList: item.orderList.map(item => item.id) defaultCheckedList: item.orderList.map(item => item.id)
}) })
}) })
console.log(result)
setOrderList(result) setOrderList(result)
// !initChecked && setCheckedList(result.map(item => item.id)) // !initChecked && setCheckedList(result.map(item => item.id))
} }
...@@ -503,6 +504,7 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => { ...@@ -503,6 +504,7 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
commonLogistics = item.commodityUnitPrice.commodity.logistics commonLogistics = item.commodityUnitPrice.commodity.logistics
let buyCommodityInfo: any = { let buyCommodityInfo: any = {
id: item.commodityUnitPrice.id, id: item.commodityUnitPrice.id,
purchaseId: item.id,
count: item.count, count: item.count,
unitName: item.commodityUnitPrice.commodity.unitName, unitName: item.commodityUnitPrice.commodity.unitName,
unitPrice: getUnitPrice(item.commodityUnitPrice, item.count), unitPrice: getUnitPrice(item.commodityUnitPrice, item.count),
...@@ -523,6 +525,7 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => { ...@@ -523,6 +525,7 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
} }
let buyOrderInfo: any = { let buyOrderInfo: any = {
purchaseOrder: true,
logistics: commonLogistics, logistics: commonLogistics,
supplyMembersName: selectItem.shopname, supplyMembersName: selectItem.shopname,
supplyMembersId: selectItem.memberId, supplyMembersId: selectItem.memberId,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment