实现购物车

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情

json里边设置一下页面标题"navigationBarTitleText": "购物车"

界面组成

上方由一个按钮跳转到收货地址管理， 中间为购物车商品信息， 下方固定一个工具栏

• 全选(反选)
• 合计(价钱)
• 结算(数量)跳转到支付页并生成订单

界面编写

分享是将一个按钮隐藏且将其定位在分享处,客服也是一样的 加入购物车:如果已经加入则提示已经加入....

<!--pages/cart/cart.wxml-->
<view>
    <button><navigator url="/pages/addressList/addressList">+添加收货地址</navigator></button>
</view>
<view>
<view class="title">优购生活馆</view>
    <checkbox-group bindchange="handleCheck">
        
        <view class="goods" wx:if="{{cartList.length!=0}}" wx:for="{{cartList}}">
            <checkbox value="{{item.goods_id}}" checked="{{state}}" ></checkbox>
            <image src="{{item.goods_big_logo}}"></image>
            <navigator url="/pages/goods_detail/goods_detail?goods_id={{item.goods_id}}">
            <view class="context">{{item.goods_name}}
                <view class="price">
                ￥{{item.goods_price}}
                <view class="btn">
                <button size="mini" catchtap="removenum" data-index="{{index}}" data-money="{{item.goods_price}}">-</button>
                <text>{{shu[index]}}</text>
                <button size="mini" catchtap="addnum" data-index="{{index}}" data-money="{{item.goods_price}}">+</button>
                </view>
                </view>
            </view>
            </navigator>
        </view>
        
    </checkbox-group>

    <view class="page_over">
        <checkbox-group style="width: 150rpx;" bindchange="checkboxChange">
            <checkbox value="all">全选</checkbox>
        </checkbox-group>
        <view class="sum">合计:<text>￥{{sum}}</text>
            <view class="money">包含运费</view>
        </view>
        <view class="go" bindtap="over">
        结算({{num}})
        </view>
    </view>
</view>

样式编写

.title{
    font-size: 35rpx;
    margin-top: 20rpx;
    margin-left: 15rpx;
}
.goods{
    display: flex;
    width: 100vh;
    margin-top: 30rpx;
    padding: 10rpx;
    margin-bottom: 100rpx;
    border-bottom: #f1f1f1 solid 3rpx;
    border-top: #f1f1f1 solid 3rpx;
}
.goods image{
    width: 18%;
    height: 200rpx;
}
.goods .context{
    margin-left: 10rpx;
    width: 450rpx;
    height: 220rpx;
    overflow:hidden;
}
.goods .context .price{
    color: var(--themeColor);
    font-size: 40rpx;
    margin-top: 70rpx;
}
.goods .context .btn{
    color: black;
    position: relative;
    text-align: center;
    left: 27%;
    bottom: 60rpx;
}
.goods .context .btn text{
    position: relative;
    bottom: 15rpx;
}
.page_over{
    display: flex;
    position: fixed;
    bottom: 1rpx;
    width: 100%;
}
.page_over .sum{
    margin-left: 40%;
    width: 220rpx;
    font-size: 30rpx;
}
.page_over .sum .money{
    color: #666666;
    margin-left: 70rpx;
    font-size: 25rpx;
}
.page_over .go{
    background-color: var(--themeColor);
    text-align: center;
    padding-top: 20rpx;
    width:200rpx;
    height: 80rpx;
}
.page_over .sum text{
    color: red;
}

JS方法编写

声明:本思路为第一时间想到的写法,并不是只有这一种写法,
后续理解了可自行优化,
tip:这是我写的最辣鸡的代码了😄

data属性:

• state：是否全选状态
• num:结算数量
• cartList:购物列表
• sum:总价钱
• shu:[] 数组存放对应数量
• selcart:[]数组存放被选中的商品

方法:

• handleCheck:复选框选中取消选中触发
• checkboxChange:全选反选
• over：结算
• removenum :-数量
• addnum：+数量
• onShow：生命周期函数--监听页面显示

