Browse Source

✨ feat(order): 实现订单列表页面标签页跳转功能

- 添加tabKey字段到OrderTagInfo接口,用于标识不同订单类型
- 在订单列表页面添加URL参数处理逻辑,支持从URL获取默认标签页
- 实现订单列表跳转功能,支持带参数跳转到指定订单类型标签页
- 更新个人中心页面订单入口,添加点击跳转到对应订单类型的功能

✨ feat(profile): 优化个人中心订单入口交互

- 添加handleNavigateToOrderList方法处理订单列表跳转
- 更新订单入口点击事件,实现跳转到对应订单类型页面
- 为各订单状态项添加tabKey参数,支持精确跳转
yourname 1 month ago
parent
commit
6a517a8c56

+ 1 - 0
mini/src/components/tdesign/order-group/index.tsx

@@ -10,6 +10,7 @@ interface OrderTagInfo {
   iconName: string
   orderNum?: number
   status?: string
+  tabKey?: string // 对应的订单列表标签页key
 }
 
 interface OrderGroupProps {

+ 10 - 1
mini/src/pages/order-list/index.tsx

@@ -1,6 +1,6 @@
 import { View, ScrollView, Text } from '@tarojs/components'
 import { useInfiniteQuery } from '@tanstack/react-query'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import Taro from '@tarojs/taro'
 import { orderClient } from '@/api'
 import { InferResponseType } from 'hono'
@@ -34,6 +34,15 @@ export default function OrderListPage() {
   const { user } = useAuth()
   const [activeTab, setActiveTab] = useState('all')
 
+  // 处理URL参数
+  useEffect(() => {
+    const currentInstance = Taro.getCurrentInstance()
+    const params = currentInstance.router?.params
+    if (params?.tab) {
+      setActiveTab(params.tab)
+    }
+  }, [])
+
   const {
     data,
     isLoading,

+ 12 - 6
mini/src/pages/profile/index.tsx

@@ -116,6 +116,12 @@ const ProfilePage: React.FC = () => {
     setShowCustomerService(false)
   }
 
+  // 跳转到订单列表页面
+  const handleNavigateToOrderList = (tabKey?: string) => {
+    const url = tabKey ? `/pages/order-list/index?tab=${tabKey}` : '/pages/order-list/index'
+    Taro.navigateTo({ url })
+  }
+
   const handleCallCustomerService = () => {
     Taro.makePhoneCall({
       phoneNumber: '400-123-4567'
@@ -124,10 +130,10 @@ const ProfilePage: React.FC = () => {
 
   // 订单状态数据
   const orderTagInfos = [
-    { title: '待付款', iconName: 'clock', orderNum: 0 },
-    { title: '待发货', iconName: 'package', orderNum: 0 },
-    { title: '待收货', iconName: 'truck', orderNum: 0 },
-    { title: '待评价', iconName: 'star', orderNum: 0 }
+    { title: '待付款', iconName: 'clock', orderNum: 0, tabKey: 'unpaid' },
+    { title: '待发货', iconName: 'package', orderNum: 0, tabKey: 'unshipped' },
+    { title: '待收货', iconName: 'truck', orderNum: 0, tabKey: 'shipped' },
+    { title: '待评价', iconName: 'star', orderNum: 0, tabKey: 'completed' }
   ]
 
   // 菜单数据 - 按照 tcb-shop-demo 的结构
@@ -214,8 +220,8 @@ const ProfilePage: React.FC = () => {
             orderTagInfos={orderTagInfos}
             title="我的订单"
             desc="全部订单"
-            onTopClick={() => Taro.showToast({ title: '查看全部订单', icon: 'none' })}
-            onItemClick={(item) => Taro.showToast({ title: `查看${item.title}订单`, icon: 'none' })}
+            onTopClick={() => handleNavigateToOrderList()}
+            onItemClick={(item) => handleNavigateToOrderList(item.tabKey)}
           />
         </View>