优化下单流程

2025-07-30 02:44:58 +08:00
parent 19fe9b4775
commit 5dd02be44b
12 changed files with 540 additions and 66 deletions
--- a/docs/ORDER_IMPROVEMENTS.md
+++ b/docs/ORDER_IMPROVEMENTS.md
@@ -0,0 +1,103 @@
+# 订单列表功能完善说明
+
+## 完善的功能
+
+### 1. 订单商品正确显示
+- **问题**: 原来只显示订单基本信息，没有显示具体的商品信息
+- **解决方案**: 
+  - 扩展了订单接口，添加了 `OrderWithGoods` 类型
+  - 在加载订单列表时，同时获取每个订单的商品信息
+  - 使用 `listShopOrderGoods` API 获取订单商品详情
+  - 显示商品图片、名称、规格、数量和价格
+
+### 2. 订单状态正确显示
+- **问题**: 原来固定显示"待付款"状态
+- **解决方案**:
+  - 添加了 `getOrderStatusText` 函数，根据订单的 `payStatus`、`deliveryStatus` 和 `orderStatus` 动态显示状态
+  - 支持的状态包括：待付款、待发货、待收货、已收货、已完成、已取消、退款申请中、退款成功等
+
+### 3. 确认收货功能
+- **新增功能**: 
+  - 当订单状态为"待收货"时，显示"确认收货"按钮
+  - 点击确认收货后，更新订单状态为"已收货"和"已完成"
+  - 操作成功后显示提示信息并刷新列表
+
+### 4. 取消订单功能
+- **新增功能**:
+  - 当订单状态为"待付款"时，显示"取消订单"按钮
+  - 点击取消订单后，更新订单状态为"已取消"
+  - 操作成功后显示提示信息并刷新列表
+
+### 5. 操作按钮优化
+- **改进**: 根据订单状态动态显示不同的操作按钮
+  - 待付款：显示"取消订单"和"立即支付"按钮
+  - 待收货：显示"确认收货"按钮
+  - 已完成：显示"申请退款"按钮（预留功能）
+
+### 6. 订单详情页面修复
+- **问题**: 订单详情页面使用了错误的API
+- **解决方案**: 
+  - 修改为使用正确的 `listShopOrderGoods` API
+  - 直接显示商品信息，无需额外查询商品详情
+  - 优化了商品信息的显示格式
+
+## 技术改进
+
+### 1. 类型安全
+- 添加了 `OrderWithGoods` 接口扩展
+- 完善了 `OrderListProps` 接口定义
+- 使用了正确的 TypeScript 类型
+
+### 2. 错误处理
+- 添加了完善的错误处理机制
+- 操作失败时显示友好的错误提示
+- 防止因单个订单商品获取失败而影响整个列表
+
+### 3. 用户体验
+- 添加了操作成功的提示信息
+- 操作完成后自动刷新列表
+- 阻止事件冒泡，避免误触
+
+### 4. 数据一致性
+- 操作完成后通知父组件刷新数据
+- 确保订单状态的实时更新
+
+## 使用说明
+
+### 订单状态说明
+- **待付款**: `payStatus = 0`
+- **待发货**: `payStatus = 1 && deliveryStatus = 10`
+- **待收货**: `deliveryStatus = 20`
+- **已收货**: `deliveryStatus = 30`
+- **已完成**: `orderStatus = 1`
+- **已取消**: `orderStatus = 2`
+
+### API 依赖
+- `pageShopOrder`: 分页查询订单
+- `listShopOrderGoods`: 查询订单商品
+- `updateShopOrder`: 更新订单状态
+
+### 组件结构
+```
+src/pages/order/
+├── order.tsx              # 订单主页面
+├── components/
+│   └── OrderList.tsx      # 订单列表组件
+└── test-order.tsx         # 测试页面（可选）
+```
+
+## 测试建议
+
+1. 创建不同状态的测试订单
+2. 验证订单商品信息显示是否正确
+3. 测试确认收货功能
+4. 测试取消订单功能
+5. 验证订单状态切换是否正常
+
+## 后续优化建议
+
+1. 添加订单搜索功能
+2. 实现立即支付功能
+3. 添加申请退款功能
+4. 优化商品图片加载和缓存
+5. 添加订单操作的二次确认
--- a/src/api/shop/shopOrder/index.ts
+++ b/src/api/shop/shopOrder/index.ts
@@ -118,7 +118,7 @@ export interface WxPayResult {
 */
 export async function createOrder(data: OrderCreateRequest) {
  const res = await request.post<ApiResult<WxPayResult>>(
-    '/shop/shop-order/create',
+    'http://127.0.0.1:9200/api/shop/shop-order',
    data
  );
  if (res.code === 0) {
@@ -128,7 +128,7 @@ export async function createOrder(data: OrderCreateRequest) {
 }

 /**
- * 修改订单
+ * 修复订单支付状态
 */
 export async function repairOrder(data: ShopOrder) {
  const res = await request.put<ApiResult<unknown>>(
--- a/src/api/shop/shopOrderGoods/index.ts
+++ b/src/api/shop/shopOrderGoods/index.ts
@@ -0,0 +1,101 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api/index';
+import type { ShopOrderGoods, ShopOrderGoodsParam } from './model';
+
+/**
+ * 分页查询商品信息
+ */
+export async function pageShopOrderGoods(params: ShopOrderGoodsParam) {
+  const res = await request.get<ApiResult<PageResult<ShopOrderGoods>>>(
+    '/shop/shop-order-goods/page',
+    params
+  );
+  if (res.code === 0) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.message));
+}
+
+/**
+ * 查询商品信息列表
+ */
+export async function listShopOrderGoods(params?: ShopOrderGoodsParam) {
+  const res = await request.get<ApiResult<ShopOrderGoods[]>>(
+    '/shop/shop-order-goods',
+    params
+  );
+  if (res.code === 0 && res.data) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.message));
+}
+
+/**
+ * 添加商品信息
+ */
+export async function addShopOrderGoods(data: ShopOrderGoods) {
+  const res = await request.post<ApiResult<unknown>>(
+    '/shop/shop-order-goods',
+    data
+  );
+  if (res.code === 0) {
+    return res.message;
+  }
+  return Promise.reject(new Error(res.message));
+}
+
+/**
+ * 修改商品信息
+ */
+export async function updateShopOrderGoods(data: ShopOrderGoods) {
+  const res = await request.put<ApiResult<unknown>>(
+    '/shop/shop-order-goods',
+    data
+  );
+  if (res.code === 0) {
+    return res.message;
+  }
+  return Promise.reject(new Error(res.message));
+}
+
+/**
+ * 删除商品信息
+ */
+export async function removeShopOrderGoods(id?: number) {
+  const res = await request.del<ApiResult<unknown>>(
+    '/shop/shop-order-goods/' + id
+  );
+  if (res.code === 0) {
+    return res.message;
+  }
+  return Promise.reject(new Error(res.message));
+}
+
+/**
+ * 批量删除商品信息
+ */
+export async function removeBatchShopOrderGoods(data: (number | undefined)[]) {
+  const res = await request.del<ApiResult<unknown>>(
+    '/shop/shop-order-goods/batch',
+    {
+      data
+    }
+  );
+  if (res.code === 0) {
+    return res.message;
+  }
+  return Promise.reject(new Error(res.message));
+}
+
+/**
+ * 根据id查询商品信息
+ */
+export async function getShopOrderGoods(id: number) {
+  const res = await request.get<ApiResult<ShopOrderGoods>>(
+    '/shop/shop-order-goods/' + id
+  );
+  if (res.code === 0 && res.data) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.message));
+}
--- a/src/api/shop/shopOrderGoods/model/index.ts
+++ b/src/api/shop/shopOrderGoods/model/index.ts
@@ -0,0 +1,70 @@
+import type { PageParam } from '@/api';
+
+/**
+ * 商品信息
+ */
+export interface ShopOrderGoods {
+  // 自增ID
+  id?: number;
+  // 关联订单表id
+  orderId?: number;
+  // 订单标识
+  orderCode?: string;
+  // 关联商户ID
+  merchantId?: number;
+  // 商户名称
+  merchantName?: string;
+  // 商品封面图
+  image?: string;
+  // 关联商品id
+  goodsId?: number;
+  // 商品名称
+  goodsName?: string;
+  // 商品规格
+  spec?: string;
+  //
+  skuId?: number;
+  // 单价
+  price?: string;
+  // 购买数量
+  totalNum?: number;
+  // 0 未付款 1已付款，2无需付款或占用状态
+  payStatus?: number;
+  // 0未使用，1已完成，2已取消，3取消中，4退款申请中，5退款被拒绝，6退款成功，7客户端申请退款
+  orderStatus?: number;
+  // 是否免费：0收费、1免费
+  isFree?: string;
+  // 系统版本 0当前版本 其他版本
+  version?: number;
+  // 预约时间段
+  timePeriod?: string;
+  // 预定日期
+  dateTime?: string;
+  // 开场时间
+  startTime?: string;
+  // 结束时间
+  endTime?: string;
+  // 毫秒时间戳
+  timeFlag?: string;
+  // 过期时间
+  expirationTime?: string;
+  // 备注
+  comments?: string;
+  // 用户id
+  userId?: number;
+  // 租户id
+  tenantId?: number;
+  // 更新时间
+  updateTime?: string;
+  // 创建时间
+  createTime?: string;
+}
+
+/**
+ * 商品信息搜索条件
+ */
+export interface ShopOrderGoodsParam extends PageParam {
+  id?: number;
+  orderId?: number;
+  keywords?: string;
+}
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -45,6 +45,7 @@ export default defineAppConfig({
      'orderDetail/index',
      'goodsDetail/index',
      'orderConfirm/index',
+      'orderConfirmCart/index'
    ]
    }
  ],
