优化下单流程

2025-07-30 00:40:38 +08:00
parent 11729876ca
commit 19fe9b4775
18 changed files with 8252 additions and 169 deletions
--- a/src/api/shop/shopOrder/index.ts
+++ b/src/api/shop/shopOrder/index.ts
@@ -1,6 +1,6 @@
 import request from '@/utils/request';
 import type { ApiResult, PageResult } from '@/api/index';
-import type { ShopOrder, ShopOrderParam } from './model';
+import type { ShopOrder, ShopOrderParam, OrderCreateRequest } from './model';

 /**
 * 分页查询订单
@@ -100,6 +100,33 @@ export async function getShopOrder(id: number) {
  return Promise.reject(new Error(res.message));
 }

+/**
+ * 微信支付返回数据
+ */
+export interface WxPayResult {
+  prepayId: string;
+  orderNo: string;
+  timeStamp: string;
+  nonceStr: string;
+  package: string;
+  signType: string;
+  paySign: string;
+}
+
+/**
+ * 创建订单
+ */
+export async function createOrder(data: OrderCreateRequest) {
+  const res = await request.post<ApiResult<WxPayResult>>(
+    '/shop/shop-order/create',
+    data
+  );
+  if (res.code === 0) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.message));
+}
+
 /**
 * 修改订单
 */
--- a/src/api/shop/shopOrder/model/index.ts
+++ b/src/api/shop/shopOrder/model/index.ts
@@ -10,6 +10,8 @@ export interface ShopOrder {
  orderNo?: string;
  // 订单类型，0商城订单 1预定订单/外卖 2会员卡
  type?: number;
+  // 标题
+  title?: string;
  // 快递/自提
  deliveryType?: number;
  // 下单渠道，0小程序预定 1俱乐部训练场 3活动订场
@@ -144,6 +146,68 @@ export interface ShopOrder {
  hasTakeGift?: string;
 }

+/**
+ * 订单商品项
+ */
+export interface OrderGoodsItem {
+  goodsId: number;
+  quantity: number;
+  skuId?: number;
+  specInfo?: string;
+}
+
+/**
+ * 创建订单请求
+ */
+export interface OrderCreateRequest {
+  // 商品信息列表
+  goodsItems: OrderGoodsItem[];
+  // 收货地址ID
+  addressId?: number;
+  // 支付方式
+  payType: number;
+  // 优惠券ID
+  couponId?: number;
+  // 备注
+  comments?: string;
+  // 配送方式 0快递 1自提
+  deliveryType?: number;
+  // 自提店铺ID
+  selfTakeMerchantId?: number;
+  // 订单标题（可选，后端会自动生成）
+  title?: string;
+}
+
+/**
+ * 订单商品项
+ */
+export interface OrderGoodsItem {
+  goodsId: number;
+  quantity: number;
+  skuId?: number;
+  specInfo?: string;
+}
+
+/**
+ * 创建订单请求
+ */
+export interface OrderCreateRequest {
+  // 商品信息列表
+  goodsItems: OrderGoodsItem[];
+  // 收货地址ID
+  addressId?: number;
+  // 支付方式
+  payType: number;
+  // 优惠券ID
+  couponId?: number;
+  // 备注
+  comments?: string;
+  // 配送方式 0快递 1自提
+  deliveryType?: number;
+  // 自提店铺ID
+  selfTakeMerchantId?: number;
+}
+
 /**
 * 订单搜索条件
 */
--- a/src/api/system/orderGoods/index.ts
+++ b/src/api/system/orderGoods/index.ts
@@ -99,3 +99,17 @@ export async function getOrderGoods(id: number) {
  }
  return Promise.reject(new Error(res.message));
 }
+
+/**
+ * 批量添加订单商品
+ */
+export async function addBatchOrderGoods(data: OrderGoods[]) {
+  const res = await request.post<ApiResult<unknown>>(
+    '/shop/shop-goods/batch',
+    data
+  );
+  if (res.code === 0) {
+    return res.message;
+  }
+  return Promise.reject(new Error(res.message));
+}
--- a/src/pages/index/Header.tsx
+++ b/src/pages/index/Header.tsx
@@ -1,7 +1,7 @@
 import {useEffect, useState} from "react";
 import Taro from '@tarojs/taro';
 import {Button, Space} from '@nutui/nutui-react-taro'
