优化下单流程

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>