shoppingcart.wxml

<!--pages/shoppingcart/shoppingcart.wxml-->
<view class="content">
    <view class="info">
    <view class="line"></view>
    <view class="receive">
    購(gòu)物
    </view>
    <view class="line"></view>
    <view class="items">
    <checkbox-group bindchange="checkboxChange">
    <block wx:for="{{orders}}">
    <view class="item">
        <view class="icon">
        <label for="{{item.id}}">
        <checkbox id="{{item.id}}" value="{{item.id}}" checked=
        "{{item.selected}}" hidden/>
        <icon type="{{item.selected==true?'success':'circle'}}"
        color="#E4393C" data-value="{{item.id}}" size="20" />
        </label>
        </view>
        <view class="pic">
        <image src="{{item.pic}}" style="width:80px;height:80px;">
        </image>
        </view>
        <view class="order">
        <view class="title">{{item.name}}</view>
        <view class="desc">
        <view>數(shù)量: {{item.quantity}}</view>
        </view>
        <view class="priceInfo">
        <view class="price">￥{{item.nowPrice}}</view>
        <view class="minus" id="{{item.id}}" bindtap="minusOrders">-</view>
        <view class="count">{{item.quantity}}</view>
        <view class="add" id="{{item.id}}" bindtap="addOrders">+
        </view>
        </view>
        </view>
        </view>
        <view class="line"></view>
        </block>
        </checkbox-group>
        <checkbox-group bindchange="checkAll">
        <view class="totalInfo">
        <view class="all">
        <view>
        <label for="boxAll">
        <checkbox checked="{{selectedAll}}" id="boxAll" hidden/>
        <icon type="{{selectedAll==true?'success':'circle'}}"
        color="#E4393C" data-value="{{item.id}}" size="20" />
        </label>
    </view>
    <view>
    全選
    </view>
    </view>
    <view class="amount">
    <view class="total">
    總計(jì):￥{{totalPrice}}元
    </view>
    <view>
    不含運(yùn)費(fèi)，已優(yōu)惠￥0.00
    </view>
    </view>
    <view class="opr">去結(jié)算</view>
    </view>
    </checkbox-group>
    </view>
    </view>
    </view>
    

shoppingcart.js

