购物车模块删除单品

src/pages/cart/cart.vue

@@ -86,7 +86,7 @@
 </template>
 
 <script setup lang="ts">
-import { getMemberCartAPI } from '@/services/cart'
+import { getMemberCartAPI, deleteMemberCartAPI } from '@/services/cart'
 import { useMemberStore } from '@/stores'
 import type { CartItem } from '@/types/cart'
 import { onShow } from '@dcloudio/uni-app'
@@ -102,6 +102,22 @@ const getMemberCartData = async () => {
   cartList.value = res.result
 }
 
+// 点击删除按钮
+const onDeleteCart = (skuId: string) => {
+  // 弹窗二次确认
+  uni.showModal({
+    content: '是否删除',
+    success: async (res) => {
+      if (res.confirm) {
+        // 后端删除单品
+        await deleteMemberCartAPI({ ids: [skuId] })
+        // 重新获取列表
+        getMemberCartData()
+      }
+    },
+  })
+}
+
 // 初始化调用: 页面显示触发
 onShow(() => {
   // 用户已登录才允许调用

src/services/cart.ts

@@ -22,3 +22,15 @@ export const getMemberCartAPI = () => {
     url: '/member/cart',
   })
 }
+
+/**
+ * 删除/清空购物车单品
+ * @param data 请求体参数 ids SKUID 集合
+ */
+export const deleteMemberCartAPI = (data: { ids: string[] }) => {
+  return http({
+    method: 'DELETE',
+    url: '/member/cart',
+    data,
+  })
+}