网站教育机构排行前十名,建筑工程网5177517,h5自适应企业网站源码,做音乐网站的栏目文章目录20-登录后-批量删除21-登录后-选中状态修改数量22-登录后-全选反选23-登录后-修改规格24-下单结算20-登录后-批量删除 目标#xff1a;完成批量删除选中商品#xff0c;完成清空失效的商品 大概步骤#xff1a;
完成cart.js模块中的批量删除actions的登录状态…
文章目录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) {// 如果要做批量删除的列表无数据阻止提示下没有你要删除的商品。// 清空失效商品目前传人[]数据会清空说有的商品包括有效商品后台BUG21-登录后-选中状态修改数量 目的实现登录后的选中操作。 大致步骤
编写修改购物车商品的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) {// 登录 TODOupdateCart(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 {Arraystring} 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) {// 登录 TODOconst 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 typeprimary clickgoCheckout()下单结算/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()
})