// pages/shoppingcart/shoppingcart.js
Page({
    data:{
        orders: [], //加人到購(gòu)物車?yán)锏纳唐芳?        selectedAll:false, //全選按鈕標(biāo)志位，true 代表全選選中，false代表全選未選中
        totalPrice:0 //總金額
        
    },
    onLoad:function (options) {
        this.loadOrders();
        wx.setNavigationBarTitle({ //動(dòng)態(tài)修改頁(yè)面標(biāo)題文字
            title: '購(gòu)物車'
        })
        wx.setNavigationBarColor({
            frontColor: '#000000', //導(dǎo)航文字顏色
            backgroundColor: '#ffffff', //導(dǎo)航背景色
            animation: { //動(dòng)畫效果
                duration: 400,
                timingFunc: 'easeIn'
            }
        })
    },
    loadOrders:function () { //加載購(gòu)物車?yán)锏纳唐?        var orders = wx.getStorageSync('orders'); //從本地級(jí)存數(shù)據(jù)orders里獲取數(shù)據(jù)
        var newOrders = [];
        var totalPrice = 0;
        var selectedAll = true;
        for (var i = 0; i < orders.length; i++) {
            var order = orders[i];
            if (order.selected) { //購(gòu)物車?yán)锏拿考唐范加幸粋€(gè)selected屬性，selected等于true時(shí)代表這件商品被選中，要計(jì)算金額
                totalPrice += order.nowPrice * order.quantity; //計(jì)算選中商品的金額
            } else {
                selectedAll = false; //購(gòu)物車?yán)锏纳唐?，如果有一一件是未選中的，selectedAll全選標(biāo)志位就等于false
            }
            newOrders.push(order);
        }
        wx.setStorageSync("orders", newOrders); //重新加入緩存
        this.setData({totalPrice:totalPrice,orders:newOrders,selectedAll: selectedAll});//數(shù)據(jù)綁定到頁(yè)面里
    },
    checkboxChange: function (e) { //每件商品前的復(fù)選框操作函數(shù)
        var ids = e.detail.value; //會(huì)把選中的復(fù)選框的id值，以數(shù)組集合的形式傳遞過(guò)來(lái)
        var orders = wx.getStorageSync('orders');
        var totalPrice = 0;
        var newOrders = [];
        for (var i = 0; i < orders.length; i++) {
            var order = orders[i];
            var flag = true;
            for (var j = 0; j < ids.length; j++) {
                if (order.id == ids[j]) { //傳遞過(guò)來(lái)的ids數(shù)組集合值，都是選中的 商品，需要計(jì)算總的金額
                    totalPrice += order.nowPrice * order.quantity;
                    order.selected = true; //代表該商 品是選中狀態(tài)
                    flag = false; //代表該商品是選中狀態(tài)
                }
            }
            if (flag) { //代表該商品是未選中狀態(tài)

                order.selected = false;
            }
            newOrders.push(order);
        }
        wx.setStorageSync("orders", newOrders); //重新加人緩存數(shù)據(jù)
        this.loadOrders();//重新加載頁(yè)面
    }, 
    checkAll: function (e) { //全選復(fù)選框操作函數(shù)
        var orders = wx.getStorageSync("orders");
        console.log(e);
        var newOrders = [];
        var selectedAll = this.data.selectedAll;
        for (var i = 0; i < orders.length; i++) {
            var order = orders[i];
            if (selectedAll) { //如果當(dāng)前狀態(tài)值是全選中， 那么再單擊的時(shí)候，全選復(fù)選框應(yīng)該為未選中狀態(tài)
                order.selected = false;
            } else {
                order.selected = true;
            }
            newOrders.push(order);
        }
        wx.setStorageSync("orders", newOrders) //重新加入緩存數(shù)據(jù)
        this.loadOrders(); //重新加載頁(yè)面
    },
    addOrders: function (e) { //添加商品數(shù)量 函數(shù)
        var id = e.currentTarget.id;
        var orders = wx.getStorageSync('orders');
        var addOrders = new Array();
        for (var i = 0; i < orders.length; i++) {
            var order = orders[i];
            if (order.id == id) {
                var quantity = order.quantity;
                order.quantity = quantity + 1; //將該件商品數(shù)量加1
            }
            addOrders[i] = order;
        }
        wx.setStorageSync('orders', addOrders); //重新加人緩存數(shù)據(jù)
        this.loadOrders(); //重新加載頁(yè)面
    },

    minusOrders: function (e) { //減少商品數(shù)量函數(shù)
        console.log(e);
        var id = e.currentTarget.id;
        var orders = wx.getStorageSync('orders');
        var addOrders = new Array();
        var add = true;
        for (var i = 0; i < orders.length; i++) {
            var order = orders[i];
            if (order.id == id) {
                var count = order.quantity;
                if (count >= 2) {
                    order.quantity = count - 1; //將該件商 品數(shù)量減1
                }
            }
            addOrders[i] = order;
        }
        wx.setStorageSync('orders', addOrders); //重新加人緩存數(shù)據(jù)
        this.loadOrders(); //重新加載頁(yè)面
    }
    

})

shoppingcart.wxss

/* pages/shoppingcart/shoppingcart.wxss */
.content {
    font-family: "Microsoft YaHei";
    height: 600px;
    background-color: #F9F9F8;
}

.info {
    background-color: #ffffff;
}

.line {
    border: 1px solid #CCCCCC;
    opacity: 0.2;
}

.receive {
    display: flex;
    flex-direction: row;
    padding: 10px;
}

.item {
    display: flex;
    flex-direction: row;
    padding: 10px;
    align-items: center;
}

.order {
    width: 100%;
    height: 87px;
}

.title {
    font-size: 15px;
}

.desc {
    display: flex;
    flex-direction: row;
    font-size: 13px;
    color: #cccccc;
}

.desc view {
    margin-right: 10px;
}

.priceInfo {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
}

.price {
    width: 65%;
    font-size: 15px;
    color: #ff0000;
    text-align: left;
}

.minus,
.add {
    border: 1px solid #cccccC;
    width: 25px;
    text-align: center;
}

.count {
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cCCCCC;
    width: 40px;
    text-align: center;
}

.totalInfo {
    display: flex;
    flex-direction: row;
    height: 60px;
}

.all {
    align-items: center;
    Padding-left: 10px;
    width: 20%;
    font-size: 12px;
    margin-top: 10px;
}

.amount {
    width: 50%;
    font-size: 13px;
    text-align: right;
}

.total {
    font-size: 16px;
    color: #ff0000;
    font-weight: bold;
    margin-bottom: 10px;
}

.opr {
    position: absolute;
    right: 0px;
    width: 92px;
    font-size: 15px;
    font-weight: bold;
    background-color: #E4393C;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: #ffffff;
}

.icon {
    margin-right: 10px;
}

效果圖

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-604676.html

到了這里，關(guān)于微信小程序（五）購(gòu)物車的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！