-import {TriangleDown, Search} from '@nutui/icons-react-taro'
+import {TriangleDown} from '@nutui/icons-react-taro'
 import {Popup, Avatar, NavBar} from '@nutui/nutui-react-taro'
 import {getSiteInfo, getUserInfo, getWxOpenId} from "@/api/layout";
 import {TenantId} from "@/config/app";
@@ -141,9 +141,10 @@ const Header = (props: any) => {
  return (
    <>
      <div className={'fixed top-0 header-bg'} style={{
-        height: !props.stickyStatus ? '180px' : '94px',
+        height: !props.stickyStatus ? '180px' : '148px',
      }}>
-        {!props.stickyStatus && <MySearch done={reload}/>}
+        <MySearch done={reload}/>
+        {/*{!props.stickyStatus && <MySearch done={reload}/>}*/}
      </div>
      <NavBar
        style={{marginTop: `${statusBarHeight}px`, marginBottom: '0px', backgroundColor: 'transparent'}}
@@ -173,11 +174,6 @@ const Header = (props: any) => {
              <TriangleDown className={'text-white'} size={9}/>
            </div>
          )}>
-        {props.stickyStatus && (
-          <Space>
-            <Search className={'text-white mx-2'} size={18}/>
-          </Space>
-        )}
      </NavBar>
      <Popup
        visible={showBasic}
--- a/src/shop/goodsDetail/index.tsx
+++ b/src/shop/goodsDetail/index.tsx
@@ -17,13 +17,13 @@ const GoodsDetail = () => {
  const goodsId = router?.params?.id;

  // 使用购物车Hook
-  const { cartCount, addToCart } = useCart();
+  const {cartCount, addToCart} = useCart();

  // 处理加入购物车
  const handleAddToCart = () => {
    if (!goods) return;

-    if(!Taro.getStorageSync('UserId')){
+    if (!Taro.getStorageSync('UserId')) {
      return Taro.showToast({
        title: '请先登录',
        icon: 'none',
@@ -125,7 +125,7 @@ const GoodsDetail = () => {
             top: "50px",
             right: "110px",
           }}
-           onClick={() => navTo(`/pages/cart/cart`,true)}>
+           onClick={() => navTo(`/pages/cart/cart`, true)}>
        <Badge value={cartCount} top="-2" right="2">
          <div style={{display: 'flex', alignItems: 'center'}}>
            <Cart size={16}/>
@@ -209,7 +209,7 @@ 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={() => navTo(`/shop/orderConfirm/index?goodsId=${goods?.goodsId}`, true)}>立即购买
            </div>
          </div>
        </View>
--- a/src/shop/orderConfirm/index.tsx
+++ b/src/shop/orderConfirm/index.tsx
@@ -9,10 +9,9 @@ import {listShopUserAddress} from "@/api/shop/shopUserAddress";
 import {ShopUserAddress} from "@/api/shop/shopUserAddress/model";
 import './index.scss'
 import Gap from "@/components/Gap";
-import {TenantId} from "@/config/app";
-import {payByBalance, selectPayment} from "@/api/system/payment";
+import {selectPayment} from "@/api/system/payment";
 import {Payment} from "@/api/system/payment/model";
-import {API_BASE_URL} from "@/config/env";
+import {PaymentHandler, PaymentType, buildSingleGoodsOrder} from "@/utils/payment";

 const OrderConfirm = () => {
  const [goods, setGoods] = useState<ShopGoods | null>(null);
@@ -20,6 +19,7 @@ const OrderConfirm = () => {
  const [payments, setPayments] = useState<any[]>([])
  const [payment, setPayment] = useState<Payment>()
  const [isVisible, setIsVisible] = useState<boolean>(false)
+
  const router = Taro.getCurrentInstance().router;
  const goodsId = router?.params?.goodsId;

@@ -48,107 +48,44 @@ const OrderConfirm = () => {
    setIsVisible(false)
  }

+  /**
+   * 统一支付入口
+   */
  const onPay = async (goods: ShopGoods) => {
-    // 支付方式
-    if (payment?.type == 0) {
-      await onBalancePay(goods)
-    }
-    if (payment?.type == 1) {
-      await onWxPay(goods)
-    }
-  }
-
-  const onBalancePay = async (goods: ShopGoods) => {
-    Taro.showLoading({title: '支付中...'})
-    payByBalance({
-      payType: 0, // 余额支付
-      payPrice: goods.price,
-      totalPrice: goods.price,
-      addressId: address?.id,
-      userId: Taro.getStorageSync('UserId'),
-      tenantId: Number(TenantId)
-    }).then().finally(() => {
+    // 基础校验
+    if (!address) {
      Taro.showToast({
-        title: '支付成功',
-        icon: 'success',
-        duration: 2000
-      })
-      Taro.hideLoading()
-      setTimeout(() => {
-        Taro.switchTab({url: '/pages/order/order'})
-      }, 2000)
-    }).catch(() => {
-      Taro.hideLoading()
-    })
-  }
+        title: '请选择收货地址',
+        icon: 'error'
+      });
+      return;
+    }

-  const onWxPay = async (goods: ShopGoods) => {
-    Taro.showLoading({title: '支付中...'})
-    Taro.request({
-      url: API_BASE_URL + '/shop/shop-order',
-      // url: 'http://127.0.0.1:9200/api/shop/shop-order',
-      method: 'POST',
-      header: {
-        'content-type': 'application/json',
-        'Authorization': Taro.getStorageSync('access_token'),
-        TenantId
-      },
-      data: {
-        payType: 1,
-        totalPrice: goods.price,
-        payPrice: goods.price,
-        userId: Taro.getStorageSync('UserId'),
-        tenantId: TenantId,
+    if (!payment) {
+      Taro.showToast({
+        title: '请选择支付方式',
+        icon: 'error'
+      });
+      return;
+    }
+
+    // 构建订单数据
+    const orderData = buildSingleGoodsOrder(
+      goods.goodsId!,
+      1,
+      address.id,
+      {
        comments: goods.name,
-        name: goods.name,
-        addressId: address?.id,
-      },
-      success: function (res) {
-        Taro.hideLoading()
-        if(res.data.code != 0){
-          Taro.showToast({
-            title: res.data.message,
-            icon: 'error',
-            duration: 2000
-          })
-          return false;
-        }
-        // 支付结果
-        const data = res.data.data
-        console.log(data, 'payInfo')
-        // Taro.showToast({
-        //   title: '下单成功',
-        // })
-        //
-        // setTimeout(() => {
-        //   Taro.switchTab({
-        //     url: '/pages/order/order'
-        //   })
-        // }, 1000);
-        // return false;
-        if (data) {
-          Taro.requestPayment({
-            timeStamp: data.timeStamp,
-            nonceStr: data.nonceStr,
-            package: data.package,
-            signType: data.signType,
-            paySign: data.paySign,
-            success: function (res) {
-              if (res.errMsg == "requestPayment:ok") {
-                console.log('购买成功')
-              }
-            },
-            fail: function (res) {
-              console.log(res)
-            }
-          })
-        }
-      },
-      complete: function () {
-        Taro.hideLoading()
+        deliveryType: 0
      }
-    })
-  }
+    );
+
+    // 根据支付方式选择支付类型
+    const paymentType = payment.type === 0 ? PaymentType.BALANCE : PaymentType.WECHAT;
+
+    // 执行支付
+    await PaymentHandler.pay(orderData, paymentType);
+  };

  useEffect(() => {
    if (goodsId) {
--- a/src/shop/orderConfirmCart/index.tsx
+++ b/src/shop/orderConfirmCart/index.tsx
@@ -10,10 +10,15 @@ import {ShopUserAddress} from "@/api/shop/shopUserAddress/model";
 import './index.scss'
 import {useCart} from "@/hooks/useCart";
 import Gap from "@/components/Gap";
+import {createOrder} from "@/api/shop/shopOrder";
+import {OrderCreateRequest} from "@/api/shop/shopOrder/model";
+import {Payment} from "@/api/system/payment/model";
+import {PaymentHandler, PaymentType, buildCartOrder} from "@/utils/payment";

 const OrderConfirm = () => {
  const [goods, setGoods] = useState<ShopGoods | null>(null);
  const [address, setAddress] = useState<ShopUserAddress>()
+  const [payment, setPayment] = useState<Payment>()
  const router = Taro.getCurrentInstance().router;
  const goodsId = router?.params?.goodsId;

@@ -29,6 +34,47 @@ const OrderConfirm = () => {
    }
  }

+  /**
+   * 统一支付入口
+   */
+  const onPay = async () => {
+    // 基础校验
+    if (!address) {
+      Taro.showToast({
+        title: '请选择收货地址',
+        icon: 'error'
+      });
+      return;
+    }
+
+    if (!cartItems || cartItems.length === 0) {
+      Taro.showToast({
+        title: '购物车为空',
+        icon: 'error'
+      });
+      return;
+    }
+
+    // 构建订单数据
+    const orderData = buildCartOrder(
+      cartItems.map(item => ({
+        goodsId: item.goodsId!,
+        quantity: item.quantity || 1
+      })),
+      address.id,
+      {
+        comments: '购物车下单',
+        deliveryType: 0
+      }
+    );
+
+    // 根据支付方式选择支付类型，默认微信支付
+    const paymentType = payment?.type === 0 ? PaymentType.BALANCE : PaymentType.WECHAT;
+
+    // 执行支付
+    await PaymentHandler.pay(orderData, paymentType);
+  };
+
  useEffect(() => {
    if (goodsId) {
      getShopGoods(Number(goodsId)).then(res => {
@@ -121,7 +167,7 @@ const OrderConfirm = () => {
              <span className={'text-red-500 text-xl font-bold'}>￥{goods.price}</span>
          </div>
          <div className={'buy-btn mx-4'}>
-            <Button type="success" size="large">立即付款</Button>
+            <Button type="success" size="large" onClick={onPay}>立即付款</Button>
          </div>
        </View>
      </div>
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -89,3 +89,42 @@ export function showShareGuide() {
    confirmText: '知道了'
  });
 }
+
+/**
+ * 截取字符串，确保不超过指定的汉字长度
+ * @param text 原始文本
+ * @param maxLength 最大汉字长度，默认30
+ * @returns 截取后的文本
+ */
+export function truncateText(text: string, maxLength: number = 30): string {
+  if (!text) return '';
+
+  // 如果长度不超过限制，直接返回
+  if (text.length <= maxLength) {
+    return text;
+  }
+
+  // 超过长度则截取
+  return text.substring(0, maxLength);
+}
+
+/**
+ * 生成订单标题
+ * @param goodsNames 商品名称数组
+ * @param maxLength 最大长度，默认30
+ * @returns 订单标题
+ */
+export function generateOrderTitle(goodsNames: string[], maxLength: number = 30): string {
+  if (!goodsNames || goodsNames.length === 0) {
+    return '商品订单';
+  }
+
+  let title = '';
+  if (goodsNames.length === 1) {
+    title = goodsNames[0];
+  } else {
+    title = `${goodsNames[0]}等${goodsNames.length}件商品`;
+  }
+
+  return truncateText(title, maxLength);
+}
--- a/src/utils/payment.ts
+++ b/src/utils/payment.ts
@@ -0,0 +1,214 @@
+import Taro from '@tarojs/taro';
+import { createOrder, WxPayResult } from '@/api/shop/shopOrder';
+import { OrderCreateRequest } from '@/api/shop/shopOrder/model';
+
+/**
+ * 支付类型枚举
+ */
+export enum PaymentType {
+  BALANCE = 0,  // 余额支付
+  WECHAT = 1,   // 微信支付
+  ALIPAY = 3,   // 支付宝支付
+}
+
+/**
+ * 支付结果回调
+ */
+export interface PaymentCallback {
+  onSuccess?: () => void;
+  onError?: (error: string) => void;
+  onComplete?: () => void;
+}
+
+/**
+ * 统一支付处理类
+ */
+export class PaymentHandler {
+
+  /**
+   * 执行支付
+   * @param orderData 订单数据
+   * @param paymentType 支付类型
+   * @param callback 回调函数
+   */
+  static async pay(
+    orderData: OrderCreateRequest,
+    paymentType: PaymentType,
+    callback?: PaymentCallback
+  ): Promise<void> {
+    Taro.showLoading({ title: '支付中...' });
+
+    try {
+      // 设置支付类型
+      orderData.payType = paymentType;
+
+      // 创建订单
+      const result = await createOrder(orderData);
+
+      if (!result) {
+        throw new Error('创建订单失败');
+      }
+
+      // 根据支付类型处理
+      switch (paymentType) {
+        case PaymentType.WECHAT:
+          await this.handleWechatPay(result);
+          break;
+        case PaymentType.BALANCE:
+          await this.handleBalancePay(result);
+          break;
+        case PaymentType.ALIPAY:
+          await this.handleAlipay(result);
+          break;
+        default:
+          throw new Error('不支持的支付方式');
+      }
+
+      // 支付成功处理
+      Taro.showToast({
+        title: '支付成功',
+        icon: 'success'
+      });
+
+      callback?.onSuccess?.();
+
+      // 跳转到订单页面
+      setTimeout(() => {
+        Taro.switchTab({ url: '/pages/order/order' });
+      }, 2000);
+
+    } catch (error: any) {
+      console.error('支付失败:', error);
+      const errorMessage = error.message || '支付失败';
+
+      Taro.showToast({
+        title: errorMessage,
+        icon: 'error'
+      });
+
+      callback?.onError?.(errorMessage);
+    } finally {
+      Taro.hideLoading();
+      callback?.onComplete?.();
+    }
+  }
+
+  /**
+   * 处理微信支付
+   */
+  private static async handleWechatPay(result: WxPayResult): Promise<void> {
+    if (!result || !result.prepayId) {
+      throw new Error('微信支付参数错误');
+    }
+
+    await Taro.requestPayment({
+      timeStamp: result.timeStamp,
+      nonceStr: result.nonceStr,
+      package: result.package,
+      signType: result.signType as any, // 类型转换，因为微信支付的signType是字符串
+      paySign: result.paySign,
+    });
+  }
+
+  /**
+   * 处理余额支付
+   */
+  private static async handleBalancePay(result: any): Promise<void> {
+    // 余额支付通常在后端直接完成，这里只需要确认结果
+    if (!result || !result.orderNo) {
+      throw new Error('余额支付失败');
+    }
+    // 余额支付成功，无需额外操作
+  }
+
+  /**
+   * 处理支付宝支付
+   */
+  private static async handleAlipay(_result: any): Promise<void> {
+    // 支付宝支付逻辑，根据实际情况实现
+    throw new Error('支付宝支付暂未实现');
+  }
+}
+
+/**
+ * 快捷支付方法
+ */
+export const quickPay = {
+  /**
+   * 微信支付
+   */
+  wechat: (orderData: OrderCreateRequest, callback?: PaymentCallback) => {
+    return PaymentHandler.pay(orderData, PaymentType.WECHAT, callback);
+  },
+
+  /**
+   * 余额支付
+   */
+  balance: (orderData: OrderCreateRequest, callback?: PaymentCallback) => {
+    return PaymentHandler.pay(orderData, PaymentType.BALANCE, callback);
+  },
+
+  /**
+   * 支付宝支付
+   */
+  alipay: (orderData: OrderCreateRequest, callback?: PaymentCallback) => {
+    return PaymentHandler.pay(orderData, PaymentType.ALIPAY, callback);
+  }
+};
+
+/**
+ * 构建单商品订单数据
+ */
+export function buildSingleGoodsOrder(
+  goodsId: number,
+  quantity: number = 1,
+  addressId?: number,
+  options?: {
+    comments?: string;
+    deliveryType?: number;
+    couponId?: number;
+    selfTakeMerchantId?: number;
+  }
+): OrderCreateRequest {
+  return {
+    goodsItems: [
+      {
+        goodsId,
+        quantity
+      }
+    ],
+    addressId,
+    payType: PaymentType.WECHAT, // 默认微信支付，会被PaymentHandler覆盖
+    comments: options?.comments || '',
+    deliveryType: options?.deliveryType || 0,
+    couponId: options?.couponId,
+    selfTakeMerchantId: options?.selfTakeMerchantId
+  };
+}
+
+/**
+ * 构建购物车订单数据
+ */
+export function buildCartOrder(
+  cartItems: Array<{ goodsId: number; quantity: number }>,
+  addressId?: number,
+  options?: {
+    comments?: string;
+    deliveryType?: number;
+    couponId?: number;
+    selfTakeMerchantId?: number;
+  }
+): OrderCreateRequest {
+  return {
+    goodsItems: cartItems.map(item => ({
+      goodsId: item.goodsId,
+      quantity: item.quantity
+    })),
+    addressId,
+    payType: PaymentType.WECHAT, // 默认微信支付，会被PaymentHandler覆盖
+    comments: options?.comments || '购物车下单',
+    deliveryType: options?.deliveryType || 0,
+    couponId: options?.couponId,
+    selfTakeMerchantId: options?.selfTakeMerchantId
+  };
+}