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  countreturn 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()
})