Просмотр исходного кода

✨ feat(order): 优化订单列表和详情页的车辆类型与出行方式显示

- 导入getVehicleTypeText和getTravelModeText工具函数,统一处理文本显示
- 订单详情页:使用工具函数显示车辆型号和出行方式
- 订单列表页:使用工具函数显示车辆型号和出行方式
- 修改包车订单判断逻辑,使用枚举值替代字符串包含判断

♻️ refactor(order): 优化订单卡片组件结构

- 订单卡片中新增出行方式显示行
- 调整车辆型号和出行方式的样式和布局
yourname 3 месяцев назад
Родитель
Сommit
4170dcfdc0
3 измененных файлов с 42 добавлено и 4 удалено
  1. 3 2
      mini/src/pages/order-detail/index.tsx
  2. 15 2
      mini/src/pages/orders/index.tsx
  3. 24 0
      mini/src/types/route.types.ts

+ 3 - 2
mini/src/pages/order-detail/index.tsx

@@ -6,6 +6,7 @@ import Taro from '@tarojs/taro';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { orderClient } from '@/api';
 import { orderClient } from '@/api';
 import { OrderStatus } from '@/types/order.types';
 import { OrderStatus } from '@/types/order.types';
+import { getVehicleTypeText, getTravelModeText } from '@/types/route.types';
 import { Navbar } from '@/components/ui/navbar';
 import { Navbar } from '@/components/ui/navbar';
 
 
 const OrderDetailPage = () => {
 const OrderDetailPage = () => {
@@ -183,7 +184,7 @@ const OrderDetailPage = () => {
 
 
               <View className="flex justify-between">
               <View className="flex justify-between">
                 <Text className="text-gray-500">车辆型号:</Text>
                 <Text className="text-gray-500">车辆型号:</Text>
-                <Text>{order.routeSnapshot?.vehicleType || '未知车型'}</Text>
+                <Text>{getVehicleTypeText(order.routeSnapshot?.vehicleType)}</Text>
               </View>
               </View>
 
 
               <View className="flex justify-between">
               <View className="flex justify-between">
@@ -268,7 +269,7 @@ const OrderDetailPage = () => {
 
 
                 <View className="flex justify-between">
                 <View className="flex justify-between">
                   <Text className="text-gray-500">出行方式:</Text>
                   <Text className="text-gray-500">出行方式:</Text>
-                  <Text>{order.routeSnapshot.travelMode === 'DRIVING' ? '驾车' : '其他'}</Text>
+                  <Text>{getTravelModeText(order.routeSnapshot.travelMode)}</Text>
                 </View>
                 </View>
 
 
                 <View className="flex justify-between">
                 <View className="flex justify-between">

+ 15 - 2
mini/src/pages/orders/index.tsx

@@ -5,6 +5,7 @@ import Taro from '@tarojs/taro';
 import { useQuery } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import { orderClient } from '@/api';
 import { orderClient } from '@/api';
 import { OrderStatus } from '@/types/order.types';
 import { OrderStatus } from '@/types/order.types';
+import { getVehicleTypeText, getTravelModeText } from '@/types/route.types';
 import { TabBarLayout } from '@/layouts/tab-bar-layout';
 import { TabBarLayout } from '@/layouts/tab-bar-layout';
 import { Navbar } from '@/components/ui/navbar';
 import { Navbar } from '@/components/ui/navbar';
 
 
@@ -35,7 +36,7 @@ const OrderCard = ({ order, onViewDetail }) => {
   };
   };
 
 
   // 判断是否为包车订单
   // 判断是否为包车订单
-  const isCharterOrder = order.routeSnapshot?.vehicleType?.includes('包车') || order.routeSnapshot?.vehicleType?.includes('商务');
+  const isCharterOrder = order.routeSnapshot?.vehicleType === 'business' || order.routeSnapshot?.travelMode === 'charter';
 
 
   return (
   return (
     <View
     <View
@@ -120,7 +121,19 @@ const OrderCard = ({ order, onViewDetail }) => {
             <Text className={`text-[26rpx] flex-1 ${
             <Text className={`text-[26rpx] flex-1 ${
               isCharterOrder ? 'text-white' : 'text-gray-900'
               isCharterOrder ? 'text-white' : 'text-gray-900'
             }`}>
             }`}>
-              {order.routeSnapshot?.vehicleType || '未知车型'}
+              {getVehicleTypeText(order.routeSnapshot?.vehicleType)}
+            </Text>
+          </View>
+          <View className="flex mb-[16rpx] items-center">
+            <Text className={`text-[26rpx] w-[160rpx] flex-shrink-0 ${
+              isCharterOrder ? 'text-gray-300' : 'text-gray-600'
+            }`}>
+              出行方式:
+            </Text>
+            <Text className={`text-[26rpx] flex-1 ${
+              isCharterOrder ? 'text-white' : 'text-gray-900'
+            }`}>
+              {getTravelModeText(order.routeSnapshot?.travelMode)}
             </Text>
             </Text>
           </View>
           </View>
           <View className="flex items-center">
           <View className="flex items-center">

+ 24 - 0
mini/src/types/route.types.ts

@@ -1,3 +1,27 @@
+// 车辆型号枚举到中文的映射
+export const vehicleTypeMap = {
+  'bus': '大巴',
+  'minibus': '中巴',
+  'car': '小车',
+  'business': '商务车'
+} as const;
+
+// 获取车辆型号的中文显示
+export const getVehicleTypeText = (vehicleType: string) => {
+  return vehicleTypeMap[vehicleType as keyof typeof vehicleTypeMap] || vehicleType || '未知车型';
+};
+
+// 出行方式枚举到中文的映射
+export const travelModeMap = {
+  'carpool': '拼车',
+  'charter': '包车'
+} as const;
+
+// 获取出行方式的中文显示
+export const getTravelModeText = (travelMode: string) => {
+  return travelModeMap[travelMode as keyof typeof travelModeMap] || travelMode || '未知出行方式';
+};
+
 // 路线接口
 // 路线接口
 export interface Route {
 export interface Route {
   id: number
   id: number