优化下单流程

src/shop/goodsDetail/index.tsx

@@ -5,14 +5,25 @@ import Taro, {useShareAppMessage, useShareTimeline} from "@tarojs/taro";
 import {RichText, View} from '@tarojs/components'
 import {ShopGoods} from "@/api/shop/shopGoods/model";
 import {getShopGoods} from "@/api/shop/shopGoods";
+import {listShopGoodsSpec} from "@/api/shop/shopGoodsSpec";
+import {ShopGoodsSpec} from "@/api/shop/shopGoodsSpec/model";
+import {listShopGoodsSku} from "@/api/shop/shopGoodsSku";
+import {ShopGoodsSku} from "@/api/shop/shopGoodsSku/model";
 import {Swiper} from '@nutui/nutui-react-taro'
 import navTo, {wxParse} from "@/utils/common";
+import SpecSelector from "@/components/SpecSelector";
 import "./index.scss";
 import {useCart} from "@/hooks/useCart";
 
 const GoodsDetail = () => {
   const [goods, setGoods] = useState<ShopGoods | null>(null);
   const [files, setFiles] = useState<any[]>([]);
+  const [specs, setSpecs] = useState<ShopGoodsSpec[]>([]);
+  const [skus, setSkus] = useState<ShopGoodsSku[]>([]);
+  const [showSpecSelector, setShowSpecSelector] = useState(false);
+  const [specAction, setSpecAction] = useState<'cart' | 'buy'>('cart');
+  const [selectedSku, setSelectedSku] = useState<ShopGoodsSku | null>(null);
+  const [loading, setLoading] = useState(false);
   const router = Taro.getCurrentInstance().router;
   const goodsId = router?.params?.id;
 
@@ -31,6 +42,14 @@ const GoodsDetail = () => {
       });
     }
 
+    // 如果有规格，显示规格选择器
+    if (specs.length > 0) {
+      setSpecAction('cart');
+      setShowSpecSelector(true);
+      return;
+    }
+
+    // 没有规格，直接加入购物车
     addToCart({
       goodsId: goods.goodsId!,
       name: goods.name || '',
@@ -39,8 +58,61 @@ const GoodsDetail = () => {
     });
   };
 
+  // 处理立即购买
+  const handleBuyNow = () => {
+    if (!goods) return;
+
+    if (!Taro.getStorageSync('UserId')) {
+      return Taro.showToast({
+        title: '请先登录',
+        icon: 'none',
+        duration: 2000
+      });
+    }
+
+    // 如果有规格，显示规格选择器
+    if (specs.length > 0) {
+      setSpecAction('buy');
+      setShowSpecSelector(true);
+      return;
+    }
+
+    // 没有规格，直接购买
+    navTo(`/shop/orderConfirm/index?goodsId=${goods?.goodsId}`, true);
+  };
+
+  // 规格选择确认回调
+  const handleSpecConfirm = (sku: ShopGoodsSku, quantity: number, action: 'cart' | 'buy') => {
+    setSelectedSku(sku);
+    setShowSpecSelector(false);
+
+    if (action === 'cart') {
+      // 加入购物车
+      addToCart({
+        goodsId: goods!.goodsId!,
+        skuId: sku.id,
+        name: goods!.name || '',
+        price: sku.price || goods!.price || '0',
+        image: goods!.image || '',
+        specInfo: sku.sku, // sku字段包含规格信息
+      }, quantity);
+    } else {
+      // 立即购买
+      const orderData = {
+        goodsId: goods!.goodsId!,
+        skuId: sku.id,
+        quantity,
+        price: sku.price || goods!.price || '0'
+      };
+      navTo(`/shop/orderConfirm/index?orderData=${encodeURIComponent(JSON.stringify(orderData))}`, true);
+    }
+  };
+
   useEffect(() => {
     if (goodsId) {
+      setLoading(true);
+
+      // 加载商品详情
       getShopGoods(Number(goodsId))
         .then((res) => {
           // 处理富文本内容，去掉图片间距
@@ -52,10 +124,30 @@ const GoodsDetail = () => {
             const arr = JSON.parse(res.files);
             arr.length > 0 && setFiles(arr);
           }
-
         })
         .catch((error) => {
           console.error("Failed to fetch goods detail:", error);
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+
+      // 加载商品规格
+      listShopGoodsSpec({ goodsId: Number(goodsId) } as any)
+        .then((data) => {
+          setSpecs(data || []);
+        })
+        .catch((error) => {
+          console.error("Failed to fetch goods specs:", error);
+        });
+
+      // 加载商品SKU
+      listShopGoodsSku({ goodsId: Number(goodsId) } as any)
+        .then((data) => {
+          setSkus(data || []);
+        })
+        .catch((error) => {
+          console.error("Failed to fetch goods skus:", error);
         });
     }
   }, [goodsId]);
@@ -94,7 +186,7 @@ const GoodsDetail = () => {
     };
   });
 
-  if (!goods) {
+  if (!goods || loading) {
     return <div>加载中...</div>;
   }
 
@@ -209,11 +301,23 @@ const GoodsDetail = () => {
                  onClick={() => handleAddToCart()}>加入购物车
             </div>
             <div className={'cart-buy pl-4 pr-5 text-sm'}
-                 onClick={() => navTo(`/shop/orderConfirm/index?goodsId=${goods?.goodsId}`, true)}>立即购买
+                 onClick={() => handleBuyNow()}>立即购买
             </div>
           </div>
         </View>
       </div>
+
+      {/* 规格选择器 */}
+      {showSpecSelector && (
+        <SpecSelector
+          goods={goods!}
+          specs={specs}
+          skus={skus}
+          action={specAction}
+          onConfirm={handleSpecConfirm}
+          onClose={() => setShowSpecSelector(false)}
+        />
+      )}
     </div>
   );
 };