UNIAPP实战项目笔记70 购物车删除商品的前后端交互

川长思鸟来 2024-03-22 16:03 101阅读 0赞

## UNIAPP实战项目笔记70 购物车删除商品的前后端交互 ##

### 思路 ###

> 需要用到vuex  
> 传id值到后端,删除指定id购物车数据

### 案例截图 ###

> 购物车商品编辑页面

![在这里插入图片描述][25b95f28454d485c8b22edd201f3ba92.png]

### 代码 ###

#### 后端代码 index.js ####

#### 前端代码 cart.js ####

import $http from '@/common/api/request.js'
    export default{
        
        state:{
        
            list:[
                    /* {
                        id:1,
                        name:"332经济法能聚聚会技能大赛 经济法能聚聚会技能大赛",
                        color:"颜色：嘿嘿嘿激活",
                        imgUrl:"../../static/logo.png",
                        pprice:"27",
                        num:1,
                        checked:false
                    },{
                        id:2,
                        name:"032经济法能聚聚会技能大赛 经济法能聚聚会技能大赛",
                        color:"颜色：嘿嘿嘿激活",
                        imgUrl:"../../static/logo.png",
                        pprice:"48",
                        num:6,
                        checked:false
                    } */
                ],
            selectedList:[]
            
        },
        getters:{
        
            // 判断是否 全选
            checkedAll(state){
        
                return state.list.length === state.selectedList.length;
            },
            // 合计 结算数量
            totalCount(state){
        
                let total = {
        
                    pprice:0,
                    num:0
                }
                state.list.forEach(v=>{
        
                    // 是否选中
                    if(state.selectedList.indexOf(v.id) > -1){
        
                        // 合计
                        total.pprice += v.pprice*v.num;
                        // 结算数量
                        total.num = state.selectedList.length;
                    }
                })            
                
                return total;
            }
        },
        mutations:{
        
            // 请求到数据赋值操作
            initGetData(state,list){
        
                state.list = list;
            },
            // 全选
            checkAll(state){
        
                state.selectedList = state.list.map(v=>{
        
                    v.checked = true;
                    return v.id;
                })
            },
            // 全不选
            unCheckAll(state){
        
                state.list.forEach(v=>{
        
                    v.checked = false;
                })
                state.selectedList = [];
            },
            // 单选
            selectedItem(state,index){
        
                let id = state.list[index].id;
                let i = state.selectedList.indexOf(id);
                // 如果selectList已经存在就代表他之前的选中状态,checked=false,并且在selectedList删除
                if (i>-1) {
        
                    state.list[index].checked = false;
                    return state.selectedList.splice(i,1);
                }
                // 如果之前没有选中,checked=true,把当前的id添加到selectedList
                state.list[index].checked = true;
                state.selectedList.push(id);
            },
            // 
            delGoods(state){
        
                state.list = state.list.filter(v=>{
        
                    return state.selectedList.indexOf(v.id) === -1;
                })
            },
            // 加入购物车
            addShopCart(state, goods){
        
                state.list.push(goods);
            }
        },
        actions:{
        
            checkedAllFn({
         commit,getters}){
        
                getters.checkedAll ? commit("unCheckAll") : commit("checkAll")
            },
            delGoodsFn({
         commit,state}){
        
                
                uni.showModal({
        
                    content:'确认删除吗?',
                    success: () => {
        
                        $http.request({
        
                            url:'/deleteCart',
                            method:"POST",
                            header:{
        
                                token:true
                            },
                            data:{
        
                                goods_id:state.selectedList
                            }
                        }).then((res)=>{
        
                            
                            commit('delGoods');
                            commit("unCheckAll");
                            uni.showToast({
        
                                title:'删除成功',
                                icon:"none"
                            })
                        }).catch(()=>{
        
                            uni.showToast({
        
                            title:'请求失败',
                            icon:'none'
                            })
                        })
                    }
                })
                
            }
        }
    }

#### 目录结构 ####

##### 前端目录结构 #####

*  manifest.json 配置文件： appid、logo…
 *  pages.json 配置文件： 导航、 tabbar、 路由
 *  
 *  main.js vue初始化入口文件
 *  App.vue 全局配置：样式、全局监视
 *  static 静态资源：图片、字体图标
 *  page 页面
    
     *  index
        
         *  index.vue
     *  list
        
         *  list.vue
     *  my
        
         *  my.vue
     *  my-config
        
         *  my-config.vue
     *  my-config
        
         *  my-config.vue
     *  my-add-path
        
         *  my-add-path.vue
     *  my-path-list
        
         *  my-path-list.vue
     *  search
        
         *  search.vue
     *  search-list
        
         *  search-list.vue
     *  shopcart
        
         *  shopcart.vue
     *  details
        
         *  details.vue
     *  my-order
        
         *  my-order.vue
     *  confirm-order
        
         *  confirm-order.vue
     *  payment
        
         *  payment.vue
     *  payment-success
        
         *  payment-success.vue
     *  login
        
         *  login.vue
     *  login-tel
        
         *  `login-tel.vue`
     *  login-code
        
         *  `login-code.vue`
 *  components 组件
    
     *  index
        
         *  Banner.vue
         *  Hot.vue
         *  Icons.vue
         *  indexSwiper.vue
         *  Recommend.vue
         *  Shop.vue
         *  `Tabbar.vue`
     *  common
        
         *  Card.vue
         *  Commondity.vue
         *  CommondityList.vue
         *  Line.vue
         *  ShopList.vue
     *  order
        
         *  order-list.vue
     *  uni
        
         *  uni-number-box
            
             *  uni-number-box.vue
         *  uni-icons
            
             *  uni-icons.vue
         *  uni-nav-bar
            
             *  uni-nav-bar.vue
         *  mpvue-citypicker
            
             *  mpvueCityPicker.vue
 *  common 公共文件：全局css文件 || 全局js文件
    
     *  api
        
         *  request.js
     *  common.css
     *  uni.css
 *  store vuex状态机文件
    
     *  modules
        
         *  cart.js
         *  path.js
         *  user.js
     *  index.js

[25b95f28454d485c8b22edd201f3ba92.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/76d2a8ade8fe4599ae69a550d331c313.png