Vue3电商项目实战-购物车模块7【20-登录后-批量删除、21-登录后-选中状态&修改数量、22-登录后-全选反选、23-登录后-修改规格、24-下单结算】

---

20-登录后-批量删除

目标：完成批量删除选中商品，完成清空失效的商品

大概步骤：

• 完成cart.js模块中的批量删除actions的登录状态下逻辑

落的代码：

    // 批量删除选中商品
    batchDeleteCart (ctx, isClear) {
      return new Promise((resolve, reject) => {
        if (ctx.rootState.user.profile.token) {
+          // 登录 TODO
+          // 得到需要删除的商品列表（失效，选中）的skuId集合
+          const ids = ctx.getters[isClear ? 'invalidList' : 'selectedList'].map(item => item.skuId)
+          deleteCart(ids).then(() => {
+            return findCartList()
+          }).then((data) => {
+            ctx.commit('setCartList', data.result)
+            resolve()
+          })
        } else {

注意：views/cart/index.vue

    // 批量删除
    const batchDeleteCart = (isClear) => {
      // 如果要做批量删除的列表无数据，阻止提示下没有你要删除的商品。
      // 清空失效商品：目前传人[]数据，会清空说有的商品包括有效商品（后台BUG）

21-登录后-选中状态&修改数量

目的：实现登录后的选中操作。

大致步骤：

• 编写修改购物车商品的API接口函数
• 在actions原有预留TODO位置修改购物车商品

落地代码：

• 编写修改购物车商品的API接口函数 src/api/cart.js

/**
 * 修改购物车商品的状态和数量
 * @param {String} goods.skuId - 商品sku
 * @param {Boolean} goods.selected - 选中状态
 * @param {Integer} goods.count - 商品数量
 * @returns Promise
 */
export const updateCart = (goods) => {
  return request('/member/cart/' + goods.skuId, 'put', goods)
}

• 在actions原有预留TODO位置修改购物车商品 src/store/module/cart.js

    // 修改购物车商品
    updateCart (ctx, goods) {
      // goods 中：必须有skuId，其他想修改的属性 selected  count
      return new Promise((resolve, reject) => {
        if (ctx.rootState.user.profile.token) {
+          // 登录 TODO
+          updateCart(goods).then(() => {
+            return findCartList()
+          }).then((data) => {
+            ctx.commit('setCartList', data.result)
+            resolve()
+          })
        } else {

22-登录后-全选反选

目标：完成有效商品的全选与反选功能

大概步骤：

• 准备全选与反选的API接口函数
• 去完善actions，全选与反选的中的 登录 TODO 的地方

落的代码：

src/api/cart.js

/**
 * 全选反选
 * @param {Boolean} selected - 选中状态
 * @param {Array<string>} ids - 有效商品skuId集合
 * @returns Promise
 */
export const checkAllCart = ({ selected, ids }) => {
  return request('/member/cart/selected', 'put', { selected, ids })
}

src/store/modules/cart.js

    // 做有效商品的全选&反选
    checkAllCart (ctx, selected) {
      return new Promise((resolve, reject) => {
        if (ctx.rootState.user.profile.token) {
+          // 登录 TODO
+          const ids = ctx.getters.validList.map(item => item.skuId)
+          checkAllCart({ selected, ids }).then(() => {
+            return findCartList()
+          }).then((data) => {
+            ctx.commit('setCartList', data.result)
+            resolve()
+          })
        } else {

23-登录后-修改规格

目的：实现登录后的修改规格操作。

大致步骤：

• 由于没有修改接口的接口。通过删除旧商品，插入新商品，完成修改规格。
• 去完善actions，修改规格的 登录 TODO 的地方

落地代码：

• 在actions原有预留TODO位置修改购物车商品规格 src/store/module/cart.js

    // 修改sku规格函数
    updateCartSku (ctx, { oldSkuId, newSku }) {
      return new Promise((resolve, reject) => {
        if (ctx.rootState.user.profile.token) {
+          // 登录 TODO
+          // 1. 获取原先商品的数量
+          // 2. 删除原先商品
+          // 3. 获取修改的skuId 和 原先商品数量 做一个加入购物车操作
+          // 4. 更新列表
+          const oldGoods = ctx.state.list.find(item => item.skuId === oldSkuId)
+          deleteCart([oldSkuId]).then(() => {
+            return insertCart({ skuId: newSku.skuId, count: oldGoods.count })
+          }).then(() => {
+            return findCartList()
+          }).then((data) => {
+            ctx.commit('setCartList', data.result)
+            resolve()
+          })
        }

24-下单结算

目的：去结算，未登录给确认框提示。

大致需求：

• 绑定下单结算按钮指定处理函数
• 函数中：
  • 判断是否选中有效商品。
  • 判断是否登录，给确认框提示，点击确认
  • 满足以上条件去填写订单(结算)页面。
  • member/xxx 的域名需要登录，所以做路由拦截。

落的代码：

• 下单结束点击后逻辑 src/views/cart/index.vue

import Message from '@/components/library/Message'

    // 跳转结算页面
    const router = useRouter()
    const goCheckout = () => {
      // 1. 判断是否选择有效商品
      // 2. 判断是否已经登录，未登录 弹窗提示
      // 3. 进行跳转 （需要做访问权限控制）
      if (store.getters['cart/selectedTotal'] === 0) return Message({ text: '至少选中一件商品才能结算' })
      if (!store.state.user.profile.token) {
        Confirm({ text: '下单结算需要登录，您是否去登录？' }).then(() => {
          // 点击确认
          router.push('/member/checkout')
        }).catch(e => {})
      } else {
         router.push('/member/checkout')
      }
    }
  return { checkOne, checkAll, deleteCart, batchDeleteCart, changeCount, updateCartSku, goCheckout }  

<XtxButton type="primary" @click="goCheckout()">下单结算</XtxButton>

• 路由拦截 src/router/index.js

import store from '@/store'

// 前置导航守卫
router.beforeEach((to, from, next) => {
  // 用户信息
  const { token } = store.state.user.profile
  // 跳转去member开头的地址却没有登录
  if (to.path.startsWith('/member') && !token) {
    next({ path: '/login', query: { redirectUrl: to.fullPath } })
  }
  next()
})