uni-app购物车页面详细代码

最新推荐文章于 2024-10-18 19:30:00 发布

小夏同学呀

最新推荐文章于 2024-10-18 19:30:00 发布

阅读量1.3k

点赞数 7

分类专栏： uni-app 文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/web5219/article/details/135609131

版权

本文详细介绍了如何在uni-app项目中，利用sku插件实现购物车功能，包括添加、删除商品、修改数量、全选操作以及结算流程的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：在这里插入图片描述

这里的购物车加减用的是uni-app中的sku插件

代码附下（全）：

<script setup lang="ts">
import {
   
  reqMemberCartList,
  reqMemberdelentCart,
  reqMemberPutCart,
  putMemberCartSelectedAPI,
} from '@/services/cart/cart'
import type {
    CartItem } from '@/services/cart/type'
import {
    onShow } from '@dcloudio/uni-app'
import {
    ref } from 'vue'
import {
    useMemberStore } from '@/stores/modules/member'
import type {
    InputNumberBoxEvent } from '@/components/vk-data-input-number-box/vk-data-input-number-box'
import {
    computed } from 'vue'
let useMemberStores = useMemberStore()
//列表数组
let cartList = ref<CartItem[]>([])

//获取购物车列表
let GetCart = async () => {
   
  let res = await reqMemberCartList()
  cartList.value = res.result
}
// 删除购物车
const onDelentCart = (skuId: string) => {
   
  // 弹窗二次确认
  uni.showModal({
   
    content: '是否删除',
    success: async (res) => {
   
      if (res.confirm) {
   
        // 后端删除单品
        await reqMemberdelentCart({
    ids: [skuId] })
        // 重新获取列表
        GetCart()
      }
    },
  })
}
// 修改商品数量
const onChangeCount = (ev: InputNumberBoxEvent) => {
   
  reqMemberPutCart(ev.index, {
    count: ev.value })
}
// 选中状态
const onChangeSelected = (item: CartItem) => {
   
  item.selected = !item.selected
  // 向后端发送请求
  reqMemberPutCart(item.skuId, {
    selected: item.selected })
}
// 全选
let onChangeSelectedAll = () => {
   
  // 全选状态取反
  const _isSelectedAll = !selectdAll.value
  // 前端数据更新
  cartList.value.forEach((item) => {
   
    item.selected = _isSelectedAll
  })
  // 后端数据更新
  putMemberCartSelectedAPI({
    selected: _isSelectedAll })
}

// 计算全选状态
let selectdAll = computed(() => {
   
  return cartList.value.length && cartList.value.every((c) => c.selected)
})

// 计算选中单品列表
let selectedCartList = computed(() => {
   
  return cartList.value.filter((v) => v.selected)
})
// 计算选中总件数
let selectedCartListCount = computed(() => {
   
  return selectedCartList.value.reduce((sum, item) => sum + item.count, 0)
})
// 计算选中总金额
const selectedCartListMoney = computed(() => {
   
  return selectedCartList.value
    .reduce((sum, item) => sum +

最低0.47元/天解锁文章