13 changed files with 658 additions and 66 deletions
@ -0,0 +1,181 @@ |
|||||
|
import {Avatar, Cell, Space, Tabs, Button, TabPane} from '@nutui/nutui-react-taro' |
||||
|
import {useEffect, useState, CSSProperties} from "react"; |
||||
|
import Taro from '@tarojs/taro'; |
||||
|
import {InfiniteLoading} from '@nutui/nutui-react-taro' |
||||
|
import dayjs from "dayjs"; |
||||
|
import {pageShopOrder} from "@/api/shop/shopOrder"; |
||||
|
import {ShopOrder} from "@/api/shop/shopOrder/model"; |
||||
|
import {copyText} from "@/utils/common"; |
||||
|
|
||||
|
const InfiniteUlStyle: CSSProperties = { |
||||
|
marginTop: '84px', |
||||
|
height: '82vh', |
||||
|
width: '100%', |
||||
|
padding: '0', |
||||
|
overflowY: 'auto', |
||||
|
overflowX: 'hidden', |
||||
|
} |
||||
|
const tabs = [ |
||||
|
{ |
||||
|
index: 0, |
||||
|
key: '全部', |
||||
|
title: '全部' |
||||
|
}, |
||||
|
{ |
||||
|
index: 1, |
||||
|
key: '待付款', |
||||
|
title: '待付款' |
||||
|
}, |
||||
|
{ |
||||
|
index: 2, |
||||
|
key: '待发货', |
||||
|
title: '待发货' |
||||
|
}, |
||||
|
{ |
||||
|
index: 3, |
||||
|
key: '已收货', |
||||
|
title: '已收货' |
||||
|
}, |
||||
|
{ |
||||
|
index: 4, |
||||
|
key: '已完成', |
||||
|
title: '已完成' |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
function OrderList(props: any) { |
||||
|
const [list, setList] = useState<ShopOrder[]>([]) |
||||
|
const [page, setPage] = useState(1) |
||||
|
const [hasMore, setHasMore] = useState(true) |
||||
|
const [tapIndex, setTapIndex] = useState<string | number>('0') |
||||
|
|
||||
|
console.log(props.statusBarHeight, 'ppp') |
||||
|
|
||||
|
const getOrderStatusParams = (index: string | number) => { |
||||
|
let params: { payStatus?: number; deliveryStatus?: number; orderStatus?: number } = {}; |
||||
|
switch (index) { |
||||
|
case '1': // 待付款
|
||||
|
params.payStatus = 0; |
||||
|
break; |
||||
|
case '2': // 待发货
|
||||
|
params.payStatus = 1; |
||||
|
params.deliveryStatus = 10; |
||||
|
break; |
||||
|
case '3': // 已收货
|
||||
|
params.deliveryStatus = 30; |
||||
|
break; |
||||
|
case '4': // 已完成
|
||||
|
params.orderStatus = 1; |
||||
|
break; |
||||
|
case '0': // 全部
|
||||
|
default: |
||||
|
break; |
||||
|
} |
||||
|
return params; |
||||
|
}; |
||||
|
|
||||
|
const reload = async (resetPage = false) => { |
||||
|
const currentPage = resetPage ? 1 : page; |
||||
|
const params = getOrderStatusParams(tapIndex); |
||||
|
pageShopOrder({ page: currentPage, ...params }).then(res => { |
||||
|
let newList: ShopOrder[] | undefined = []; |
||||
|
if (res?.list && res?.list.length > 0) { |
||||
|
newList = resetPage ? res.list : list?.concat(res.list); |
||||
|
setHasMore(true); |
||||
|
} else { |
||||
|
newList = res?.list; |
||||
|
setHasMore(false); |
||||
|
} |
||||
|
setList(newList || []); |
||||
|
setPage(currentPage); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const reloadMore = async () => { |
||||
|
setPage(page + 1); |
||||
|
reload(); |
||||
|
}; |
||||
|
|
||||
|
useEffect(() => { |
||||
|
reload(true); // 首次加载或tab切换时重置页码
|
||||
|
}, [tapIndex]); // 监听tapIndex变化
|
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
<Tabs |
||||
|
align={'left'} |
||||
|
className={'fixed left-0'} |
||||
|
style={{ top: '84px'}} |
||||
|
tabStyle={{ backgroundColor: 'transparent'}} |
||||
|
value={tapIndex} |
||||
|
onChange={(paneKey) => { |
||||
|
setTapIndex(paneKey) |
||||
|
}} |
||||
|
> |
||||
|
{ |
||||
|
tabs?.map((item, index) => { |
||||
|
return <TabPane key={index} title={item.title}></TabPane> |
||||
|
}) |
||||
|
} |
||||
|
</Tabs> |
||||
|
<div style={InfiniteUlStyle} id="scroll"> |
||||
|
<InfiniteLoading |
||||
|
target="scroll" |
||||
|
hasMore={hasMore} |
||||
|
onLoadMore={reloadMore} |
||||
|
onScroll={() => { |
||||
|
|
||||
|
}} |
||||
|
onScrollToUpper={() => { |
||||
|
|
||||
|
}} |
||||
|
loadingText={ |
||||
|
<> |
||||
|
加载中 |
||||
|
</> |
||||
|
} |
||||
|
loadMoreText={ |
||||
|
<> |
||||
|
没有更多了 |
||||
|
</> |
||||
|
} |
||||
|
> |
||||
|
{props.data?.map(item => { |
||||
|
return ( |
||||
|
<Cell style={{padding: '16px'}} onClick={() => Taro.navigateTo({url: `/shop/orderDetail/index?orderId=${item.orderId}`})}> |
||||
|
<Space direction={'vertical'} className={'w-full flex flex-col'}> |
||||
|
<div className={'order-no flex justify-between'}> |
||||
|
<span className={'text-gray-700 font-bold text-sm'} |
||||
|
onClick={(e) => {e.stopPropagation(); copyText(`${item.orderNo}`)}}>{item.orderNo}</span> |
||||
|
<span className={'text-orange-500'}>待付款</span> {/* 这里可以根据item.orderStatus显示不同的状态 */} |
||||
|
</div> |
||||
|
<div |
||||
|
className={'create-time text-gray-400 text-xs'}>{dayjs(item.createTime).format('YYYY年MM月DD日 HH:mm:ss')}</div> |
||||
|
<div className={'goods-info'}> |
||||
|
<div className={'flex items-center'}> |
||||
|
<div className={'flex items-center'}> |
||||
|
<Avatar |
||||
|
src='34' |
||||
|
size={'45'} |
||||
|
shape={'square'} |
||||
|
/> |
||||
|
<div className={'ml-2'}>{item.realName}</div> |
||||
|
</div> |
||||
|
<div className={'text-gray-400 text-xs'}>{item.totalNum}件商品</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className={' w-full text-right'}>实付金额：￥{item.payPrice}</div> |
||||
|
<Space className={'btn flex justify-end'}> |
||||
|
<Button size={'small'}>发货</Button> |
||||
|
</Space> |
||||
|
</Space> |
||||
|
</Cell> |
||||
|
) |
||||
|
})} |
||||
|
</InfiniteLoading> |
||||
|
</div> |
||||
|
</> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
export default OrderList |
||||
@ -0,0 +1,4 @@ |
|||||
|
export default definePageConfig({ |
||||
|
navigationBarTitleText: '订单确认', |
||||
|
navigationBarTextStyle: 'black' |
||||
|
}) |
||||
@ -0,0 +1,44 @@ |
|||||
|
.order-confirm-page { |
||||
|
padding-bottom: 100px; // 留出底部固定按钮的空间 |
||||
|
|
||||
|
.fixed-bottom { |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 10px 20px; |
||||
|
background-color: #fff; |
||||
|
border-top: 1px solid #eee; |
||||
|
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); |
||||
|
|
||||
|
.total-price { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.submit-btn { |
||||
|
width: 150px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.address-bottom-line{ |
||||
|
width: 100%; |
||||
|
border-radius: 24rpx 24rpx 0 0; |
||||
|
background: #fff; |
||||
|
padding: 26rpx 49rpx 0 34rpx; |
||||
|
position: relative; |
||||
|
&:before { |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
height: 5px; |
||||
|
background: repeating-linear-gradient(-45deg, #ff6c6c, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, |
||||
|
#1989fa 45%, transparent 0, transparent 50%); |
||||
|
background-size: 120px; |
||||
|
content: ""; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,132 @@ |
|||||
|
import {useEffect, useState} from "react"; |
||||
|
import {Image, Button, Cell, CellGroup, Input, Space} from '@nutui/nutui-react-taro' |
||||
|
import {Location, ArrowRight} from '@nutui/icons-react-taro' |
||||
|
import Taro from '@tarojs/taro' |
||||
|
import {ShopGoods} from "@/api/shop/shopGoods/model"; |
||||
|
import {getShopGoods} from "@/api/shop/shopGoods"; |
||||
|
import {View} from '@tarojs/components'; |
||||
|
import {listShopUserAddress} from "@/api/shop/shopUserAddress"; |
||||
|
import {ShopUserAddress} from "@/api/shop/shopUserAddress/model"; |
||||
|
import './index.scss' |
||||
|
import {useCart} from "@/hooks/useCart"; |
||||
|
import Gap from "@/components/Gap"; |
||||
|
|
||||
|
const OrderConfirm = () => { |
||||
|
const [goods, setGoods] = useState<ShopGoods | null>(null); |
||||
|
const [address, setAddress] = useState<ShopUserAddress>() |
||||
|
const router = Taro.getCurrentInstance().router; |
||||
|
const goodsId = router?.params?.goodsId; |
||||
|
|
||||
|
const { |
||||
|
cartItems |
||||
|
} = useCart(); |
||||
|
|
||||
|
const reload = async () => { |
||||
|
const address = await listShopUserAddress({isDefault: true}); |
||||
|
if (address.length > 0) { |
||||
|
console.log(address, '111') |
||||
|
setAddress(address[0]) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
useEffect(() => { |
||||
|
if (goodsId) { |
||||
|
getShopGoods(Number(goodsId)).then(res => { |
||||
|
setGoods(res); |
||||
|
}).catch(error => { |
||||
|
console.error("Failed to fetch goods detail:", error); |
||||
|
}); |
||||
|
} |
||||
|
reload().then() |
||||
|
}, [goodsId]); |
||||
|
|
||||
|
if (!goods) { |
||||
|
return <div>加载中...</div>; |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<div className={'order-confirm-page'}> |
||||
|
<CellGroup> |
||||
|
{ |
||||
|
address && ( |
||||
|
<Cell className={'address-bottom-line'} onClick={() => Taro.navigateTo({url: '/user/address/index'})}> |
||||
|
<Space> |
||||
|
<Location/> |
||||
|
<View className={'flex flex-col w-full justify-between items-start'}> |
||||
|
<Space className={'flex flex-row w-full font-medium'}> |
||||
|
<View className={'flex-wrap text-nowrap whitespace-nowrap'}>送至</View> |
||||
|
<View style={{width: '64%'}} |
||||
|
className={'line-clamp-1 relative'}>{address.province} {address.city} {address.region} {address.address} |
||||
|
</View> |
||||
|
</Space> |
||||
|
<View className={'pt-1 pb-3 text-gray-500'}>{address.name} {address.phone}</View> |
||||
|
</View> |
||||
|
</Space> |
||||
|
</Cell> |
||||
|
) |
||||
|
} |
||||
|
{!address && ( |
||||
|
<Cell className={''} onClick={() => Taro.navigateTo({url: '/user/address/index'})}> |
||||
|
<Space> |
||||
|
<Location/> |
||||
|
添加收货地址 |
||||
|
</Space> |
||||
|
</Cell> |
||||
|
)} |
||||
|
</CellGroup> |
||||
|
|
||||
|
<CellGroup> |
||||
|
{cartItems.map((goods, _) => ( |
||||
|
<Cell key={goods.goodsId}> |
||||
|
<Space> |
||||
|
<Image src={goods.image} mode={'aspectFill'} style={{ |
||||
|
width: '80px', |
||||
|
height: '80px', |
||||
|
}} lazyLoad={false}/> |
||||
|
<View className={'flex flex-col'}> |
||||
|
<View className={'font-medium w-full'}>{goods.name}</View> |
||||
|
<View className={'number text-gray-400 text-sm py-2'}>80g/袋</View> |
||||
|
<Space className={'flex justify-start items-center'}> |
||||
|
<View className={'text-red-500'}>￥{goods.price}</View> |
||||
|
<View className={'text-gray-500 text-sm'}>x {goods.quantity}</View> |
||||
|
</Space> |
||||
|
</View> |
||||
|
</Space> |
||||
|
</Cell> |
||||
|
))} |
||||
|
</CellGroup> |
||||
|
|
||||
|
<CellGroup> |
||||
|
<Cell title={'商品总价（共3件）'} extra={<View className={'font-medium'}>{'￥' + goods.price}</View>}/> |
||||
|
<Cell title={'优惠券'} extra={( |
||||
|
<View className={'flex justify-between items-center'}> |
||||
|
<View className={'text-red-500 text-sm mr-1'}>-￥10.00</View> |
||||
|
<ArrowRight className={'text-gray-400'} size={14}/> |
||||
|
</View> |
||||
|
)}/> |
||||
|
{/*<Cell title={'配送费'} extra={'￥' + 10}/>*/} |
||||
|
<Cell title={'订单备注'} extra={( |
||||
|
<Input placeholder={'选填，请先和商家协商一致'} style={{ padding: '0'}}/> |
||||
|
)}/> |
||||
|
</CellGroup> |
||||
|
|
||||
|
<Gap height={50} /> |
||||
|
|
||||
|
<div className={'fixed z-50 bg-white w-full bottom-0 left-0 pt-4 pb-10'} style={{ |
||||
|
boxShadow: '0 -2px 4px 0 rgba(0,0,0,0.10)' |
||||
|
}}> |
||||
|
<View className={'btn-bar flex justify-between items-center'}> |
||||
|
<div className={'flex justify-center items-center mx-4'}> |
||||
|
<span className={'total-price text-sm text-gray-500'}>实付金额：</span> |
||||
|
<span className={'text-red-500 text-xl font-bold'}>￥{goods.price}</span> |
||||
|
</div> |
||||
|
<div className={'buy-btn mx-4'}> |
||||
|
<Button type="success" size="large">立即付款</Button> |
||||
|
</div> |
||||
|
</View> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default OrderConfirm; |
||||
Loading…
Reference in new issue