shop-wx/src/pages/index/components/cart.vue

<script lang="ts" setup>
import { computed } from 'vue'
import { useCartStore } from '@/pinia/stores/cart'
import { useProductStore } from '@/pinia/stores/product'
import { storeToRefs } from 'pinia'

// 定义组件事件：关闭详情
const emit = defineEmits<{
  (e: 'cartClose'): void
}>()

// 状态管理
const cartStore = useCartStore()
const { cartItems, totalPrice, totalQuantity } = storeToRefs(cartStore)

// 引入 productStore 获取 selectedShop
const productStore = useProductStore()
const { selectedShop } = storeToRefs(productStore)

// 判断当前是否为租用模式 (mode 为 3)
const isRentingMode = computed(() => selectedShop.value?.mode === 3)

// 根据模式选择渲染的列表
const currentItems = computed(() => {
  return isRentingMode.value ? [] : cartItems.value // 简化处理，暂不支持租用模式
})

// 根据模式选择渲染的总数量
const currentTotalQuantity = computed(() => {
  return isRentingMode.value ? 0 : totalQuantity.value
})

// 处理关闭按钮点击事件
function handleClose() {
  emit('cartClose')
}

// 通用处理添加到购物车或租用购物车（递增数量）
function handleAddItem(item: any) {
  if (!isRentingMode.value && 'id' in item) {
    cartStore.addToCart(item)
  }
}

// 通用处理从购物车或租用购物车移除（递减数量）
function handleRemoveItem(item: any) {
  if (!isRentingMode.value && 'id' in item) {
    cartStore.removeFromCart(item.cellId)
  }
}

// 通用清空购物车或租用购物车
function handleClearCartOrRentingCart() {
  uni.showModal({
    title: '提示',
    content: `确认清空购物车吗？`,
    success: (res) => {
      if (res.confirm) {
        if (isRentingMode.value) {
          // rentingCabinetStore.clearRentingCart()
        } else {
          cartStore.clearCart()
        }
      }
    }
  })
}

// 结算方法
function handleCheckout() {
  handleClose();
  uni.navigateTo({
    url: '/pages/index/checkout'
  });
}
</script>

<template>
  <view class="cart-container">
    <!-- 顶部操作栏 -->
    <view class="flex-header">
      <view class="clear-header">
        <view class="clear-btn" @click="handleClearCartOrRentingCart">
          <wd-icon name="delete" size="16px" color="#F56C6C"></wd-icon>
          <text style="margin-left: 4px">清空购物车</text>
        </view>
      </view>
    </view>

    <view class="product-list" scroll-y>
      <template v-if="currentItems.length">
        <view v-for="item in currentItems" :key="item.product.id" class="product-item">
          <view class="product-content">
            <wd-img
              :src="item.product.image"
              width="80"
              height="80"
              border-radius="4"
            >
              <template #error>
                <view class="custom-error">图片加载失败</view>
              </template>
            </wd-img>

            <view class="product-info">
              <view class="product-name">
                {{ item.product.name }}
              </view>
              <view class="product-price">
                ¥{{ item.product.price.toFixed(2) }}
              </view>
              <view class="action-row">
                <text v-if="item.product.stock > 0" class="stock-count">
                  还剩{{ item.product.stock }}份
                </text>
                <view class="cart-actions">
                  <view
                    class="cart-btn-minus"
                    @click.stop="handleRemoveItem(item.product)"
                  >
                    <wd-icon name="decrease" size="12px" color="#F56C6C"></wd-icon>
                  </view>
                  <text class="cart-count">{{ item.quantity }}</text>
                  <view
                    class="cart-btn-plus"
                    @click.stop="handleAddItem(item.product)"
                  >
                    <wd-icon name="add" size="12px" color="#fff"></wd-icon>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>

      <view v-else class="empty-cart">
        <wd-icon name="shopping-cart" size="60px" color="#ddd"></wd-icon>
        <text class="empty-text">购物车是空的</text>
      </view>

      <!-- 底部购物车栏 -->
      <view v-if="currentItems.length" class="shopping-cart-bar">
        <view class="cart-info" @click.stop="handleClose()">
          <wd-badge :model-value="currentTotalQuantity" right="0" top="0">
            <wd-icon name="cart" size="24px"></wd-icon>
          </wd-badge>
          <text class="total-price">
            合计：¥{{ totalPrice.toFixed(2) }}
          </text>
        </view>
        <view class="checkout-btn" @click="handleCheckout">
          去结算
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.cart-container {
  display: flex;
  flex-direction: column;
  height: 80vh;
  width: 100%;
  background: #fff;
}

.flex-header {
  display: flex;
  justify-content: flex-end;
  background: #fff;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 10px 16px;
}

.clear-header {
  display: flex;
}

.clear-btn {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid #F56C6C;
  border-radius: 16px;
  color: #F56C6C;
  font-size: 12px;
}

.product-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 16px 60px 16px;
  background: #ffffff;
}

.product-item {
  margin-bottom: 10px;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}

.product-content {
  display: flex;
  gap: 12px;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 80px;
  position: relative;
}

.product-name {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
  text-align: left;
}

.product-price {
  font-size: 16px;
  color: #F56C6C;
  font-weight: bold;
  text-align: left;
}

.action-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: auto;
}

.stock-count {
  font-size: 11px;
  color: #bbbbbb;
  margin-right: 8px;
}

.cart-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;

  .cart-count {
    font-size: 12px;
    min-width: 20px;
    text-align: center;
  }
}

.cart-btn-minus,
.cart-btn-plus {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F56C6C;
}

.cart-btn-minus {
  background: #fff;
  border: 1px solid #F56C6C;
}

.custom-error {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #969799;
  font-size: 12px;
  background: #f7f8fa;
}

.shopping-cart-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.cart-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.total-price {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}

.checkout-btn {
  background-color: #F56C6C;
  border: none;
  border-radius: 16px;
  padding: 0 24px;
  height: 36px;
  line-height: 36px;
  color: #fff;
  font-size: 14px;
}

.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  color: #999;
}

.empty-text {
  margin-top: 16px;
  font-size: 14px;
  color: #999;
}
</style>