Browse Source

refactor(app): 重构用户中心和订单相关页面

-调整了 app.config.ts 中的页面路径和顺序
- 移除了 article 页面
- 重构了 cart、find、order 和 user 页面的布局和功能
- 优化了导航栏和订单状态的显示逻辑
- 统一了页面样式和图标使用
demo
科技小王子 2 months ago
parent
commit
f69decdf4d
  1. 24
      src/app.config.ts
  2. BIN
      src/assets/tabbar/cart-active.png
  3. BIN
      src/assets/tabbar/cart.png
  4. BIN
      src/assets/tabbar/order-active.png
  5. BIN
      src/assets/tabbar/order.png
  6. BIN
      src/assets/tabbar/store-active.png
  7. BIN
      src/assets/tabbar/store.png
  8. 3
      src/pages/article/article.config.ts
  9. 50
      src/pages/article/article.tsx
  10. 62
      src/pages/cart/cart.tsx
  11. 38
      src/pages/find/find.tsx
  12. 211
      src/pages/user/components/OrderIcon.tsx
  13. 8
      src/pages/user/components/UserCard.tsx
  14. 69
      src/pages/user/components/UserOrder.tsx
  15. 2
      src/pages/user/user.tsx
  16. 6
      src/shop/goodsDetail/index.tsx
  17. 6
      src/shop/orderDetail/index.tsx
  18. 0
      src/user/order/components/OrderList.tsx
  19. 0
      src/user/order/components/OrderSearch.scss
  20. 0
      src/user/order/components/OrderSearch.tsx
  21. 0
      src/user/order/order.config.ts
  22. 0
      src/user/order/order.scss
  23. 61
      src/user/order/order.tsx

24
src/app.config.ts