--- a/src/pages/cart/cart.tsx
+++ b/src/pages/cart/cart.tsx
@@ -115,10 +115,17 @@ function Cart() {
      return;
    }

-    // 这里可以跳转到结算页面
-    Taro.showToast({
-      title: '跳转到结算页面',
-      icon: 'success'
+    // 获取选中的商品
+    const selectedCartItems = cartItems.filter((item: CartItem) =>
+      selectedItems.includes(item.goodsId)
+    );
+
+    // 将选中的商品信息存储到本地，供结算页面使用
+    Taro.setStorageSync('checkout_items', JSON.stringify(selectedCartItems));
+
+    // 跳转到购物车结算页面
+    Taro.navigateTo({
+      url: '/shop/orderConfirmCart/index'
    });
  };

--- a/src/pages/order/components/OrderList.tsx
+++ b/src/pages/order/components/OrderList.tsx
@@ -1,10 +1,12 @@
-import {Avatar, Cell, Space, Tabs, Button, TabPane} from '@nutui/nutui-react-taro'
+import {Avatar, Cell, Space, Tabs, Button, TabPane, Image, Toast} 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 {pageShopOrder, updateShopOrder} from "@/api/shop/shopOrder";
 import {ShopOrder} from "@/api/shop/shopOrder/model";
+import {listShopOrderGoods} from "@/api/shop/shopOrderGoods";
+import {ShopOrderGoods} from "@/api/shop/shopOrderGoods/model";
 import {copyText} from "@/utils/common";

 const InfiniteUlStyle: CSSProperties = {
@@ -43,16 +45,42 @@ const tabs = [
  }
 ]

-function OrderList(props: any) {
-  const [list, setList] = useState<ShopOrder[]>([])
+// 扩展订单接口，包含商品信息
+interface OrderWithGoods extends ShopOrder {
+  orderGoods?: ShopOrderGoods[];
+}
+
+interface OrderListProps {
+  data: ShopOrder[];
+  onReload?: () => void;
+}
+
+function OrderList(props: OrderListProps) {
+  const [list, setList] = useState<OrderWithGoods[]>([])
  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(true)
  const [tapIndex, setTapIndex] = useState<string | number>('0')

  console.log(props.statusBarHeight, 'ppp')

+  // 获取订单状态文本
+  const getOrderStatusText = (order: ShopOrder) => {
+    if (order.payStatus === 0) return '待付款';
+    if (order.payStatus === 1 && order.deliveryStatus === 10) return '待发货';
+    if (order.deliveryStatus === 20) return '待收货';
+    if (order.deliveryStatus === 30) return '已收货';
+    if (order.orderStatus === 1) return '已完成';
+    if (order.orderStatus === 2) return '已取消';
+    if (order.orderStatus === 4) return '退款申请中';
+    if (order.orderStatus === 6) return '退款成功';
+    return '未知状态';
+  };
+
  const getOrderStatusParams = (index: string | number) => {
-    let params: { payStatus?: number; deliveryStatus?: number; orderStatus?: number } = {};
+    let params: { payStatus?: number; deliveryStatus?: number; orderStatus?: number; userId?: number } = {};
+    // 添加用户ID过滤
+    params.userId = Taro.getStorageSync('UserId');
+
    switch (index) {
      case '1': // 待付款
        params.payStatus = 0;
@@ -77,13 +105,32 @@ function OrderList(props: any) {
  const reload = async (resetPage = false) => {
    const currentPage = resetPage ? 1 : page;
    const params = getOrderStatusParams(tapIndex);
-    pageShopOrder({ page: currentPage, ...params }).then(res => {
-      let newList: ShopOrder[] | undefined = [];
+    pageShopOrder({ page: currentPage, ...params }).then(async res => {
+      let newList: OrderWithGoods[] | undefined = [];
      if (res?.list && res?.list.length > 0) {
-        newList = resetPage ? res.list : list?.concat(res.list);
+        // 为每个订单获取商品信息
+        const ordersWithGoods = await Promise.all(
+          res.list.map(async (order) => {
+            try {
+              const orderGoods = await listShopOrderGoods({ orderId: order.orderId });
+              return {
+                ...order,
+                orderGoods: orderGoods || []
+              };
+            } catch (error) {
+              console.error('获取订单商品失败:', error);
+              return {
+                ...order,
+                orderGoods: []
+              };
+            }
+          })
+        );
+
+        newList = resetPage ? ordersWithGoods : list?.concat(ordersWithGoods);
        setHasMore(true);
      } else {
-        newList = res?.list;
+        newList = [];
        setHasMore(false);
      }
      setList(newList || []);
@@ -96,6 +143,39 @@ function OrderList(props: any) {
    reload();
  };

+  // 确认收货
+  const confirmReceive = async (order: ShopOrder) => {
+    try {
+      await updateShopOrder({
+        ...order,
+        deliveryStatus: 30, // 已收货
+        orderStatus: 1 // 已完成
+      });
+      Toast.show('确认收货成功');
+      reload(true); // 重新加载列表
+      props.onReload?.(); // 通知父组件刷新
+    } catch (error) {
+      console.error('确认收货失败:', error);
+      Toast.show('确认收货失败');
+    }
+  };
+
+  // 取消订单
+  const cancelOrder = async (order: ShopOrder) => {
+    try {
+      await updateShopOrder({
+        ...order,
+        orderStatus: 2 // 已取消
+      });
+      Toast.show('订单已取消');
+      reload(true); // 重新加载列表
+      props.onReload?.(); // 通知父组件刷新
+    } catch (error) {
+      console.error('取消订单失败:', error);
+      Toast.show('取消订单失败');
+    }
+  };
+
  useEffect(() => {
    reload(true); // 首次加载或tab切换时重置页码
  }, [tapIndex]); // 监听tapIndex变化
@@ -140,33 +220,69 @@ function OrderList(props: any) {
            </>
          }
        >
-          {props.data?.map(item => {
+          {list?.map((item, index) => {
            return (
-              <Cell style={{padding: '16px'}} onClick={() => Taro.navigateTo({url: `/shop/orderDetail/index?orderId=${item.orderId}`})}>
+              <Cell key={index} 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显示不同的状态 */}
+                    <span className={'text-orange-500'}>{getOrderStatusText(item)}</span>
                  </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'}>
+                    {item.orderGoods && item.orderGoods.length > 0 ? (
+                      item.orderGoods.map((goods, goodsIndex) => (
+                        <div key={goodsIndex} className={'flex items-center mb-2'}>
+                          <Image
+                            src={goods.image || '/default-goods.png'}
+                            width="50"
+                            height="50"
+                            lazyLoad={false}
+                            className={'rounded'}
+                          />
+                          <div className={'ml-2 flex-1'}>
+                            <div className={'text-sm font-bold'}>{goods.goodsName}</div>
+                            {goods.spec && <div className={'text-gray-500 text-xs'}>规格：{goods.spec}</div>}
+                            <div className={'text-gray-500 text-xs'}>数量：{goods.totalNum}</div>
+                          </div>
+                          <div className={'text-red-500 text-sm'}>￥{goods.price}</div>
+                        </div>
+                      ))
+                    ) : (
                      <div className={'flex items-center'}>
                        <Avatar
-                          src='34'
-                          size={'45'}
+                          src='/default-goods.png'
+                          size={'50'}
                          shape={'square'}
                        />
-                        <div className={'ml-2'}>{item.realName}</div>
-                      </div>
+                        <div className={'ml-2'}>
+                          <div className={'text-sm'}>{item.title || '订单商品'}</div>
                          <div className={'text-gray-400 text-xs'}>{item.totalNum}件商品</div>
                        </div>
                      </div>
-                  <div className={' w-full text-right'}>实付金额：￥{item.payPrice}</div>
+                    )}
+                  </div>
+
+                  <div className={'w-full text-right'}>实付金额：￥{item.payPrice}</div>
+
+                  {/* 操作按钮 */}
                  <Space className={'btn flex justify-end'}>
-                    <Button size={'small'}>发货</Button>
+                    {item.payStatus === 0 && (
+                      <>
+                        <Button size={'small'} onClick={(e) => {e.stopPropagation(); cancelOrder(item)}}>取消订单</Button>
+                        <Button size={'small'} type="primary" onClick={(e) => {e.stopPropagation(); console.log('立即支付')}}>立即支付</Button>
+                      </>
+                    )}
+                    {item.deliveryStatus === 20 && (
+                      <Button size={'small'} type="primary" onClick={(e) => {e.stopPropagation(); confirmReceive(item)}}>确认收货</Button>
+                    )}
+                    {item.orderStatus === 1 && (
+                      <Button size={'small'} onClick={(e) => {e.stopPropagation(); console.log('申请退款')}}>申请退款</Button>
+                    )}
                  </Space>
                </Space>
              </Cell>
--- a/src/pages/order/order.tsx
+++ b/src/pages/order/order.tsx
@@ -78,7 +78,7 @@ function Order() {
      {/*订单列表*/}
      {
        list.length > 0 && (
-          <OrderList data={list}/>
+          <OrderList data={list} onReload={reload}/>
        )
      }
    </>
--- a/src/pages/order/test-order.tsx
+++ b/src/pages/order/test-order.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { Button, Space, Toast } from '@nutui/nutui-react-taro';
+import Taro from '@tarojs/taro';
+import { createOrder } from '@/api/shop/shopOrder';
+import { OrderCreateRequest } from '@/api/shop/shopOrder/model';
+
+const TestOrder = () => {
+  // 创建测试订单
+  const createTestOrder = async () => {
+    try {
+      const orderData: OrderCreateRequest = {
+        goodsItems: [
+          {
+            goodsId: 1,
+            quantity: 2,
+            skuId: 1,
+            specInfo: '红色 L码'
+          }
+        ],
+        payType: 1, // 微信支付
+        deliveryType: 0, // 快递
+        comments: '测试订单'
+      };
+
+      const result = await createOrder(orderData);
+      console.log('订单创建成功:', result);
+      Toast.show('测试订单创建成功');
+      
+      // 跳转到订单列表
+      setTimeout(() => {
+        Taro.navigateTo({ url: '/pages/order/order' });
+      }, 1000);
+    } catch (error) {
+      console.error('创建订单失败:', error);
+      Toast.show('创建订单失败');
+    }
+  };
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h2>订单功能测试</h2>
+      <Space direction="vertical">
+        <Button type="primary" onClick={createTestOrder}>
+          创建测试订单
+        </Button>
+        <Button onClick={() => Taro.navigateTo({ url: '/pages/order/order' })}>
+          查看订单列表
+        </Button>
+      </Space>
+    </div>
+  );
+};
+
+export default TestOrder;
--- a/src/shop/orderConfirmCart/index.tsx
+++ b/src/shop/orderConfirmCart/index.tsx
@@ -8,7 +8,7 @@ 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 {useCart, CartItem} from "@/hooks/useCart";
 import Gap from "@/components/Gap";
 import {createOrder} from "@/api/shop/shopOrder";
 import {OrderCreateRequest} from "@/api/shop/shopOrder/model";
@@ -19,11 +19,13 @@ const OrderConfirm = () => {
  const [goods, setGoods] = useState<ShopGoods | null>(null);
  const [address, setAddress] = useState<ShopUserAddress>()
  const [payment, setPayment] = useState<Payment>()
+  const [checkoutItems, setCheckoutItems] = useState<CartItem[]>([]);
  const router = Taro.getCurrentInstance().router;
  const goodsId = router?.params?.goodsId;

  const {
-    cartItems
+    cartItems,
+    removeFromCart
  } = useCart();

  const reload = async () => {
@@ -34,6 +36,25 @@ const OrderConfirm = () => {
    }
  }

+  // 加载结算商品数据
+  const loadCheckoutItems = () => {
+    try {
+      const checkoutData = Taro.getStorageSync('checkout_items');
+      if (checkoutData) {
+        const items = JSON.parse(checkoutData) as CartItem[];
+        setCheckoutItems(items);
+        // 清除临时存储的数据
+        Taro.removeStorageSync('checkout_items');
+      } else {
+        // 如果没有选中商品数据，使用全部购物车商品
+        setCheckoutItems(cartItems);
+      }
+    } catch (error) {
+      console.error('加载结算商品失败:', error);
+      setCheckoutItems(cartItems);
+    }
+  };
+
  /**
   * 统一支付入口
   */
@@ -47,9 +68,9 @@ const OrderConfirm = () => {
      return;
    }

-    if (!cartItems || cartItems.length === 0) {
+    if (!checkoutItems || checkoutItems.length === 0) {
      Taro.showToast({
-        title: '购物车为空',
+        title: '没有要结算的商品',
        icon: 'error'
      });
      return;
@@ -57,7 +78,7 @@ const OrderConfirm = () => {

    // 构建订单数据
    const orderData = buildCartOrder(
-      cartItems.map(item => ({
+      checkoutItems.map(item => ({
        goodsId: item.goodsId!,
        quantity: item.quantity || 1
      })),
@@ -72,7 +93,14 @@ const OrderConfirm = () => {
    const paymentType = payment?.type === 0 ? PaymentType.BALANCE : PaymentType.WECHAT;

    // 执行支付
-    await PaymentHandler.pay(orderData, paymentType);
+    await PaymentHandler.pay(orderData, paymentType, {
+      onSuccess: () => {
+        // 支付成功后，从购物车中移除已下单的商品
+        checkoutItems.forEach(item => {
+          removeFromCart(item.goodsId);
+        });
+      }
+    });
  };

  useEffect(() => {
@@ -83,12 +111,21 @@ const OrderConfirm = () => {
        console.error("Failed to fetch goods detail:", error);
      });
    }
-    reload().then()
-  }, [goodsId]);
+    reload().then();
+    loadCheckoutItems();
+  }, [goodsId, cartItems]);

-  if (!goods) {
-    return <div>加载中...</div>;
-  }
+  // 计算总价
+  const getTotalPrice = () => {
+    return checkoutItems.reduce((total, item) => {
+      return total + (parseFloat(item.price) * item.quantity);
+    }, 0).toFixed(2);
+  };
+
+  // 计算商品总数量
+  const getTotalQuantity = () => {
+    return checkoutItems.reduce((total, item) => total + item.quantity, 0);
+  };

  return (
    <div className={'order-confirm-page'}>
@@ -122,7 +159,7 @@ const OrderConfirm = () => {
      </CellGroup>

      <CellGroup>
-        {cartItems.map((goods, _) => (
+        {checkoutItems.map((goods, _) => (
          <Cell key={goods.goodsId}>
            <Space>
              <Image src={goods.image} mode={'aspectFill'} style={{
@@ -143,10 +180,10 @@ const OrderConfirm = () => {
      </CellGroup>

      <CellGroup>
-        <Cell title={'商品总价（共3件）'} extra={<View className={'font-medium'}>{'￥' + goods.price}</View>}/>
+        <Cell title={`商品总价（共${getTotalQuantity()}件）`} extra={<View className={'font-medium'}>{'￥' + getTotalPrice()}</View>}/>
        <Cell title={'优惠券'} extra={(
          <View className={'flex justify-between items-center'}>
-            <View className={'text-red-500 text-sm mr-1'}>-￥10.00</View>
+            <View className={'text-red-500 text-sm mr-1'}>-￥0.00</View>
            <ArrowRight className={'text-gray-400'} size={14}/>
          </View>
        )}/>
@@ -164,7 +201,7 @@ const OrderConfirm = () => {
        <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>
+              <span className={'text-red-500 text-xl font-bold'}>￥{getTotalPrice()}</span>
          </div>
          <div className={'buy-btn mx-4'}>
            <Button type="success" size="large" onClick={onPay}>立即付款</Button>
--- a/src/shop/orderDetail/index.tsx
+++ b/src/shop/orderDetail/index.tsx
@@ -3,20 +3,14 @@ import {Cell, CellGroup, Image, Space, Button} from '@nutui/nutui-react-taro'
 import Taro from '@tarojs/taro'
 import {ShopOrder} from "@/api/shop/shopOrder/model";
 import {getShopOrder} from "@/api/shop/shopOrder";
-import {listOrderGoods} from "@/api/system/orderGoods";
-import {OrderGoods} from "@/api/system/orderGoods/model";
-import {getShopGoods} from "@/api/shop/shopGoods";
+import {listShopOrderGoods} from "@/api/shop/shopOrderGoods";
+import {ShopOrderGoods} from "@/api/shop/shopOrderGoods/model";
 import dayjs from "dayjs";
 import './index.scss'

-interface OrderGoodsDetail extends OrderGoods {
-  goodsName?: string;
-  goodsImage?: string;
-}
-
 const OrderDetail = () => {
  const [order, setOrder] = useState<ShopOrder | null>(null);
-  const [orderGoodsList, setOrderGoodsList] = useState<OrderGoodsDetail[]>([]);
+  const [orderGoodsList, setOrderGoodsList] = useState<ShopOrderGoods[]>([]);
  const router = Taro.getCurrentInstance().router;
  const orderId = router?.params?.orderId;

@@ -55,19 +49,9 @@ const OrderDetail = () => {
        setOrder(res);

        // 获取订单商品列表
-        const goodsRes = await listOrderGoods({ orderId: Number(orderId) });
+        const goodsRes = await listShopOrderGoods({ orderId: Number(orderId) });
        if (goodsRes && goodsRes.length > 0) {
-          const goodsDetailsPromises = goodsRes.map(async (item) => {
-            console.log(item,'item.>>>')
-            const shopGoods = await getShopGoods(Number(item.goodsId));
-            return {
-              ...item,
-              goodsName: shopGoods?.name,
-              goodsImage: shopGoods?.image,
-            };
-          });
-          const detailedGoodsList = await Promise.all(goodsDetailsPromises);
-          setOrderGoodsList(detailedGoodsList);
+          setOrderGoodsList(goodsRes);
        }
      }).catch(error => {
        console.error("Failed to fetch order detail:", error);
@@ -91,11 +75,12 @@ const OrderDetail = () => {
        {orderGoodsList.map((item, index) => (
          <Cell key={index}>
            <div className={'flex items-center'}>
-              <Image src={item.goodsImage} width="80" height="80" lazyLoad={false} />
+              <Image src={item.image || '/default-goods.png'} width="80" height="80" lazyLoad={false} />
              <div className={'ml-2'}>
                <div className={'text-sm font-bold'}>{item.goodsName}</div>
+                {item.spec && <div className={'text-gray-500 text-xs'}>规格：{item.spec}</div>}
                <div className={'text-gray-500 text-xs'}>数量：{item.totalNum}</div>
-                <div className={'text-red-500 text-lg'}>￥{item.payPrice}</div>
+                <div className={'text-red-500 text-lg'}>￥{item.price}</div>
              </div>
            </div>
          </Cell>
--- a/src/utils/payment.ts
+++ b/src/utils/payment.ts
@@ -97,7 +97,7 @@ export class PaymentHandler {
   * 处理微信支付
   */
  private static async handleWechatPay(result: WxPayResult): Promise<void> {
-    if (!result || !result.prepayId) {
+    if (!result) {
      throw new Error('微信支付参数错误');
    }