微信小程序 购物车流程

购物车流程

一、需求分析

a:全选，单选，根据选中的计算数目和总价

b:单个商品加减

c:删除一个商品

wxml 布局

<view>
        <view v-if="flag">
            购物车空空如也请<navigator open-type="switchTab" url="/pages/home/home">选购 </navigator>

        </view>
        <view v-else>

            <view class="container">
                <checkbox-group @change="selectedall">
                    <checkbox  value="cb" :checked="isAllchecked" />
                </checkbox-group>
                 <view class="cartitem" v-for="(item,index) of cartlist" :key="index">
                    <checkbox-group @change="selected(item)">
                        <checkbox  value="cb" :checked="item.flag" />
                    </checkbox-group>

                    <image class="img" :src="item.proimg" mode=""></image>
                    <view class="jieshao">
                        <view class="proname">
                                {{item.proname}}
                        </view>
                    <view class="proprice">
                        ￥{{item.price}}
                    </view>
                        <button  size="mini"ass="mini-btn" @click="add(item)" > + </button>
                            {{item.num}}
                        <button size="mini" class="mini-btn" @click="reduce(item)" > - </button>
                        <button  class="mini-btn del" type="warn" size="mini"  @click="del(item,index)">删除</button>
                    </view>

                    </view>
            </view>
        </view>
        <view> 总数：{{totalNum}}</view>
        <view> 总价：{{totalPrice}}</view>
    </view>

计算总价

    //总价格
            totalPrice() {
                let totalPrice =0
                this.cartlist.map(item=>{
                    if(item.flag){
                        totalPrice+=item.num*item.price
                    }else{
                        totalPrice+=0
                    }

                })
                return totalPrice
            }

选择事件

点击时选中，再点击又变成没选中状态。在赋值列表数据之前 给每一项添加一个flag字段来控制选中和未选中状态

选择事件

    // 单个选中
            selected(item){
                console.log("test",item)
                item.flag = !item.flag
                console.log(this.cartlist)
                //如果某一项没被选中 那么全选不选中
                //如果单独某一先被选中了 检测其他是否选中 如果都选中 全选选中
                if(!item.flag){
                    this.isAllchecked=false
                }else{
                    //检测其余项是否被选中
                    const test =this.cartlist.every(item=>{
                        return item.flag===true
                    })
                    if(test){
                        this.isAllchecked=true
                    }else{
                        this.isAllchecked=false
                    }
                }

全选事件

全选就是根据全选状态 isAllchecked 去改变每个商品的 selected

    // 全选

            selectedall() {
                this.isAllchecked=!this.isAllchecked
                console.log(this.isAllchecked)
                //为真 修改数据每一项的值都为真
                    if(this.isAllchecked){
                        this.cartlist.map(item=>{
                            item.flag = true
                        })
                    }else{
                        this.cartlist.map(item=>{
                            item.flag=false
                        })
                    }
            },

增减数量

    // 减少
            reduce(item){
                let num =item.num
                //如果当前个数为1 不操作  如果大于1 减一草错
                if(num> 1){
                    num-=1
                }else{
                    num = 1
                }
                let userid =uni.getStorageSync("userid")
                let token =uni.getStorageSync("token")
                request({
                    url:"/cart/update",
                    data:{
                        token,
                        cartid:item.carrtid,
                        num
                    }

                }).then(res=>{
                    if(res.data.code==="10019"){
                        toast({title:"请先登录"})
                        uni.navigateTo({
                            url:"/pages/login/login"
                        })
                    }else{
                        toast({title:"修改数量成功"})
                        if(num>1){
                            item.num-=1 //更改数量
                        }else {
                            item.num=0
                        }

                    }
                })

            },

            /* 增加 */
            add(item){

                let num =item.num
                //如果当前个数为1 不操作  如果大于1 减一草错
                if(num> 1){
                    num+=1
                }else{
                    num = 1
                }
                let userid =uni.getStorageSync("userid")
                let token =uni.getStorageSync("token")
                request({
                    url:"/cart/update",
                    data:{
                        token,
                        cartid:item.carrtid,
                        num
                    }

                }).then(res=>{
                    if(res.data.code==="10019"){
                        toast({title:"请先登录"})
                        uni.navigateTo({
                            url:"/pages/login/login"
                        })
                    }else{
                        toast({title:"修改数量成功"})
                        item.num+=1 //更改数量
                    }
                })

            },

删除事件

    // 删除
            del(item,index){
                let token=uni.getStorageSync("token")
                console.log(token)
                console.log(item.cartid)
                request({
                    url:"/cart/delete",
                    data:{
                        token,
                        cartid:item.cartid
                    }
                }).then(res=>{
                    console.log(res)
                    if(res.data.code === "10019"){
                        uni.navigateTo({
                            url:"/pages/login/login"
                        })
                        toast({title:"请先登录"})
                    }else{
                        toast({title:"删除数据成功"})
                        this.cartlist.splice(index,1)//删除当前的
                        //全部数据删除后
                        this.cartlist.length===0 ? this.flag=true : this.flag=false
                    }
                })
            },

完成图