@ -1,9 +1,8 @@
export default defineAppConfig({ export default defineAppConfig({
pages: [ pages: [
'pages/index/index', 'pages/index/index',
'pages/order/order',
'pages/cart/cart', 'pages/cart/cart',
// 'pages/find/find',
'pages/find/find',
'pages/user/user' 'pages/user/user'
], ],
"subpackages": [ "subpackages": [
@ -28,6 +27,7 @@ export default defineAppConfig({
{ {
"root": "user", "root": "user",
"pages": [ "pages": [
"order/order",
"company/company", "company/company",
"profile/profile", "profile/profile",
"setting/setting", "setting/setting",
@ -82,17 +82,17 @@ export default defineAppConfig({
selectedIconPath: "assets/tabbar/home-active.png", selectedIconPath: "assets/tabbar/home-active.png",
text: "首页", text: "首页",
}, },
// {
// pagePath: "pages/find/find",
// iconPath: "assets/tabbar/find.png",
// selectedIconPath: "assets/tabbar/find-active.png",
// text: "发现",
// },
{ {
pagePath: "pages/order/order",
iconPath: "assets/tabbar/order.png",
selectedIconPath: "assets/tabbar/order-active.png",
text: "订单",
pagePath: "pages/find/find",
iconPath: "assets/tabbar/find.png",
selectedIconPath: "assets/tabbar/find-active.png",
text: "发现",
},
{
pagePath: "pages/cart/cart",
iconPath: "assets/tabbar/cart.png",
selectedIconPath: "assets/tabbar/cart-active.png",
text: "购物车",
}, },
{ {
pagePath: "pages/user/user", pagePath: "pages/user/user",

BIN
src/assets/tabbar/cart-active.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
src/assets/tabbar/cart.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
src/assets/tabbar/order-active.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/tabbar/order.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/tabbar/store-active.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/tabbar/store.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

3
src/pages/article/article.config.ts

@ -1,3 +0,0 @@
export default definePageConfig({
navigationBarTitleText: '学习'
})

50
src/pages/article/article.tsx

@ -1,50 +0,0 @@
import {useEffect, useState} from "react";
import {ArrowRight} from '@nutui/icons-react-taro'
import {pageCmsArticle} from "@/api/cms/cmsArticle";
import {CmsArticle} from "@/api/cms/cmsArticle/model";
import Taro from '@tarojs/taro'
/**
*
* @constructor
*/
const Article = () => {
// const {params} = useRouter();
// const [categoryId, setCategoryId] = useState<number>(3494)
const [list, setList] = useState<CmsArticle[]>([])
const reload = () => {
// if (params.id) {
// setCategoryId(Number(params.id))
// }
pageCmsArticle({}).then(res => {
if (res?.list) {
setList(res?.list)
}
})
}
useEffect(() => {
reload()
}, [])
return (
<div className={'px-3 mt-4 mb-10'}>
<div className={'flex flex-col justify-between items-center bg-white rounded-lg p-4'}>
<div className={'bg-white w-full'}>
{
list.map((item, index) => {
return (
<div key={index} className={'flex justify-between items-center py-2'} onClick={() => Taro.navigateTo({url: `/cms/help?id=${item.articleId}`}) }>
<div className={'text-sm'}>{item.title}</div>
<ArrowRight color={'#cccccc'} size={18} />
</div>
)
})
}
</div>
</div>
</div>
)
}
export default Article

62
src/pages/cart/cart.tsx

@ -7,7 +7,8 @@ import {
InputNumber, InputNumber,
Button, Button,
Empty, Empty,
Divider
Divider,
ConfigProvider
} from '@nutui/nutui-react-taro'; } from '@nutui/nutui-react-taro';
import {ArrowLeft, Del, Shopping} from '@nutui/icons-react-taro'; import {ArrowLeft, Del, Shopping} from '@nutui/icons-react-taro';
import {View} from '@tarojs/components'; import {View} from '@tarojs/components';
@ -26,6 +27,16 @@ function Cart() {
clearCart clearCart
} = useCart(); } = useCart();
// InputNumber 主题配置
const customTheme = {
nutuiInputnumberButtonWidth: '28px',
nutuiInputnumberButtonHeight: '28px',
nutuiInputnumberInputWidth: '40px',
nutuiInputnumberInputHeight: '28px',
nutuiInputnumberInputBorderRadius: '4px',
nutuiInputnumberButtonBorderRadius: '4px',
}
useShareTimeline(() => { useShareTimeline(() => {
return { return {
title: '购物车 - 网宿小店' title: '购物车 - 网宿小店'
@ -138,9 +149,50 @@ function Cart() {
} }
}, [selectedItems, cartItems]); }, [selectedItems, cartItems]);
if (cartItems.length === 0) {
return ( 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`}} <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 <NavBar
@ -224,16 +276,14 @@ function Cart() {
<span className={'text-xs'}></span> <span className={'text-xs'}></span>
<span className={'font-bold text-lg'}>{item.price}</span> <span className={'font-bold text-lg'}>{item.price}</span>
</View> </View>
<View className="flex items-center gap-2">
<ConfigProvider theme={customTheme}>
<InputNumber <InputNumber
value={item.quantity} value={item.quantity}
min={1} min={1}
max={99}
onChange={(value) => handleQuantityChange(item.goodsId, Number(value))} 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> </View>
</View> </View>

38
src/pages/find/find.tsx

@ -2,7 +2,9 @@ import {useEffect, useState} from "react";
import Taro from '@tarojs/taro'; import Taro from '@tarojs/taro';
import {pageCmsArticle} from "@/api/cms/cmsArticle"; import {pageCmsArticle} from "@/api/cms/cmsArticle";
import {CmsArticle} from "@/api/cms/cmsArticle/model"; import {CmsArticle} from "@/api/cms/cmsArticle/model";
import {NavBar} from '@nutui/nutui-react-taro'
import {NavBar, Cell} from '@nutui/nutui-react-taro';
import {Text} from '@tarojs/components';
import {ArrowRight, ImageRectangle, Coupon, Follow} from '@nutui/icons-react-taro'
import './find.scss' import './find.scss'
/** /**
@ -17,7 +19,7 @@ const Find = () => {
const reload = async () => { const reload = async () => {
setLoading(true) setLoading(true)
const article = await pageCmsArticle({categoryId: 4289, status: 0}) const article = await pageCmsArticle({categoryId: 4289, status: 0})
if(article){
if (article) {
setList(article?.list) setList(article?.list)
setLoading(false) setLoading(false)
} }
@ -38,27 +40,33 @@ const Find = () => {
<> <>
{loading && (<div></div>)} {loading && (<div></div>)}
<NavBar <NavBar
fixed={true}
fixed={false}
style={{marginTop: `${statusBarHeight}px`, backgroundColor: 'transparent'}} style={{marginTop: `${statusBarHeight}px`, backgroundColor: 'transparent'}}
onBackClick={() => { onBackClick={() => {
}} }}
left={
<>
<div className={'flex justify-between items-center w-full'}>
</div>
{/*<SearchBar shape="round" maxLength={5} style={{paddingLeft: '1px'}}/>*/}
{/*<div className={'flex flex-col text-center justify-center items-center'}>*/}
{/* <Filter size={14}/>*/}
{/* <div className={'text-xs text-gray-600 whitespace-nowrap'}>筛选</div>*/}
{/*</div>*/}
</>
}
> >
<span></span> <span></span>
</NavBar> </NavBar>
{list && ( {list && (
<> <>
<Cell title={
<div style={{display: 'inline-flex', alignItems: 'center'}}>
<ImageRectangle size={18}/>
<Text className={'pl-3'} style={{ fontSize: '16px'}}></Text>
</div>
} extra={<ArrowRight color="#cccccc" size={18}/>}/>
<Cell title={
<div style={{display: 'inline-flex', alignItems: 'center'}}>
<Coupon size={18}/>
<span className={'pl-3'} style={{ fontSize: '16px'}}></span>
</div>
} extra={<ArrowRight color="#cccccc" size={18}/>}/>
<Cell title={
<div style={{display: 'inline-flex', alignItems: 'center'}}>
<Follow size={18}/>
<span className={'pl-3'} style={{ fontSize: '16px'}}></span>
</div>
} extra={<ArrowRight color="#cccccc" size={18}/>}/>
</> </>
)} )}
</> </>

211
src/pages/user/components/OrderIcon.tsx

@ -1,211 +0,0 @@
import {useEffect, useState} from 'react'
import {navigateTo} from '@tarojs/taro'
import Taro from '@tarojs/taro'
import {Button} from '@tarojs/components';
import {Image} from '@nutui/nutui-react-taro'
import {getUserInfo, getWxOpenId} from "@/api/layout";
import {TenantId} from "@/config/app";
import {User} from "@/api/system/user/model";
// import News from "./News";
import {myPageBszxBm} from "@/api/bszx/bszxBm";
import {listCmsNavigation} from "@/api/cms/cmsNavigation";
const OrderIcon = () => {
const [loading, setLoading] = useState(true)
const [isLogin, setIsLogin] = useState<boolean>(false)
const [userInfo, setUserInfo] = useState<User>()
const [bmLogs, setBmLogs] = useState<any>()
const [navItems, setNavItems] = useState<any>([])
/* 获取用户手机号 */
const handleGetPhoneNumber = ({detail}) => {
const {code, encryptedData, iv} = detail
Taro.login({
success: function () {
if (code) {
Taro.request({
url: 'https://server.websoft.top/api/wx-login/loginByMpWxPhone',
method: 'POST',
data: {
code,
encryptedData,
iv,
notVerifyPhone: true,
refereeId: 0,
sceneType: 'save_referee',
tenantId: TenantId
},
header: {
'content-type': 'application/json',
TenantId
},
success: function (res) {
Taro.setStorageSync('access_token', res.data.data.access_token)
Taro.setStorageSync('UserId', res.data.data.user.userId)
setUserInfo(res.data.data.user)
Taro.setStorageSync('Phone', res.data.data.user.phone)
setIsLogin(true)
Taro.showToast({
title: '登录成功',
icon: 'success'
});
}
})
} else {
console.log('登录失败!')
}
}
})
}
const onLogin = (item: any, index: number) => {
if(!isLogin){
return navigateTo({url: `/pages/category/category?id=${item.navigationId}`})
}else {
// 报名链接
if(index == 0){
console.log(bmLogs,'bmLogs')
if(bmLogs && bmLogs.length > 0){
return navigateTo({url: `/bszx/bm-cert/bm-cert?id=${bmLogs[0].id}`})
}else {
navigateTo({url: `/user/profile/profile`})
}
}
// 善款明细
if(item.navigationId == 4119){
return navigateTo({url: `/bszx/pay-record/pay-record`})
}
return navigateTo({url: `/pages/category/category?id=${item.navigationId}`})
}
}
const reload = () => {
// 读取栏目
listCmsNavigation({parentId: 2828,hide: 0}).then(res => {
console.log(res,'9999')
setNavItems(res);
})
Taro.getUserInfo({
success: (res) => {
const avatar = res.userInfo.avatarUrl;
setUserInfo({
avatar,
nickname: res.userInfo.nickName,
sexName: res.userInfo.gender == 1 ? '男' : '女'
})
getUserInfo().then((data) => {
if (data) {
setUserInfo(data)
setIsLogin(true);
console.log(userInfo, 'userInfo...')
Taro.setStorageSync('UserId', data.userId)
// 获取openId
if (!data.openid) {
Taro.login({
success: (res) => {
getWxOpenId({code: res.code}).then(() => {
})
}
})
}
}
}).catch(() => {
console.log('未登录')
});
}
});
// 报名日志
myPageBszxBm({limit: 1}).then(res => {
if (res.list) {
setBmLogs(res.list);
}
})
setLoading(false);
};
const showAuthModal = () => {
Taro.showModal({
title: '授权提示',
content: '需要获取您的用户信息',
confirmText: '去授权',
cancelText: '取消',
success: (res) => {
if (res.confirm) {
// 用户点击确认,打开授权设置页面
openSetting();
}
}
});
};
const openSetting = () => {
// Taro.openSetting:调起客户端小程序设置界面,返回用户设置的操作结果。设置界面只会出现小程序已经向用户请求过的权限。
Taro.openSetting({
success: (res) => {
if (res.authSetting['scope.userInfo']) {
// 用户授权成功,可以获取用户信息
reload();
} else {
// 用户拒绝授权,提示授权失败
Taro.showToast({
title: '授权失败',
icon: 'none'
});
}
}
});
};
useEffect(() => {
Taro.getSetting({
success: (res) => {
if (res.authSetting['scope.userInfo']) {
// 用户已经授权过,可以直接获取用户信息
console.log('用户已经授权过,可以直接获取用户信息')
reload();
} else {
// 用户未授权,需要弹出授权窗口
console.log('用户未授权,需要弹出授权窗口')
showAuthModal();
}
}
});
reload();
}, [])
return (
<div className={'my-3'}>
<div className={'pt-4 bg-yellow-50 rounded-2xl'}
style={{background: 'linear-gradient(to bottom, #ffffff, #ffffcc)'}}>
<div className={'flex justify-between pb-2 px-1'}>
{
navItems.map((item, index) => (
<div key={index} className={'text-center'}>
{
isLogin && !loading ?
<div className={'flex flex-col justify-center items-center'} onClick={() => {
onLogin(item, index)
}}>
<Image src={item.icon} height={28} width={28} lazyLoad={false}/>
<div className={'mt-2'} style={{fontSize: '15px'}}>{item?.title}</div>
</div>
:
<Button className={'text-white'} open-type="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
<div className={'flex flex-col justify-center items-center'}>
<Image src={item.icon} height={28} width={28} lazyLoad={false}/>
<div className={'mt-2 text-gray-700'} style={{fontSize: '15px'}}>{item?.title}</div>
</div>
</Button>
}
</div>
))
}
</div>
</div>
{/*<image src={'https://oss.wsdns.cn/20250224/18a2f3b807c94aac8a67af34e95534d6.jpeg'} className={'book'}>倡议书</image>*/}
{/*<News id={categoryId}/>*/}
</div>
)
}
export default OrderIcon

8
src/pages/user/components/UserCard.tsx

@ -176,7 +176,7 @@ function UserCard() {
} }
return ( return (
<div className={'header-bg pt-36'}>
<div className={'header-bg pt-20'}>
<div className={'p-4'}> <div className={'p-4'}>
<div <div
className={'user-card w-full flex flex-col justify-around rounded-xl shadow-sm'} className={'user-card w-full flex flex-col justify-around rounded-xl shadow-sm'}
@ -184,7 +184,7 @@ function UserCard() {
background: 'linear-gradient(to bottom, #ffffff, #ffffff)', // 这种情况建议使用类名来控制样式(引入外联样式) background: 'linear-gradient(to bottom, #ffffff, #ffffff)', // 这种情况建议使用类名来控制样式(引入外联样式)
// width: '720rpx', // width: '720rpx',
// margin: '10px auto 0px auto', // margin: '10px auto 0px auto',
height: '180px',
height: '170px',
// borderRadius: '22px 22px 0 0', // borderRadius: '22px 22px 0 0',
}} }}
> >
@ -200,7 +200,7 @@ function UserCard() {
) )
} }
<div className={'user-info flex flex-col px-2'}> <div className={'user-info flex flex-col px-2'}>
<div className={'py-1 text-black font-bold'}>{IsLogin ? userInfo?.mobile : '请点击头像登录'}</div>
<div className={'py-1 text-black font-bold'}>{IsLogin ? userInfo?.nickname : '请点击头像登录'}</div>
{IsLogin ? ( {IsLogin ? (
<div className={'grade text-xs py-1'}> <div className={'grade text-xs py-1'}>
<Tag type="success" round> <Tag type="success" round>
@ -215,7 +215,7 @@ function UserCard() {
{'个人资料'} {'个人资料'}
</div> </div>
</div> </div>
<div className={'flex justify-around mt-5'}>
<div className={'flex justify-around mt-1'}>
<div className={'item flex justify-center flex-col items-center'} onClick={() => navTo('/user/wallet/wallet', true)}> <div className={'item flex justify-center flex-col items-center'} onClick={() => navTo('/user/wallet/wallet', true)}>
<span className={'text-sm text-gray-500'}></span> <span className={'text-sm text-gray-500'}></span>
<span className={'text-xl'}>¥ {userInfo?.balance || '0.00'}</span> <span className={'text-xl'}>¥ {userInfo?.balance || '0.00'}</span>

69
src/pages/user/components/UserOrder.tsx

@ -0,0 +1,69 @@
import {useEffect} from "react";
import navTo from "@/utils/common";
import {View, Text} from '@tarojs/components';
import {ArrowRight, Wallet, Comment, Transit, Refund, Package} from '@nutui/icons-react-taro';
function UserOrder() {
const reload = () => {
};
useEffect(() => {
reload()
}, []);
return (
<>
<View className={'px-4 pb-2'}>
<View
className={'user-card w-full flex flex-col justify-around rounded-xl shadow-sm'}
style={{
background: 'linear-gradient(to bottom, #ffffff, #ffffff)', // 这种情况建议使用类名来控制样式(引入外联样式)
// margin: '10px auto 0px auto',
height: '120px',
// borderRadius: '22px 22px 0 0',
}}
>
<View className={'title-bar flex justify-between pt-2'}>
<Text className={'title font-medium px-4'}></Text>
<View className={'more flex items-center px-2'} onClick={() => navTo('/user/order/order', true)}>
<Text className={'text-xs text-gray-500'}></Text>
<ArrowRight color="#cccccc" size={12}/>
</View>
</View>
<View className={'flex justify-around pb-1'}>
<View className={'item flex justify-center flex-col items-center'}
onClick={() => navTo('/user/order/order?statusFilter=0', true)}>
<Wallet size={26} className={'font-normal text-gray-500'}/>
<Text className={'text-sm text-gray-600 py-1'}></Text>
</View>
<View className={'item flex justify-center flex-col items-center'}
onClick={() => navTo('/user/order/order?statusFilter=1', true)}>
<Package size={26} className={'text-gray-500 font-normal'}/>
<Text className={'text-sm text-gray-600 py-1'}></Text>
</View>
<View className={'item flex justify-center flex-col items-center'}
onClick={() => navTo('/user/order/order?statusFilter=3', true)}>
<Transit size={24} className={'text-gray-500 font-normal'}/>
<Text className={'text-sm text-gray-600 py-1'}></Text>
</View>
<View className={'item flex justify-center flex-col items-center'}
onClick={() => navTo('/user/order/order?statusFilter=5', true)}>
<Comment size={24} className={'text-gray-500 font-normal'}/>
<Text className={'text-sm text-gray-600 py-1'}></Text>
</View>
<View className={'item flex justify-center flex-col items-center'}
onClick={() => navTo('/user/order/order?statusFilter=7', true)}>
<Refund size={26} className={'font-normal text-gray-500'}/>
<Text className={'text-sm text-gray-600 py-1'}>退/</Text>
</View>
</View>
</View>
</View>
</>
)
}
export default UserOrder;

2
src/pages/user/user.tsx

@ -1,5 +1,6 @@
import {useEffect} from 'react' import {useEffect} from 'react'
import UserCard from "./components/UserCard"; import UserCard from "./components/UserCard";
import UserOrder from "./components/UserOrder";
import UserCell from "./components/UserCell"; import UserCell from "./components/UserCell";
import './user.scss' import './user.scss'
import UserFooter from "./components/UserFooter"; import UserFooter from "./components/UserFooter";
@ -13,6 +14,7 @@ function User() {
background: 'linear-gradient(to bottom, #e9fff2, #f9fafb)' background: 'linear-gradient(to bottom, #e9fff2, #f9fafb)'
}}> }}>
<UserCard /> <UserCard />
<UserOrder />
<UserCell /> <UserCell />
<UserFooter/> <UserFooter/>
</div> </div>

6
src/shop/goodsDetail/index.tsx

@ -133,7 +133,7 @@ const GoodsDetail = () => {
}); });
// 加载商品规格 // 加载商品规格
listShopGoodsSpec({ goodsId: Number(goodsId) } as any)
listShopGoodsSpec({goodsId: Number(goodsId)} as any)
.then((data) => { .then((data) => {
setSpecs(data || []); setSpecs(data || []);
}) })
@ -142,7 +142,7 @@ const GoodsDetail = () => {
}); });
// 加载商品SKU // 加载商品SKU
listShopGoodsSku({ goodsId: Number(goodsId) } as any)
listShopGoodsSku({goodsId: Number(goodsId)} as any)
.then((data) => { .then((data) => {
setSkus(data || []); setSkus(data || []);
}) })
@ -217,7 +217,7 @@ const GoodsDetail = () => {
top: "50px", top: "50px",
right: "110px", right: "110px",
}} }}
onClick={() => navTo(`/pages/cart/cart`, true)}>
onClick={() => Taro.switchTab({url: `/pages/cart/cart`})}>
<Badge value={cartCount} top="-2" right="2"> <Badge value={cartCount} top="-2" right="2">
<div style={{display: 'flex', alignItems: 'center'}}> <div style={{display: 'flex', alignItems: 'center'}}>
<Cart size={16}/> <Cart size={16}/>

6
src/shop/orderDetail/index.tsx

@ -24,7 +24,7 @@ const OrderDetail = () => {
if (order.orderStatus === 7) return '客户端申请退款'; if (order.orderStatus === 7) return '客户端申请退款';
// 检查支付状态 (payStatus为boolean类型) // 检查支付状态 (payStatus为boolean类型)
if (!order.payStatus || order.payStatus === false) return '待付款';
if (!order.payStatus) return '待付款';
// 已付款后检查发货状态 // 已付款后检查发货状态
if (order.deliveryStatus === 10) return '待发货'; if (order.deliveryStatus === 10) return '待发货';
@ -109,8 +109,8 @@ const OrderDetail = () => {
<div className={'fixed-bottom'}> <div className={'fixed-bottom'}>
<Space> <Space>
{order.payStatus === 0 && <Button size="small" onClick={() => console.log('取消订单')}></Button>}
{order.payStatus === 0 && <Button size="small" type="primary" onClick={() => console.log('立即支付')}></Button>}
{!order.payStatus && <Button size="small" onClick={() => console.log('取消订单')}></Button>}
{!order.payStatus && <Button size="small" type="primary" onClick={() => console.log('立即支付')}></Button>}
{order.orderStatus === 1 && <Button size="small" onClick={() => console.log('申请退款')}>退</Button>} {order.orderStatus === 1 && <Button size="small" onClick={() => console.log('申请退款')}>退</Button>}
{order.deliveryStatus === 20 && <Button size="small" type="primary" onClick={() => console.log('确认收货')}></Button>} {order.deliveryStatus === 20 && <Button size="small" type="primary" onClick={() => console.log('确认收货')}></Button>}
</Space> </Space>

0
src/pages/order/components/OrderList.tsx → src/user/order/components/OrderList.tsx

0
src/pages/order/components/OrderSearch.scss → src/user/order/components/OrderSearch.scss

0
src/pages/order/components/OrderSearch.tsx → src/user/order/components/OrderSearch.tsx

0
src/pages/order/order.config.ts → src/user/order/order.config.ts

0
src/pages/order/order.scss → src/user/order/order.scss

61
src/pages/order/order.tsx → src/user/order/order.tsx

@ -1,6 +1,6 @@
import {useState} from "react"; import {useState} from "react";
import Taro, {useDidShow} from '@tarojs/taro' import Taro, {useDidShow} from '@tarojs/taro'
import {NavBar, Space, Empty, Button, ConfigProvider, Input} from '@nutui/nutui-react-taro'
import {Space, Empty, Button, ConfigProvider, Input} from '@nutui/nutui-react-taro'
import {Search, Filter} from '@nutui/icons-react-taro' import {Search, Filter} from '@nutui/icons-react-taro'
import { View } from '@tarojs/components'; import { View } from '@tarojs/components';
import OrderList from "./components/OrderList"; import OrderList from "./components/OrderList";
@ -10,7 +10,6 @@ import {pageShopOrder} from "@/api/shop/shopOrder";
import './order.scss' import './order.scss'
function Order() { function Order() {
const [statusBarHeight, setStatusBarHeight] = useState<number>()
const [list, setList] = useState<ShopOrder[]>([]) const [list, setList] = useState<ShopOrder[]>([])
const [searchParams, setSearchParams] = useState<ShopOrderParam>({}) const [searchParams, setSearchParams] = useState<ShopOrderParam>({})
const [showSearch, setShowSearch] = useState(false) const [showSearch, setShowSearch] = useState(false)
@ -40,55 +39,43 @@ function Order() {
} }
useDidShow(() => { useDidShow(() => {
Taro.getSystemInfo({
success: (res) => {
setStatusBarHeight(res.statusBarHeight)
},
})
// 设置导航栏标题
Taro.setNavigationBarTitle({
title: '我的订单'
});
Taro.setNavigationBarColor({
backgroundColor: '#ffffff',
frontColor: '#000000',
});
reload().then() reload().then()
}); });
return ( return (
<>
<View style={{ height: `${statusBarHeight}px`, backgroundColor: '#ffffff'}}></View>
<NavBar
fixed={true}
style={{marginTop: `${statusBarHeight}px`, backgroundColor: '#ffffff'}}
left={
<>
<div className={'flex justify-between items-center w-full'}>
<Space>
<View className="bg-gray-50 min-h-screen">
{/* 搜索和筛选工具栏 */}
<View className="bg-white px-4 py-3 flex justify-between items-center border-b border-gray-100">
<View className="flex items-center">
<Search <Search
size={18} size={18}
className={'mx-1'}
className="mr-3 text-gray-600"
onClick={() => setShowSearch(!showSearch)} onClick={() => setShowSearch(!showSearch)}
/> />
<Filter <Filter
size={18} size={18}
className={'mx-1'}
className="text-gray-600"
onClick={() => setShowSearch(!showSearch)} onClick={() => setShowSearch(!showSearch)}
/> />
</Space>
</div>
</>
}
>
<span></span>
</NavBar>
</View>
<View className="text-sm text-gray-500">
{list.length}
</View>
</View>
{/* 搜索组件 */} {/* 搜索组件 */}
{showSearch && ( {showSearch && (
<View
className="search-container bg-white p-3 shadow-sm"
style={{
position: 'fixed',
top: `${(statusBarHeight || 0) + 44}px`, // 导航栏高度通常是44px
left: 0,
right: 0,
zIndex: 999,
borderBottom: '1px solid #e5e5e5'
}}
>
<View className="bg-white p-3 shadow-sm border-b border-gray-100">
<View className="flex items-center"> <View className="flex items-center">
<View className="flex-1 mr-2"> <View className="flex-1 mr-2">
<Input <Input
@ -162,7 +149,7 @@ function Order() {
/> />
) )
} }
</>
</View>
); );
} }
Loading…
Cancel
Save