修改“购物车”为“进货车”；购物车界面增加批量删除UI；优化购物车为空的样式；

src/locale/zh-Hans.json

@@ -1,7 +1,7 @@
 {
   "tabbar.home": "首页",
   "tabbar.about": "关于",
-  "tabbar.cart": "购物车",
+  "tabbar.cart": "进货车",
   "tabbar.store": "商家",
   "tabbar.me": "我的",
   "i18n.title": "中文标题",

src/pages/cart/components/EmptyCart.vue

@@ -1,3 +1,9 @@
+<!--
+ * @Author: chris
+ * @Date: 2026-02-04 17:43:54
+ * @LastEditors: chris
+ * @LastEditTime: 2026-02-11 11:09:03
+-->
 <script setup lang="ts">
 // 跳转到首页
 function goToHome() {
@@ -22,7 +28,7 @@ function goToHome() {
 
     <!-- 去购物按钮 -->
     <view class="empty-action-section">
-      <wd-button type="primary" size="large" @click="goToHome">
+      <wd-button type="primary" block size="large" @click="goToHome">
         去购物
       </wd-button>
     </view>

src/pages/cart/index.vue

@@ -12,6 +12,9 @@ definePage({
 // 初始化购物车状态
 const cartStore = useCartStore()
 
+// 管理模式状态
+const isManageMode = ref(false)
+
 // 计算属性
 const storeGroups = computed(() => cartStore.groupedByStore)
 const totalPrice = computed(() => cartStore.totalPrice)
@@ -38,6 +41,44 @@ function handleCheckout() {
   console.log('跳转到结算页面', cartStore.selectedCartItems)
 }
 
+// 切换管理模式
+function toggleManageMode() {
+  isManageMode.value = !isManageMode.value
+  // 退出管理模式时清空选择
+  if (!isManageMode.value) {
+    cartStore.clearSelection()
+  }
+}
+
+// 批量删除
+function handleBatchDelete() {
+  if (selectedCount.value === 0) {
+    uni.showToast({
+      title: '请选择要删除的商品',
+      icon: 'none',
+    })
+    return
+  }
+
+  uni.showModal({
+    title: '确认删除',
+    content: `确定要删除选中的${selectedCount.value}个商品吗？`,
+    success: (res) => {
+      if (res.confirm) {
+        cartStore.removeSelectedItems()
+        uni.showToast({
+          title: '删除成功',
+          icon: 'success',
+        })
+        // 如果删除后购物车为空，退出管理模式
+        if (cartStore.isEmpty) {
+          isManageMode.value = false
+        }
+      }
+    },
+  })
+}
+
 // 模拟数据 - 用于开发测试
 onMounted(() => {
   // 如果购物车为空，添加一些模拟数据
@@ -92,6 +133,12 @@ onMounted(() => {
     <!-- 页面头部 -->
     <view class="cart-header">
       <text class="cart-title">购物车</text>
+      <!-- 管理按钮 -->
+      <view v-if="!isEmpty" class="header-actions">
+        <text class="manage-btn" @click="toggleManageMode">
+          {{ isManageMode ? '完成' : '管理' }}
+        </text>
+      </view>
     </view>
 
     <!-- 购物车内容 -->
@@ -110,7 +157,7 @@ onMounted(() => {
       </view>
     </view>
 
-    <!-- 底部结算栏 -->
+    <!-- 底部操作栏 -->
     <view v-if="!isEmpty" class="cart-footer">
       <!-- 全选 -->
       <view class="select-all-section">
@@ -123,20 +170,38 @@ onMounted(() => {
         <text class="select-all-text">全选</text>
       </view>
 
-      <!-- 价格和结算 -->
+      <!-- 操作区域 -->
-      <view class="checkout-section">
+      <view class="action-section">
-        <view class="price-section">
+        <!-- 管理模式 -->
-          <text class="price-label">合计：</text>
+        <template v-if="isManageMode">
-          <text class="price-value">¥{{ totalPrice.toFixed(2) }}</text>
+          <view class="selected-info">
-        </view>
+            <text class="selected-text">已选择{{ selectedCount }}项</text>
-        <wd-button
+          </view>
-          type="primary"
+          <wd-button
-          size="large"
+            type="error"
-          class="checkout-btn"
+            size="large"
-          @click="handleCheckout"
+            class="batch-delete-btn"
-        >
+            @click="handleBatchDelete"
-          结算({{ selectedCount }})
+          >
-        </wd-button>
+            删除
+          </wd-button>
+        </template>
+
+        <!-- 普通模式 -->
+        <template v-else>
+          <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>
+        </template>
       </view>
     </view>
   </view>
@@ -149,13 +214,22 @@ onMounted(() => {
 
 /* 页面头部 */
 .cart-header {
-  @apply bg-white py-[30rpx] px-[32rpx] border-b border-gray-100;
+  @apply bg-white py-[30rpx] px-[32rpx] border-b border-gray-100 flex items-center justify-between;
 }
 
 .cart-title {
   @apply text-[32rpx] font-bold text-gray-800;
 }
 
+/* 头部操作区域 */
+.header-actions {
+  @apply flex items-center;
+}
+
+.manage-btn {
+  @apply text-[28rpx] text-gray-600;
+}
+
 /* 购物车内容 */
 .cart-content {
   @apply flex-1 overflow-y-auto;
@@ -181,11 +255,17 @@ onMounted(() => {
   @apply ml-[12rpx] text-[28rpx] text-gray-700;
 }
 
+/* 操作区域 */
+.action-section {
+  @apply flex items-center;
+}
+
 /* 结算部分 */
 .checkout-section {
   @apply flex items-center;
 }
 
+/* 价格部分 */
 .price-section {
   @apply mr-[24rpx];
 }
@@ -198,18 +278,39 @@ onMounted(() => {
   @apply text-[32rpx] font-bold text-red-500;
 }
 
+/* 结算按钮 */
 .checkout-btn {
   @apply min-w-[200rpx];
 }
 
+/* 管理模式 - 已选择信息 */
+.selected-info {
+  @apply mr-[24rpx];
+}
+
+.selected-text {
+  @apply text-[26rpx] text-gray-600;
+}
+
+/* 批量删除按钮 */
+.batch-delete-btn {
+  @apply min-w-[200rpx];
+}
+
 /* 响应式设计 */
 @media screen and (max-width: 750rpx) {
   .cart-footer {
     @apply py-[16rpx] px-[24rpx];
   }
 
-  .checkout-btn {
+  .checkout-btn,
+  .batch-delete-btn {
     @apply min-w-[180rpx];
   }
+
+  .price-section,
+  .selected-info {
+    @apply mr-[16rpx];
+  }
 }
 </style>

src/store/cart.ts

@@ -148,6 +148,23 @@ export const useCartStore = defineStore('cart', {
         item.quantity--
       }
     },
+
+    // 清空选择
+    clearSelection() {
+      this.selectedItems = []
+    },
+
+    // 移除选中的商品
+    removeSelectedItems() {
+      // 从后往前删除，避免索引变化
+      for (let i = this.items.length - 1; i >= 0; i--) {
+        if (this.selectedItems.includes(this.items[i].id)) {
+          this.items.splice(i, 1)
+        }
+      }
+      // 清空选择
+      this.selectedItems = []
+    },
   },
 
   persist: true,