// pages/cart/cart.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        state:false,
        num:0,  //结算数量
        cartList:[],
        sum:0,  //总价钱
        shu:[],   //数量
        selcart:[]//被选中的商品
    },
    //复选框选中取消选中触发
    handleCheck(e){
        let goods_id=e.detail.value;
        if(goods_id!=undefined){
        console.log(goods_id);
        var price=goods_id;
        var nowpic=[];
        this.data.cartList.map(item=>{
            price.map(item1=>{
                if(item.goods_id==item1){
                    nowpic.push(item.goods_price)
                }
            })
        })
        console.log(nowpic);
        var money=0;
        var zong=0;
        var sumindex=[];//存放选中的下标
        var arr=this.data.cartList;
        for(var i=0;i<price.length;i++){
            var index=this.data.cartList.findIndex((item)=>{
                return item.goods_id==price[i];
            })
            sumindex.push(index);
            console.log('index='+index);
        }
        console.log(sumindex);
        for(let k=0;k<this.data.cartList.length;k++){
            arr[k].checked=false;
        }
        if(sumindex.length!=0 && price!=undefined){
            for(var j=0;j<sumindex.length;j++){
                zong+=this.data.shu[sumindex[j]]
                arr[sumindex[j]].checked=true;
                this.setData({
                    cartList:arr
                })
            }
            for(let i=0;i<nowpic.length;i++){
                console.log('当前money='+nowpic[i]+'数量:'+this.data.shu[sumindex[i]]);
                money+=parseInt(nowpic[i]*this.data.shu[sumindex[i]]);
            }
        } 
        this.setData({
            num:zong,
            sum:money,
            selcart:sumindex
        })
        }
    },
    //全选反选
    checkboxChange(e){
        if(e.detail.value.length==1){
            var price=0;
            var zong=0;
            var sumindex=[];
            for(let i in this.data.cartList){
                this.data.cartList[i].checked=true;
                price+=this.data.cartList[i].goods_price*this.data.shu[i]
                zong+=this.data.shu[i]
                sumindex.push(i);
            }
            this.setData({
                state:true,
                num:zong,
                sum:price,
                selcart:sumindex
            })
        }else{
            for(let i in this.data.cartList){
            this.data.cartList[i].checked=false;
            }
            this.setData({
                state:false,
                num:0,
                sum:0,
                selcart:[]
            })
        }
    },
    //结算
    over(){
        if(this.data.selcart.length!=0){
            var sz=[];
            var orderCode=0;
             // 6位随机数(加在时间戳后面)
            for (var i = 0; i < 6; i++)
            { 
            orderCode += Math.floor(Math.random() * 10);
            }
            // 时间戳(用来生成订单号)
            orderCode = 'D' + new Date().getTime() + orderCode;
            
            // 打印
            console.log(orderCode)// D1601545805958923658

            for(let i=0;i<this.data.selcart.length;i++){
                console.log('selcart',this.data.selcart[i]);
                console.log(this.data.cartList[this.data.selcart[i]],'对应数量:'+this.data.shu[this.data.selcart[i]],'总价钱:'+this.data.sum,'总数量:'+this.data.num);
                let good={
                    goods:this.data.cartList[this.data.selcart[i]],
                    shu:this.data.shu[this.data.selcart[i]],
                    sum:this.data.sum,
                    num:this.data.num,
                    orderid:orderCode
                }
                sz.push(good);
                wx.setStorageSync('payList', sz);
            }
            var cart=wx.getStorageSync('cart');
                // cart.splice(this.data.selcart[i],1);
                this.data.selcart.sort(function(a, b) { return b - a});//将数组倒过来防止splice删除自动往前排
                this.data.selcart.forEach(function(index) {cart.splice(index, 1)})
                console.log('cart',cart);
                wx.setStorageSync('cart',cart);
            wx.showToast({
                title: '正在生成订单',
                icon:"loading",
                duration: 800//持续的时间
            })
            wx.navigateTo({
              url: '/pages/pay/pay',
            })
        }else{
            wx.showToast({
                title: '请至少选择一件商品',
                icon:"error",
                duration: 1000//持续的时间
            })
        }
    },
    //-数量
    removenum(e){
        let index=e.currentTarget.dataset.index;
        let qian=e.currentTarget.dataset.money;
        if(this.data.shu[index]==1){
            wx.showToast({
                title: '至少购买一件',
                icon: 'error',
                duration: 1000//持续的时间
            })
        }else{
            let arr=this.data.shu;
            arr[index]-=1;
            console.log(this.data.cartList[index].checked);
            if(this.data.cartList[index].checked){
                this.setData({
                    sum:this.data.sum-qian,
                    num:this.data.num-1
                })
            }
            this.setData({
                shu:arr,
            })
        }
    },
    //+数量
    addnum(e){
        let index=e.currentTarget.dataset.index;
        let qian=e.currentTarget.dataset.money;
        let arr=this.data.shu;
        arr[index]+=1;
        console.log(this.data.cartList[index].checked);
        if(this.data.cartList[index].checked){
            this.setData({
                sum:this.data.sum+qian,
                num:this.data.num+1
            })
        }
        this.setData({
            shu:arr
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
       
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        let cart=wx.getStorageSync('cart') || [];
        let arr=[];
        console.log(cart);
        if(cart!='[]'){
            for(let i=0;i<cart.length;i++){
                arr.push(1);
            }
        }
        this.setData({
            cartList:cart,
            shu:arr,
            state:false,
            sum:0,
            num:0
        })
    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})

效果图

下方价钱与数量会一yi对应显示~

成功实现购物车~