WechatApp/pages/orderFood/components/BottomActionBar.vue

<template>
  <view class="bottom-action-bar">
    <!-- 左侧：优惠券按钮 -->
    <view class="coupon-btn" @click="handleCouponClick">
      <image :src="getFileUrl('img/icon/shopBtn1.png')" mode="aspectFit" class="bg-img"></image>
      <view class="coupon-content">
        <image :src="getFileUrl('img/icon/coupon.png')" mode="widthFix" class="icon-coupon"></image>
        <view class="coupon-text">优惠券</view>
      </view>
    </view>
    <!-- 右侧：购物车按钮 -->
    <view class="cart-btn">
      <image :src="getFileUrl('img/icon/shopBtn2.png')" mode="aspectFit" class="bg-img"></image>
      <view class="shop-cart">
        <view class="shop-cart-content" @click="handleCartClick">
          <image :src="getFileUrl('img/icon/shoppingCart.png')" mode="widthFix" class="icon-shopping-cart"></image>
          <view class='number'>{{ displayTotalQuantity }}</view>
          <view class="price">
            <text class="price-symbol">￥</text>
            <text class="price-number">{{ formatPrice(displayTotalPrice) }}</text>
          </view>
        </view>
        <!-- 下单 -->
        <view class='order-btn' @click="handleOrderClick">去下单</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';
import { getFileUrl } from '@/utils/file.js';

const props = defineProps({
  // 购物车数据列表（可为接口返回的 items：cuisineId/cuisineName/quantity/unitPrice/subtotalAmount）
  cartList: {
    type: Array,
    default: () => []
  },
  // 可选：接口返回的 totalQuantity，传入时优先使用
  totalQuantity: {
    type: Number,
    default: null
  },
  // 可选：接口返回的 totalAmount，传入时优先使用
  totalAmount: {
    type: Number,
    default: null
  }
});

const emit = defineEmits(['coupon-click', 'cart-click', 'order-click']);

// 取单品金额：接口项用 unitPrice，兼容 totalPrice/price 等
const getItemPrice = (item) => {
  const p = item?.unitPrice ?? item?.price ?? item?.totalPrice ?? item?.salePrice ?? item?.currentPrice ?? 0;
  return Number(p) || 0;
};

// 行小计：接口项用 subtotalAmount，否则 数量×单价
const getItemLinePrice = (item) => {
  if (item?.subtotalAmount != null) return Number(item.subtotalAmount);
  return (Number(item?.quantity) || 0) * getItemPrice(item);
};

// 展示总数量：优先父组件传入 totalQuantity，否则从 cart-list 计算
const displayTotalQuantity = computed(() => {
  if (props.totalQuantity != null && props.totalQuantity !== '') return Number(props.totalQuantity);
  return (props.cartList || []).reduce((sum, item) => sum + (Number(item?.quantity) || 0), 0);
});

// 展示总金额：优先父组件传入 totalAmount，否则从 cart-list 按行小计累加
const displayTotalPrice = computed(() => {
  if (props.totalAmount != null && props.totalAmount !== '') return Number(props.totalAmount);
  return (props.cartList || []).reduce((sum, item) => sum + getItemLinePrice(item), 0);
});

// 格式化总金额
const formatPrice = (price) => {
  const num = Number(price);
  return Number.isNaN(num) ? '0.00' : num.toFixed(2);
};

// 优惠券点击
const handleCouponClick = () => {
  emit('coupon-click');
};

// 购物车点击
const handleCartClick = () => {
  emit('cart-click');
};

// 下单点击
const handleOrderClick = () => {
  if (displayTotalQuantity.value === 0) return;
  emit('order-click', {
    cartList: props.cartList,
    totalPrice: displayTotalPrice.value,
    totalQuantity: displayTotalQuantity.value
  });
};
</script>

<style lang="scss" scoped>
.bottom-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0;
  padding: 20rpx;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff;
  box-shadow: 0rpx -11rpx 46rpx 0rpx rgba(0, 0, 0, 0.05);
}

.coupon-btn {
  width: 140rpx;
  height: 100rpx;
  position: relative;

  .bg-img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }

  .coupon-content {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    padding-top: 6rpx;

    .icon-coupon {
      width: 30rpx;
      height: 21rpx;
    }

    .coupon-text {
      width: 100%;
      font-size: 24rpx;
    }
  }
}

.cart-btn {
  width: 561rpx;
  height: 100rpx;
  position: relative;

  .bg-img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }

  .shop-cart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    color: #fff;
    padding-left: 30rpx;

    .shop-cart-content {
      display: flex;
      align-items: center;
    }

    .icon-shopping-cart {
      width: 76rpx;
      height: 76rpx;
    }

    .price {
      display: flex;
      align-items: baseline;
      color: #FFFFFF;
      font-weight: bold;
      
      .price-symbol {
        font-size: 24rpx;
        margin-right: 2rpx;
      }
      
      .price-number {
        font-size: 38rpx;
      }
    }
    .number{
      display: inline-block;
      padding: 2rpx 10rpx;
      background-color: #FF4545;
      position: absolute;
      left: 80rpx;
      top: 10rpx;
      border-radius: 40rpx;
      color: #fff;
      font-size: 24rpx;
    }
  }

  .order-btn {
    width: 200rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 31rpx;
    color: #FFFFFF;
  }
}
</style>