template-10584/src/shop/orderConfirmCart/index.tsx

import {useEffect, useState} from "react";
import {Image, Button, Cell, CellGroup, Input, Space} from '@nutui/nutui-react-taro'
import {Location, ArrowRight} from '@nutui/icons-react-taro'
import Taro from '@tarojs/taro'
import {View} from '@tarojs/components';
import {listShopUserAddress} from "@/api/shop/shopUserAddress";
import {ShopUserAddress} from "@/api/shop/shopUserAddress/model";
import './index.scss'
import {useCart, CartItem} from "@/hooks/useCart";
import Gap from "@/components/Gap";
import {Payment} from "@/api/system/payment/model";
import {PaymentHandler, PaymentType, buildCartOrder} from "@/utils/payment";
import { ensureLoggedIn } from '@/utils/auth'

const OrderConfirm = () => {
  const [address, setAddress] = useState<ShopUserAddress>()
  const [payment] = useState<Payment>()
  const [checkoutItems, setCheckoutItems] = useState<CartItem[]>([]);

  const {
    cartItems,
    removeFromCart
  } = useCart();

  const reload = async () => {
    const addressList = await listShopUserAddress({isDefault: true});
    if (addressList.length > 0) {
      setAddress(addressList[0])
    }
  }

  // 页面级兜底：防止未登录时进入结算页导致接口报错/仅提示“请先登录”
  useEffect(() => {
    // redirect 到当前结算页，登录成功后返回继续支付
    if (!ensureLoggedIn('/shop/orderConfirmCart/index')) return
  }, [])

  // 加载结算商品数据
  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);
    }
  };

  /**
   * 统一支付入口
   */
  const onPay = async () => {
    if (!ensureLoggedIn('/shop/orderConfirmCart/index')) return

    // 基础校验
    if (!address) {
      Taro.showToast({
        title: '请选择收货地址',
        icon: 'error'
      });
      return;
    }

    if (!checkoutItems || checkoutItems.length === 0) {
      Taro.showToast({
        title: '没有要结算的商品',
        icon: 'error'
      });
      return;
    }

    // 构建订单数据
    const orderData = buildCartOrder(
      checkoutItems.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, {
      onSuccess: () => {
        // 支付成功后，从购物车中移除已下单的商品
        checkoutItems.forEach(item => {
          removeFromCart(item.goodsId);
        });
      }
    });
  };

  useEffect(() => {
    if (!ensureLoggedIn('/shop/orderConfirmCart/index')) return

    reload().then();
    loadCheckoutItems();
  }, [cartItems]);

  // 计算总价
  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'}>
      <CellGroup>
        {
          address && (
            <Cell className={'address-bottom-line'} onClick={() => Taro.navigateTo({url: '/user/address/index'})}>
              <Space>
                <Location/>
                <View className={'flex flex-col w-full justify-between items-start'}>
                  <Space className={'flex flex-row w-full font-medium'}>
                    <View className={'flex-wrap text-nowrap whitespace-nowrap'}>送至</View>
                    <View style={{width: '64%'}}
                          className={'line-clamp-1 relative'}>{address.province} {address.city} {address.region} {address.address}
                    </View>
                  </Space>
                  <View className={'pt-1 pb-3 text-gray-500'}>{address.name} {address.phone}</View>
                </View>
              </Space>
            </Cell>
          )
        }
        {!address && (
          <Cell className={''} onClick={() => Taro.navigateTo({url: '/user/address/index'})}>
            <Space>
              <Location/>
              添加收货地址
            </Space>
          </Cell>
        )}
      </CellGroup>

      <CellGroup>
        {checkoutItems.map((item) => (
          <Cell key={item.goodsId}>
            <Space>
              <Image src={item.image} mode={'aspectFill'} style={{
                width: '80px',
                height: '80px',
              }} lazyLoad={false}/>
              <View className={'flex flex-col'}>
                <View className={'font-medium w-full'}>{item.name}</View>
                {/*<View className={'number text-gray-400 text-sm py-2'}>80g/袋</View>*/}
                <Space className={'flex justify-start items-center'}>
                  <View className={'text-red-500'}>￥{item.price}</View>
                  <View className={'text-gray-500 text-sm'}>x {item.quantity}</View>
                </Space>
              </View>
            </Space>
          </Cell>
        ))}
      </CellGroup>

      <CellGroup>
        <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'}>-￥0.00</View>
            <ArrowRight className={'text-gray-400'} size={14}/>
          </View>
        )}/>
        {/*<Cell title={'配送费'} extra={'￥' + 10}/>*/}
        <Cell title={'订单备注'} extra={(
          <Input placeholder={'选填，请先和商家协商一致'} style={{ padding: '0'}}/>
        )}/>
      </CellGroup>

      <Gap height={50} />

      <div className={'fixed z-50 bg-white w-full bottom-0 left-0 pt-4 pb-10 border-t border-gray-200'}>
        <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'}>￥{getTotalPrice()}</span>
          </div>
          <div className={'buy-btn mx-4'}>
            <Button type="success" size="large" onClick={onPay}>立即付款</Button>
          </div>
        </View>
      </div>
    </div>
  );
};

export default OrderConfirm;