shop_uni/src/pages/cart/index.vue

<script setup lang="ts">
import { useCartStore } from '@/store/cart'
import CartStoreGroup from './components/CartStoreGroup.vue'
import EmptyCart from './components/EmptyCart.vue'

definePage({
  style: {
    navigationBarTitleText: '进货车',
  },
})

// 初始化购物车状态
const cartStore = useCartStore()

// 计算属性
const storeGroups = computed(() => cartStore.groupedByStore)
const totalPrice = computed(() => cartStore.totalPrice)
const selectedCount = computed(() => cartStore.selectedCount)
const isAllSelected = computed(() => cartStore.isAllSelected)
const isEmpty = computed(() => cartStore.isEmpty)

// 全选/取消全选
function handleAllSelect() {
  cartStore.toggleAllSelection()
}

// 结算
function handleCheckout() {
  if (selectedCount.value === 0) {
    uni.showToast({
      title: '请选择要结算的商品',
      icon: 'none',
    })
    return
  }

  // 跳转到结算页面
  console.log('跳转到结算页面', cartStore.selectedCartItems)
}

// 模拟数据 - 用于开发测试
onMounted(() => {
  // 如果购物车为空，添加一些模拟数据
  if (cartStore.isEmpty) {
    // 添加模拟商品数据
    const mockItems = [
      {
        productId: 1,
        productName: 'Apple iPhone 15 Pro Max 256GB 钛金属',
        price: 9999,
        originalPrice: 10999,
        quantity: 1,
        image: 'https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=Apple%20iPhone%2015%20Pro%20Max%20product%20image%2C%20titanium%20color%2C%20clean%20background%2C%20professional%20photography&image_size=portrait_4_3',
        storeId: 1,
        storeName: 'Apple官方旗舰店',
      },
      {
        productId: 2,
        productName: 'Apple AirPods Pro 2 主动降噪无线蓝牙耳机',
        price: 1899,
        originalPrice: 1999,
        quantity: 2,
        image: 'https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=Apple%20AirPods%20Pro%202%20wireless%20earbuds%2C%20white%20color%2C%20clean%20background%2C%20professional%20photography&image_size=portrait_4_3',
        storeId: 1,
        storeName: 'Apple官方旗舰店',
      },
      {
        productId: 3,
        productName: 'Sony WH-1000XM5 头戴式无线降噪耳机',
        price: 2999,
        originalPrice: 3299,
        quantity: 1,
        image: 'https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=Sony%20WH-1000XM5%20over-ear%20wireless%20headphones%2C%20black%20color%2C%20clean%20background%2C%20professional%20photography&image_size=portrait_4_3',
        storeId: 2,
        storeName: 'Sony官方旗舰店',
      },
    ]

    // 添加到购物车
    mockItems.forEach((item) => {
      cartStore.addItem(item)
    })

    // 默认全选
    cartStore.toggleAllSelection()
  }
})
</script>

<template>
  <view class="cart-page">
    <!-- 页面头部 -->
    <view class="cart-header">
      <text class="cart-title">购物车</text>
    </view>

    <!-- 购物车内容 -->
    <view class="cart-content">
      <!-- 空购物车状态 -->
      <EmptyCart v-if="isEmpty" />

      <!-- 购物车商品列表 -->
      <view v-else class="cart-list">
        <!-- 店铺分组 -->
        <CartStoreGroup
          v-for="group in storeGroups"
          :key="group.storeId"
          :group="group"
        />
      </view>
    </view>

    <!-- 底部结算栏 -->
    <view v-if="!isEmpty" class="cart-footer">
      <!-- 全选 -->
      <view class="select-all-section">
        <wd-checkbox
          v-model="isAllSelected"
          size="large"
          shape="circle"
          @change="handleAllSelect"
        />
        <text class="select-all-text">全选</text>
      </view>

      <!-- 价格和结算 -->
      <view class="checkout-section">
        <view class="price-section">
          <text class="price-label">合计：</text>
          <text class="price-value">¥{{ totalPrice.toFixed(2) }}</text>
        </view>
        <wd-button
          type="primary"
          size="large"
          class="checkout-btn"
          @click="handleCheckout"
        >
          结算({{ selectedCount }})
        </wd-button>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.cart-page {
  @apply flex flex-col min-h-screen bg-gray-50;
}

/* 页面头部 */
.cart-header {
  @apply bg-white py-[30rpx] px-[32rpx] border-b border-gray-100;
}

.cart-title {
  @apply text-[32rpx] font-bold text-gray-800;
}

/* 购物车内容 */
.cart-content {
  @apply flex-1 overflow-y-auto;
}

/* 购物车列表 */
.cart-list {
  @apply py-[16rpx];
}

/* 底部结算栏 */
.cart-footer {
  @apply fixed left-0 right-0 bg-white border-t border-gray-200 py-[20rpx] px-[32rpx] flex items-center justify-between;
  bottom: calc(50px + env(safe-area-inset-bottom));
}

/* 全选部分 */
.select-all-section {
  @apply flex items-center;
}

.select-all-text {
  @apply ml-[12rpx] text-[28rpx] text-gray-700;
}

/* 结算部分 */
.checkout-section {
  @apply flex items-center;
}

.price-section {
  @apply mr-[24rpx];
}

.price-label {
  @apply text-[26rpx] text-gray-600;
}

.price-value {
  @apply text-[32rpx] font-bold text-red-500;
}

.checkout-btn {
  @apply min-w-[200rpx];
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
  .cart-footer {
    @apply py-[16rpx] px-[24rpx];
  }

  .checkout-btn {
    @apply min-w-[180rpx];
  }
}
</style>