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'>{{ totalQuantity }}</view>
          <view class="price">
            <text class="price-symbol">￥</text>
            <text class="price-number">{{ formatPrice(totalPrice) }}</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({
  // 购物车数据列表
  cartList: {
    type: Array,
    default: () => []
  }
});

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

// 计算总数量
const totalQuantity = computed(() => {
  return props.cartList.reduce((sum, item) => {
    return sum + (item.quantity || 0);
  }, 0);
});

// 计算总价格
const totalPrice = computed(() => {
  return props.cartList.reduce((sum, item) => {
    const quantity = item.quantity || 0;
    const price = item.price || 0;
    return sum + (quantity * price);
  }, 0);
});

// 格式化价格（显示为整数）
const formatPrice = (price) => {
  return Math.round(price).toFixed(0);
};

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

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

// 下单点击
const handleOrderClick = () => {
  if (totalQuantity.value === 0) return;
  emit('order-click', {
    cartList: props.cartList,
    totalPrice: totalPrice.value,
    totalQuantity: totalQuantity.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>