From 4a6fe31c87143e234d10ec9fb79347b9f2b4ccc6 Mon Sep 17 00:00:00 2001
From: liruiqiang <3151805288@qq.com>
Date: Sat, 23 Aug 2025 17:36:36 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=AD=E7=89=A9=E8=BD=A6=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=8E=E5=85=A8=E9=80=89=E4=B8=8E=E7=BB=93?=
 =?UTF-8?q?=E7=AE=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vk-data-input-number-box.d.ts                  |  52 +++
 src/pages.json                                     |   8 +-
 src/pages/cart/cart.vue                            | 419 +-----------------
 src/pages/cart/cart2.vue                           |  13 +
 src/pages/cart/components/CartMain.vue             | 489 +++++++++++++++++++++
 src/pages/goods/goods.vue                          |   2 +-
 src/services/cart.ts                               |  28 ++
 7 files changed, 597 insertions(+), 414 deletions(-)
 create mode 100644 src/components/vk-data-input-number-box/vk-data-input-number-box.d.ts
 create mode 100644 src/pages/cart/cart2.vue
 create mode 100644 src/pages/cart/components/CartMain.vue

diff --git a/src/components/vk-data-input-number-box/vk-data-input-number-box.d.ts b/src/components/vk-data-input-number-box/vk-data-input-number-box.d.ts
new file mode 100644
index 0000000..65ffbb7
--- /dev/null
+++ b/src/components/vk-data-input-number-box/vk-data-input-number-box.d.ts
@@ -0,0 +1,52 @@
+import { Component } from '@uni-helper/uni-app-types'
+
+/** 步进器 */
+export type InputNumberBox = Component<InputNumberBoxProps>
+
+/** 步进器实例 */
+export type InputNumberBoxInstance = InstanceType<InputNumberBox>
+
+/** 步进器属性 */
+export type InputNumberBoxProps = {
+  /** 输入框初始值（默认1） */
+  modelValue: number
+  /** 用户可输入的最小值（默认0） */
+  min: number
+  /** 用户可输入的最大值（默认99999） */
+  max: number
+  /**  步长，每次加或减的值（默认1） */
+  step: number
+  /** 是否禁用操作，包括输入框，加减按钮 */
+  disabled: boolean
+  /** 输入框宽度，单位rpx（默认80） */
+  inputWidth: string | number
+  /**  输入框和按钮的高度，单位rpx（默认50） */
+  inputHeight: string | number
+  /** 输入框和按钮的背景颜色（默认#F2F3F5） */
+  bgColor: string
+  /** 步进器标识符 */
+  index: string
+  /** 输入框内容发生变化时触发 */
+  onChange: (event: InputNumberBoxEvent) => void
+  /** 输入框失去焦点时触发 */
+  onBlur: (event: InputNumberBoxEvent) => void
+  /** 点击增加按钮时触发 */
+  onPlus: (event: InputNumberBoxEvent) => void
+  /** 点击减少按钮时触发 */
+  onMinus: (event: InputNumberBoxEvent) => void
+}
+
+/** 步进器事件对象 */
+export type InputNumberBoxEvent = {
+  /** 输入框当前值 */
+  value: number
+  /** 步进器标识符 */
+  index: string
+}
+
+/** 全局组件类型声明 */
+declare module 'vue' {
+  export interface GlobalComponents {
+    'vk-data-input-number-box': InputNumberBox
+  }
+}
diff --git a/src/pages.json b/src/pages.json
index 51411f7..88a704c 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -36,6 +36,12 @@
       }
     },
     {
+      "path": "pages/cart/cart2",
+      "style": {
+        "navigationBarTitleText": "购物车"
+      }
+    },
+    {
       "path": "pages/category/category",
       "style": {
         "navigationBarTitleText": "分类"
@@ -132,7 +138,7 @@
         },
         {
           "path" : "address-form/address-form",
-          "style" : 
+          "style" :
           {
             "navigationBarTitleText" : ""
           }
diff --git a/src/pages/cart/cart.vue b/src/pages/cart/cart.vue
index 2b6d68e..95fe8b8 100644
--- a/src/pages/cart/cart.vue
+++ b/src/pages/cart/cart.vue
@@ -1,418 +1,13 @@
-<template>
-  <scroll-view scroll-y class="scroll-view">
-    <!-- 已登录: 显示购物车 -->
-    <template v-if="memberStore.profile">
-      <!-- 购物车列表 -->
-      <view class="cart-list" v-if="cartList.length">
-        <!-- 优惠提示 -->
-        <view class="tips">
-          <text class="label">满减</text>
-          <text class="desc">满1件, 即可享受9折优惠</text>
-        </view>
-        <!-- 滑动操作分区 -->
-        <view>
-          <!-- 滑动操作项 -->
-          <view v-for="item in cartList" :key="item.skuId" class="cart-swipe">
-            <!-- 商品信息 -->
-            <view class="goods">
-              <!-- 选中状态 -->
-              <text
-                @tap="onChangeSelected(item)"
-                class="checkbox"
-                :class="{ checked: item.selected }"
-              ></text>
-              <navigator
-                :url="`/pages/goods/goods?id=${item.id}`"
-                hover-class="none"
-                class="navigator"
-              >
-                <image mode="aspectFill" class="picture" :src="item.picture"></image>
-                <view class="meta">
-                  <view class="name ellipsis">{{ item.name }}</view>
-                  <view class="attrsText ellipsis">{{ item.attrsText }}</view>
-                  <view class="price">{{ item.nowPrice }}</view>
-                </view>
-              </navigator>
-              <!-- 商品数量 -->
-              <view class="count">
-                <vk-data-input-number-box
-                  v-model="item.count"
-                  :min="1"
-                  :max="item.stock"
-                  :index="item.skuId"
-                  @change="onChangeCount"
-                />
-              </view>
-            </view>
-            <!-- 右侧删除按钮 -->
-            <template #right>
-              <view class="cart-swipe-right">
-                <button @tap="onDeleteCart(item.skuId)" class="button delete-button">删除</button>
-              </view>
-            </template>
-          </view>
-        </view>
-      </view>
-      <!-- 购物车空状态 -->
-      <view class="cart-blank" v-else>
-        <image src="/static/images/blank_cart.png" class="image" />
-        <text class="text">购物车还是空的，快来挑选好货吧</text>
-        <navigator open-type="switchTab" url="/pages/index/index" hover-class="none">
-          <button class="button">去首页看看</button>
-        </navigator>
-      </view>
-      <!-- 吸底工具栏 -->
-      <view class="toolbar">
-        <text class="all" :class="{ checked: true }">全选</text>
-        <text class="text">合计:</text>
-        <text class="amount">100</text>
-        <view class="button-grounp">
-          <view class="button payment-button" :class="{ disabled: true }"> 去结算(10) </view>
-        </view>
-      </view>
-    </template>
-    <!-- 未登录: 提示登录 -->
-    <view class="login-blank" v-else>
-      <text class="text">登录后可查看购物车中的商品</text>
-      <navigator url="/pages/login/login" hover-class="none">
-        <button class="button">去登录</button>
-      </navigator>
-    </view>
-    <!-- 猜你喜欢 -->
-    <XtxGuess ref="guessRef"></XtxGuess>
-    <!-- 底部占位空盒子 -->
-    <view class="toolbar-height"></view>
-  </scroll-view>
-</template>
-
 <script setup lang="ts">
-import { getMemberCartAPI, deleteMemberCartAPI } from '@/services/cart'
-import { useMemberStore } from '@/stores'
-import type { CartItem } from '@/types/cart'
-import { onShow } from '@dcloudio/uni-app'
-import { ref } from 'vue'
-
-// 获取会员Store
-const memberStore = useMemberStore()
-
-// 获取购物车数据
-const cartList = ref<CartItem[]>([])
-const getMemberCartData = async () => {
-  const res = await getMemberCartAPI()
-  cartList.value = res.result
-}
-
-// 点击删除按钮
-const onDeleteCart = (skuId: string) => {
-  // 弹窗二次确认
-  uni.showModal({
-    content: '是否删除',
-    success: async (res) => {
-      if (res.confirm) {
-        // 后端删除单品
-        await deleteMemberCartAPI({ ids: [skuId] })
-        // 重新获取列表
-        getMemberCartData()
-      }
-    },
-  })
-}
-
-// 初始化调用: 页面显示触发
-onShow(() => {
-  // 用户已登录才允许调用
-  if (memberStore.profile) {
-    getMemberCartData()
-  }
-})
+import CartMain from './components/CartMain.vue'
 </script>
 
-<style lang="scss">
-// 根元素
-:host {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background-color: #f7f7f8;
-}
-
-// 滚动容器
-.scroll-view {
-  flex: 1;
-}
-
-// 购物车列表
-.cart-list {
-  padding: 0 20rpx;
-
-  // 优惠提示
-  .tips {
-    display: flex;
-    align-items: center;
-    line-height: 1;
-    margin: 30rpx 10rpx;
-    font-size: 26rpx;
-    color: #666;
-
-    .label {
-      color: #fff;
-      padding: 7rpx 15rpx 5rpx;
-      border-radius: 4rpx;
-      font-size: 24rpx;
-      background-color: #27ba9b;
-      margin-right: 10rpx;
-    }
-  }
-
-  // 购物车商品
-  .goods {
-    display: flex;
-    padding: 20rpx 20rpx 20rpx 80rpx;
-    border-radius: 10rpx;
-    background-color: #fff;
-    position: relative;
-
-    .navigator {
-      display: flex;
-    }
-
-    .checkbox {
-      position: absolute;
-      top: 0;
-      left: 0;
-
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 80rpx;
-      height: 100%;
-
-      &::before {
-        content: '\e6cd';
-        font-family: 'erabbit' !important;
-        font-size: 40rpx;
-        color: #444;
-      }
-
-      &.checked::before {
-        content: '\e6cc';
-        color: #27ba9b;
-      }
-    }
-
-    .picture {
-      width: 170rpx;
-      height: 170rpx;
-    }
-
-    .meta {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      margin-left: 20rpx;
-    }
-
-    .name {
-      height: 72rpx;
-      font-size: 26rpx;
-      color: #444;
-    }
-
-    .attrsText {
-      line-height: 1.8;
-      padding: 0 15rpx;
-      font-size: 24rpx;
-      align-self: flex-start;
-      border-radius: 4rpx;
-      color: #888;
-      background-color: #f7f7f8;
-    }
-
-    .price {
-      line-height: 1;
-      font-size: 26rpx;
-      color: #444;
-      margin-bottom: 2rpx;
-      color: #cf4444;
-
-      &::before {
-        content: '￥';
-        font-size: 80%;
-      }
-    }
-
-    // 商品数量
-    .count {
-      position: absolute;
-      bottom: 20rpx;
-      right: 5rpx;
-
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 220rpx;
-      height: 48rpx;
-
-      .text {
-        height: 100%;
-        padding: 0 20rpx;
-        font-size: 32rpx;
-        color: #444;
-      }
-
-      .input {
-        height: 100%;
-        text-align: center;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-        color: #444;
-        background-color: #f6f6f6;
-      }
-    }
-  }
-
-  .cart-swipe {
-    display: block;
-    margin: 20rpx 0;
-  }
-
-  .cart-swipe-right {
-    display: flex;
-    height: 100%;
-
-    .button {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 50px;
-      padding: 6px;
-      line-height: 1.5;
-      color: #fff;
-      font-size: 26rpx;
-      border-radius: 0;
-    }
-
-    .delete-button {
-      background-color: #cf4444;
-    }
-  }
-}
-
-// 空状态
-.cart-blank,
-.login-blank {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  height: 60vh;
-  .image {
-    width: 400rpx;
-    height: 281rpx;
-  }
-  .text {
-    color: #444;
-    font-size: 26rpx;
-    margin: 20rpx 0;
-  }
-  .button {
-    width: 240rpx !important;
-    height: 60rpx;
-    line-height: 60rpx;
-    margin-top: 20rpx;
-    font-size: 26rpx;
-    border-radius: 60rpx;
-    color: #fff;
-    background-color: #27ba9b;
-  }
-}
-
-// 吸底工具栏
-.toolbar {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: var(--window-bottom);
-  z-index: 1;
-
-  height: 100rpx;
-  padding: 0 20rpx;
-  display: flex;
-  align-items: center;
-  border-top: 1rpx solid #ededed;
-  border-bottom: 1rpx solid #ededed;
-  background-color: #fff;
-  box-sizing: content-box;
-
-  .all {
-    margin-left: 25rpx;
-    font-size: 14px;
-    color: #444;
-    display: flex;
-    align-items: center;
-  }
-
-  .all::before {
-    font-family: 'erabbit' !important;
-    content: '\e6cd';
-    font-size: 40rpx;
-    margin-right: 8rpx;
-  }
-
-  .checked::before {
-    content: '\e6cc';
-    color: #27ba9b;
-  }
-
-  .text {
-    margin-right: 8rpx;
-    margin-left: 32rpx;
-    color: #444;
-    font-size: 14px;
-  }
-
-  .amount {
-    font-size: 20px;
-    color: #cf4444;
-
-    .decimal {
-      font-size: 12px;
-    }
-
-    &::before {
-      content: '￥';
-      font-size: 12px;
-    }
-  }
-
-  .button-grounp {
-    margin-left: auto;
-    display: flex;
-    justify-content: space-between;
-    text-align: center;
-    line-height: 72rpx;
-    font-size: 13px;
-    color: #fff;
-
-    .button {
-      width: 240rpx;
-      margin: 0 10rpx;
-      border-radius: 72rpx;
-    }
-
-    .payment-button {
-      background-color: #27ba9b;
+<template>
+  <CartMain />
+</template>
 
-      &.disabled {
-        opacity: 0.6;
-      }
-    }
-  }
-}
-// 底部占位空盒子
-.toolbar-height {
-  height: 100rpx;
+<style lang="scss">
+page {
+  height: 100%;
 }
 </style>
diff --git a/src/pages/cart/cart2.vue b/src/pages/cart/cart2.vue
new file mode 100644
index 0000000..95fe8b8
--- /dev/null
+++ b/src/pages/cart/cart2.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import CartMain from './components/CartMain.vue'
+</script>
+
+<template>
+  <CartMain />
+</template>
+
+<style lang="scss">
+page {
+  height: 100%;
+}
+</style>
diff --git a/src/pages/cart/components/CartMain.vue b/src/pages/cart/components/CartMain.vue
new file mode 100644
index 0000000..5e6e019
--- /dev/null
+++ b/src/pages/cart/components/CartMain.vue
@@ -0,0 +1,489 @@
+<template>
+  <scroll-view scroll-y class="scroll-view">
+    <!-- 已登录: 显示购物车 -->
+    <template v-if="memberStore.profile">
+      <!-- 购物车列表 -->
+      <view class="cart-list" v-if="cartList.length">
+        <!-- 优惠提示 -->
+        <view class="tips">
+          <text class="label">满减</text>
+          <text class="desc">满1件, 即可享受9折优惠</text>
+        </view>
+        <!-- 滑动操作分区 -->
+        <view>
+          <!-- 滑动操作项 -->
+          <view v-for="item in cartList" :key="item.skuId" class="cart-swipe">
+            <!-- 商品信息 -->
+            <view class="goods">
+              <!-- 选中状态 -->
+              <text
+                @tap="onChangeSelected(item)"
+                class="checkbox"
+                :class="{ checked: item.selected }"
+              ></text>
+              <navigator
+                :url="`/pages/goods/goods?id=${item.id}`"
+                hover-class="none"
+                class="navigator"
+              >
+                <image mode="aspectFill" class="picture" :src="item.picture"></image>
+                <view class="meta">
+                  <view class="name ellipsis">{{ item.name }}</view>
+                  <view class="attrsText ellipsis">{{ item.attrsText }}</view>
+                  <view class="price">{{ item.nowPrice }}</view>
+                </view>
+              </navigator>
+              <!-- 商品数量 -->
+              <view class="count">
+                <vk-data-input-number-box
+                  v-model="item.count"
+                  :min="1"
+                  :max="item.stock"
+                  :index="item.skuId"
+                  @change="onChangeCount"
+                />
+              </view>
+            </view>
+            <!-- 右侧删除按钮 -->
+            <template #right>
+              <view class="cart-swipe-right">
+                <button @tap="onDeleteCart(item.skuId)" class="button delete-button">删除</button>
+              </view>
+            </template>
+          </view>
+        </view>
+      </view>
+      <!-- 购物车空状态 -->
+      <view class="cart-blank" v-else>
+        <image src="/static/images/blank_cart.png" class="image" />
+        <text class="text">购物车还是空的，快来挑选好货吧</text>
+        <navigator open-type="switchTab" url="/pages/index/index" hover-class="none">
+          <button class="button">去首页看看</button>
+        </navigator>
+      </view>
+      <!-- 吸底工具栏 -->
+      <view class="toolbar">
+        <text @tap="onChangeSelectedAll" class="all" :class="{ checked: isSelectedAll }">全选</text>
+        <text class="text">合计:</text>
+        <text class="amount">{{ selectedCartListMoney }}</text>
+        <view class="button-grounp">
+          <view
+            @tap="gotoPayment"
+            class="button payment-button"
+            :class="{ disabled: selectedCartListCount === 0 }"
+          >
+            去结算({{ selectedCartListCount }})
+          </view>
+        </view>
+      </view>
+    </template>
+    <!-- 未登录: 提示登录 -->
+    <view class="login-blank" v-else>
+      <text class="text">登录后可查看购物车中的商品</text>
+      <navigator url="/pages/login/login" hover-class="none">
+        <button class="button">去登录</button>
+      </navigator>
+    </view>
+    <!-- 猜你喜欢 -->
+    <XtxGuess ref="guessRef"></XtxGuess>
+    <!-- 底部占位空盒子 -->
+    <view class="toolbar-height"></view>
+  </scroll-view>
+</template>
+
+<script setup lang="ts">
+import type { InputNumberBoxEvent } from '@/components/vk-data-input-number-box/vk-data-input-number-box'
+import {
+  getMemberCartAPI,
+  deleteMemberCartAPI,
+  putMemberCartBySkuIdAPI,
+  putMemberCartSelectedAPI,
+} from '@/services/cart'
+import { useMemberStore } from '@/stores'
+import type { CartItem } from '@/types/cart'
+import { onShow } from '@dcloudio/uni-app'
+import { computed, ref } from 'vue'
+
+// 获取会员Store
+const memberStore = useMemberStore()
+
+// 获取购物车数据
+const cartList = ref<CartItem[]>([])
+const getMemberCartData = async () => {
+  const res = await getMemberCartAPI()
+  cartList.value = res.result
+}
+
+// 点击删除按钮
+const onDeleteCart = (skuId: string) => {
+  // 弹窗二次确认
+  uni.showModal({
+    content: '是否删除',
+    success: async (res) => {
+      if (res.confirm) {
+        // 后端删除单品
+        await deleteMemberCartAPI({ ids: [skuId] })
+        // 重新获取列表
+        getMemberCartData()
+      }
+    },
+  })
+}
+
+// 修改商品数量
+const onChangeCount = (ev: InputNumberBoxEvent) => {
+  putMemberCartBySkuIdAPI(ev.index, { count: ev.value })
+}
+
+// 修改选中状态-单品修改
+const onChangeSelected = (item: CartItem) => {
+  // 前端数据更新-是否选中取反
+  item.selected = !item.selected
+  // 后端数据更新
+  putMemberCartBySkuIdAPI(item.skuId, { selected: item.selected })
+}
+
+// 计算全选状态
+const isSelectedAll = computed(() => {
+  return cartList.value.length && cartList.value.every((v) => v.selected)
+})
+
+// 修改选中状态-全选修改
+const onChangeSelectedAll = () => {
+  // 全选状态取反
+  const _isSelectedAll = !isSelectedAll.value
+  // 前端数据更新
+  cartList.value.forEach((item) => {
+    item.selected = _isSelectedAll
+  })
+  // 后端数据更新
+  putMemberCartSelectedAPI({ selected: _isSelectedAll })
+}
+
+// 初始化调用: 页面显示触发
+onShow(() => {
+  // 用户已登录才允许调用
+  if (memberStore.profile) {
+    getMemberCartData()
+  }
+})
+
+// 计算选中单品列表
+const selectedCartList = computed(() => {
+  return cartList.value.filter((v) => v.selected)
+})
+
+// 计算选中总件数
+const selectedCartListCount = computed(() => {
+  return selectedCartList.value.reduce((sum, item) => sum + item.count, 0)
+})
+
+// 计算选中总金额
+const selectedCartListMoney = computed(() => {
+  return selectedCartList.value
+    .reduce((sum, item) => sum + item.count * item.nowPrice, 0)
+    .toFixed(2)
+})
+
+// 结算按钮
+const gotoPayment = () => {
+  if (selectedCartListCount.value === 0) {
+    return uni.showToast({
+      icon: 'none',
+      title: '请选择商品',
+    })
+  }
+  // 跳转到结算页
+  uni.navigateTo({ url: '/pagesOrder/create/create' })
+}
+</script>
+
+<style lang="scss">
+// 根元素
+:host {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: #f7f7f8;
+}
+
+// 滚动容器
+.scroll-view {
+  flex: 1;
+}
+
+// 购物车列表
+.cart-list {
+  padding: 0 20rpx;
+
+  // 优惠提示
+  .tips {
+    display: flex;
+    align-items: center;
+    line-height: 1;
+    margin: 30rpx 10rpx;
+    font-size: 26rpx;
+    color: #666;
+
+    .label {
+      color: #fff;
+      padding: 7rpx 15rpx 5rpx;
+      border-radius: 4rpx;
+      font-size: 24rpx;
+      background-color: #27ba9b;
+      margin-right: 10rpx;
+    }
+  }
+
+  // 购物车商品
+  .goods {
+    display: flex;
+    padding: 20rpx 20rpx 20rpx 80rpx;
+    border-radius: 10rpx;
+    background-color: #fff;
+    position: relative;
+
+    .navigator {
+      display: flex;
+    }
+
+    .checkbox {
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 80rpx;
+      height: 100%;
+
+      &::before {
+        content: '\e6cd';
+        font-family: 'erabbit' !important;
+        font-size: 40rpx;
+        color: #444;
+      }
+
+      &.checked::before {
+        content: '\e6cc';
+        color: #27ba9b;
+      }
+    }
+
+    .picture {
+      width: 170rpx;
+      height: 170rpx;
+    }
+
+    .meta {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      margin-left: 20rpx;
+    }
+
+    .name {
+      height: 72rpx;
+      font-size: 26rpx;
+      color: #444;
+    }
+
+    .attrsText {
+      line-height: 1.8;
+      padding: 0 15rpx;
+      font-size: 24rpx;
+      align-self: flex-start;
+      border-radius: 4rpx;
+      color: #888;
+      background-color: #f7f7f8;
+    }
+
+    .price {
+      line-height: 1;
+      font-size: 26rpx;
+      color: #444;
+      margin-bottom: 2rpx;
+      color: #cf4444;
+
+      &::before {
+        content: '￥';
+        font-size: 80%;
+      }
+    }
+
+    // 商品数量
+    .count {
+      position: absolute;
+      bottom: 20rpx;
+      right: 5rpx;
+
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 220rpx;
+      height: 48rpx;
+
+      .text {
+        height: 100%;
+        padding: 0 20rpx;
+        font-size: 32rpx;
+        color: #444;
+      }
+
+      .input {
+        height: 100%;
+        text-align: center;
+        border-radius: 4rpx;
+        font-size: 24rpx;
+        color: #444;
+        background-color: #f6f6f6;
+      }
+    }
+  }
+
+  .cart-swipe {
+    display: block;
+    margin: 20rpx 0;
+  }
+
+  .cart-swipe-right {
+    display: flex;
+    height: 100%;
+
+    .button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 50px;
+      padding: 6px;
+      line-height: 1.5;
+      color: #fff;
+      font-size: 26rpx;
+      border-radius: 0;
+    }
+
+    .delete-button {
+      background-color: #cf4444;
+    }
+  }
+}
+
+// 空状态
+.cart-blank,
+.login-blank {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 60vh;
+  .image {
+    width: 400rpx;
+    height: 281rpx;
+  }
+  .text {
+    color: #444;
+    font-size: 26rpx;
+    margin: 20rpx 0;
+  }
+  .button {
+    width: 240rpx !important;
+    height: 60rpx;
+    line-height: 60rpx;
+    margin-top: 20rpx;
+    font-size: 26rpx;
+    border-radius: 60rpx;
+    color: #fff;
+    background-color: #27ba9b;
+  }
+}
+
+// 吸底工具栏
+.toolbar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: var(--window-bottom);
+  z-index: 1;
+
+  height: 100rpx;
+  padding: 0 20rpx;
+  display: flex;
+  align-items: center;
+  border-top: 1rpx solid #ededed;
+  border-bottom: 1rpx solid #ededed;
+  background-color: #fff;
+  box-sizing: content-box;
+
+  .all {
+    margin-left: 25rpx;
+    font-size: 14px;
+    color: #444;
+    display: flex;
+    align-items: center;
+  }
+
+  .all::before {
+    font-family: 'erabbit' !important;
+    content: '\e6cd';
+    font-size: 40rpx;
+    margin-right: 8rpx;
+  }
+
+  .checked::before {
+    content: '\e6cc';
+    color: #27ba9b;
+  }
+
+  .text {
+    margin-right: 8rpx;
+    margin-left: 32rpx;
+    color: #444;
+    font-size: 14px;
+  }
+
+  .amount {
+    font-size: 20px;
+    color: #cf4444;
+
+    .decimal {
+      font-size: 12px;
+    }
+
+    &::before {
+      content: '￥';
+      font-size: 12px;
+    }
+  }
+
+  .button-grounp {
+    margin-left: auto;
+    display: flex;
+    justify-content: space-between;
+    text-align: center;
+    line-height: 72rpx;
+    font-size: 13px;
+    color: #fff;
+
+    .button {
+      width: 240rpx;
+      margin: 0 10rpx;
+      border-radius: 72rpx;
+    }
+
+    .payment-button {
+      background-color: #27ba9b;
+
+      &.disabled {
+        opacity: 0.6;
+      }
+    }
+  }
+}
+// 底部占位空盒子
+.toolbar-height {
+  height: 100rpx;
+}
+</style>
diff --git a/src/pages/goods/goods.vue b/src/pages/goods/goods.vue
index 22f1f28..70c9d9d 100644
--- a/src/pages/goods/goods.vue
+++ b/src/pages/goods/goods.vue
@@ -98,7 +98,7 @@
       <button class="icons-button" open-type="contact">
         <text class="icon-handset"></text>客服
       </button>
-      <navigator class="icons-button" url="/pages/cart/cart" open-type="switchTab">
+      <navigator class="icons-button" url="/pages/cart/cart2">
         <text class="icon-cart"></text>购物车
       </navigator>
     </view>
diff --git a/src/services/cart.ts b/src/services/cart.ts
index e22ba46..a1e3a12 100644
--- a/src/services/cart.ts
+++ b/src/services/cart.ts
@@ -34,3 +34,31 @@ export const deleteMemberCartAPI = (data: { ids: string[] }) => {
     data,
   })
 }
+
+/**
+ * 修改购物车单品
+ * @param skuId SKUID
+ * @param data selected 选中状态 count 商品数量
+ */
+export const putMemberCartBySkuIdAPI = (
+  skuId: string,
+  data: { selected?: boolean; count?: number },
+) => {
+  return http({
+    method: 'PUT',
+    url: `/member/cart/${skuId}`,
+    data,
+  })
+}
+
+/**
+ * 购物车全选/取消全选
+ * @param data selected 是否选中
+ */
+export const putMemberCartSelectedAPI = (data: { selected: boolean }) => {
+  return http({
+    method: 'PUT',
+    url: '/member/cart/selected',
+    data,
+  })
+}