vue3项目中购物车的实现

实现步骤：

1.获取数据页面渲染（默认复选框全部选中）

2.数量的加减操作，做一次加减操作请求一次接口，重新渲染页面

3.计算所有复选框选中的商品一起合计多少钱？用计算属性computed，可以监听到数量的变化

4.单选接口中有flag标记，全部选中接口中有type标记

5.点击提交订单按钮后，跳转到确认订单页

代码实现：

<script lang="ts" setup>
//从vue中解构出钩子函数onMounted
import { ref, computed } from "vue";
import type { Ref } from 'vue'
//导入接口
import { Cart, cartUpdateNum, removeCart, addOrder, cartSelectOne, cartSelectAll, } from "@/api/cart";
import router from "@/router";
import { Dialog } from 'vant';

//这个接口的类型是依据数据请求获取到的内容来定义的
interface iCart {
  cartid: string
  discount: number
  flag: boolean
  img1: string
  num: number
  originprice: number
  proid: string
  proname: string
  userid: string
}
let cartList: Ref<iCart[]> = ref([])

//页面加载购物车列表获取
const checked = ref(false);//用来控制全选按钮
let isShow = ref(false)
Cart({ userid: String(localStorage.getItem('userId')) }).then((res: any) => {
  if (res.code === '10020') {
    cartList.value = []
  } else {
    //基本数据类型响应时要点value
    cartList.value = res.data
    isShow.value = true
    // every：判断数组内是否每一个都满足条件.返回值是true或者false
    let flag = cartList.value.every((item) => {
      return item.flag === true
    })
    checked.value = flag;
  }
})

//把获取购物车列表封装成函数
function getCartList() {
  Cart({
    userid: String(localStorage.getItem('userId'))
  }).then(res => {
    cartList.value = res.data
  })
}
// 增加购物车商品数量
function addNum(cartid: string, num: number) {
  cartUpdateNum({
    cartid,
    num: ++num
  }).then(res => {
    getCartList()
  })
}

// 减少购物车商品数量
function decreaseNum(cartid: string, num: number) {
  if (num > 1) {
    cartUpdateNum({
      cartid,
      num: --num
    }).then(res => {
      Cart({
        userid: String(localStorage.getItem('userId'))
      }).then(res => {
        cartList.value = res.data
      })
    })
  } else {
    removeCart({ cartid }).then((res: any) => {
      if (res.code == '10020') {
        cartList.value = [];
      } else {
        Cart({
          userid: String(localStorage.getItem('userId'))
        }).then((res: any) => {
          if (res.code == '10020') {
            cartList.value = [];
          } else {
            cartList.value = res.data
          }
        })
      }
    })
  }
}

// 计算总价（用计算属性进行监听）
let totalprice = computed(() => {
  let total = 0;
  cartList.value.forEach(item => {
    if (item.flag) total = item.originprice * item.num + total;
  })
  return total * 100;
})

// 点击复选框时改变该商品的选中状态
function changeFlag(cartid: string, flag: boolean) {
  cartSelectOne({ cartid, flag }).then(() => {
    // every：判断数组内是否每一个都满足条件
    let flag = cartList.value.every((item) => {
      return item.flag === true
    })
    checked.value = flag;
    getCartList()
  })
}

// 全选(接口里有定义type表示为是否全部选中)
function allcheck() {
  cartList.value.forEach(() => {
    if (checked.value === true) {
      cartSelectAll({
        userid: String(localStorage.getItem('userId')),
        type: true
      }).then(() => {
        getCartList()
      })
    } else {
      //没有全部选中
      cartSelectAll({
        userid: String(localStorage.getItem('userId')),
        type: false
      }).then(() => {
        getCartList()
      })
    }
  })
}

// position 为关闭时点击的位置
function beforeClose({ position, name }: any) {
  switch (position) {
    case 'left':
    case 'cell':
    case 'outside':
      return true;
    case 'right':
      return new Promise(() => {
        Dialog.confirm({
          title: '确定删除吗？',
        }).then(() => {
          // console.log(name);
          //发送cartid给服务器
          removeCart({ cartid: name }).then((res: any) => {
            //更新购物车列表
            Cart({ userid: String(localStorage.getItem('userId')) }).then((res: any) => {
              //基本数据类型响应时要点value
              cartList.value = res.data
            })
          })
        });
      });
  }
};




//点击提交订单按钮跳转至确认订单页面
function addNewOrder() {
  addOrder({ userid: String(localStorage.getItem('userId')) }).then((res: any) => {
    console.log(res, 888);
    //跳转到结算订单页面
    router.push(
      { path: '/order', query: { time: res.time } })
  })
}
</script>

<template>
  <div class="box">
    <header class="header"> 购物车 </header>
    <div class="content" v-if="isShow">
      <div v-for="item in cartList" class="listbox">
        <van-swipe-cell :name="item.cartid" :before-close="beforeClose">
          <div class="item-box">
            <!-- 单选框 -->
            <van-checkbox v-model="item.flag" class="checked" @click="changeFlag(item.cartid, item.flag)" />

            <!-- 图片展示区 -->
            <van-card :num="item.num" :price="item.originprice" :title="item.proname" class="card" :thumb="item.img1">

              <!-- 利用footer插槽插入加减符号 -->
              <template #footer>
                <van-button size="mini" @click="addNum(item.cartid, item.num)">
                  <van-icon name="plus" />
                </van-button>
                <van-button size="mini" @click="decreaseNum(item.cartid, item.num)">
                  <van-icon name="minus" />
                </van-button>
              </template>

            </van-card>

          </div>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" />
          </template>
        </van-swipe-cell>
      </div>
    </div>
    <div class="content" v-else>
      <h3>亲，还没有订单哦！</h3>
    </div>
    <!-- 提交订单栏 -->
    <van-submit-bar :price="totalprice" button-text="提交订单" class="submit-bar" @submit="addNewOrder">
      <van-checkbox v-model="checked" @click="allcheck">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<style lang="scss" scoped>
.content {
  overflow: auto;
  flex: 1;
}

.listbox {
  margin-bottom: 5px;
}

.item-box {
  display: flex;
  align-items: center;

  .checked {
    margin: 0 10px;
  }

  .card {
    flex: 1;
    background-color: white;
    margin: 0;
  }
}

.submit-bar {
  position: static;
}

.delete-button {
  height: 100%;
}

.van-button--danger {
  border: 2px solid #fff;
}
</style>

面