forked from gxwebsoft/mp-10550
refactor(app): 重构用户中心和订单相关页面
-调整了 app.config.ts 中的页面路径和顺序 - 移除了 article 页面 - 重构了 cart、find、order 和 user 页面的布局和功能 - 优化了导航栏和订单状态的显示逻辑 - 统一了页面样式和图标使用
This commit is contained in:
@@ -7,7 +7,8 @@ import {
|
||||
InputNumber,
|
||||
Button,
|
||||
Empty,
|
||||
Divider
|
||||
Divider,
|
||||
ConfigProvider
|
||||
} from '@nutui/nutui-react-taro';
|
||||
import {ArrowLeft, Del, Shopping} from '@nutui/icons-react-taro';
|
||||
import {View} from '@tarojs/components';
|
||||
@@ -26,6 +27,16 @@ function Cart() {
|
||||
clearCart
|
||||
} = useCart();
|
||||
|
||||
// InputNumber 主题配置
|
||||
const customTheme = {
|
||||
nutuiInputnumberButtonWidth: '28px',
|
||||
nutuiInputnumberButtonHeight: '28px',
|
||||
nutuiInputnumberInputWidth: '40px',
|
||||
nutuiInputnumberInputHeight: '28px',
|
||||
nutuiInputnumberInputBorderRadius: '4px',
|
||||
nutuiInputnumberButtonBorderRadius: '4px',
|
||||
}
|
||||
|
||||
useShareTimeline(() => {
|
||||
return {
|
||||
title: '购物车 - 网宿小店'
|
||||
@@ -138,11 +149,52 @@ function Cart() {
|
||||
}
|
||||
}, [selectedItems, cartItems]);
|
||||
|
||||
if (cartItems.length === 0) {
|
||||
return (
|
||||
<>
|
||||
<NavBar
|
||||
fixed={true}
|
||||
style={{marginTop: `${statusBarHeight}px`}}
|
||||
left={<ArrowLeft onClick={() => Taro.navigateBack()}/>}
|
||||
right={
|
||||
cartItems.length > 0 && (
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
fill="none"
|
||||
onClick={() => {
|
||||
Taro.showModal({
|
||||
title: '确认清空',
|
||||
content: '确定要清空购物车吗?',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
clearCart();
|
||||
setSelectedItems([]);
|
||||
}
|
||||
}
|
||||
});
|
||||
}}
|
||||
>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="text-lg">购物车({cartCount})</span>
|
||||
</NavBar>
|
||||
<Empty
|
||||
description="购物车空空如也"
|
||||
actions={[{ text: '去逛逛' }]}
|
||||
style={{ marginTop: `${statusBarHeight + 50}px` }}
|
||||
onClick={() => Taro.switchTab({ url: '/pages/index/index' })}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<View style={{backgroundColor: '#f6f6f6', height: `${statusBarHeight}px`}}
|
||||
className="fixed z-10 top-0 w-full"></View>
|
||||
className="fixed z-10 top-0 w-full"></View>
|
||||
<NavBar
|
||||
fixed={true}
|
||||
style={{marginTop: `${statusBarHeight}px`}}
|
||||
@@ -224,16 +276,14 @@ function Cart() {
|
||||
<span className={'text-xs'}>¥</span>
|
||||
<span className={'font-bold text-lg'}>{item.price}</span>
|
||||
</View>
|
||||
<View className="flex items-center gap-2">
|
||||
<ConfigProvider theme={customTheme}>
|
||||
<InputNumber
|
||||
value={item.quantity}
|
||||
min={1}
|
||||
max={99}
|
||||
onChange={(value) => handleQuantityChange(item.goodsId, Number(value))}
|
||||
className="w-24"
|
||||
/>
|
||||
<Del className={'text-red-500'} size={16} onClick={() => handleRemoveItem(item.goodsId)}/>
|
||||
</View>
|
||||
</ConfigProvider>
|
||||
<Del className={'text-red-500'} size={14} onClick={() => handleRemoveItem(item.goodsId)}/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
Reference in New Issue
Block a user